美文网首页
OpenGLES滤镜开发汇总 —— 仿抖音模糊分屏特效

OpenGLES滤镜开发汇总 —— 仿抖音模糊分屏特效

作者: cain_huang | 来源:发表于2019-03-08 23:45 被阅读0次

    分屏特效中的模糊分屏特效,好说的,就是把整张图片的先做模糊处理,然后裁剪保留中间1/3的纹理,上层模糊后的纹理经过缩放处理在贴图。缩放倍数大于1.0。分屏的shader 如下:

    // 仿抖音模糊分屏
    precision mediump float;
    uniform sampler2D inputTexture; // 原始图像
    uniform sampler2D blurTexture;  // 经过高斯模糊的图像
    varying vec2 textureCoordinate;
    
    uniform float blurOffsetY;  // y轴边框模糊偏移值
    uniform float scale;        // 模糊部分的缩放倍数
    
    void main() {
        // uv坐标
        vec2 uv = textureCoordinate.xy;
        vec4 color;
        // 中间为原图部分
        if (uv.y >= blurOffsetY && uv.y <= 1.0 - blurOffsetY) {
            color = texture2D(inputTexture, uv);
        } else { // 边框部分使用高斯模糊的图像
            vec2 center = vec2(0.5, 0.5);
            uv -= center;
            uv = uv / scale;
            uv += center;
            color = texture2D(blurTexture, uv);
        }
        gl_FragColor = color;
    }
    

    效果如下:


    模糊分屏特效.png

    相关文章

      网友评论

          本文标题:OpenGLES滤镜开发汇总 —— 仿抖音模糊分屏特效

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