WebGL着色器

数据类型

S.No.	类型	描述
1	void	表示一个空值
2	bool	接受true或false
3	int	这是一个有符号整数数据类型
4	float	这是一个浮点标量数据类型
5	vec2, vec3, vec4	正分量浮点矢量
6	bvec2, bvec3, bvec4	布尔矢量
7	ivec2, ivec3, ivec4	有符号整数矢量
8	mat2, mat3, mat4	2x2, 3x3, 4x4 浮点矩阵
9	sampler2D	访问2D纹理
10	samplerCube	访问立方体映射纹理

修饰符

S.No.	修饰符	描述
1	attribute	这个修饰符充当每个顶点数据的顶点着色器和OpenGL ES之间的链接。此顶点着色器属性的值在每次执行时变化
2	uniform	这修饰符链接着色器程序及其WebGL的应用程序。不同属性修饰词，制服(uniforms)的值不会改变。制服(uniforms)是只读的; 可以用它们与任何基本数据类型来声明一个变量。 示例 - 统一 vec4 光的位置;
3	varying	这个修饰符形成顶点着色器的内插数据和片段着色器之间的联系。它可用于下列数据类型- float, vec2, vec3, vec4, mat2, mat3, mat4, 或数组。 示例 - 改变VEC3正常;

顶点着色器

• 顶点变换
• 正常转化和正常化
• 纹理坐标生成
• 纹理坐标变换
• 光线
• 彩色材料应用

预定义变量

S.No.	变量	描述
1	highp vec4 gl_Position;	保存顶点的位置
2	mediump float gl_PointSize;	保存变换点的大小。此变量的单位是像素

示例代码

attribute vec2 coordinates;

void main(void) {
   gl_Position = vec4(coordinates, 0.0, 1.0);
};

gl_Position

片段着色器

• 在插值操作
• 纹理访问
• 纹理应用
• 灰蒙
• 颜色总和

预定义变量

S.No.	变量	描述
1	mediump vec4 gl_FragCoord;	保存帧缓冲器中的片段位置
2	bool gl_FrontFacing;	存放属于一个前置原语的片段
3	mediump vec2 gl_PointCoord;	存放在一个点(点仅光栅化)片段的位置
4	mediump vec4 gl_FragColor;	保存着色器的输出片段的颜色值
5	mediump vec4 gl_FragData[n]	持有该片段颜色的色彩附件n

示例代码

void main(void) {
   gl_FragColor = vec4(0, 0.8, 0, 1);
}

存储和编译着色器程序

var vertCode =
   'attribute vec2 coordinates;' +
	
   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 0.0, 1.0);' +
   '}';

编译着色器

• 创建Shader对象
• 所述源代码以创建着色器对象
• 编译程序

创建顶点着色器

Object createShader (enum type)

• gl.VERTEX_SHADER创建顶点着色器

• gl.FRAGMENT_SHADER 创建片段着色器。

附加源到Shader

void shaderSource(Object shader, string source)

• shader − 必须创建Shader对象传递作为一个参数。

• Source − 必须以字符串格式传入着色器程序代码。

编译程序

compileShader(Object shader)

// Vertex Shader
var vertCode =
   'attribute vec3 coordinates;' +
	
   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
   '}';
      
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
 
// Fragment Shader
var fragCode =
   'void main(void) {' +
      ' gl_FragColor = vec4(0, 0.8, 0, 1);' +
   '}';
      
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);

合并程序

• 创建一个程序对象
• 附加两个着色器
• 连接两个着色器
• 使用程序

创建一个程序对象

createProgram();

附加着色器

attachShader(Object program, Object shader);

• Program − 通过创建空的程序对象作为一个参数

• Shader − 传递的着色器编译程序中的一个(顶点着色器，片段着色器)

链接着色器

linkProgram(shaderProgram);

使用程序

useProgram(shaderProgram);

var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram); 

上一篇： WebGL几何体 下一篇： WebGL关联属性和缓冲区对象