WebGL - Context：新手友好的指南

你好啊，未来的 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 的浏览器的后备消息（但不用担心，大多数现代浏览器都支持）。

获取 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