实现的分屏效果如下
二分屏实现思路
从上面的动图中我们可以看到,二分屏滤镜展示的都是图中红色框出的区域(这个区域也可以自己任意选择)。
- 实现思路:
我们还是使用一个纹理,来实现二分屏。拿到纹理之后我们修改纹理坐标的映射关系。在t轴上我们在
[0, 0.5]
和[0.5, 1.0]
都映射[0.25, 0.75]
的内容, - 核心代码
vec2 uv = TextureCoordsVarying.st;
if (uv.t >= 0.0 && uv.t <= 0.5) {
uv.t = uv.t + 0.25;
}else{
uv.t = uv.t - 0.25;
}
gl_FragColor = texture2D(Texture, uv);
三分屏实现思路
- 实现思路,s轴上保持原来的映射不变,在t轴三,将
[0, 1]
分为三等分映射各个区域映射同一位置。因为我们是取的原图的[1/3, 2/3]
这个区域所以我们可以在这个区间不做处理。 - 核心代码
vec2 uv = TextureCoordsVarying.xy;
if (uv.y < 1.0/3.0) {
uv.y = uv.y + 1.0/3.0;
} else if (uv.y > 2.0/3.0){
uv.y = uv.y - 1.0/3.0;
}
gl_FragColor = texture2D(Texture, uv);
四分屏思路
- 实现思路,在四分屏滤镜里面,s轴和t轴的坐标映射都会发生变化。在t轴上
[0, 0.5]
和[0.5, 1]
之间我们会映射t轴[0, 1]的纹理坐标。s轴同理; - 核心代码
vec2 uv = TextureCoordsVarying.xy;
if (uv.x < 0.5) {
uv.x = uv.x * 2.0;
}else{
uv.x = (uv.x - 0.5) * 2.0;
}
if (uv.y < 0.5) {
uv.y = uv.y * 2.0;
} else {
uv.y = (uv.y - 0.5) * 2.0;
}
gl_FragColor = texture2D(Texture, uv);
以此可以类推6分屏和9分屏的实现思路,其实是我们改变了纹理坐标的映射关系,然后改变映射关系之后的纹理坐标来绘制图片,就达到了分屏的效果。
六分屏的核心代码
vec2 uv = TextureCoordsVarying.xy;
if (uv.x < 0.5) {
uv.x = uv.x + 0.25;
}else{
uv.x = uv.x - 0.25;
}
if (uv.y < 1.0 / 3.0) {
uv.y = uv.y + 1.0 / 3.0;
} else if (uv.y > 2.0 / 3.0){
uv.y = uv.y - 1.0 / 3.0;
}
gl_FragColor = texture2D(Texture, uv);
九分屏的核心代码
vec2 uv = TextureCoordsVarying.xy;
if (uv.x < 1.0 / 3.0) {
uv.x = uv.x * 3.0;
}else if (uv.x < 2.0 / 3.0){
uv.x = (uv.x - 1.0 / 3.0) * 3.0;
}else{
uv.x = (uv.x - 2.0 / 3.0) * 3.0;
}
if (uv.y < 1.0 / 3.0) {
uv.y = uv.y * 3.0;
}else if (uv.y < 2.0 / 3.0){
uv.y = (uv.y - 1.0 / 3.0) * 3.0;
}else{
uv.y = (uv.y - 2.0 / 3.0) * 3.0;
}
gl_FragColor = texture2D(Texture, uv);
最后附上完整的Demo地址OpenGL ES 滤镜效果。