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" 文件应包含以下内容

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="glcanvas" width="640" height="480"></canvas>
  </body>
</html>

请注意，这声明了一个画布，我们的示例将在其中绘制。

准备 WebGL 上下文

将以下代码添加到 "webgl-demo.js" 文件

js
main();

//
// start here
//
function main() {
  const canvas = document.querySelector("#glcanvas");
  // 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 的变量。

一旦我们有了画布，我们就会尝试通过调用 getContext() 并传递字符串 "webgl" 来获取它的 WebGLRenderingContext。如果浏览器不支持 WebGL，getContext() 将返回 null，在这种情况下，我们会向用户显示一条消息并退出。

如果上下文成功初始化，变量 gl 将是我们的引用。在这种情况下，我们将清除颜色设置为黑色，并将上下文清除为该颜色（用背景颜色重新绘制画布）。

此时，您拥有足够的代码来成功初始化 WebGL 上下文，您应该会得到一个大的黑色空框，准备并等待接收内容。

查看完整代码 | 在新页面中打开此演示

另请参阅

  • WebGL 基础
  • 现代 OpenGL 入门： Joe Groff 写的一系列关于 OpenGL 的不错的文章，从其历史到重要的图形管道概念，提供了一个清晰的 OpenGL 简介，还包括一些示例来演示 OpenGL 的工作原理。如果您不知道什么是 OpenGL，这是一个不错的起点。