模糊分屏.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;
}
);
