WebGL指南 | AI生成和翻译

Home 2025.04

让我们深入了解 WebGL（Web图形库）的完整指南。内容涵盖其定义、工作原理、应用价值、入门方法及更广泛的背景知识——非常适合理解它在 Figma 等工具或更广泛领域中的作用。系好安全带，准备出发！

1. 什么是 WebGL？

WebGL 是一种 JavaScript API，可将硬件加速的 2D 和 3D 图形技术引入网络。它基于 OpenGL ES（嵌入式系统），这是原生应用中使用的 OpenGL 标准的子集，并针对浏览器进行了适配。通过 WebGL，您可以直接利用 GPU 在 <canvas> 元素上渲染图形，绕过传统 HTML/CSS 基于 CPU 的较慢渲染方式。

2. WebGL 的工作原理

WebGL 通过 JavaScript API 提供对 GPU 的低层级访问。它围绕渲染管线构建——这是一系列将代码转换为屏幕上像素的步骤。

  1. 设置：
    • 在 HTML 中创建 <canvas> 元素。
    • 获取 WebGL 上下文：canvas.getContext('webgl')（或使用 'webgl2' 获取 2.0 版本）。
  2. 着色器：
    • 顶点着色器： 定义 3D 空间中点（顶点）的位置。
    • 片段着色器： 为顶点之间的每个像素着色。
    • 使用 GLSL（OpenGL 着色语言）编写，并在运行时编译。
  3. 缓冲区：
    • 数据（例如顶点位置、颜色）通过缓冲区存储在 GPU 内存中。
    • 示例：将三角形的三个角点作为坐标数组发送。
  4. 渲染：
    • 绑定缓冲区、设置着色器，并发出绘制调用（例如 gl.drawArrays()）。
    • GPU 并行处理这些指令，输出到画布上。

3. 为何使用 WebGL？

权衡考虑：

4. WebGL 入门

让我们渲染一个简单的彩色三角形，亲身体验 WebGL。

步骤 1：HTML 设置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <canvas id="glCanvas" width="400" height="400"></canvas>
    <script>
        // JavaScript 代码放在这里
    </script>
</body>
</html>

步骤 2：JavaScript 基础

在 <script> 标签内添加以下代码：

// 获取画布和上下文
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
    alert('不支持 WebGL！');
}

// 顶点着色器源码（GLSL）
const vsSource = `
    attribute vec2 a_position;
    void main() {
        gl_Position = vec4(a_position, 0.0, 1.0);
    }
`;

// 片段着色器源码（GLSL）
const fsSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
    }
`;

// 编译着色器
function createShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource);

// 链接成程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    console.error(gl.getProgramInfoLog(program));
}

// 顶点数据（一个三角形）
const positions = new Float32Array([
    0.0,  0.5,  // 顶部
   -0.5, -0.5,  // 左下角
    0.5, -0.5   // 右下角
]);

// 缓冲区设置
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

// 告诉 WebGL 如何读取缓冲区
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

// 清除并绘制
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 黑色背景
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3); // 绘制 3 个顶点

步骤 3：测试

5. 核心概念

WebGL 2.0 新增功能：

6. 生态系统与工具

7. WebGL 实际应用

8. 未来展望

9. 资源推荐

总结

WebGL 是您在浏览器中通往 GPU 驱动图形的门户。它层级较低、功能强大，且有些令人生畏——但通过实践（和库的支持），您可以构建从简单动画到完整 3D 世界的任何内容。想尝试特定项目或深入研究着色器吗？请随时告诉我！

Back Donate