目标

最终能够自己通过OpenGL或者借助一些三方库GPUImage写一些简单的滤镜、特效shader，明白原理和整个流程

OpenGL简介

OpenGL是各个平台的统称，移动端的是OpenGL ES，web端的是WebGL

(备注：下文将OpenGL ES将简称OpenGL)

为什么用OpenGL

定义了一套平台无关的图形操作API，提供了访问GPU的能力。
为CPU和GPU的数据交换定义了缓存(buffer),因为从一个内存区域复制到另一个内存区域的速度是相对较慢的，并且在内存复制的过程中，CPU 和 GPU 都不能处理这区域内存

下图是一个移动设备图像渲染框架草图：

在进入主题之前，我们再来了解下图片渲染到屏幕的过程，这将有助于了解OpenGL在滤镜特效中的作用

CPU：绘制纹理图片然后交给GPU渲染，也就是位图
GPU: 等待垂直同步信号V-Sync，GPU拿到位图会做一些图层的渲染、纹理合成等工作。再把结果放到帧缓冲区中（Frame Buffer）
视频控制器: 根据V-Sync信号，在指定时间之前，提取帧缓冲区的屏幕显示内容，最终显示到显示器。

正是因为有了OpenGL的存在，我们才可以对图像、视频做很多有意思的处理，而这一部分离不开OpenGL中的着色器——Shader，下面就来看看

什么是Shader

OpenGL中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。

3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线管理的,图形渲染管线可以被划分为几个阶段，每个阶段将会把前一个阶段的输出作为输入

OpenGL图形渲染管线的每一个阶段运行着各自的小程序，这些小程序叫做着色器(Shader)。一般以字符串的方式在代码中使用，目前OpenGL中只有vertex shader（顶点着色器）与fragment shader（片段着色器）是可编程的。GLSL是是OpenGL用来编写着色器(shader)的高级语言，它不是运行在CPU而是GPU

下面来看看OpenGL世界中的"Hello world"（三角形）怎么实现.

这里主要说下顶点着色器和片段着色器

顶点着色器

如果需要对图像进行缩放变化，比如放大，缩小，移动效果，则需要对顶点着色器重新编程，默认顶点着色器代码如下


attribute vec4 Position; // 顶点坐标
attribute vec2 TextureCoords; // 纹理坐标
varying vec2 TextureCoordsVarying;//片段着色器的输入(纹理坐标)

void main (void) {
    gl_Position = Position;
    TextureCoordsVarying = TextureCoords;
}

复制代码

片段着色器

如果需要对原始图像最终输出的颜色进行调整，则需要对片段着色器重新编程

precision mediump float;

uniform sampler2D Texture;//纹理采样器
varying vec2 TextureCoordsVarying; //顶点着色器传过来的纹理坐标

void main (void) {
    //图元的每个顶点各自对应纹理坐标，用来标明该从纹理图像的哪个部分采样
    vec4 mask = texture2D(Texture, TextureCoordsVarying);//获得纹理坐标相应位置的颜色
    gl_FragColor = vec4(mask.rgb, 1.0);
}


复制代码

用顶点着色器和片段着色器可以写出各种各种样的opengl程序

OpenGL中坐标系（可选）

了解OpenGL中的坐标系，有助于更好的了解openGL渲染管线和作业的流程：

友情链接：OpenGL ES顶点坐标纹理坐标

有了上面shader的铺垫，那可以思考下滤镜和特效怎么实现的了？

滤镜的原理和实现

颜色滤镜一般不需要用到顶点着色器

什么是滤镜

在 app 内利用各种图形算法可以对图片进行一些变换，这样的效果也称为“滤镜”，滤镜效果大致可以分为以下几类：

独立像素点变换：包括亮度、对比、饱和度、色调、灰色化、分离RGB通道等
像素卷积变换：包括边缘检测、浮雕化、模糊、锐化（比如美颜）
仿射矩阵变换：包括缩放、旋转、倾斜、扭曲、液化等（）
多图像合成其中最简单的就是进行独立像素点变换，

最简单的滤镜就是第1点：独立像素点变换，也可以叫做颜色滤镜，最主要的技术就是ColorLUT

ColorLUT

将左边狗子

以上内容来自于网络,如有侵权联系即删除

上一篇: iOS App启动优化（三）：二进制重排

下一篇: 你想要的Android性能优化系列：启动优化！

帮助中心

基于openGL中shader聊滤镜特效的原理和实际应用

目标

OpenGL简介

什么是Shader

滤镜的原理和实现

什么是滤镜

ColorLUT

相关文章