WebGL - 上下文
要编写 WebGL 应用程序，第一步是获取 WebGL 渲染上下文对象。此对象与 WebGL 绘制缓冲区交互，并可调用所有 WebGL 方法。执行以下操作以获取 WebGL 上下文 −
- 创建 HTML-5 画布
- 获取画布 ID
- 获取 WebGL
创建 HTML-5 画布元素
在第 5 章中，我们讨论了如何创建 HTML-5 画布元素。在 HTML-5 文档的主体中，编写画布、为其命名，并将其作为参数传递给属性 id。您可以使用 width 和 height 属性(可选)定义画布的尺寸。
示例
以下示例显示如何创建尺寸为 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 绘图上下文对象或简称 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');
WebGLContextAttributes
参数 WebGLContextAttributes 不是必需的。此参数提供各种接受布尔值的选项，如下所示 −
| Sr.No. | 属性 &描述 |
|---|---|
| 1 |
Alpha 如果其值为 true，则为画布提供一个 alpha 缓冲区。 默认情况下，其值为 true。 |
| 2 |
depth 如果其值为 true，则将获得一个包含至少 16 位深度缓冲区的绘图缓冲区。 默认情况下，其值为 true。 |
| 3 |
stencil 如果其值为 true，则将获得一个包含至少 8 位模板缓冲区的绘图缓冲区位。 默认情况下，其值为 false。 |
| 4 |
antialias 如果其值为 true，您将获得一个执行抗锯齿的绘图缓冲区。 默认情况下，其值为 true。 |
| 5 |
premultipliedAlpha 如果其值为 true，您将获得一个包含预乘 alpha 的颜色的绘图缓冲区。 默认情况下，其值为 true。 |
| 6 |
preserveDrawingBuffer 如果其值为 true，则缓冲区将不会被清除，并将保留其值，直到作者清除或覆盖为止。 默认情况下，其值为 false。 |
以下代码片段显示了如何创建带有模板缓冲区的 WebGL 上下文，该上下文不会执行抗锯齿。
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });
在创建 WebGLRenderingContext 时，会创建一个绘图缓冲区。 Context 对象管理 OpenGL 状态并渲染到绘图缓冲区。
WebGLRenderingContext
它是 WebGL 中的主要接口。它代表 WebGL 绘图上下文。此接口包含用于在绘图缓冲区上执行各种任务的所有方法。此接口的属性如下表所示。
| Sr.No. | 属性 &描述 |
|---|---|
| 1 | Canvas 这是对创建此上下文的画布元素的引用。 |
| 2 | drawingBufferWidth 此属性表示绘图缓冲区的实际宽度。它可能与 HTMLCanvasElement 的 width 属性不同。 |
| 3 | drawingBufferHeight 此属性表示绘图缓冲区的实际高度。它可能与 HTMLCanvasElement 的高度属性不同。 |
