WebGL-Context

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

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

创建HTML-5画布元素

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

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

<!DOCTYPE HTML>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>创建HTML-5画布元素 - web176教程网|web176.com</title>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

运行看下效果吧。

获取画布ID

创建画布之后,必须获取WebGL Context。获取WebGL绘图Context的第一件事是获取当前canvas元素的ID。

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

例如,如果画布名称为my_canvas,则获取画布ID,如下所示-

var canvas = document.getElementById('my_Canvas');

获取WebGL绘图上下文

要获取WebGLRenderingContext对象(或WebGL Drawing上下文对象或简单的WebGL上下文),请调用当前HTMLCanvasElementgetContext()方法。getContext()的语法如下-

canvas.getContext(contextType, contextAttributes);

将字符串webglexperimental-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。
2depth
如果其值为true,则将获得一个绘图缓冲区,其中包含至少16位的深度缓冲区。默认情况下,其值为true。
3stencil
如果其值为true,则将获得一个绘图缓冲区,其中包含至少8位的模板缓冲区。默认情况下,其值为false。
4antialias
如果其值为true,则将获得执行抗锯齿的图形缓冲区。默认情况下,其值为true。
5premultipliedAlpha
如果其值为true,则将获得一个绘图缓冲区,其中包含带有预乘alpha的颜色。默认情况下,其值为true。
6preserveDrawingBuffer
如果其值为true,则缓冲区将不被清除,并保留其值,直到作者清除或覆盖。默认情况下,其值为false。

下面的代码片段显示了如何使用模板缓冲区创建WebGL context。

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

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

WebGLRenderingContext

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

序号属性和说明
1个Canvas
这是对创建此上下文的canvas元素的引用。
2drawingBufferWidth
此属性表示绘图缓冲区的实际宽度。它可能不同于HTMLCanvasElement的width属性。
3drawingBufferHeight
此属性表示绘图缓冲区的实际高度。它可能不同于HTMLCanvasElement的height属性。

作者:terry,如若转载,请注明出处:https://www.web176.com/webgl/828.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2020年10月30日 下午3:29
下一篇 2020年10月30日 下午3:45

相关推荐

发表回复

登录后才能评论