MDN WebGL API 实战教程：通过示例学习 WebGL 核心技术

前言

WebGL 是一项强大的 Web 技术，它允许开发者在浏览器中直接利用 GPU 进行高性能的 2D 和 3D 图形渲染。本教程将通过一系列精心设计的示例，由浅入深地带领读者掌握 WebGL 的核心概念和关键技术。

WebGL 基础入门

检测 WebGL 支持

在开始使用 WebGL 前，首先需要检测浏览器是否支持 WebGL。通过检查 WebGLRenderingContext 接口是否存在，我们可以确定当前环境是否支持 WebGL。

function detectWebGL() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  return !!gl;
}

清空画布与颜色设置

WebGL 中最基础的操作就是清空画布并设置背景色。gl.clearColor() 方法用于设置清空颜色，而 gl.clear() 方法则执行实际的清空操作。

const gl = canvas.getContext('webgl');
gl.clearColor(0.0, 0.5, 1.0, 1.0);  // 设置RGBA颜色
gl.clear(gl.COLOR_BUFFER_BIT);      // 清空颜色缓冲区

交互式颜色清空

结合用户交互，我们可以实现点击画布时随机改变背景色的效果。这展示了如何将 WebGL 渲染与 DOM 事件相结合。

canvas.addEventListener('click', () => {
  gl.clearColor(Math.random(), Math.random(), Math.random(), 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
});

进阶渲染技术

颜色遮罩

颜色遮罩(gl.colorMask)允许我们控制哪些颜色通道会被写入帧缓冲区。例如，只允许红色和蓝色通道写入：

gl.colorMask(true, false, true, false);  // 只允许R和B通道

剪刀测试

剪刀测试(gl.scissor)可以限制绘制区域，只在这个矩形区域内进行渲染：

gl.enable(gl.SCISSOR_TEST);
gl.scissor(x, y, width, height);  // 设置剪刀矩形区域

着色器编程基础

最简单的着色器程序

一个完整的 WebGL 程序需要顶点着色器和片段着色器。以下是绘制纯色正方形的基本着色器代码：

// 顶点着色器
attribute vec2 aPosition;
void main() {
  gl_Position = vec4(aPosition, 0.0, 1.0);
}

// 片段着色器
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // 红色
}

顶点属性

顶点属性允许我们将数据从 JavaScript 传递到顶点着色器。这是实现交互式图形的关键：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const aPosition = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

高级应用示例

视频纹理

WebGL 可以将视频作为纹理应用到 3D 模型上，实现动态纹理效果：

const video = document.createElement('video');
video.src = 'texture.webm';
video.loop = true;
video.play();

function render() {
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);
  requestAnimationFrame(render);
}

最佳实践

1. 画布尺寸设置：确保 canvas 元素的 CSS 尺寸与绘图缓冲区尺寸匹配，避免渲染失真。
2. 错误处理：WebGL 操作失败时通常不会抛出异常，而是通过 gl.getError() 获取错误代码。
3. 资源管理：及时删除不再使用的缓冲区、纹理等资源，避免内存泄漏。

总结

通过本教程的示例，我们从最基础的清空画布开始，逐步学习了颜色操作、用户交互、着色器编程等 WebGL 核心技术。每个示例都展示了特定的 WebGL 功能，建议读者按照顺序实践这些示例，以建立完整的 WebGL 知识体系。