demo效果
分屏滤镜.gif
一、二分屏
幻灯片2.jpg
幻灯片3.jpg
我们取该图片的想要展示位置的像素，然后获取纹素，进行绘制
假设我们取的是0.25～0.75这一段的图片显示，则需要获取上图黑色框里的纹素。 通过前面的学习，很容易想得到，把纹理传递到片元着色器里，然后提取纹理像素，然后进行渲染
- 当 y 在[0, 0.5]范围时，屏幕的（0，0）坐标需要对应图片的（0，0.25），所以y = y+0.25
- 当 y 在[0.5, 1]范围时，屏幕的（0，0.5）坐标需要对应图片的（0，0.25），所以y = y-0.25
下面看代码：
// 精度
precision highp float;
// 通过uniform传递过来的纹理
uniform sampler2D Texture;
// 纹理坐标
varying highp vec2 varyTextureCoord;
void main() {
vec2 uv = varyTextureCoord.xy;
float y;
// 0.0～0.5 范围内显示0.25～0.75范围的像素
if (uv.y >= 0.0 && uv.y <= 0.5) {
y = uv.y + 0.25;
}else {
// 0.5～1.0范围内显示 0.25～0.75范围的像素
y = uv.y - 0.25;
}
// 获取纹理像素，用于显示
gl_FragColor = texture2D(Texture, vec2(uv.x, y));
}
如果有需要显示竖屏的，可片元着色器里的y值的改变，改写成x值便可。
二、三分屏滤镜
幻灯片8.jpg
幻灯片4.jpg
三分屏滤镜原理很简单，即通过改变纹理坐标的映射关系
- 当 y 在[0, 1/3]范围时，屏幕的（0，0）坐标需要对应图片的（0，1/3），所以y = y+1/3
- 当 y 在[1/3, 2/3]范围时，屏幕的（0，1/3）坐标需要对应图片的（0，1/3），所以y 不变
- 当 y 在[2/3, 1]范围时，屏幕的（0，2/3）坐标需要对应图片的（0，1/3），所以y = y-1/3
片元着色器中的代码：
void main(){
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);
}
三、四分屏
幻灯片9.jpg
幻灯片5.jpg
实现四分屏时，纹理坐标x、y均需要变化，且屏幕坐标需要与纹理坐标一一映射，例如（x，y）取值（0.5，0.5）需要映射到纹理坐标（1，1）时，x、y均需要乘以2，即0.5 * 2 = 1，变化规则如下：
- 当 x 在[0, 0.5]范围时，x = x*2
- 当 x在[0.5, 1]范围时，x = (x-0.5)*2
- 当 y 在[0, 0.5]范围时，y = y*2
- 当 y 在[0.5, 1]范围时，y = (y-0.5)*2
片元着色器中main函数的分屏算法代码如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
if (uv.x <= 0.5) {
uv.x = uv.x * 2.0;
}else{[图片上传中...(幻灯片10.jpg-87f21a-1597331937085-0)]
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);
}
四、六分屏
幻灯片10.jpg
幻灯片6.jpg
实现六分屏时，结合2分屏与六分屏的算法，其变化规则如下：
- 当 x 在[0, 1/3]范围时，x = x+1/3
- 当 x 在[1/3, 2/3]范围时，x 不变
- 当 x 在[2/3, 1]范围时，x = x-1/3
- 当 y 在[0, 0.5]范围时，y = y+0.25
- 当 y 在[0.5, 1]范围时，y = y-0.24
片元着色器中main函数的分屏算法代码如下
void main(){
vec2 uv = TextureCoordsVarying.xy;
if (uv.x <= 1.0/3.0) {
uv.x = uv.x + 1.0/3.0;
}else if (uv.x >= 2.0/3.0){
uv.x = uv.x - 1.0/3.0;
}
if (uv.y <= 0.5) {
uv.y = uv.y + 0.25;
}else{
uv.y = uv.y - 0.25;
}
gl_FragColor = texture2D(Texture, uv);
}
五、九分屏
幻灯片11.jpg
幻灯片7.jpg
当实现九分屏时，纹理坐标x、y均需要变化，其变化规则如下：
- 当 x 在[0, 1/3]范围时，x = x*3
- 当 x 在[1/3, 2/3]范围时，x = (x-1/3)*3
- 当 x 在[2/3, 1]范围时，x = (x-2/3)*3
- 当 y 在[0, 1/3]范围时，y= y*3
- 当 y 在[1/3, 2/3]范围时，y = (y-1/3)*3
- 当 y在[2/3, 1]范围时，y = (y-2/3)*3
- 片元着色器中main函数的分屏算法代码如下
void main(){
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 - 2.0/3.0) * 3.0;
}else{
uv.x = (uv.x - 1.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 - 2.0/3.0) * 3.0;
}else{
uv.y = (uv.y - 1.0/3.0)*3.0;
}
gl_FragColor = texture2D(Texture, uv);
}
网友评论