WebGL系列（一）顶点着色器、片元着色器与WebGL坐标系统

1. 顶点着色器（Vertex shader）：用来描述顶点属性（如位置、颜色等）的程序。顶点是二维或者三维空间中的一个点，比如二维或者三维图形的端点或交点。

   //顶点着色器程序
   var VSHADER_SCOURCE = 
   'void main() {\n' +
         ' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
         ' gl_PointSize = 5.0;\n'+
      '}\n';

    

2. 片元着色器（Fragment shader）：进行逐片元处理过程如光照的程序。片元可理解为像素。

   //片元着色器程序
   var FSHADER_SCOURCE = 
   'void main() {\n' +
         ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
      '}\n';

   

   上图是从执行Javascript，到在WebGL系统中使用着色器在浏览器上绘制图形。

3. WebGL坐标系统

         WebGL是三维坐标系统，当面向屏幕时，X轴是水平的（正方向向右），Y轴垂直（正方向为下），Z轴垂直于屏幕（正方向为外）。称为右手系坐标系统。

 

        上图左侧是canvas坐标系统，右侧图是canvas上WebGL坐标系统。二者在原点与Y轴正方向不同。

     4.attribute变量传输那些与顶点相关的数据，uniform变量传输的是那些对于所有顶点都相同（或与顶点无关）的数据。

attribute变量是一种GLSL ES变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。

attribute变量声明：attribute   vec4   a_Position

                           存储限定符   类型      变量名

uniform变量声明：uniform    vec4    u_FragColor

                           存储限定符   类型      变量名