3、在Canvas中使用WebGL

时间 2019-11-19

标签 canvas 使用 webgl 繁體版

原文原文链接

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

　　咱们开始编写一个最短的WebGL程序：Hello WebGL;这个程序的功能很是简单，使用指定颜色清空<canvas>标签的绘图区；下图显示了程序运行的效果，清空（用黑色）了<canvas>定义的矩形区域。web

　　咱们来看下代码，先看一下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()函数。canvas

　　在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属性，遇到错误时将在控制台显示错误消息。如下是该函数的具体说明：
ide

　　在获取到绘图上下文之后，咱们就能够绘制图形了，而且能够绘制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相关函数，下一章咱们介绍如何使用WebGL绘制基本图形。spa

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