WebGL着色器语言中各个变量的作用

1、attribute变量

用于接收顶点数据，只能在顶点着色器中声明和使用。

attribute vec3 a_position;

2、uniform变量

用于在JavaScript代码中设置并在着色器程序中保持不变的值，可以在顶点着色器和片元着色器中声明和使用。但是要保证变量名唯一，即顶点着色器和片元着色器的uniform变量不能相同。

uniform mat4 u_modelMatrix;

3、varying变量

用于在顶点着色器和片元着色器之间传递数据，顶点着色器中声明的 varying 变量的值会被插值后传递给片元着色器。

varying vec4 v_color;

4、const变量

在着色器中声明的常量值，在整个着色器程序中保持不变。

const float PI = 3.14159265359;

5、预定义变量

WebGL中内置了一些预定义的特殊变量，如gl_Position在顶点着色器中表示顶点位置和gl_FragColor在片元着色器中表示片元颜色。

//顶点着色器程序
var VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
void main(){
    gl_Position = a_Position;
    v_TexCoord = a_TexCoord;
}
`;
//片元着色器程序
var FSHADER_SOURCE = `
precision mediump float;
uniform sampler2D u_Sampler;
varying vec2 v_TexCoord;
void main(){
    gl_FragColor = texture2D(u_Sampler,v_TexCoord);//设置颜色
}`