WebGL 入门
WebGL 使 Web 内容可以使用基于 OpenGL ES 2.0 的 API，在支持它的浏览器中，通过 HTML canvas 执行 2D 和 3D 渲染，而无需插件。
WebGL 程序由 JavaScript 编写的控制代码和在计算机图形处理单元 (GPU) 上执行的着色器代码 (GLSL) 组成。WebGL 元素可以与其他 HTML 元素混合，并与其他页面部分或页面背景进行合成。
本文将向您介绍 WebGL 的基础知识。假设您已经了解 3D 图形涉及的数学知识，本文并不试图自己教授 3D 图形概念。
本教程中的代码示例也可以在 GitHub 上的 webgl-examples 文件夹 中找到。
值得注意的是，这一系列文章介绍的是 WebGL 本身；但是，有许多可用的框架可以封装 WebGL 的功能，从而更轻松地构建 3D 应用程序和游戏，例如 THREE.js 和 BABYLON.js。
准备 3D 渲染
首先，创建两个新文件
- "index.html"
- "webgl-demo.js"
"index.html" 文件应包含以下内容
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WebGL Demo</title>
<script src="webgl-demo.js" type="module"></script>
</head>
<body>
<canvas id="gl-canvas" width="640" height="480"></canvas>
</body>
</html>
请注意，这声明了一个我们的示例将绘制的 canvas。
准备 WebGL 上下文
将以下代码添加到 "webgl-demo.js" 文件中
main();
//
// start here
//
function main() {
const canvas = document.querySelector("#gl-canvas");
// Initialize the GL context
const gl = canvas.getContext("webgl");
// Only continue if WebGL is available and working
if (gl === null) {
alert(
"Unable to initialize WebGL. Your browser or machine may not support it.",
);
return;
}
// Set clear color to black, fully opaque
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear the color buffer with specified clear color
gl.clear(gl.COLOR_BUFFER_BIT);
}
当我们的脚本加载时，会调用 main() 函数。它的目的是设置 WebGL 上下文并开始渲染内容。
我们在这里做的第一件事是获取对 canvas 的引用，并将其分配给名为 canvas 的变量。
一旦我们有了 canvas，我们就尝试通过调用 getContext() 并传入字符串 "webgl" 来获取它的 WebGLRenderingContext。如果浏览器不支持 WebGL，getContext() 将返回 null，在这种情况下，我们会向用户显示一条消息并退出。
如果上下文成功初始化，变量 gl 就是我们的引用。在这种情况下，我们将清除颜色设置为黑色，并将上下文清除为该颜色（用背景色重绘 canvas）。
此时，您已经有了足够多的代码，可以成功初始化 WebGL 上下文，并且您将得到一个大的黑色空白框，已准备好接收内容。
另见
- WebGL 基础知识
- 现代 OpenGL 入门：Joe Groff 撰写的一系列关于 OpenGL 的精彩文章，清晰地介绍了 OpenGL 的历史和重要的图形管线概念，并包含一些示例来演示 OpenGL 的工作原理。如果您对 OpenGL 一无所知，这是一个很好的起点。