系列推荐文章（基础篇）：
OpenGL/OpenGL ES入门：图形API以及专业名词解析
OpenGL/OpenGL ES入门：渲染流程以及固定存储着色器
OpenGL/OpenGL ES入门：图像渲染实现以及渲染问题
OpenGL/OpenGL ES入门：基础变换 - 初识向量/矩阵
OpenGL/OpenGL ES入门：纹理初探 - 常用API解析
OpenGL/OpenGL ES入门： 纹理应用 - 纹理坐标及案例解析(金字塔)
OpenGL/OpenGL ES入门： 顶点着色器与片元着色器（OpenGL过渡OpenGL ES）
OpenGL/OpenGL ES入门： GLKit以及API简介
OpenGL/OpenGL ES入门： GLKit使用以及案例
OpenGL/OpenGL ES入门： 使用OpenGL ES 渲染图片
OpenGL/OpenGL ES入门：iOS纹理翻转策略解析
OpenGL ES入门： 渲染金字塔 - 颜色、纹理、纹理与颜色混合填充以及GLKit实现
image.png
今天和大家分享一下关于使用OpenGL ES来写图片滤镜，实现图片滤镜的大前提，就是能够把原图给绘制出来，如果这部分内容还不是很熟悉的小伙伴，建议去阅读一下我之前的博客，熟悉一下，这样对后面的文章容易理解一点。
这篇主要介绍关于分屏的滤镜，由简入难，后面的篇章更加精彩哦～
下面直接进入干货！！！
原图的渲染
有关原图的渲染，大家可以看下这篇博客OpenGL/OpenGL ES入门： 使用OpenGL ES 渲染图片，这里思路和代码基本一致，文章最后会给出demo，所以这里不过多描述。
双屏滤镜
双屏，顾名思义，把渲染出来的原图，分两屏显示（横屏或者竖屏），效果图如下
image.png
从上图理解，我们取该图片的想要展示位置的像素，然后获取纹素，进行绘制
image.png
假设，这里取的是0.25～0.75这一段的图片显示，则需要获取上图红色框里的纹素。
通过前面的学习，很容易想得到，把纹理传递到片元着色器里，然后提取纹理像素，然后进行渲染，下面看代码：
// 精度
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值便可。
四屏滤镜
四屏，我们采用的方式是把原图缩小为原图的1/4，分别放置在左上、左下、右下和右上，看下面效果图
image.png
这个思路也很简单，改变纹理的映射关系，显示一张原图时，映射是(0.0,0.0)、(0.0,1.0)、(1.0,1.0)、(1.0,0.0)，现在改成(0.0,0.0)、(0.0,0.5)、(0.5,0.5)、(0.5,0.0)，道理一样，改变片元着色器代码：
precision highp float;
uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;
void main() {
vec2 uv = varyTextureCoord.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);
}
九屏滤镜
道理一样，不在重复，直接上代码
precision highp float;
uniform sampler2D Texture;
varying highp vec2 varyTextureCoord;
void main() {
vec2 uv = varyTextureCoord.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);
}
效果图：
image.png
demo传送门：
分屏滤镜demo
下篇滤镜：
- 颠倒
- 灰度
- 漩涡
- 马赛克
网友评论