WebGL - 绘制点

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，进入 WebGL 的世界，特别是专注于绘制点。作为你友好邻里的计算机老师，我会一步一步地引导你完成这次冒险。如果你之前从未编写过代码，也不要担心——我们将从最基础的内容开始，逐步提升。所以，拿起你的虚拟铅笔，让我们一起跳进去！

WebGL - Drawing Points

什么是 WebGL？

在我们开始绘制点之前，让我们先了解一下 WebGL 是什么。WebGL（Web 图形库）是一个强大的 JavaScript API，它允许我们在网页浏览器中创建 2D 和 3D 图形。它就像一支神奇的画笔，可以直接在你的网页上绘画！

需要的步骤

要使用 WebGL 绘制点，我们需要遵循一系列步骤。把它想象成创建数字艺术的食谱。下面是这些步骤的总结表格：

步骤	描述
1	获取 canvas 元素
2	获取 WebGL 渲染上下文
3	定义几何形状（顶点）
4	创建顶点着色器
5	创建片段着色器
6	创建着色器程序
7	将数据加载到 GPU
8	设置视口
9	清除画布
10	绘制点

现在，让我们分解每个步骤，看看它们是如何组合在一起创建我们的杰作的！

示例 - 使用 WebGL 绘制三个点

让我们通过一个示例来了解如何在我们画布上绘制三个彩色的点。我会详细解释代码的每个部分，这样你就会确切地了解发生了什么。

步骤 1：设置 HTML

首先，我们需要创建一个带有 canvas 元素的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
<title>我的第一个 WebGL 点</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">
你的浏览器不支持 canvas 元素。
</canvas>
<script src="webgl-points.js"></script>
</body>
</html>

这会创建一个将成为我们绘图板的 canvas。我们接下来要创建的 JavaScript 文件将完成所有的魔法！

步骤 2：创建 JavaScript 文件

现在，让我们创建一个名为 webgl-points.js 的文件并开始编写我们的 WebGL 应用程序：

// 步骤 1：获取 canvas 元素
const canvas = document.getElementById('myCanvas');

// 步骤 2：获取 WebGL 渲染上下文
const gl = canvas.getContext('webgl');

if (!gl) {
console.error('WebGL 不支持');
throw new Error('WebGL 不支持');
}

// 步骤 3：定义几何形状（顶点）
const vertices = new Float32Array([
0.0, 0.5,    // 点 1
-0.5, -0.5,  // 点 2
0.5, -0.5    // 点 3
]);

// 步骤 4：创建顶点着色器
const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 步骤 5：创建片段着色器
const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// 步骤 6：创建着色器程序
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// 步骤 7：将数据加载到 GPU
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

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

// 步骤 8：设置视口
gl.viewport(0, 0, canvas.width, canvas.height);

// 步骤 9：清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 步骤 10：绘制点
gl.drawArrays(gl.POINTS, 0, 3);

现在，让我们分解这段代码并了解每个部分的作用：

理解代码

步骤 1 和 2：设置 WebGL

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

在这里，我们获取 canvas 元素并获取 WebGL 渲染上下文。这就像准备好我们的画笔和调色板！

步骤 3：定义几何形状

const vertices = new Float32Array([
0.0, 0.5,    // 点 1
-0.5, -0.5,  // 点 2
0.5, -0.5    // 点 3
]);

我们在 2D 空间中定义了三个点。坐标范围在 x 和 y 方向的 -1 到 1 之间。想象我们的画布分为四个象限，(0,0) 在中心。

步骤 4 和 5：创建着色器

着色器是运行在 GPU 上的特殊程序。我们有两种类型：

顶点着色器：确定我们点的位置。
片段着色器：确定我们点的颜色。

const vertexShaderSource = `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
gl_PointSize = 10.0;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

顶点着色器设置我们点的位置和大小。片段着色器将颜色设置为红色（RGB 中的 1.0, 0.0, 0.0）。

步骤 6 和 7：创建程序和加载数据

这些步骤涉及创建着色器程序并将我们的顶点数据加载到 GPU 的内存中。

步骤 8 和 9：设置视图

我们设置视口以匹配我们的 canvas 大小，并将画布清除为黑色。

步骤 10：绘制点

gl.drawArrays(gl.POINTS, 0, 3);

最后，我们绘制我们的三个点！

结论

恭喜你！你刚刚创建了你的第一个 WebGL 应用程序，用于绘制点。这只是你进入迷人计算机图形世界的开始。随着你继续探索，你将能够创建更复杂的形状，添加动画，甚至尝试 3D 图形。

记住，学习 WebGL 就像学习绘画一样——它需要练习和耐心。如果一开始事情没有完美地工作，不要气馁。继续实验，很快你就能创作出数字杰作！

在我们的下一课中，我们将探索如何为我们的点添加不同的颜色并创建更复杂的形状。在此之前，祝你编程愉快！

Credits: Image by storyset