WebGL - 绘制四边形

你好，有抱负的网页开发者们！今天，我们将踏上一段激动人心的旅程，进入 WebGL 的世界，学习如何绘制一个四边形（简称 "quad"）。如果你是编程新手，不用担心——我会像有经验的老师一样耐心地引导你完成每一个步骤，我已经帮助无数像你一样的学生了。

WebGL - Drawing a Quad

什么是 WebGL？

在我们开始绘制四边形之前，让我们先了解一下 WebGL 是什么。WebGL（Web 图形库）是一个强大的 JavaScript API，它允许我们在网页浏览器中创建令人惊叹的 2D 和 3D 图形。它就像一支魔法的画笔，可以将你的想象力带到网页上！

绘制四边形的步骤

现在，让我们将绘制四边形的过程分解成可管理的步骤。把它想象成盖房子——我们将从基础开始，然后逐步构建。

步骤 1：设置 HTML 画布

首先，我们需要一个画布来绘制。在 HTML 中，我们使用 <canvas> 元素。这就像是为绘画设置一个画架。

<canvas id="myCanvas" width="600" height="400">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

步骤 2：初始化 WebGL 上下文

接下来，我们需要获取我们的 WebGL 上下文。这就像拿起我们的 WebGL 魔法画笔。

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

if (!gl) {
console.log('WebGL 不支持，退回到 experimental-webgl');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('您的浏览器不支持 WebGL');
}

步骤 3：创建顶点着色器

现在，我们将创建一个顶点着色器。这告诉 WebGL 要在哪里绘制我们的四边形角。

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

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

步骤 4：创建片段着色器

片段着色器决定了我们的四边形将是什么颜色。让我们将其设置为欢快的蓝色！

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

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

步骤 5：创建并链接程序

现在，我们将创建一个程序并将我们的着色器链接到它。这就像是将我们的画笔和颜料放在一起。

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

步骤 6：创建缓冲区并加载顶点数据

是时候定义我们的四边形角了！

const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7,  0.5,
-0.7,  0.5
];

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

步骤 7：将位置缓冲区连接到属性

我们需要告诉 WebGL 如何读取我们的位置数据。

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

步骤 8：绘制四边形

终于到了我们一直等待的时刻——让我们绘制我们的四边形！

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

示例 - 绘制四边形

现在，让我们将所有内容组合在一起，形成一个完整的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL 四边形</title>
</head>
<body>
<canvas id="myCanvas" width="600" height="400">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

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

if (!gl) {
alert('您的浏览器不支持 WebGL');
}

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

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

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

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

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

const positions = [
-0.7, -0.5,
0.7, -0.5,
0.7,  0.5,
-0.7,  0.5
];

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

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

gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
</script>
</body>
</html>

就这样！你有了自己的 WebGL 四边形。当你在一个浏览器中打开这个 HTML 文件时，你应该会在画布上看到一个漂亮的蓝色四边形。

结论

恭喜你绘制了你的第一个 WebGL 四边形！我们今天涵盖了很多内容，从设置画布到创建着色器，最后绘制我们的形状。记住，学习 WebGL 就像学习画画一样——需要练习和耐心。如果一开始没有立即掌握，不要气馁。继续尝试，很快你就能在网页上创建惊人的 3D 图形了！

在我们的下一课中，我们将探索如何为我们的 WebGL 作品添加交互性。在此之前，祝编码愉快！

Credits: Image by storyset