上一节:
下一节:

  WebGL - Context（上下文）

  • 简述

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

  • 创建 HTML-5 Canvas元素

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

    例子

    以下示例显示如何创建尺寸为 500 × 500 的Canvas元素。我们使用 CSS 为Canvas创建了一个边框以提高可见性。将以下代码复制并粘贴到名为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>
    它将产生以下结果 -

  • 获取Canvas ID

    创建Canvas后，您必须获取 WebGL 上下文。要获取 WebGL 绘图上下文，首先要做的是获取当前Canvas元素的 ID。
    通过调用 DOM（文档对象模型）方法getElementById()获取Canvas ID 。此方法接受一个字符串值作为参数，因此我们将当前Canvas的名称传递给它。
    例如，如果Canvas名称是my_canvas，则获取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');

  • WebGLContext属性

    参数WebGLContextAttributes不是强制性的。此参数提供各种接受布尔值的选项，如下所列 -
    序号 属性和说明
    1
    Alpha
    如果它的值为 true，它会为Canvas提供一个 alpha 缓冲区。
    默认情况下，它的值为真。
    2
    depth
    如果它的值为真，你将得到一个包含至少 16 位深度缓冲区的绘图缓冲区。
    默认情况下，它的值为真。
    3
    stencil
    如果其值为真，您将获得一个绘图缓冲区，其中包含至少 8 位的模板缓冲区。
    默认情况下，它的值为 false。
    4
    antialias
    如果它的值为真，您将获得一个执行抗锯齿的绘图缓冲区。
    默认情况下，它的值为真。
    5
    premultipliedAlpha
    如果它的值为真，您将获得一个绘图缓冲区，其中包含带有预乘 alpha 的颜色。
    默认情况下，它的值为真。
    6
    preserveDrawingBuffer
    如果它的值为真，缓冲区将不会被清除并且将保留它们的值直到被作者清除或覆盖。
    默认情况下，它的值为 false。
    下面的代码片段展示了如何创建一个带有模板缓冲区的 WebGL 上下文，它不会执行抗锯齿。 
    
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });
    在创建 WebGLRenderingContext 时，会创建绘图缓冲区。Context 对象管理 OpenGL 状态并渲染到绘图缓冲区。

  • WebGLRenderingContext

    它是 WebGL 中的主要接口。它表示 WebGL 绘图上下文。该接口包含用于在绘图缓冲区上执行各种任务的所有方法。下表给出了该接口的属性。
    序号 属性和说明
    1
    Canvas
    这是对创建此上下文的Canvas元素的引用。
    2
    drawingBufferWidth
    该属性表示绘图缓冲区的实际宽度。它可能不同于 HTMLCanvasElement 的宽度属性。
    3
    drawingBufferHeight
    该属性表示绘图缓冲区的实际高度。它可能不同于 HTMLCanvasElement 的高度属性。
上一节:
下一节: