GPUImage 顶点着色器和片元着色器 详解

//顶点着色器
//v.shader

//顶点着色器是一个可编程的处理单元，执行顶点变换、纹理坐标变换、光照、材质等顶点的相关操作，每顶点执行一次。替代了传统渲染管线中顶点变换、光照以及纹理坐标的处理，开发人员可以根据自己的需求自行开发，大大增加了程序的灵活性。
//顶点着色器主要是传入相应的Attribute变量、Uniforms变量、采样器以及临时变量，经过顶点着色器后生成Varying变量。

attribute vec4 position;// 应用程序传入顶点着色器的顶点位置

//vec2                包含了2个浮点数的向量
//vec3                包含了3个浮点数的向量
//vec4                包含了4个浮点数的向量

//（1）attribute变量(属性变量)只能用于顶点着色器中，不能用于片元着色器。一般用该变量来表示一些顶点数据，如：顶点坐标、纹理坐标、颜色等。
//（2）uniforms变量(一致变量)用来将数据值从应用程其序传递到顶点着色器或者片元着色器。该变量有点类似C语言中的常量（const），即该变量的值不能被shader程序修改。一般用该变量表示变换矩阵、光照参数、纹理采样器等。
//（3）varying变量(易变变量)是从顶点着色器传递到片元着色器的数据变量。顶点着色器可以使用易变变量来传递需要插值的颜色、法向量、纹理坐标等任意值。在顶点与片元shader程序间传递数据是很容易的，一般在顶点shader中修改varying变量值，然后片元shader中使用该值，当然，该变量在顶点及片元这两段shader程序中声明必须是一致的。例如：下面代码中应用程序中由顶点着色器传入片元着色器中的coord变量。
//（4）gl_Position为内建变量，表示变换后点的空间位置。顶点着色器从应用程序中获得原始的顶点位置数据，这些原始的顶点数据在顶点着色器中经过平移、旋转、缩放等数学变换后，生成新的顶点位置。新的顶点位置通过在顶点着色器中写入gl_Position传递到渲染管线的后继阶段继续处理。

attribute vec2 textCoord;// 应用程序传入顶点着色器的顶点纹理坐标

varying lowp vec2 coord;// 用于传递给片元着色器的顶点纹理数据


uniform mat4 modelViewProjectionMatrix;// 应用程序传入顶点着色器的矩阵坐标

void main(){
    
    coord = textCoord;
//    gl_Position = position;
    
    gl_Position = modelViewProjectionMatrix * position;
}

//片元着色器
// f.shader

//

varying lowp vec2 coord;// 接收从顶点着色器过来的纹理坐标 

uniform sampler2D colorMap;// 纹理采样器，代表一幅纹理


void main(){
//    gl_FragColor = vec4(0, 1, 0, 1);
    
//    片元的颜色 由“texture2D”函数计算出来，实际上就是按纹理坐标从纹理像素中取样。
    gl_FragColor = texture2D(colorMap, coord.st);// 进行纹理采样
    
    
//    此片元着色器的主要功能为根据接收的记录片元纹理坐标的易变变量中的纹理坐标，调用texture2D内建函数从采样器中进行纹理采样，得到此片元的颜色值。最后，将采样到的颜色值传给gl_FragColor内建变量，完成片元的着色。
    
//    片元着色器是一个处理片元值及其相关联数据的可编程单元，片元着色器可执行纹理的访问、颜色的汇总、雾化等操作，每片元执行一次。片元着色器替代了纹理、颜色求和、雾以及Alpha测试，这一部分是需要开发者自己开发的。
//    
//    （1）varying指的是从顶点着色器传递到片元着色器的数据变量
//    （2）gl_FragColor为内置变量，用来保存片元着色器计算完成的片元颜色值，此颜色值将送入渲染管线的后继阶段进行处理。
    
    //varying在片元着色器里面表示从顶点着色器传过来的输入参数;
    //片元着色器不能直接传如参数,只能接收顶点着色器的输出;
    
}