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

抖音的抖动特效的实现原理是,分别对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的值可以跟播放器的播放时间绑定得到。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,913评论 2 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,237评论 25 708
  • 这几天没日没夜玩游戏看综艺看电视剧看电影找人聊天。心痛的情绪似乎舒缓了一点点。可是我明白我的心结还没解开。 昨天给...
    iyjyjyjyj阅读 238评论 0 0
  • 拿破仑吧翻译工程元帅录翻译自David G. Chandler总编的Napoleon' Marshal,仅供网友交...
    Baidu拿破仑吧阅读 574评论 0 1
  • ◎ 在海边 (文\林嘉梓) 一切都在被无限夸大,无形的巨手扯住你往四面八方拉伸,目光空荡散漫一如空气你的欢乐与忧愁...
    林嘉梓阅读 594评论 25 89