三、在Canvas中使用WebGL

  上一篇介绍了如何在<canvas>标签中绘制2d图形;接下来,我们看看如何在<canvas>中使用WebGL来绘制3d图形。

  我们开始编写一个最短的WebGL程序:Hello WebGL;这个程序的功能非常简单,使用指定颜色清空<canvas>标签的绘图区;下图显示了程序运行的效果,清空(用黑色)了<canvas>定义的矩形区域。

 

  我们来看下代码,先看一下Hello WebGL.html:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="Generator" content="EditPlus®">
 6     <meta name="Author" content="Mirror">
 7     <meta name="Keywords" content="">
 8     <meta name="Description" content="">
 9     <title>Document</title>
10     <!--《WebGL编程指南》的作者为读者编写的WebGL辅助函数-->
11     <script src="lib/webgl-utils.js"></script>
12     <script src="lib/webgl-debug.js"></script>
13     <script src="lib/cuon-utils.js"></script>
14     <script>
15         function main() {
16             //获取<canvas>标签。
17             var canvas = document.getElementById("myCanvas");
18             //获取WebGL绘图上下文。
19             var gl = getWebGLContext(canvas);
20             //如果浏览器不支持WebGL则提示错误。
21             if (!gl) {
22                 console.log("Failed to get the rendering context for WebGL.");
23                 return;
24             }
25             //指定清除颜色缓冲区的颜色。
26             gl.clearColor(0,0,0,1);
27             //用指定的颜色清除颜色缓冲区。
28             gl.clear(gl.COLOR_BUFFER_BIT);
29         }
30     </script>
31 </head>
32 <body onload="main()">
33     <!--定义<canvas>标签,通过width属性和height属性规定它是一片400×400的绘制区域-->
34     <canvas id="myCanvas" width="400" height="400">
35         <!--当浏览器不支持时,会直接忽略<canvas>标签,而直接显示下面这一行提示-->
36         Please use the browser supporting "canvas".
37     </canvas>
38 </body>
39 </html>
Hello WebGL.html

  文件结构很简单:首先使用<canvas>元素定义绘图区域;然后指定当页面加载完成时,调用main()函数。

  在main()函数中,我们通过id找到<canvas>标签;直到这一步,我们发现,跟绘制2d图形的步骤是一模一样的。但是下一句,获取绘图上下文,好像有点不一样了;在绘制2d图形的时候,我们是通过调用canvas的getContext方法,传入“2d”参数来获取2d图形的回绘图上下文的;这里需要解释一下,通常来说,我们应该使用canvas.getContext()函数来获取绘图上下文(就像之前那样)。但是在获取WebGL绘图上下文时,canvas.getContext()函数接收的参数,在不同浏览器中会不同(虽然大部分浏览器都接收字符串“expeimental-webgl”或“webgl”,但并非所有浏览器都这样),所以我们使用getWebGLContext(canvas)来隐藏不同浏览器之间的差异。getWebGLContext(canvas, opt_debug)函数位于cuon-utils.js文件中。在代码里,通过<script>标签引入了3个js文件,这3个js文件是《WebGL编程指南》的作者写的,里面包含了一些对WebGL编程有用的辅助函数;

  getWebGLContext(canvas, opt_debug)函数的功能是:获取WebGL绘图上下文;如果开启了debug属性,遇到错误时将在控制台显示错误消息。以下是该函数的具体说明:

 

  在获取到绘图上下文以后,我们就可以绘制图形了,并且可以绘制3d图形了;这也说明,WebGL已经调用成功,我们现在可以使用WebGL函数了。我们将上下文放到名为gl的变量中。有了这个上下文,我们就可以设置颜色来清除<canvas>标签指定的绘图区了。在之前绘制2d图形时,我们在绘制之前就指定了绘图颜色。在WebGL中,是相似的,清空绘图区之前也需要指定颜色。gl.clearColor(RGBA)函数通过传入RGBA格式的颜色参数指定颜色。我们在代码中指定了黑色,也可以随意指定其他颜色。在绘制2d图形时,RGBA每个分量的取值范围是0-255之间;但是在WebGL中,每个分量的取值范围是0-1,这和OpenGL保持了一致。一旦指定了颜色,这个颜色就会驻存在WebGL系统中,直到你重新指定新的颜色。在这之前,你可以无数次的使用该颜色进行清除绘图区而无须重新指定。

  清除绘图区我们使用 gl.clear(gl.COLOR_BUFFER_BIT)函数;你可能觉得很奇怪,参数不应该是表示绘图区的<canvas>吗?这是由于gl.Clear()函数继承自OpenGL,它基于多基本缓冲区模型,比二维绘图上下文要复杂得多。清空绘图区,实际上是在清空颜色缓冲区(通过指定的颜色去擦除已经绘制的内容),传递gl.COLOR_BUFFER_BIT参数就是在告诉WebGL清空颜色缓冲区。如果在使用该函数之前我们没有指定任何颜色,那么默认会以RGBA(0,0,0,0)作为清除颜色,这个颜色是全透明的,替换出来的结果就是什么颜色都没有,显示为浏览器本身的颜色。

  这一章我们介绍了如何建立一个WebGL程序以及使用一些简单的WebGL相关函数,下一章我们介绍如何使用WebGL绘制基本图形。

  原文中引用的的js包 点击下载】 

posted @ 2014-12-23 23:22 Mirror-PC 阅读(...) 评论(...) 编辑 收藏