WebGL 编程指南（二）：灵活掌握着色器变量传递，释放创造力

2023-12-18 05:10:46

在上一节中，我们成功绘制了固定位置的点，为图形渲染打下了坚实的基础。然而，仅仅依靠写死的位置显然不够灵活。本节将带领你探索如何将点的位置传给顶点着色器，从而实现更具动态性和交互性的图形效果。

1. 着色器变量传递的必要性

试想一下，如果你想绘制一个可以移动的物体，或者你想根据用户输入改变图形的形状，仅仅依靠硬编码的位置显然无法满足需求。因此，我们需要一种方法将外部数据传递给着色器，从而实现动态的图形渲染。

2. 着色器变量传递的原理

着色器变量传递的关键在于使用JavaScript中的uniform变量。uniform变量允许你将数据从JavaScript代码传递给着色器。你可以使用gl.uniform*()方法来设置uniform变量的值，其中*可以是1i、1f、2f、3f、4f或Matrix4fv。

3. 着色器变量传递的步骤

在JavaScript代码中定义uniform变量。
在着色器代码中声明uniform变量。
使用gl.uniform*()方法设置uniform变量的值。
在着色器代码中使用uniform变量。

4. 着色器变量传递的示例

为了更好地理解着色器变量传递，让我们通过一个简单的示例来演示如何将点的位置从JavaScript代码传递给顶点着色器。

JavaScript代码：

// 定义uniform变量
var u_Position = gl.getUniformLocation(program, "u_Position");

// 设置uniform变量的值
gl.uniform3f(u_Position, 0.0, 0.0, 0.0);

// 绘制点
gl.drawArrays(gl.POINTS, 0, 1);

顶点着色器代码：

// 声明uniform变量
uniform vec3 u_Position;

// 使用uniform变量
gl_Position = vec4(u_Position, 1.0);

在这个示例中，我们首先在JavaScript代码中定义了一个uniform变量u_Position，然后使用gl.uniform3f()方法设置了u_Position的值。接下来，我们在顶点着色器代码中声明了u_Position，并在gl_Position中使用了它。这样，我们就成功地将点的位置从JavaScript代码传递给了顶点着色器。

5. 着色器变量传递的应用

着色器变量传递在WebGL编程中有着广泛的应用，例如：