Web的WebGL：`WebGL API`的高级用法。

WebGL API 高级用法讲座

大家好！今天我们来深入探讨 WebGL API 的高级用法。WebGL 已经成为现代 Web 应用中实现高性能 2D 和 3D 图形渲染的关键技术。掌握其高级用法，能够帮助我们构建更加复杂、高效且令人惊艳的 Web 应用。

1. 顶点数组对象 (VAO)

问题： 在基础 WebGL 渲染中，我们需要频繁地绑定缓冲区、启用顶点属性。如果模型包含多个属性（位置、法线、纹理坐标），这个过程将会变得冗长且效率低下。

解决方案： 顶点数组对象 (VAO) 允许我们将所有的顶点缓冲区对象 (VBO) 和顶点属性配置（如 glVertexAttribPointer 调用）封装到一个单一对象中。这样，在渲染时，我们只需要绑定 VAO，而无需重复绑定和配置 VBO。

概念： VAO 本质上是一个状态容器，它保存了顶点属性的配置。

代码示例：

// 创建 VAO
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// 创建并绑定位置 VBO
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttributeLocation);

// 创建并绑定法线 VBO
const normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
gl.vertexAttribPointer(normalAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(normalAttributeLocation);

// 创建并绑定纹理坐标 VBO
const texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);
gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(texCoordAttributeLocation);

// 解绑 VAO (可选，但推荐)
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER, null); // 解绑 VBO (可选)

// 渲染时
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, vertexCount);
gl.bindVertexArray(null); // 解绑 VAO (可选)

优势：

• 性能提升： 减少了 WebGL API 的调用次数，从而提高了渲染性能。
• 代码简洁： 将顶点属性配置集中管理，使代码更加清晰易懂。
• 易于维护： 简化了模型数据的管理和更新。

适用场景： 任何需要渲染多个模型或具有多个顶点属性的场景。

2. 实例化渲染 (Instanced Rendering)

问题： 如果我们需要渲染大量相同的物体，例如草地、树木、粒子等，传统的渲染方式会重复调用 gl.drawArrays 或 gl.drawElements，每次调用都需要设置相同的顶点数据和 Uniform 变量，效率非常低。

解决方案： 实例化渲染允许我们使用单个 gl.drawArraysInstanced 或 gl.drawElementsInstanced 调用来渲染多个相同的物体，只需要提供每个实例的变换矩阵或其他特有属性。

概念： 实例化渲染利用 GPU 的并行处理能力，高效地渲染大量相似的物体。

代码示例：

// 创建实例化属性缓冲区 (例如，存储每个实例的变换矩阵)
const instanceMatrixBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(instanceMatrices), gl.STATIC_DRAW);

// 配置实例化属性 (每个实例的变换矩阵)
const matrixAttribLocation = gl.getAttribLocation(program, 'instanceMatrix');
const bytesPerMatrix = 4 * 4 * 4; // 4x4 矩阵，每个元素 4 字节
for (let i = 0; i < 4; ++i) {
  const attribLocation = matrixAttribLocation + i;
  gl.enableVertexAttribArray(attribLocation);
  gl.vertexAttribPointer(
      attribLocation,
      4,             // 每个属性有 4 个值 (矩阵的每一列)
      gl.FLOAT,
      false,
      bytesPerMatrix,  // 步长：下一个实例矩阵的起始位置
      i * 4 * 4      // 偏移量：当前列的起始位置
  );
  gl.vertexAttribDivisor(attribLocation, 1); // 关键：设置属性的 divisor 为 1，表示每个实例更新一次
}

// 渲染
gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);

重要概念：

• vertexAttribDivisor(location, divisor): 设置顶点属性的 divisor。
  • divisor = 0 (默认值): 顶点属性的值在每个顶点更新一次。
  • divisor = 1: 顶点属性的值在每个实例更新一次。
  • divisor = n: 顶点属性的值在每 n 个实例更新一次。

优势：

• 极高的性能提升： 大幅减少了 WebGL API 的调用次数，提高了渲染效率。
• 适用于大规模场景： 能够轻松渲染大量的相同物体。

适用场景： 需要渲染大量相同物体的场景，例如草地、树木、粒子系统、人群模拟等。

3. 帧缓冲对象 (FBO) 和渲染到纹理 (RTT)

问题： 默认情况下，WebGL 渲染到屏幕上的颜色缓冲区。如果我们想进行一些离屏渲染，例如后期处理效果、阴影贴图、反射/折射效果等，我们需要一种方式将渲染结果保存到纹理中。

解决方案： 帧缓冲对象 (FBO) 允许我们将渲染结果保存到纹理或其他缓冲区中，而无需直接渲染到屏幕。

概念： FBO 是一种离屏渲染目标。我们可以将颜色缓冲区、深度缓冲区和模板缓冲区附加到 FBO。

代码示例：

// 创建帧缓冲对象
const frameBuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);

// 创建纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 创建渲染缓冲对象 (RBO) - 可选，用于深度/模板缓冲
const depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);

// 将纹理附加到帧缓冲对象的颜色附件点
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

// 将渲染缓冲对象附加到帧缓冲对象的深度附件点
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

// 检查帧缓冲对象是否完整
const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status !== gl.FRAMEBUFFER_COMPLETE) {
  console.error('Framebuffer is not complete:', status);
}

// 渲染到帧缓冲对象
gl.viewport(0, 0, width, height);
gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
// ... 渲染代码 ...

// 渲染完成后，解绑帧缓冲对象并绑定默认帧缓冲对象（屏幕）
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// 使用纹理
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(textureUniformLocation, 0);
// ... 渲染代码，使用纹理 ...

步骤：

1. 创建 FBO： gl.createFramebuffer()
2. 绑定 FBO： gl.bindFramebuffer(gl.FRAMEBUFFER, fbo)
3. 创建纹理： gl.createTexture()，并配置纹理参数。
4. 创建 RBO (可选)： 用于深度和/或模板缓冲。
5. 附加纹理/RBO： 使用 gl.framebufferTexture2D 和 gl.framebufferRenderbuffer 将纹理和 RBO 附加到 FBO 的附件点 (例如 gl.COLOR_ATTACHMENT0, gl.DEPTH_ATTACHMENT)。
6. 检查 FBO 状态： gl.checkFramebufferStatus(gl.FRAMEBUFFER)，确保 FBO 已正确配置。
7. 渲染到 FBO： 绑定 FBO 后，所有的渲染操作都会输出到附加的纹理/缓冲区中。
8. 解绑 FBO： 渲染完成后，解绑 FBO 并绑定默认帧缓冲对象 (屏幕)。
9. 使用纹理： 将纹理绑定到纹理单元，并在 shader 中使用该纹理。

优势：

• 离屏渲染： 允许我们进行离屏渲染，实现各种后期处理效果和高级渲染技术。
• 阴影贴图： 通过将场景从光源的角度渲染到纹理中，可以创建阴影效果。
• 反射/折射： 通过将场景渲染到立方体贴图或平面纹理中，可以模拟反射和折射效果。
• 多通道渲染： 可以进行多通道渲染，例如 deferred shading。

适用场景： 需要离屏渲染的场景，例如后期处理效果、阴影贴图、反射/折射效果、多通道渲染等。

4. 计算着色器 (Compute Shader)

问题： 传统的顶点着色器和片元着色器主要用于图形渲染。如果我们想利用 GPU 的并行计算能力来执行一些非图形相关的计算任务，例如物理模拟、图像处理、数据分析等，该怎么办？

解决方案： 计算着色器允许我们使用 GPU 来执行通用的计算任务。

概念： 计算着色器是一种特殊类型的着色器，它可以在 GPU 上并行执行任意的计算任务。计算着色器不依赖于图形管线，可以直接访问 GPU 的计算资源。

代码示例：

// 创建计算着色器
const computeShader = gl.createShader(gl.COMPUTE_SHADER);
gl.shaderSource(computeShader, computeShaderSource);
gl.compileShader(computeShader);

// 创建程序
const computeProgram = gl.createProgram();
gl.attachShader(computeProgram, computeShader);
gl.linkProgram(computeProgram);
gl.useProgram(computeProgram);

// 创建存储缓冲区对象 (SSBO)
const ssbo = gl.createBuffer();
gl.bindBuffer(gl.SHADER_STORAGE_BUFFER, ssbo);
gl.bufferData(gl.SHADER_STORAGE_BUFFER, dataBuffer, gl.DYNAMIC_COPY);

// 绑定 SSBO 到绑定点
const ssboBindingPointIndex = 0;
gl.bindBufferBase(gl.SHADER_STORAGE_BUFFER, ssboBindingPointIndex, ssbo);

// 获取 SSBO 绑定点在 shader 中的索引
const ssboBlockIndex = gl.getProgramResourceIndex(computeProgram, gl.GL_SHADER_STORAGE_BLOCK, 'DataBuffer');
gl.shaderStorageBlockBinding(computeProgram, ssboBlockIndex, ssboBindingPointIndex);

// 设置工作组大小
const workGroupSizeX = 8;
const workGroupSizeY = 8;
const workGroupSizeZ = 1;

// 执行计算着色器
gl.dispatchCompute(width / workGroupSizeX, height / workGroupSizeY, 1);
gl.memoryBarrier(gl.SHADER_STORAGE_BARRIER_BIT); // 确保计算结果写入 SSBO

// 获取计算结果
gl.bindBuffer(gl.SHADER_STORAGE_BUFFER, ssbo);
gl.getBufferSubData(gl.SHADER_STORAGE_BUFFER, 0, dataBuffer);

// 现在 dataBuffer 包含计算结果

重要概念：

• 存储缓冲区对象 (SSBO): 用于在计算着色器和 JavaScript 之间传递数据。
• gl.dispatchCompute(x, y, z): 启动计算着色器，指定工作组的数量。
• 工作组 (Workgroup): 计算着色器并行执行的基本单元。工作组大小在 shader 中使用 layout(local_size_x = X, local_size_y = Y, local_size_z = Z) in; 指定。
• gl.memoryBarrier(mask): 强制 GPU 刷新内存，确保计算结果写入 SSBO。

优势：

• 通用计算： 允许我们使用 GPU 来执行任意的计算任务。
• 高性能： 利用 GPU 的并行计算能力，可以大幅提高计算效率。

适用场景： 物理模拟、图像处理、数据分析、人工智能等需要高性能计算的场景。

5. 多重采样抗锯齿 (MSAA)

问题： 在渲染图形时，锯齿现象是一个常见的问题，尤其是在边缘部分。

解决方案： 多重采样抗锯齿 (MSAA) 是一种常用的抗锯齿技术，它可以减少锯齿现象，提高图像质量。

概念： MSAA 通过在每个像素内进行多次采样，然后将这些采样值进行平均，从而减少锯齿现象。

代码示例：

// 创建 MSAA 帧缓冲对象
const msaaFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, msaaFramebuffer);

// 创建 MSAA 纹理
const msaaTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D_MULTISAMPLE, msaaTexture);
gl.texImage2DMultisample(gl.TEXTURE_2D_MULTISAMPLE, samples, gl.RGBA8, width, height, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);  // 关键：设置纹理参数，否则在blitFramebuffer时会报错
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 创建 MSAA 渲染缓冲对象 (RBO) - 可选，用于深度/模板缓冲
const msaaDepthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, msaaDepthBuffer);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, gl.DEPTH_COMPONENT16, width, height);

// 将 MSAA 纹理附加到帧缓冲对象的颜色附件点
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D_MULTISAMPLE, msaaTexture, 0);

// 将 MSAA 渲染缓冲对象附加到帧缓冲对象的深度附件点
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, msaaDepthBuffer);

// 检查帧缓冲对象是否完整
const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (status !== gl.FRAMEBUFFER_COMPLETE) {
  console.error('Framebuffer is not complete:', status);
}

// 渲染到 MSAA 帧缓冲对象
gl.bindFramebuffer(gl.FRAMEBUFFER, msaaFramebuffer);
gl.viewport(0, 0, width, height);
// ... 渲染代码 ...

// 创建目标帧缓冲对象 (用于将 MSAA 结果复制到普通纹理)
const targetFramebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, targetFramebuffer);

// 创建目标纹理
const targetTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 将目标纹理附加到目标帧缓冲对象的颜色附件点
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, targetTexture, 0);

// 检查帧缓冲对象是否完整
const targetStatus = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
if (targetStatus !== gl.FRAMEBUFFER_COMPLETE) {
  console.error('Target Framebuffer is not complete:', targetStatus);
}

// 将 MSAA 帧缓冲对象的内容复制到目标帧缓冲对象
gl.bindFramebuffer(gl.READ_FRAMEBUFFER, msaaFramebuffer);
gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, targetFramebuffer);
gl.blitFramebuffer(0, 0, width, height, 0, 0, width, height, gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT, gl.NEAREST);

// 解绑帧缓冲对象并绑定默认帧缓冲对象（屏幕）
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

// 使用目标纹理
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, targetTexture);
gl.uniform1i(textureUniformLocation, 0);
// ... 渲染代码，使用纹理 ...

步骤：

1. 创建 MSAA 帧缓冲对象： gl.createFramebuffer()
2. 创建 MSAA 纹理： gl.createTexture()，并使用 gl.texImage2DMultisample 创建多重采样纹理。
3. 创建 MSAA 渲染缓冲对象 (可选)： 用于深度和/或模板缓冲。使用 gl.renderbufferStorageMultisample 创建多重采样渲染缓冲对象。
4. 附加纹理/RBO： 使用 gl.framebufferTexture2D 和 gl.framebufferRenderbuffer 将纹理和 RBO 附加到 FBO 的附件点。
5. 渲染到 MSAA 帧缓冲对象： 绑定 MSAA FBO 后，所有的渲染操作都会输出到附加的纹理/缓冲区中。
6. 创建目标帧缓冲对象和目标纹理： 用于存储 MSAA 的结果。
7. 使用 gl.blitFramebuffer 将 MSAA FBO 的内容复制到目标 FBO。
8. 解绑帧缓冲对象并绑定默认帧缓冲对象 (屏幕)。
9. 使用目标纹理。

重要概念：

• gl.texImage2DMultisample(target, samples, internalformat, width, height, fixedsamplelocations): 创建多重采样纹理。
• gl.renderbufferStorageMultisample(target, samples, internalformat, width, height): 创建多重采样渲染缓冲对象。
• gl.blitFramebuffer(srcX0, srcY0, srcX1, srcY1, dstX0, dstY0, dstX1, dstY1, mask, filter): 将帧缓冲对象的一部分复制到另一个帧缓冲对象。

优势：

• 减少锯齿现象： 提高图像质量，使图像更加平滑。

适用场景： 任何需要提高图像质量的场景，尤其是在边缘部分。

6. Uniform 缓冲区对象 (UBO)

问题： 在 WebGL 中，我们使用 gl.uniformXXX 系列函数来设置 Uniform 变量。如果我们需要频繁地更新多个 Uniform 变量，或者多个 shader 程序需要共享相同的 Uniform 变量，使用 gl.uniformXXX 会变得繁琐且效率低下。

解决方案： Uniform 缓冲区对象 (UBO) 允许我们将多个 Uniform 变量打包到一个缓冲区对象中，然后将该缓冲区对象绑定到 shader 程序。这样，我们只需要更新 UBO 中的数据，而无需逐个设置 Uniform 变量。

概念： UBO 是一种存储 Uniform 变量的缓冲区对象。多个 shader 程序可以共享同一个 UBO。

代码示例：

// 创建 UBO
const ubo = gl.createBuffer();
gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
gl.bufferData(gl.UNIFORM_BUFFER, uniformData, gl.DYNAMIC_DRAW);

// 获取 UBO 绑定点索引
const uboBindingPointIndex = 0;

// 获取 Uniform 块索引
const uniformBlockIndex = gl.getUniformBlockIndex(program, 'MyUniformBlock');

// 将 Uniform 块绑定到绑定点
gl.uniformBlockBinding(program, uniformBlockIndex, uboBindingPointIndex);

// 将 UBO 绑定到绑定点
gl.bindBufferBase(gl.UNIFORM_BUFFER, uboBindingPointIndex, ubo);

// 更新 UBO 数据
gl.bindBuffer(gl.UNIFORM_BUFFER, ubo);
gl.bufferSubData(gl.UNIFORM_BUFFER, 0, new Float32Array(updatedUniformData));

重要概念：

• Uniform 块: 在 shader 中使用 layout(std140) uniform MyUniformBlock { ... }; 定义的 Uniform 变量集合。
• gl.getUniformBlockIndex(program, uniformBlockName): 获取 Uniform 块的索引。
• gl.uniformBlockBinding(program, uniformBlockIndex, bindingPoint): 将 Uniform 块绑定到绑定点。
• gl.bindBufferBase(target, index, buffer): 将缓冲区对象绑定到绑定点。

优势：

• 高效更新： 可以一次性更新多个 Uniform 变量。
• 共享 Uniform 变量： 多个 shader 程序可以共享同一个 UBO。
• 代码简洁： 减少了 gl.uniformXXX 的调用次数，使代码更加清晰易懂。

适用场景： 需要频繁更新多个 Uniform 变量，或者多个 shader 程序需要共享相同的 Uniform 变量的场景。

场景中使用高级特性

特性	适用场景	优势
VAO	任何需要渲染多个模型或具有多个顶点属性的场景。	性能提升，代码简洁，易于维护。
实例化渲染	需要渲染大量相同物体的场景，例如草地、树木、粒子系统、人群模拟等。	极高的性能提升，适用于大规模场景。
FBO 和 RTT	需要离屏渲染的场景，例如后期处理效果、阴影贴图、反射/折射效果等。	离屏渲染，实现各种高级渲染技术，例如阴影贴图、反射/折射效果、多通道渲染。
计算着色器	物理模拟、图像处理、数据分析、人工智能等需要高性能计算的场景。	通用计算，高性能。
MSAA	任何需要提高图像质量的场景，尤其是在边缘部分。	减少锯齿现象，提高图像质量。
UBO	需要频繁更新多个 Uniform 变量，或者多个 shader 程序需要共享相同的 Uniform 变量的场景。	高效更新，共享 Uniform 变量，代码简洁。

进一步的探索

以上只是 WebGL API 高级用法的一些示例。WebGL 还有很多其他的特性和技术，例如：

• 纹理压缩: 减少纹理占用的内存空间，提高加载速度。
• Mipmapping: 提高远距离物体的渲染质量。
• GPGPU: 使用 GPU 进行通用计算。

希望今天的讲座能帮助大家更好地理解和使用 WebGL API 的高级用法。

善用特性，构建高效WebGL应用

以上介绍了一些WebGL的高级用法，它们可以帮助开发者构建更加高效和复杂的Web应用。合理地运用这些技术，可以显著提高渲染性能和图像质量，从而为用户带来更好的体验。