44 | WebGL介绍（八）：在着色器中使用共享变量，绘制一个颜色渐变的正方形-微信小程序全栈开发实战(上)

当前位置:　首页>> 技术小册>> 微信小程序全栈开发实战(上)

### 44 | WebGL介绍（八）：在着色器中使用共享变量，绘制一个颜色渐变的正方形

在WebGL的广阔世界中，着色器（Shader）扮演着至关重要的角色，它们直接控制着图形硬件上的渲染过程，使得开发者能够创造出令人惊叹的视觉效果。本章节将深入探讨如何在WebGL的着色器中使用共享变量（尽管在WebGL的上下文中，我们通常谈论的是uniform、attribute和varying变量，但这里“共享变量”的概念可以理解为在多个顶点或片段间共享的数据处理方式，特别是通过巧妙利用varying变量或特定算法实现的效果），并通过一个实例——绘制一个颜色渐变的正方形，来展示这一技术的实际应用。

#### 一、着色器基础回顾

在深入讨论之前，我们先简要回顾一下WebGL中的着色器类型及其基本作用：

- **顶点着色器（Vertex Shader）**：负责处理每个顶点的数据，如位置、颜色、纹理坐标等，并输出处理后的顶点信息给图形管线。
- **片段着色器（Fragment Shader）**：处理顶点着色器输出的每个片段（即像素或像素的候选者），决定其最终的颜色和透明度。

在WebGL中，着色器通常使用GLSL（OpenGL Shading Language）编写，这是一种专门用于图形渲染的编程语言。

#### 二、共享变量的概念与应用

在WebGL中，直接意义上的“共享变量”并不直接对应于传统编程语言中的全局变量或静态变量。然而，我们可以通过uniform变量（全局可访问，但由CPU设置）、varying变量（在顶点着色器中定义，传递给片段着色器，实现顶点间数据的插值）以及特定的算法（如纹理映射、颜色插值等）来模拟或实现类似的效果。

对于本章节的目标——绘制一个颜色渐变的正方形，我们将主要利用varying变量和颜色插值技术。

#### 三、绘制颜色渐变正方形的步骤

##### 1. 准备顶点数据

首先，我们需要定义正方形的四个顶点及其位置。为了实现颜色渐变，我们还需要为每个顶点指定一个颜色值。这里，我们选择正方形的左上角为蓝色（0, 0, 1），右上角为红色（1, 0, 0），右下角为绿色（0, 1, 0），左下角为黄色（1, 1, 0）。

```javascript
const vertices = new Float32Array([
    // x, y, r, g, b
    -0.5,  0.5, 0, 0, 1, // 左上角，蓝色
     0.5,  0.5, 1, 0, 0, // 右上角，红色
     0.5, -0.5, 0, 1, 0, // 右下角，绿色
    -0.5, -0.5, 1, 1, 0  // 左下角，黄色
]);
```

##### 2. 创建着色器程序

编写顶点着色器和片段着色器代码。在顶点着色器中，我们将顶点位置和颜色作为attribute传入，并将颜色作为varying变量传递给片段着色器。

**顶点着色器代码示例**：

```glsl
attribute vec2 a_position;
attribute vec3 a_color;

varying vec3 v_color;

void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
    v_color = a_color;
}
```

**片段着色器代码示例**：

```glsl
precision mediump float;

varying vec3 v_color;

void main() {
    gl_FragColor = vec4(v_color, 1.0);
}
```

注意：这里虽然直接使用了顶点颜色作为片段颜色，但为了展示渐变效果，我们稍后将通过修改顶点着色器或片段着色器来实现。

##### 3. 实现颜色渐变

为了实现颜色渐变，我们可以选择在片段着色器中根据片段的位置进行颜色插值。但在这个简单的例子中，由于我们直接使用了顶点的颜色，所以渐变效果并不明显。为了演示，我们可以假设一个更复杂的场景，比如使用纹理映射或计算每个片段相对于正方形中心的距离来动态调整颜色。

然而，为了保持示例的简洁性，我们将通过修改顶点数据来模拟一种简单的水平渐变效果，即从左到右从蓝色过渡到红色。

修改顶点数据如下：

```javascript
// 简化示例，仅展示水平渐变
const vertices = new Float32Array([
    // x, y, r, g, b
    -0.5,  0.5, 0, 0, 1, // 左上角，蓝色
    -0.25, 0.5, 0, 0.5, 1, // 中间左，蓝紫色
     0,    0.5, 0.5, 0, 1, // 中间，紫色
     0.25, 0.5, 1, 0, 0.5, // 中间右，红紫色
     0.5,  0.5, 1, 0, 0    // 右上角，红色
    // ... 类似地设置底部三个顶点的颜色，但保持水平渐变
]);
```

注意：这只是一个简化的示例，实际中你可能需要更复杂的逻辑来精确控制颜色渐变。

##### 4. 渲染循环与结果展示

最后，设置WebGL的渲染循环，将顶点数据和着色器程序绑定到WebGL上下文中，并调用`gl.drawArrays`或`gl.drawElements`来绘制正方形。由于我们已经在顶点数据中包含了颜色信息，并且顶点着色器将这些颜色传递给了片段着色器，因此渲染出的正方形将展示出从蓝色到红色的水平渐变效果。

#### 四、总结

通过本章节的学习，我们了解了如何在WebGL的着色器中使用“共享变量”（通过varying变量和颜色插值技术模拟）来绘制一个颜色渐变的正方形。虽然直接意义上的共享变量在WebGL中并不直接存在，但我们可以利用uniform、attribute和varying变量的特性，以及着色器中的计算逻辑，来实现复杂而强大的图形效果。希望这个示例能够帮助你更好地理解WebGL着色器的强大功能和灵活性。

该分类下的相关小册推荐：

微信小程序与云开发(中)

微信小程序与云开发(上)

微信小程序全栈开发实战(下)

微信小程序与云开发(下)

微信小程序全栈开发实战(中)

微信小程序底层框架实现原理