WebGL - 上下文

上一页
下一页

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

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

创建HTML-5画布元素

在第5章中，我们讨论了如何创建HTML-5画布元素。在HTML-5文档的body内，编写一个画布，为其命名，并将其作为参数传递给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不是必需的。此参数提供各种接受布尔值作为参数的选项，如下所示：

序号 属性和描述
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时，会创建一个绘图缓冲区。上下文对象管理OpenGL状态并渲染到绘图缓冲区。

WebGLRenderingContext

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

序号 属性和描述
1

Canvas

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

drawingBufferWidth

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

drawingBufferHeight

此属性表示绘图缓冲区的实际高度。它可能与HTMLCanvasElement的height属性不同。
打印页面
上一页
下一页
广告