WebGL学习（十四）：切换着色器，描绘多彩世界

利用着色器切换为WebGL图形注入活力

简介

在WebGL的奇妙世界中，着色器是赋予图形生命力的关键。它们负责定义如何处理和显示图像，提供无限可能来创建生动逼真的视觉效果。然而，为了处理不同的图形对象，我们需要了解如何无缝切换着色器。

切换着色器的奥秘：useProgram() 方法

切换着色器的关键在于 useProgram() 方法。它像一个神奇的魔术棒，允许你随时更换当前正在使用的着色器程序。通过指定一个WebGLProgram对象作为参数，你可以指示WebGL使用该着色器程序来处理后续的图形绘制操作。

gl.useProgram(shaderProgram);

示例：绘制五彩缤纷的立方体

为了深入理解着色器切换，让我们踏上一段绘制五彩缤纷立方体的旅程。我们将使用两个着色器程序：一个用于立方体的正面，另一个用于背面。

顶点着色器

// 顶点着色器代码
const vertexShaderSource = `
  attribute vec3 a_position;
  attribute vec3 a_color;
  varying vec3 v_color;

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

片段着色器（正面）

// 片段着色器代码（正面）
const fragmentShaderSourceFront = `
  precision mediump float;
  varying vec3 v_color;

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

片段着色器（背面）

// 片段着色器代码（背面）
const fragmentShaderSourceBack = `
  precision mediump float;
  varying vec3 v_color;

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

创建着色器程序

现在，我们创建两个着色器程序：一个用于正面，一个用于背面。

// 创建着色器程序（正面）
const shaderProgramFront = gl.createProgram();
gl.attachShader(shaderProgramFront, vertexShader);
gl.attachShader(shaderProgramFront, fragmentShaderSourceFront);
gl.linkProgram(shaderProgramFront);

// 创建着色器程序（背面）
const shaderProgramBack = gl.createProgram();
gl.attachShader(shaderProgramBack, vertexShader);
gl.attachShader(shaderProgramBack, fragmentShaderSourceBack);
gl.linkProgram(shaderProgramBack);

绘制五彩缤纷的立方体

万事俱备，只欠东风！让我们使用这些着色器程序绘制五彩缤纷的立方体。首先，我们需要将立方体的顶点数据和颜色数据交给GPU。

// 上传顶点数据和颜色数据
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeVertices), gl.STATIC_DRAW);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeColors), gl.STATIC_DRAW);

接下来，是设置顶点属性和启用顶点属性数组的时刻。

// 设置顶点属性和启用顶点属性数组
const positionLocation = gl.getAttribLocation(shaderProgramFront, "a_position");
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

const colorLocation = gl.getAttribLocation(shaderProgramFront, "a_color");
gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLocation);

最后，绘制立方体的时刻到了。首先，使用 useProgram() 方法切换到正面着色器程序。

// 使用正面着色器程序
gl.useProgram(shaderProgramFront);

然后，调用 drawElements() 方法绘制立方体。

// 绘制立方体（正面）
gl.drawElements(gl.TRIANGLES, cubeIndices.length, gl.UNSIGNED_SHORT, 0);

为了绘制立方体的背面，我们需要使用 useProgram() 方法切换到背面着色器程序，然后再次调用 drawElements() 方法绘制立方体。

// 使用背面着色器程序
gl.useProgram(shaderProgramBack);

// 绘制立方体（背面）
gl.drawElements(gl.TRIANGLES, cubeIndices.length, gl.UNSIGNED_SHORT, 0);

结语

通过切换着色器，我们为WebGL图形注入了活力。它使我们能够灵活地处理不同的图形对象，创造出更加丰富的视觉体验。无论你是制作互动游戏还是开发引人入胜的交互式应用程序，掌握着色器切换都是至关重要的。

常见问题解答

1. 为什么要切换着色器？
切换着色器允许你为不同的图形对象应用不同的着色效果，从而创建更加丰富的视觉效果。

2. 如何切换着色器？
使用 useProgram() 方法指定要使用的WebGLProgram对象。

3. 我可以同时使用多个着色器程序吗？
是的，你可以创建和使用多个着色器程序，并在需要时切换它们。

4. 切换着色器有什么性能影响？
切换着色器通常会导致一些性能开销，尤其是在频繁切换的情况下。

5. 如何优化着色器切换？
尽可能使用较少的着色器程序，并在程序之间进行批处理绘制调用以减少切换次数。