认识着色器

认识着色器

 

opengl es的着色器有.fsh和.vsh两个文件。这两个文件在被编译和链接后就可以产生可执行程序与GPU交互。

.vsh 是顶点shader，用与顶点计算，可以理解控制顶点的位置，在这个文件中我们通常会传入当前顶点的位置，和纹理的坐标。

例如：

 1 attribute vec4 position;  2 attribute vec4 inputTextureCoordinate; 3  4 varying vec2 textureCoordinate; 5  6 precision mediump float; 7 uniform float overTurn; 8  9 void main()10 {11 gl_Position = position;12     if (overTurn>0.0) {13         textureCoordinate = vec2(inputTextureCoordinate.x,overTurn-inputTextureCoordinate.y);14     }15     else16         textureCoordinate = vec2(inputTextureCoordinate.x,inputTextureCoordinate.y);17 }

attribute：外部传入vsh文件的变量 每帧的渲染的可变参数 变化率高 用于定义每个点。

varying：用于 vsh和fsh之间相互传递的参数。

precision mediump float 定义中等精度的浮点数。

uniform 外部传入vsh文件的变量 变化率较低 对于可能在整个渲染过程没有改变 只是个常量。

在main()当overTurn大于0的时候，函数里面做的事情就是将纹理y轴反转。

.fsh 是片段shader。在这里面我可以对于每一个像素点进行重新计算，从而达到滤镜效果。

 1 varying highp vec2 textureCoordinate; 2 precision mediump float; 3 uniform sampler2D videoFrame; 4  5 vec4 memoryRender(vec4 color) 6 { 7     float gray; 8     gray = color.r*0.3+color.g*0.59+color.b*0.11; 9     color.r = gray;10     color.g = gray;11     color.b = gray;12     13     color.r += color.r*1.5;14     color.g = color.g*2.0;15     16     if(color.r > 255.0)17     color.r = 255.0;18     if(color.g > 255.0)19     color.g = 255.0;20     21     return color;22 }23 24 void main()25 {26     vec4 pixelColor;27 28     pixelColor = texture2D(videoFrame, textureCoordinate);29     30     gl_FragColor = memoryRender(pixelColor);31 }

varying highp vec2 textureCoordinate 就是从vsh中传过来了纹理坐标。

uniform sampler2D videoFrame 是我们真正的纹理贴图。

texture2D(videoFrame, textureCoordinate) 将纹理中的每个像素点颜色取出到pixelColor。

可以用memoryRender(pixelColor)将取到像素点重新加工。

总结：

对于着色器的编程并不是很困难，完全是C的语法。但是debug比较麻烦，对于类型的约束也很严格，必须是相同类型的才能进行算术运算。我们理解了这两个文件之后，就可以发挥我们的想象对纹理图片做出各种的处理。

另有人总结：

vsh 负责搞定像素位置 ,填写  gl_Posizion 变量，偶尔搞定一下点大小的问题，填写 gl_PixelSize。

fsh 负责搞定像素外观，填写 gl_FragColor ，偶尔配套填写另外一组变量。

他们都是一个像素运行一次的，也可能运行多次。为了“这一像素”而努力计算。