利用openGL ES对动态画面通过手指触摸点进行局部变形处理

前言

一般进行的这种变形特效处理用的最多的是静态图片这种，那么动态的图像，诸如camera预览以及视频的界面可不可以ne？那肯定是可以的，毕竟无论是camera实时预览还是视频播放的界面都是一系列的静态图片，通过一系列的渲染，最终呈现在屏幕上而已，相较于静态图片而言，无非就是图片数量多了。
但是如果还是用静态图片的那种绘制手法，如：drawBitmapMesh，将这些帧转为bitmap，然后再进行draw处理，是有一些简陋的，那么这里介绍的一种方法就是GL在绘制界面的时候，通过纹理坐标与触摸点坐标的运算，直接将其绘制到屏幕上。

原理

针对静态图片以及变形原理，这里有一篇文章，写的不错，可以参考参考，[咻~传送门！](https://blog.csdn.net/qq_21743659/article/details/107559508)

基本界面fucking code

对于GL 的基本绘制这里不再赘述，网上有很多文章。这里主要介绍一些关键部分。

//片元着色器
public String getFragmentShader() {
        //一定要加换行"\n"，否则会和下一行的precision混在一起，导致编译出错
        return  "precision mediump float;" +
                "varying vec2 vCoordinate;" +
                "uniform sampler2D uSoulTexture;" +
                "void main() {" +
                "  vec4 color = texture2D(uSoulTexture, vec2(vCoordinate.x, vCoordinate.y));" +
                "  gl_FragColor = vec4(color.r, color.g, color.b, 1);" +
                "}";
    }
//顶点着色器
@Override
public String getVertexShader() {
        return "attribute vec4 aPosition;" +
                "attribute vec2 aCoordinate;" +
                "varying vec2 vCoordinate;" +
                "void main() {" +
                "    gl_Position = aPosition;" +
                "    vCoordinate = aCoordinate;" +
                "}";
    }
//主绘制
protected void onDraw() {
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureId);
        GLES20.glUniform1i(mSoulTextureHandler, 0);
        //启用顶点的句柄
        GLES20.glEnableVertexAttribArray(mVertexPosHandler);
        GLES20.glEnableVertexAttribArray(mTexturePosHandler);
        //设置着色器参数， 第二个参数表示一个顶点包含的数据数量，这里为xy，所以为2
        GLES20.glVertexAttribPointer(mVertexPosHandler, 2, GLES20.GL_FLOAT, false, 0, mVertexBuffer);
        GLES20.glVertexAttribPointer(mTexturePosHandler, 2, GLES20.GL_FLOAT, false, 0, mTextureBuffer);
        //开始绘制
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
        GLES20.glDisableVertexAttribArray(mVertexPosHandler);
        GLES20.glDisableVertexAttribArray(mTexturePosHandler);
    }

//顶点坐标以及纹理坐标计算赋值
private void calculateAttributeWhole(){
        ArrayList<Float> alVertix = new ArrayList<>();
        ArrayList<Float> texVertix = new ArrayList<>();
        for (float i = -100; i < 100f; i++){
            for (float y = -100; y < 100f; y++){
                alVertix.add( i / 100f);
                alVertix.add( y / 100f);
                alVertix.add( (i+1) / 100f);
                alVertix.add( y / 100f);
                alVertix.add(1 * i / 100f);
                alVertix.add(1 *  (y+1) / 100f);
                //---------------👇
                texVertix.add((i+100) / 200f);
                texVertix.add((y+100) / 200f);
                texVertix.add((i+1+100) / 200f);
                texVertix.add((y+100) / 200f);
                texVertix.add((i+100) / 200f);
                texVertix.add((y+1+100) / 200f);
                //---------------👆
                alVertix.add(1 * (i+1) / 100f);
                alVertix.add(1 * y / 100f);
                alVertix.add(1 * (i+1) / 100f);
                alVertix.add(1 *  (y+1) / 100f);
                alVertix.add(1 * i / 100f);
                alVertix.add(1 *  (y+1) / 100f);
                //-------------------👇
                texVertix.add((i+1+100) / 200f);
                texVertix.add((y+100) / 200f);
                texVertix.add((i+1+100) / 200f);
                texVertix.add((y+1+100) / 200f);
                texVertix.add((i+100) / 200f);
                texVertix.add((y+1+100) / 200f);
                //-------------------👆
            }
        }
        vCount = alVertix.size() / 2;
        convertToFloatBuffer(alVertix, true);
        convertToFloatBuffer(texVertix, false);
    }

基本界面绘制的关键部分就是上述一些东西，其实主要就是坐标的计算以及实际draw的流程。在顶点坐标以及纹理坐标计算的时候，脑子里要谨记 openGL ES的三种坐标系：世界坐标系、Android view坐标系、openGL纹理坐标系。其他的倒是没有要注意的。

变形fucking code

首先，让我show下key code，比较粗糙

public void translate(float dx, float dy, float startX, float startY) {
        mStartX = startX / mWorldWidth ;
        mStartY = 1 - startY / mWorldHeight ;  //这里也要注意
        mRatioX = dx;
        mRatioY = dy;
        float r = 0.2f;
//       可以定制半径大小r
//        if (r > Math.min(mStartX, mStartY)) {
//            r = Math.min(mStartX, mStartY);
//        }
        //original draw的时候进行了矩阵变形，所以FBO里的Y轴内容并不是完全平铺，需要针对Y轴区域进行限制。
        if (mStartY < 0.3 || mStartY > 0.7) {
            return;
        }
        float dPull = (float) Math.sqrt(mRatioX * mRatioX + mRatioY * mRatioY);
        float tempX = 0, tempY = 0;
        for (int i = 0; i < vCount * 2; i+=2) {
            tempX = mTextureBuffer.get(i);
            tempY = mTextureBuffer.get(i+1);
            float ddx = tempX - mStartX;
            float ddy = tempY - mStartY;
            float d = ddx * ddx + ddy * ddy;
            float dd = (float) Math.sqrt(ddx * ddx + ddy * ddy);
            if (dd < r) {
                float e = (r * r - d) * (r * r - d) / ((r * r - d + dPull * dPull) * (r * r - d + dPull * dPull));
                float pullX = e * -mRatioX;
                float pullY = e * mRatioY;
                mTextureBuffer.put(i, tempX + pullX);
                mTextureBuffer.put(i+1, tempY + pullY);
            }
        }
    }

这里在计算完坐标变形的时候，直接将其设置到了buffer中，这部分可以添加下限制条件，如是否处于绘制中等，避免画面可能会出现撕裂等现象。其他的将就将就吧，也不是项目。后面不论是录制视频以及capture（类似于screencap）的操作，此code都是支持的，毕竟修改也是针对纹理进行修改，画幅的顶点坐标未修改。

结语

有兴趣的话可以联系获取源码。一开始在设计变形code这块的时候，有考虑过将其放到片元着色器中，预览还好，后面根据触点进行修改的时候就比较麻烦了，后来将其上移到 java 中了，知识受限，要是可以放到GPU中快速处理的话，麻烦大佬指导一二。