要想实现分屏滤镜效果，首先我们需要知道如何使用OpenGL ES GLSL加载一张图片，然后在片元控制器中处理加载纹理的坐标，最终实现分屏效果。
分屏效果图
一、首先我们需要加载一张图片，在上一篇文章中有具体描述OpenGL ES --使用GLSL语言加载一张图。
二、我们需要创建两个文件Normal.vsh顶点着色器文件和Normal.fsh片元着色器文件，根据OpenGL ES --使用GLSL语言加载一张图设置基本的顶点着色器代码和片元着色器的代码。注意：分屏效果我们只需要设置纹理坐标，所以我们仅仅在片元着色器中修改
- 二分屏的
fsh文件代码实现
思路剖析
二分屏实现的思路
，当纹理坐标的y值：y >=0.0 && uv.y <= 0.5的时候，我们就取y+0.25的纹理坐标值；
2，当纹理坐标的y值：y > 0.5的时候，我们就取y-0.25的纹理坐标值；
这样就将原纹理坐标取得颜色值固定在了A、B、C、D这个方框中了
二分屏实现效果图
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec2 uv = TextureCoordsVarying.xy;
float y;
if (uv.y >=0.0 && uv.y <= 0.5) {
y = uv.y + 0.25;
}else{
y=uv.y - 0.25;
}
gl_FragColor = texture2D(Texture, vec2(uv.x,y));
}
-
三分屏的实现
三分屏和二分屏实现的思路一致，同样的只需要更改片元着色器纹理坐标位置来获取颜色值即可，我们将原有的图片平分三等分，然后按照如下判断条件进行获取相应位置的纹理颜色。
三分屏
当y < 1.0/3.0时，我们将小于1/3部分的纹理颜色值采用y+1/3处的纹理坐标的颜色值；
当y > 2.0/3.0时，我们将大于2/3部分的纹理颜色值采用y-1/3的纹理坐标颜色值；
当y>1/3 && y<2/3，我们采用当前范围的纹理坐标下的颜色值即可。
三分屏效果图
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec2 uv = TextureCoordsVarying.xy;
float y;
if (uv.y < 1.0/3.0) {
y = uv.y + 1.0/3.0;
} else if (uv.y > 2.0/3.0){
y = uv.y - 1.0/3.0;
}else{
y = uv.y;
}
gl_FragColor = texture2D(Texture, vec2(uv.x,y));
}
- 四分屏的实现
四分屏的时候，我们将原来的纹理坐标平分四份，每一份都从原有图片的纹理坐标重新赋值即可。
四分屏
当y >=0.0 && y <= 0.5时，y要从0.0开始取值，即需要y * 2.0；
当y > 0.5时，y要从0.0开始取值，即需要(y - 0.5)* 2.0；
当x >=0.0 && x <= 0.5时，x要从0.0开始取值，即需要x * 2.0；
当y >=0.0 && y <= 0.5时，x要从0.0开始取值，即需要`(x -
0.5)* 2.0`；
四分屏效果图
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec2 uv = TextureCoordsVarying.xy;
float y;
float x;
if (uv.y >=0.0 && uv.y <= 0.5) {
y = uv.y * 2.0;
}else{
y=(uv.y - 0.5)* 2.0;
}
if (uv.x >=0.0 && uv.x <= 0.5) {
x = uv.x * 2.0;
}else{
x=(uv.x - 0.5) * 2.0;
}
gl_FragColor = texture2D(Texture, vec2(x,y));
}
-
六分屏的实现过程和四分屏的一样这里不再赘述
截屏2020-08-12 09.58.25.png
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec2 uv = TextureCoordsVarying.xy;
float y;
float x;
if (uv.y <= 1.0/3.0) {
y = uv.y * 3.0;
} else if (uv.y < 2.0/3.0){
y = (uv.y - 1.0/3.0) * 3.0;
}else{
y = (uv.y - 2.0/3.0) * 3.0;
}
if (uv.x >=0.0 && uv.x <= 0.5) {
x = uv.x * 2.0;
}else{
x=(uv.x - 1.0/2.0)*2.0;
}
gl_FragColor = texture2D(Texture, vec2(x,y));
}
-
九分屏实现过程和四分屏的一样这里不再赘述
九分屏实现效果图
precision highp float;
uniform sampler2D Texture;
varying vec2 TextureCoordsVarying;
void main (void) {
vec2 uv = TextureCoordsVarying.xy;
float y;
float x;
if (uv.y <= 1.0/3.0) {
y = uv.y * 3.0;
} else if (uv.y < 2.0/3.0){
y = (uv.y - 1.0/3.0) * 3.0;
}else{
y = (uv.y - 2.0/3.0) * 3.0;
}
if (uv.x < 1.0/3.0) {
x = uv.x * 3.0;
} else if (uv.x < 2.0/3.0){
x = (uv.x - 1.0/3.0)*3.0;
}else{
x = (uv.x - 2.0/3.0)*3.0;
}
gl_FragColor = texture2D(Texture, vec2(x,y));
}
网友评论