| 导语 此处需要一台MacBook！
Shader
Shader，即OpenGL着色语言（OpenGL Shading Language），简称GLSL，是用来在OpenGL中着色编程的语言，主要由Vertex Shader（顶点着色器）和Fragment Shader（片元着色器）组成，一般我们做特效处理都通过Fragment Shader来实现，以下讲的也基于Fragment Shader来展开。
先来看一下简单的例子：
代码语言：javascript复制varying vec2 textureCoordinate; //当前点的位置
uniform sampler2D inputImageTexture;
void main()
{
gl_FragColor = texture2D( inputImageTexture, textureCoordinate ); //显示原图
}这是一个完整的Fragment Shader，只是显示原图，没有做什么特殊处理，大概的原理是，每个像素的颜色值都是通过这个main函数获取，textureCoordinate是当前点的xy坐标，inputImageTexture是整个画面的纹理，只需要将当前点的RGBA值赋值给gl_FragColor就是最终的显示颜色，通过texture2D获取的是原始颜色值，给这个颜色值做一些特效处理就是一个特效滤镜啦！
对于转场特效，本质上就是一个shader里有前后两个画面的纹理，然后根据一个切换程度，来对两个纹理做相对应的处理（比如平移，缩放等），一个简单的例子如下：
代码语言：javascript复制varying vec2 textureCoordinate;
varying vec2 textureCoordinate2;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2;
uniform float time;
void main()
{
if (time <= 0.5) {
gl_FragColor = texture2D( inputImageTexture, textureCoordinate ); //显示第一个画面
} else {
gl_FragColor = texture2D( inputImageTexture2, textureCoordinate2 ); //显示第二个画面
}
}Shader的知识这里不细讲。
ShaderDesigner
GPUImage是GitHub上开源的一个OpenGL滤镜框架，包含多个滤镜效果以及现成的拍摄框架，iOS，Android和Mac上都有相应的实现，是入门学习shader的好工具，官网：https://github.com/BradLarson/GPUImage ，其中自带的ShaderDesigner用来调试Shader非常方便，在电脑上实时调试效果，调完后再到手机上运行就可以了，开发效率大大提高，唯一的缺陷是只有Mac版本，而且不支持shader断点调试。
官网的ShaderDesign只支持一个画面的渲染，因为之前手Q转场的需要，我们给改造了一下，可以支持两个纹理来调试转场，工程在附件里，下面看看怎么使用这个工具。
Mac先装一下Xcode，然后直接打开下面的工程：
要按下面选择相应的target：
理论上不需要配置其他东西，点击运行按钮直接就可以跑起来。
如果编译失败，可能是GPUImage那个Framework没有引入成功，参考下图，如果右边红色不存在那个文件，把左边红色的拖到右边的就行了：
运行成功如下，每次修改完shader，按右边的compile按钮就可以看到效果，其中第一个按钮支持两个texture，可以用来调试转场效果，选中enableSlider后，拉动下面的滑动条就可以调节转场进度，不选中enableSlider就会自动播放。
调完想要的效果后，就可以把shader直接拿到手机上运行了，除了移动端需要在Fragment Shader前面声明一下float精度外（precision highp float），理论上不需要改动什么代码。
附件是修改后的GPUImage工程
