WebGL - 初学者友好的指南

你好，未来的 WebGL 巫师们！我很高兴能成为你们在这个令人兴奋的 WebGL 世界中的向导。作为一名教授计算机科学多年的老师，我可以告诉你们，WebGL 就像是你浏览器中的一支魔法画笔。它让你可以直接在网页中创建令人惊叹的 3D 图形！那么，我们卷起袖子，开始吧，好吗？

WebGL - Context

创建 HTML-5 `<canvas>` 元素

首先，我们需要一个画布来绘画。在 HTML5 中，我们有一个非常实用的东西叫做 <canvas> 元素。它就像一张白纸，我们将在上面绘制我们的 WebGL 杰作。

让我们创建我们的画布：

<canvas id="myWebGLCanvas" width="800" height="600">
你的浏览器不支持 HTML5 canvas。
</canvas>

这段代码创建了一个宽 800 像素、高 600 像素的画布。我们给它一个 ID "myWebGLCanvas" - 想象一下这就是我们的画布的名字标签。标签内的文本是针对不支持 canvas 的浏览器的备用信息（但别担心，大多数现代浏览器都支持）。

获取画布 ID

现在我们有了画布，我们需要在 JavaScript 代码中获取它。我们使用 getElementById 方法来实现。这就好比通过名字标签来称呼我们的画布。

let canvas = document.getElementById('myWebGLCanvas');

这行代码找到我们的画布元素，并将其存储在一个名为 canvas 的变量中。简单！

获取 WebGL 绘图上下文

接下来是激动人心的部分 - 获取我们的 WebGL 上下文。上下文就像是我们将在画布上使用的魔法绘图工具。

let gl = canvas.getContext('webgl');

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

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

让我们分解一下：

我们尝试使用 getContext('webgl') 来获取 WebGL 上下文。
如果这不起作用（也许浏览器比较旧），我们尝试 experimental-webgl。
如果我们仍然没有得到上下文，我们向用户提示他们的浏览器不支持 WebGL。

WebGLContextAttributes

当我们创建 WebGL 上下文时，我们可以指定一些属性来自定义其行为。这就像为我们的魔法画笔选择设置。以下是可以用的属性表：

属性	描述	默认值
alpha	画布包含一个 alpha 缓冲区	true
depth	绘图缓冲区至少有一个 16 位的深度缓冲区	true
stencil	绘图缓冲区至少有一个 8 位的模板缓冲区	false
antialias	绘图缓冲区执行抗锯齿	true
premultipliedAlpha	页面合成器会假设绘图缓冲区包含预乘 alpha 的颜色	true
preserveDrawingBuffer	缓冲区不会被清除，并将保留其值直到被清除或覆盖	false
failIfMajorPerformanceCaveat	如果系统性能较低，上下文创建将失败	false

要使用这些属性，我们可以在获取上下文时传递一个对象：

let contextAttributes = {
alpha: false,
depth: true,
stencil: true,
antialias: true,
premultipliedAlpha: false,
preserveDrawingBuffer: false,
failIfMajorPerformanceCaveat: false
};

let gl = canvas.getContext('webgl', contextAttributes);

WebGLRenderingContext

一旦我们有了 WebGL 上下文，我们就可以开始使用它的方法和属性来创建惊人的图形。WebGLRenderingContext 提供了所有 WebGL 绘图功能。

以下是一个简单的示例，它用漂亮的天蓝色清空画布：

if (gl) {
// 设置清空颜色为天蓝色
gl.clearColor(0.529, 0.808, 0.922, 1.0);

// 用指定的清空颜色清空颜色缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);
}

让我们分解一下：

gl.clearColor(0.529, 0.808, 0.922, 1.0): 这设置了我们将用来清空画布的颜色。这些数字代表红色、绿色、蓝色和 alpha 值，范围从 0 到 1。
gl.clear(gl.COLOR_BUFFER_BIT): 这实际上用我们指定的颜色清空了画布。

就这样！你已经画出了你的第一幅 WebGL 杰作 - 一幅美丽的天蓝色画布！

记住，这只是一个开始。WebGL 有大量的函数允许你创建复杂的三维图形。这就像学习绘画 - 我们从一个空白的画布和一个单一的颜色开始，但随着练习，你很快就能创造出复杂的三维世界！

在我们结束这个 WebGL 上下文的介绍时，我想起了我第一次教授这个概念的时候。我有一个学生对清空画布的不同颜色非常兴奋，他花了一整个下午创建了一个“颜色变化的情绪灯”程序。这正说明，即使是最简单的概念也能激发出惊人的创造力！

在下一课中，我们将更深入地研究 WebGL 并开始绘制一些形状。在此之前，祝你们编码愉快，愿你们的画布永远色彩斑斓！

Credits: Image by storyset