基于GPUImage模仿抖音模糊分屏效果

模糊分屏.gif

我们针对这个效果分析下实现的思路。
1.背景是模糊，并且是放大的。所以我们可以知道，底部的图片是一张原图,经过了模糊处理，最后基于中心点放大。
2.中间区域是显示一部分的图片。

fragmentShader实现效果如下

NSString *const kGLImageBlurSnapViewFragmentShaderString = SHADER_STRING
(
 precision highp float;
 varying vec2 textureCoordinate;
 uniform float blurOffsetY;//y的偏移值
 uniform float blurTextureScal;//底部模糊视频的缩放值

 uniform sampler2D inputImageTexture; //视频
 uniform sampler2D inputImageTexture2; //模糊视频

 
 void main()
 {
     
     highp vec2 uv = textureCoordinate;
     
     vec4 outPutcolor = vec4(0.0,0.0,0.0,1.0);
     
     //这里是中间显示不带任何效果的的Texture，根据y方向的偏移进行区域选择
     if (uv.y >= blurOffsetY && uv.y <= 1.0 - blurOffsetY) {
         //原视频
         outPutcolor = texture2D(inputImageTexture, uv);
     } else {
         
     //uv坐标的中心点并非是（0.0，0.0），所以这里进行一次偏移，后面在偏移回来就可以了
         vec2 center = vec2(0.5, 0.5);
         //新的uv坐标 uv - center
         uv = uv -  center;
         //纹理放大缩小
         uv = uv / blurTextureScal;
         uv = uv + center;
         outPutcolor = texture2D(inputImageTexture2, uv);
     }     
     
     gl_FragColor = outPutcolor;
 }
 );

同时我也在shadertoy上面实现了该效果---点击前往查看