WebGL - 上下文

要编写 WebGL 应用程序，第一步是获取 WebGL 渲染上下文对象。该对象与WebGL绘图缓冲区交互并可以调用所有WebGL方法。执行以下操作来获取 WebGL 上下文 -

  • 创建 HTML-5 画布
  • 获取画布ID
  • 获取WebGL

创建 HTML-5 Canvas 元素

在第 5 章中，我们讨论了如何创建 HTML-5 canvas 元素。在 HTML-5 文档的正文中，编写一个画布，为其命名，并将其作为参数传递给属性 id。您可以使用宽度和高度属性（可选）定义画布的尺寸。

例子

以下示例展示了如何创建尺寸为 500 × 500 的画布元素。我们使用 CSS 创建了画布边框以提高可见性。将以下代码复制并粘贴到名为my_canvas.html的文件中。

现场演示 
<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

它将产生以下结果 -

获取画布 ID

创建画布后，您必须获取 WebGL 上下文。要获取 WebGL 绘图上下文，首先要做的是获取当前画布元素的 id。

通过调用 DOM（文档对象模型）方法getElementById()获取画布 ID 。该方法接受一个字符串值作为参数，因此我们将当前画布的名称传递给它。

例如，如果画布名称是my_canvas，则获得画布 ID，如下所示：

var canvas = document.getElementById('my_Canvas');

获取 WebGL 绘图上下文

要获取 WebGLRenderingContext 对象（或 WebGL Drawing 上下文对象或简称 WebGL 上下文），请调用当前HTMLCanvasElement的getContext()方法。getContext() 的语法如下 -

canvas.getContext(contextType, contextAttributes);

传递字符串webgl或experimental-webgl作为contentType。contextAttributes参数是可选的。（继续执行此步骤时，请确保您的浏览器实现WebGL版本 1 (OpenGL ES 2.0)）。

以下代码片段展示了如何获取WebGL渲染上下文。这里gl是获取到的上下文对象的引用变量。

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContext属性

参数WebGLContextAttributes不是强制性的。此参数提供接受布尔值的各种选项，如下所示 -

先生。 属性和描述
1

Α

如果它的值为 true，它会向画布提供一个 alpha 缓冲区。

默认情况下，其值为 true。
2

深度

如果它的值为 true，您将获得一个绘图缓冲区，其中包含至少 16 位的深度缓冲区。

默认情况下，其值为 true。
3

模版

如果它的值为 true，您将获得一个绘图缓冲区，其中包含至少 8 位的模板缓冲区。

默认情况下，其值为 false。
4

抗锯齿

如果它的值为 true，您将获得一个执行抗锯齿功能的绘图缓冲区。

默认情况下，其值为 true。
5

预乘Alpha

如果它的值为 true，您将获得一个绘图缓冲区，其中包含带有预乘 alpha 的颜色。

默认情况下，其值为 true。
6

保留绘图缓冲区

如果其值为 true，则缓冲区将不会被清除，并将保留其值，直到作者清除或覆盖为止。

默认情况下，其值为 false。

以下代码片段展示了如何使用模板缓冲区创建 WebGL 上下文，该上下文不会执行抗锯齿功能。

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

在创建 WebGLRenderingContext 时，会创建一个绘图缓冲区。Context 对象管理 OpenGL 状态并渲染到绘图缓冲区。

WebGL渲染上下文

它是 WebGL 中的主要接口。它代表 WebGL 绘图上下文。该接口包含用于在绘图缓冲区上执行各种任务的所有方法。该接口的属性如下表所示。

先生。 属性和描述
1

帆布

这是对创建此上下文的画布元素的引用。
2

绘图缓冲区宽度

该属性表示绘图缓冲区的实际宽度。它可能与 HTMLCanvasElement 的宽度属性不同。
3

绘图缓冲区高度

该属性表示绘图缓冲区的实际高度。它可能与 HTMLCanvasElement 的 height 属性不同。