ShaderDesigner：OpenGL shader调试神器

| 导语此处需要一台MacBook！

Shader

Shader，即OpenGL着色语言（OpenGL Shading Language），简称GLSL，是用来在OpenGL中着色编程的语言，主要由Vertex Shader（顶点着色器）和Fragment Shader（片元着色器）组成，一般我们做特效处理都通过Fragment Shader来实现，以下讲的也基于Fragment Shader来展开。

先来看一下简单的例子：

varying vec2 textureCoordinate; //当前点的位置
uniform sampler2D inputImageTexture;
void main()
{
    gl_FragColor = texture2D( inputImageTexture, textureCoordinate );  //显示原图
}

这是一个完整的Fragment Shader，只是显示原图，没有做什么特殊处理，大概的原理是，每个像素的颜色值都是通过这个main函数获取，textureCoordinate是当前点的xy坐标，inputImageTexture是整个画面的纹理，只需要将当前点的RGBA值赋值给gl_FragColor就是最终的显示颜色，通过texture2D获取的是原始颜色值，给这个颜色值做一些特效处理就是一个特效滤镜啦！

对于转场特效，本质上就是一个shader里有前后两个画面的纹理，然后根据一个切换程度，来对两个纹理做相对应的处理（比如平移，缩放等），一个简单的例子如下：

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工程

GPUImage-master.zip