WebGL - 示例应用程序：初学者指南

你好，未来的 WebGL 巫师们！我很高兴能成为你们在这个令人兴奋的 WebGL 世界之旅的向导。作为一名拥有多年经验的计算机科学教师，我见证了无数学生在网上创建他们的第一个 3D 图形时的激动时刻。今天，我们将一起开始同样的冒险。那么，系好安全带，让我们跳进去吧！

WebGL - Sample Application

什么是 WebGL？

在我们开始编码之前，让我们了解一下 WebGL 是什么。WebGL（Web 图形库）是一个 JavaScript API，它允许我们在不使用插件的情况下在网页浏览器中渲染交互式 3D 和 2D 图形。它就像给你的网页赋予了超能力，以创建令人惊叹的视觉效果！

WebGL 应用程序的结构

一个 WebGL 应用程序通常由几个关键组件组成。让我们来分解它们：

1. HTML 画布

画布是我们的绘图板。所有的魔法都在这里发生！

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

这将在你的网页上创建一个 640x480 像素的画布。把它想象成艺术家的画架，准备好你的杰作！

2. JavaScript 代码

这是我们编写 WebGL 指令的地方。就像给我们的虚拟艺术家下达指令。

3. 顶点着色器和片段着色器

这些是在 GPU 上运行的特别程序。它们就像我们的 3D 图形的画笔和颜料盘。

4. 缓冲区

缓冲区存储我们的 3D 对象的数据。把它们想象成我们 3D 雕塑的原始材料。

现在我们知道了食材，让我们烹饪一个美味的 WebGL 应用程序！

示例应用程序

让我们创建一个简单的 WebGL 应用程序来绘制一个彩色三角形。我们会详细讲解每个步骤。

步骤 1：设置 HTML

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

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="640" height="480">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script src="webgl-demo.js"></script>
</body>
</html>

这会创建我们的画布并链接到我们接下来要创建的 JavaScript 文件。

步骤 2：初始化 WebGL

现在，让我们创建我们的 webgl-demo.js 文件并设置 WebGL：

function main() {
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl");

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

// WebGL 准备就绪！
}

window.onload = main;

这个函数获取我们的画布，初始化 WebGL，并检查它是否被支持。就像在开始之前检查我们是否有所有的绘画材料。

步骤 3：创建着色器

现在，让我们创建我们的顶点和片段着色器：

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 vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1, 0, 0.5, 1);
}
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

这些着色器定义了我们的三角形将被定位和着色的方式。顶点着色器定位我们的三角形，而片段着色器为它提供了漂亮的粉红色。

步骤 4：创建程序

现在，让我们将我们的着色器链接到一个程序：

function createProgram(gl, vertexShader, fragmentShader) {
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));
return null;
}

return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

这就像组装我们的艺术工具并准备好绘画！

步骤 5：创建缓冲区

现在，让我们创建一个缓冲区来存储我们的三角形的顶点：

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
0, 0,
0, 0.5,
0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

这定义了我们的三角形的形状。就像在开始绘画之前勾勒出基本的形状。

步骤 6：渲染三角形

最后，让我们绘制我们的三角形：

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

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

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

这是魔法发生的地方！我们清除画布，设置我们的程序和缓冲区，最后绘制我们的三角形。

结论

恭喜你！你刚刚创建了你的第一个 WebGL 应用程序。你已经迈出了进入网络更大 3D 图形世界的第一步。记住，就像任何艺术形式一样，掌握 WebGL 需要练习和耐心。但是，随着每行代码，你都在绘制一个更加生动和交互的网络。继续探索，继续创造，最重要的是，享受乐趣！

下面是一个总结我们使用的主要方法的表格：

方法	描述
`getContext("webgl")`	初始化 WebGL
`createShader()`	创建着色器
`shaderSource()`	定义着色器源代码
`compileShader()`	编译着色器
`createProgram()`	创建程序
`attachShader()`	将着色器附加到程序
`linkProgram()`	链接程序
`createBuffer()`	创建缓冲区
`bindBuffer()`	绑定缓冲区
`bufferData()`	用数据填充缓冲区
`viewport()`	设置视口
`clearColor()`	设置清除颜色
`clear()`	清除画布
`useProgram()`	使用程序
`getAttribLocation()`	获取属性位置
`enableVertexAttribArray()`	启用顶点属性数组
`vertexAttribPointer()`	指定顶点数据的布局
`drawArrays()`	渲染图元

在继续你的 WebGL 之旅时，请将此表格保留在身边。快乐编码！

Credits: Image by storyset