WebGL 上下文(Context)
WebGL 上下文
要编写WebGL应用程序,首先要获取WebGL上下文对象,此对象与WebGL绘图缓冲区交互,并可以调用所有WebGL方法。为获取webgl上下文,执行以下操作: 创建一个html画布
获取画布id
获得WebGL
创建html画布元素
我们知道创建一个html画布元素需要:
1.在HTML5中编写canvas语句
2.给canvas一个id
3.使用高度和宽度属性更改画布尺寸(可选)
例子
下面的示例演示如何创建维度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
通过调用DOM (文档对象模型)方法getElementById()获取canvas对象。这个方法接受字符串值作为参数,因此我们将当前画布的名称传递给它。
例如,如果canvas名称是my_canvas,如下所示:
var canvas = document.getElementById('my_Canvas');获取WebGL绘图上下文
要获取WebGLRenderingContext对象(WebGL Drawing context object 或simply WebGL context) ,请调用当前html画布元素的getContext()方法。getcontext()的语法如下:
canvas.getContext(contextType, contextAttributes);
通过字符串webgl或experimental-webgl作为contentType,contextAttributes参数是可选的。(在执行此步骤时,请确保浏览器实现了WebGL version 1 (OpenGL ES 2.0)).。
以下代码片段显示如何获取webgl呈现上下文。这里gl是获得的上下文对象的引用变量。
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');WebGL ContextAttributes
参数WebGL ContextAttributes不是必须的。此参数提供各种选项,接受下面列出的属性:
| 参数名称 | 参数说明 |
|---|---|
| Alpha | 如果它的值为true,它将为画布提供一个alpha缓冲区。默认情况下为true. |
| depth | 如果其值为true,您将得到一个绘图缓冲区,其中包含至少16位的深度缓冲区,默认情况下为true. |
| stencil | 如果其值为true,您将得到一个绘图缓冲区,其中包含至少8位的模具缓冲区,默认情况下为false. |
| antialias | 如果它的值为true ,就会得到一个绘图缓冲区,它会执行抗锯齿,默认情况下为true. |
| premultipliedAlpha | 如果它的值为true,您将得到一个绘图缓冲区,其中包含带有前置放大系数的颜色,默认情况下为true. |
| preserveDrawingBuffer | 如果其值为true,则缓冲区将不被清除,并将保留其值,直到手工清除或覆盖,默认情况下为false. |
下面的代码片段显示如何使用stencil缓冲区创建WebGL上下文,并且它将不执行抗锯齿:
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });在创建WebGL WebGLRenderingContext时,创建一个绘图缓冲区。上下文对象管理OpenGL状态并呈现到绘图缓冲区。
WebGLRenderingContext
它是WebGL的主要接口,它表示WebGL绘图上下文。此接口包含用于在绘图缓冲区上执行各种任务的所有方法。下面给出了此接口的属性。
| 参数名 | 参数说明 |
|---|---|
| Canvas | 这是创建的上下文的画布元素的引用。 |
| drawingBufferWidth | 此属性表示绘图缓冲区的实际宽度。它可能与HTMLCanvasElement的宽度属性不同。 |
| drawingBufferHeight | 此属性表示绘图缓冲区的实际高度。它可能与HTMLCanvasElement的高度属性不同。 |