学习 WebGL(2) - JavaScript 向着色器传递数据

上一章中，我们画了一个点，点的位置信息是直接写在顶点着色器中的，程序很容易理解，但是缺乏扩展性。WebGL 程序提供了从 JavaScript 传递数据到着色器的能力，让我们能够在 JavaScript 中创建数据，然后传递给着色器使用。

attribute、uniform、varying三种存储限定符

想要从 JavaSctript 中传递数据给着色器，我们在着色器中需要使用 attribute, uniform, varying 这三种存储限定符创建全局变量来接受 JavaScript 传入的数据。基本格式为 <存储限定符> <变量类型> <变量名称>

attribute

attribute 限定符表示变量只能出现在顶点着色器中。比如我们声明一个顶点位置的 attribute 变量。

// attribute 只能出现在顶点着色器中，并且必须是全局变量
let vertexShaderSource = `
	attribute vec4 a_Position;
	void main() {
		gl_Position = a_Position;
	}
`

uniform

uniform 限定符表示变量可以出现在顶点着色器和片元着色器中，一般是两个着色器共同用到的变量。

varying

varying 限定符变量是为了从顶点着色器向片元着色器传输数据。需要在两个着色器中声明同名的变量。

使用 attribute 变量

// 获取 attribute 变量的存储位置
let a_Position = gl.getAttribLocation( program, "a_Position" );

// 向 attribute 变量赋值，这里的 a_Position 第四个值没有设置会自动默认为 1
gl.vertexAttrib3f( a_Position, 0, 0, 0 )

uniform 和 varying 在后续使用到的时候再进行说明。

完整示例代码在 github learn-webgl