美文网首页iOS音视频(直播 音频 视频)
OpenGLES滤镜开发汇总 —— 仿抖音抖动特效

OpenGLES滤镜开发汇总 —— 仿抖音抖动特效

作者: cain_huang | 来源:发表于2018-09-18 14:13 被阅读424次

    抖音的抖动特效的实现原理是,分别对RGB通道进行分离计算不同的大小得到。废话不多数,直接上fragment shader 代码:

    precision highp float;
    varying vec2 textureCoordinate;
    uniform sampler2D inputTexture;
    
    uniform float scale;
    
    void main()
    {
        vec2 uv = textureCoordinate.xy;
        vec2 scaleCoordinate = vec2((scale - 1.0) * 0.5 + uv.x / scale ,
                                    (scale - 1.0) * 0.5 + uv.y / scale);
        vec4 smoothColor = texture2D(inputTexture, scaleCoordinate);
    
        // 计算红色通道偏移值
        vec4 shiftRedColor = texture2D(inputTexture,
             scaleCoordinate + vec2(-0.1 * (scale - 1.0), - 0.1 *(scale - 1.0)));
    
        // 计算绿色通道偏移值
        vec4 shiftGreenColor = texture2D(inputTexture,
             scaleCoordinate + vec2(-0.075 * (scale - 1.0), - 0.075 *(scale - 1.0)));
    
        // 计算蓝色偏移值
        vec4 shiftBlueColor = texture2D(inputTexture,
             scaleCoordinate + vec2(-0.05 * (scale - 1.0), - 0.05 *(scale - 1.0)));
    
        vec3 resultColor = vec3(shiftRedColor.r, shiftGreenColor.g, shiftBlueColor.b);
    
        gl_FragColor = vec4(resultColor, smoothColor.a);
    }
    

    缩放计算如下:

        @Override
        public void onDrawFrameBegin() {
            super.onDrawFrameBegin();
            mScale = 1.0f + 0.3f * getInterpolation(mOffset);
            mOffset += 0.06f;
            if (mOffset > 1.0f) {
                mOffset = 0.0f;
            }
            GLES20.glUniform1f(mScaleHandle, mScale);
        }
    
        private float getInterpolation(float input) {
            return (float)(Math.cos((input + 1) * Math.PI) / 2.0f) + 0.5f;
        }
    

    如果用在视频编辑阶段,scale的值可以跟播放器的播放时间绑定得到。

    相关文章

      网友评论

      • 刘小壮:大佬,你在抖音吗
      • glumes:话说大佬已经离职了嘛?
        cain_huang:@蓄意碎碎 暂时未定。我写完项目再考虑找工作的事。
        glumes:@cain_huang 要去哪里高就了呀
        cain_huang:@蓄意碎碎 目前已离职,最近打算把开源项目写得相对完整一点再说。

      本文标题:OpenGLES滤镜开发汇总 —— 仿抖音抖动特效

      本文链接:https://www.haomeiwen.com/subject/raqzgftx.html