WebGL 是一种用于在 Web 浏览器中创建交互式 3D 图形的技术。它允许我们使用 JavaScript 和 GPU 加速渲染进行图形编程，从而实现高性能的可视化效果。本教程将向您介绍如何使用 WebGL 创建令人眼花缭乱的 3D 图形。
准备工作
在开始之前，您需要确保以下内容已经准备就绪：
- 最新版本的浏览器，如 Chrome 或 Firefox；
- 一些基本的 JavaScript 和 WebGL 知识；
- 一个代码编辑器，如 Visual Studio Code。
步骤 1：设置画布
首先，我们需要在 HTML 页面中创建一个用于显示 WebGL 图形的画布。在您的 HTML 文件中添加以下代码：
<canvas id="myCanvas"></canvas>
这将在页面上创建一个 id 为 "myCanvas" 的 canvas 元素，我们将在后面的步骤中使用它。
步骤 2：获取 WebGL 上下文
要使用 WebGL，我们需要获取一个 WebGL 上下文对象。我们可以通过以下 JavaScript 代码来完成：
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
这将获取我们先前创建的 canvas 元素，并将其传递给 getContext() 函数以获取 WebGL 上下文对象。如果一切都顺利，我们现在应该拥有一个名为 "gl" 的 WebGL 上下文对象。
步骤 3：设置画布大小
接下来，我们需要设置画布的大小以适应我们的需要。可以通过以下代码将其设置为全屏大小：
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
这将使 canvas 的宽度和高度等于窗口的宽度和高度。您也可以将其设置为其他特定的宽度和高度。
步骤 4：编写顶点和片段着色器
要渲染图形，我们需要编写顶点和片段着色器。顶点着色器将负责处理顶点数据，而片段着色器将负责处理像素数据。
以下是一个简单的例子：
// 顶点着色器
var vertexShaderSource = `
attribute vec3 aPosition;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
void main() {
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aPosition, 1.0);
}
`;
// 片段着色器
var fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
步骤 5：编译和链接着色器
一旦我们编写了着色器的代码，我们需要将其编译并链接到 WebGL 程序中。我们可以使用以下 JavaScript 代码来实现：
// 创建着色器程序
var shaderProgram = gl.createProgram();
// 创建顶点着色器对象并编译
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
gl.attachShader(shaderProgram, vertexShader);
// 创建片段着色器对象并编译
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
gl.attachShader(shaderProgram, fragmentShader);
// 链接着色器程序
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
这将创建一个着色器程序，并将顶点和片段着色器对象附加到该程序中，然后将其链接。
步骤 6：创建顶点数据
下一步是创建我们的顶点数据。顶点数据包括顶点的位置和可选的颜色、法线等其他属性。我们可以使用以下 JavaScript 代码来创建一个简单的立方体：
var vertices = [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
-1.0, 1.0, -1.0,
];
var indices = [
0, 1, 2, 2, 3, 0, // 前面
1, 5, 6, 6, 2, 1, // 右面
7, 6, 5, 5, 4, 7, // 后面
4, 0, 3, 3, 7, 4, // 左面
4, 5, 1, 1, 0, 4, // 底面
3, 2, 6, 6, 7, 3, // 顶面
];
这将创建一个简单的立方体的顶点数据，并定义了每个面的顶点索引。
步骤 7：创建缓冲区对象
为了将顶点数据传递给 GPU，我们需要创建一个缓冲区对象。我们可以使用以下 JavaScript 代码来实现：
// 创建顶点缓冲区对象
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// 创建索引缓冲区对象
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
这将创建一个顶点缓冲区对象和一个索引缓冲区对象，并将顶点数据和索引数据分别绑定到这两个缓冲区对象上。
步骤 8：将缓冲区对象绑定到着色器属性
在绘制之前，我们需要将顶点缓冲区对象绑定到着色器属性上。我们可以使用以下 JavaScript 代码来实现：
// 获取属性位置
var aPosition = gl.getAttribLocation(shaderProgram, "aPosition");
// 设置属性指针
gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aPosition);
这将获取属性的位置，并将其设置为顶点着色器中的 aPosition 属性。然后，我们将属性指针启用，以便 WebGL 知道如何解释顶点缓冲区中的数据。
步骤 9：设置着色器 uniform 变量
最后，我们需要设置着色器中的 uniform 变量。uniform 变量是可以从 JavaScript 代码中传递给着色器的值。我们可以使用以下 JavaScript 代码来传递矩阵变量的值：
// 获取 uniform 变量的位置
var uModelViewMatrix = gl.getUniformLocation(shaderProgram, "uModelViewMatrix");
var uProjectionMatrix = gl.getUniformLocation(shaderProgram, "uProjectionMatrix");
// 创建矩阵变量
var modelViewMatrix = new Float32Array(16);
var projectionMatrix = new Float32Array(16);
// 设置矩阵变量的值
// ...
// 将矩阵变量传递给着色器
gl.uniformMatrix4fv(uModelViewMatrix, false, modelViewMatrix);
gl.uniformMatrix4fv(uProjectionMatrix, false, projectionMatrix);
这将获取 uniform 变量的位置，并创建并设置矩阵变量的值，然后将其传递给着色器。
步骤 10：绘制图形
现在我们已经完成了所有的准备工作，可以开始实际绘制图形了。我们可以使用以下 JavaScript 代码来实现：
// 清除屏幕
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// 绘制图形
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
这将清除屏幕并使用之前定义的索引数组绘制图形。
结论
通过遵循上述步骤，我们可以使用 WebGL 创建令人眼花缭乱的 3D 图形效果。这只是一个简单的入门教程，WebGL 还有很多其他功能可以探索和应用。
希望本教程能对你有所帮助，祝你在使用 WebGL 创建 3D 图形时取得成功！
本文来自极简博客，作者：温暖如初，转载请注明原文链接：使用 WebGL 创建交互式的 3D 图形效果
