教你用OpenGL，实现微信双视频

码个蛋(codeegg)第 776 次推文

原文: https://blog.csdn.net/a296777513/article/details/70495534

前言

想做的有很多，奈何能力实在有限，所以只能一步一步来，将自己做出来的尽量用简单易懂的语言描述出来，希望自己总结的对阅读这篇文章的同学有所帮助。

在上一篇文章 [Android OpenGL 使用 GLSurfaceView 预览视频]（https://blog.csdn.net/a296777513/article/details/63685658）中讲述了怎样在 GLSurfaceView 上预览 Camera 的视频数据，在本章中打算实现一个类似微信视频通话的效果，微信视频通话主要有大小两个视频数据渲染（自己的视频和对端的视频），手指点击小视频，可以切换大视频和小视频的位置，可以拖动小视频。

第一章 渲染多个视频流数据

第一次看到这个功能，大部分人的第一个解决方案，就是创建多个 View，每个 View 渲染一条视频数据，这样是可行的，但是如果是多人视频呢？20 个人就需要创建 20 个 GLSurfaceView，这样显然是不可行的，所以最好的办法就是将所有的数据流都绘制在同一个 GLSurfaceView 上，这样只需要控制 OpenGL 来控制视频绘制的大小的位置就可以解决，这样很大程度上节省了内存，提升了效率。

首先看一下实际的效果图：

可以看到小视频是叠加在大视频上面的，虽然看上去好像是两个 view，但是其实所有的图像都是绘制在同一个 GLSurfaceView 上的，我们需要做的就是计算出每个小图缩放的比例，然后计算出每个小图摆放的位置，视频 OpengGL 的一些方法将视频渲染的位置绘制到相应的位置上。

首先，在函数 onDrawFrame 中绘制出所需要绘制的视频数据。

<code> @Override/<code><code> public void onDrawFrame(GL10 gl) {/<code><code> // TODO Auto-generated method stub/<code><code> LOG.logI("onDrawFrame...");/<code><code> // 设置白色为清屏/<code><code> GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);/<code><code> // 清除屏幕和深度缓存/<code><code> GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);/<code><code> // 更新纹理/<code><code> mSurface.updateTexImage;/<code>
<code> // mDirectDrawers中有两个对象，一个是绘制Camera传递过来的数据，一个是绘制由bitmap转换成的纹理/<code><code> for (int i = 0; i < mDirectDrawers.size; i++) {/<code><code> DirectDrawer directDrawer = mDirectDrawers.get(i);/<code><code> if (i == 0) {/<code><code> directDrawer.resetMatrix;/<code><code> } else {/<code><code> directDrawer.calculateMatrix(mThumbnailRect, mScreenWidth, mScreenHeight);/<code><code> }/<code><code> directDrawer.draw;/<code><code> }/<code><code> }/<code>

从上面的代码可以看出，directDrawer.draw 调用了两次，也就是说 OpenGL 在这个 GLSurfaceView 上绘制了两次，但是如果不做处理的话，第二个视频渲染会覆盖第一个效果。这里我们需要对第二个视频流做一些处理：

缩小：如下面的代码所示，我们将视频转换的矩阵存储在一个 16 位的数组中，即 mMVP，我们需要在每次计算之前调用 setIdentityM，这行代码的意思是将数据初始化到开始的位置和大小，因为每次缩小都是相对于初始的状态，接下来我们计算 x 轴和 y 轴的缩小比例，这里我定义的是缩小 1/4，然后调用 scaleM 就可以得到缩小后的比例，大概的过程如下图所示：

<code>Matrix.setIdentityM(mMVP, 0);/<code><code>float scaleX = 1f / 4f;/<code><code>float scaleY = 1f / 4f;/<code><code>Matrix.scaleM(mMVP, 0, scaleX, scaleY, 0);/<code>

可以从上图中看到，虚线为原来图像的大小，经过缩小后变为实线矩形的大小

移动：小视频的初始化位置是左下方，所以需要将缩小后的视频移动到左下方，代码如下：

<code>float ratioX = (rectF.left - .5f * (1 - scaleX) * screenWidth) / rectF.width;/<code><code>float ratioY = (rectF.top - .5f * (1 + scaleY) * screenHeight) / rectF.height;/<code><code>Matrix.translateM(mMVP, 0, ratioX * 2, ratioY * 2, 0f);/<code>

大致的过程如下图：

至此，在同一个 GLSurfaceView 上绘制两个视频数据，并且将第二个视频缩小和移动的过程就叙述完了，由于上面是将缩小和移动分开来讲，其实缩小和移动的代码是在一起的：

<code>public void calculateMatrix(RectF rectF, float screenWidth, float screenHeight) {/<code><code> Matrix.setIdentityM(mMVP, 0);/<code><code> float scaleX = 1f / 4f;/<code><code> float scaleY = 1f / 4f;/<code><code> float ratioX = (rectF.left - .5f * (1 - scaleX) * screenWidth) / rectF.width;/<code><code> float ratioY = (rectF.top - .5f * (1 + scaleY) * screenHeight) / rectF.height;/<code><code> Matrix.scaleM(mMVP, 0, scaleX, scaleY, 0);/<code><code> Matrix.translateM(mMVP, 0, ratioX * 2, ratioY * 2, 0f);/<code><code> }/<code>

第二章 滑动视频

移动小视频还是比较简单的，上一章节已经叙述了根据小视频的位置 (Rect)，来对小视频进行缩小和移动，所以我们只需要根据手机滑动来改变小视频的位置即可。下面给出移动视频的主要代码。

<code>@Override/<code><code>public boolean onTouchEvent(MotionEvent event)/<code><code> switch (event.getAction) {/<code><code> case MotionEvent.ACTION_DOWN:/<code><code> mDownX = event.getX;/<code><code> mDownY = event.getY;/<code><code> if (mDownX > mThumbnailRect.left && mDownX < mThumbnailRect.right/<code><code> && mDownY > mThumbnailRect.bottom && mDownY < mThumbnailRect.top) {/<code><code> mTouchThumbnail = true;/<code><code> mLastYLength = 0;/<code><code> mLastXLength = 0;/<code><code> return true;/<code><code> } else {/<code><code> mTouchThumbnail = false;/<code><code> }/<code>
<code> break;/<code><code> case MotionEvent.ACTION_MOVE:/<code><code> float moveX = event.getX;/<code><code> float moveY = event.getY;/<code><code> if (mTouchThumbnail) {/<code><code> float lengthX = Math.abs(mDownX - moveX);/<code><code> float lengthY = Math.abs(mDownY - moveY);/<code><code> float length = (float) Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2));/<code><code> if (length > mTouchSlop) {/<code><code> moveView(mThumbnailRect, mDownY - moveY, moveX - mDownX);/<code><code> isMoveThumbnail = true;/<code><code> } else {/<code><code> isMoveThumbnail = false;/<code><code> }/<code><code> return true;/<code><code> }/<code><code> break;/<code><code> case MotionEvent.ACTION_UP:/<code><code> if (mTouchThumbnail) {/<code><code> mLastYLength = 0;/<code><code> mLastXLength = 0;/<code><code> //抬起手指时，如果不是移动小视频，那么就是点击小视频/<code><code> if (!isMoveThumbnail) {/<code><code> changeThumbnailPosition;/<code><code> }/<code><code> return true;/<code><code> }/<code><code> break;/<code><code> }/<code><code> return super.onTouchEvent(event);/<code><code> }/<code>

1. 判断手指按下的位置是否在小视频的区域中，如果在，则记录按下的 X 和 Y 的坐标值，然后将 mTouchThumbnail 置为 true。

2. 如果手指移动的距离超过 Android 定义的最小移动距离，则开始改变小视频的位置，否则判断这次触摸事件为点击小视频。

3. 根据 X 轴移动的距离和 Y 轴移动的距离改变小视频的位置，然后在 OpenGL 绘制过程中移动小视频。

第三章 创建纹理

因为这里需要实现两个视频数据的渲染，由于现在只能获取摄像头的数据，另一个为了更加直观的显示出效果，这里用一个 bitmap 的纹理来代替，以后有了其他视频的数据，用相应的纹理代替即可。

<code>public static int loadTexture(Bitmap bitmap) {/<code><code> if (bitmap ==  || bitmap.isRecycled) {/<code><code> return 0;/<code><code> }/<code>
<code> int texture = new int[1];/<code>
<code> glGenTextures(1, texture, 0);/<code>
<code> if (texture[0] == 0) {/<code><code> return 0;/<code><code> }/<code> 

<code> // Bind to the texture in OpenGL/<code><code> GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texture[0]);/<code><code> // Configure min/mag filtering, i.e. what scaling method do we use if what we're rendering/<code><code> // is smaller or larger than the source image./<code><code> GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,/<code><code> GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_LINEAR);/<code><code> GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D,/<code><code> GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);/<code><code> GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,/<code><code> GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);/<code><code> GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D,/<code><code> GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);/<code><code> // Load the bitmap into the bound texture./<code><code> texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);/<code>
<code> return texture[0];/<code><code> }/<code>

glTexParameterf(int target, int pname, float param) 函数用来确定如何把图象从纹理图象空间映射到帧缓冲图象空间 (如：映射时为了避免多边形上的图像失真，而重新构造纹理图像等)。

target

目标纹理 (target)，必须为 GL_TEXTURE_1D 或 GL_TEXTURE_2D 或这是 GL_TEXTURE_3D；

pname

• 过滤器 (pname)：GL_TEXTURE_MAG_FILTER(纹理放大时), GL_TEXTURE_MIN_FILTER(纹理缩小时)

• 环绕方向 (pname):GL_TEXTURE_WRAP_S, GL_TEXTURE_WRAP_T, GL_TEXTURE_WRAP_R 分别为 x，y，z 方向。

param

pname 为过滤器时的参数：GL_NEARST(最邻近的像素),GL_LINEAR(线性插值)

pname 为环绕方向时的参数：（以下，n 为纹理方向上的纹理的长度）

• GL_REPEAT：相当于忽略掉纹理坐标的整数部分。滤镜为线性时，处于 [1/2n，1] 与第一个纹理像素融合。处于 [0,1/2n] 与最后一个像素融合。

• GL_MIRRORED_REPEAT：相当于将纹理坐标 1.1 变成 0.9，达到镜像反射的效果。

• GL_CLAMP：截取纹理坐标到 [0,1] 。将导致纹理坐标处于 [1-1/2n, 1] 的像素，在纹理滤镜为线性滤镜时，与 border 融合，最终纹理坐标为 1 的像素，将为 border 和边界像素的中值。

• GL_CLAMP_TO_EDGE：截取纹理坐标到 [1/2n,1-1/2n]。将导致永远不会与 border 融合。

• GL_CLAMP_TO_BORDER：截取纹理坐标到 [-1/2n,1+1/2n]。将导致纹理坐标处于 [1-1/2n,1+1/2n] 范围内的像素，在纹理滤镜为线性滤镜时，与 border 融合，最终纹理坐标为 1+1/2n 的像素将于 border 同色。

总结

这篇文章讲了实现类似微信视频聊天的三个功能的大体实现思路，和一些基本的知识点的介绍。

代码奉上：https://github.com/296777513/AndroidOpenGL

今日问题：

大家用OpenGL做过什么功能？

閱讀更多 碼個蛋 的文章

關鍵字: OpenGL 微信 Android