WebGL 新手入门：探索 3D 图形渲染的第一步

2023-11-16 08:44:35







## WebGL 新手入门：探索 3D 图形渲染的第一步

在当今快节奏的数字世界中，3D 图形渲染已成为不可或缺的技术，应用于从游戏和娱乐到医疗和科学的各个领域。随着 WebGL 的出现，开发人员现在可以使用 JavaScript 在浏览器中创建令人惊叹的 3D 体验。

对于初学者来说，掌握 WebGL 可能看起来是一项艰巨的任务。但是，通过本教程，我们将逐步引导您了解 WebGL 的核心概念，并通过一个简单的示例，为您提供一个坚实的基础。

### 什么是 WebGL？

WebGL（Web Graphics Library）是一个 JavaScript API，它允许开发人员在网络浏览器中创建交互式 3D 图形。它基于 OpenGL ES 2.0 规范，为开发人员提供了一组强大的工具来控制 3D 场景的各个方面，包括几何形状、纹理、着色器和灯光。

### 入门 WebGL

要开始使用 WebGL，您需要一个支持 WebGL 的浏览器，例如 Chrome、Firefox 或 Safari。然后，您可以在 HTML 页面中使用 `<canvas>` 元素来创建 WebGL 上下文。

接下来，您需要加载 WebGL 上下文，并创建一个程序对象来管理您的顶点和片段着色器。顶点着色器负责定义物体的几何形状，而片段着色器则负责计算每个片段的颜色。

### 第一个 WebGL 示例

现在，让我们深入了解我们的第一个 WebGL 示例。我们将创建一个简单的立方体，并在浏览器中旋转它。以下是步骤：

1. **创建 WebGL 上下文：** 

```javascript
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

创建程序对象：

const program = gl.createProgram();

创建顶点着色器：

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
    attribute vec3 position;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`);
gl.compileShader(vertexShader);

创建片段着色器：

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
    precision highp float;
    uniform vec4 color;
    void main() {
        gl_FragColor = color;
    }
`);
gl.compileShader(fragmentShader);

链接程序：

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

创建立方体几何：

const positions = [
    // Front face
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,

    // Back face
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0, -1.0, -1.0,

    // Top face
    -1.0,  1.0, -1.0,
    -1.0,  1.0,  1.0,
     1.0,  1.0,  1.0,
     1.0,  1.0, -1.0,

    // Bottom face
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
     1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,

    // Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0,

    // Right face
     1.0, -1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0,  1.0,  1.0,
     1.0, -1.0,  1.0
];

创建缓冲区对象：

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

绘制立方体：

gl.clearColor(0.0, 0.0, 0.0, 1.0);  // 清除颜色缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);  // 清除颜色缓冲区

gl.useProgram(program);  // 使用程序对象

// 设置顶点属性
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 设置 uniforms
const modelViewMatrix = mat4.create();  // 创建模型视图矩阵
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -6.0]);  // 平移模型视图矩阵
const projectionMatrix = mat4.create();  // 创建投影矩阵
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);  // 设置透视投影矩阵
const colorUniformLocation = gl.getUniformLocation(program, 'color');  // 获取片段着色器中的 color uniform
gl.uniform4f(colorUniformLocation, 1.0, 0.0, 0.0, 1.0);  // 设置颜色

gl.drawArrays(gl.TRIANGLES, 0, 36);  // 绘制立方体

旋转立方体：

function animate() {
    requestAnimationFrame(animate);

    // 旋转模型视图矩阵
    mat4.rotateX(modelViewMatrix, modelViewMatrix, 0.01);
    mat4.rotateY(modelViewMatrix, modelViewMatrix, 0.01);

    gl.uniformMatrix4fv(gl.getUniformLocation(program, 'modelViewMatrix'), false, modelViewMatrix);
    gl.uniformMatrix4fv(gl.getUniformLocation(program, 'projectionMatrix'), false, projectionMatrix);

    gl.drawArrays(gl.TRIANGLES, 0, 36);  // 绘制立方体
}

animate();