📌  相关文章
📜  WebGL-上下文

📅  最后修改于: 2020-10-17 05:26:39             🧑  作者: Mango

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

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

创建HTML-5画布元素

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

例

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

现场演示

它将产生以下结果-

获取画布ID

创建画布之后，您必须获取WebGL上下文。获取WebGL绘图上下文的第一件事是获取当前canvas元素的ID。

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

例如，如果画布名称是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');

WebGLContextAttributes

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

Sr.No. Attributes & Description
1

Alpha

If its value is true, it provides an alpha buffer to the canvas.

By default, its value is true.
2

depth

If its value is true, you will get a drawing buffer which contains a depth buffer of at least 16 bits.

By default, its value is true.
3

stencil

If its value is true, you will get a drawing buffer which contains a stencil buffer of at least 8 bits.

By default, its value is false.
4

antialias

If its value is true, you will get a drawing buffer which performs anti-aliasing.

By default, its value is true.
5

premultipliedAlpha

If its value is true, you will get a drawing buffer which contains colors with pre-multiplied alpha.

By default, its value is true.
6

preserveDrawingBuffer

If its value is true, the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.

By default, its value is false.

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

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

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

WebGLRenderingContext

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

Sr.No. Attributes & Description
1

Canvas

This is a reference to the canvas element that created this context.
2

drawingBufferWidth

This attribute represents the actual width of the drawing buffer. It may differ from the width attribute of the HTMLCanvasElement.
3

drawingBufferHeight

This attribute represents the actual height of the drawing buffer. It may differ from the height attribute of the HTMLCanvasElement.