【WebGL】WebGL入门
发表于2018-05-03
WebGL程序要同时使用HTML和将GLSL ES代码放在JavaScript中来创建和显示三维图形。下面就和大家介绍下WebGL的基础入门知识，来了解WebGL使用方法。
Canvas是什么？
在HTML5中有一个很重要的标签叫做<canvas> — 它定义了网页上的绘制区域。
如果没有WebGL，JavaScript只能在<canvas>上绘制二维图形，有了WebGL，就可以在上面绘制三维图形了。添加了WebGL的JavaScript程序又被称为WebGL程序。
在HTML5之前，如果想在网页上显示图像只能够使用<img>标签，并且只能显示静态图片。自从HTML5引入了<canvas>标签后，它就允许JavaScript动态的绘制图形。
Canvas到底是什么？
Canvas — 译为画布，即绘画的地方。所以<canvas>标签定义了网页上的绘图区域。有了<canvas>，就可以使用JavaScript绘制想要的东西。<canvas>提供了一些简单的绘画函数，来绘制点、线、矩形、圆等等。
在HTML中，<canvas>的坐标系统是横轴为x轴，纵轴为y轴。原点在屏幕的左上方，x轴向右为正方向，y轴向下为正方向。
使用<canvas>标签
上面说到<canvas>提供了一些简单的绘图函数，现在通过一个简单的绘制矩形的示例来了解一下<canvas>提供的核心函数。
第一步，创建一个HTML文件，名为HelloRect.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Draw a blue Rect</title>
</head>
<body onload = "main()">
<canvas id = "example" width = "400" height = "400">
Please use a browser that support "canvas"
</canvas>
<script src="HelloRect.js"></script>
</body>
</html>
上面的代码块，第8行<canvas>标签，可以看到这回一个非常常见的HTML形式。定义了<canvas>的id、宽和高三个属性。
除此之外，为了让HTML执行JavaScript代码，和其他语言一样需要一个入口函数。所以在第7行<body>标签中，我们指定onload属性让它执行main()函数。
那么这个main()函数从哪里找呢？有两种方式：可以直接写在HTML文件中，也可以写在JS文件中。
为了代码的易读性并且让HTML与JS文件分离，我选择了第二种方式。所以在第11行中，需要使用<script>标签并且要为src属性指定对应的JS脚本路径。
第二步，创建JavaScript文件，名为HelloRect.js(尽量让HTML文件和JS文件的文件名保持一致)：
//HelloRect.js
function main()｛
var canvas = document.getElementById("example");
if(!canvas)｛
console.log("Failed to find <canvas>");
return false;
｝
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0, 255, 255, 1.0)";
ctx.fillRect(120, 10, 150, 150);
｝
可以看到，这里就是<body>标签中加载的main()函数了。
首先，第2行，通过document.getElementById函数来获取<canvas>元素，这个方法的参数就是<canvas>中的id属性。并且判断是否获取到了<canvas>。
然后，第8行，通过<canvas>元素来获取绘图上下文。
ps：<canvas>元素可以灵活地支持二维图形和三维图形，但是它不直接提供绘图方法，而是提供一种叫做上下文(context)的机制来进行绘图。所以在绘图前要先获取上下文。
就是通过上面的getContext()函数来获取上下文。它的参数指定了上下文的类型是二维还是三维。
最后，通过获取到的上下文来绘制二维图形，分别是：第10行的fillStyle属性用来指定填充颜色，第11行的fillRect用来指定颜色填充的矩形区域。
现在双击HTML文件浏览，就可以看到屏幕上400*400的区域内，有一个我们指定的fillRect大小的蓝色填充块。
ps：<canvas>默认是透明的，所以我们并看不清楚400*400的<canvas>大小，这个会在后面讲到。
最短的WebGL程序：清空绘制区
在上面，我们知道了如何使用<canvas>来绘制一个简单的矩形。上面的程序块中其实没有使用到WebGL。
现在就来看一个最简单的WebGL程序：清空绘制区。
首先，创建一个HTML文件叫做：HelloWebGL.html，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello WebGL</title>
</head>
<body onload = "main()">
<canvas id = "webgl" width = "400" height = "400">
please use the browser supporting "canvas"
</canvas>
<script src = "../lib/webgl-utils.js"></script>
<script src = "../lib/webgl-debug.js"></script>
<script src = "../lib/cuon-utils.js"></script>
<script src = "HelloWebGL.js"></script>
</body>
</html>
在这里，html代码几乎和第一个例子一样，设置了加载函数main()。设置了<canvas>的id、宽和高。并且在第15行引用了js文件。
与之前不同的是，在第12-14行中分别引入了三个WebGL的库。这三个库具体有什么作用，后面会慢慢讲到。
然后，依然是创建一个文件名相同的js文件：HelloWebGL.js，具体代码如下：
function main()｛
var canvas = document.getElementById("webgl");
var gl = getWebGLContext(canvas);
if (!gl)｛
console.log("Failed to get the rendering context for WebGL");
return;
｝
gl.clearColor(0,0,1,1);
gl.clear(gl.COLOR_BUFFER_BIT);
｝
这里的代码也很简单。
第4行，获取到了上下文。
不同的是：这里获取上下文不再使用<canvas>自己的getContext()函数了，而是使用了在html文件中引入的cuon-utils.js库中的getWebGLContext()函数。这个函数接受的参数是通过id获取到的<canvas>元素。
使用getWebGLContext的原因是<canvas>的getContext()在获取上下文的时候它所接收的参数在不同浏览器中会有不同。而getWebGLContext()帮我们隐藏了这些差异。并且，通过getWebGLContext()获取的上下文，让我们能够使用WebGL函数了！
第11行，设置了<canvas>的背景色。
这个函数单从名字上看有点奇怪：clearColor(r, g, b, a)。看上去像清空颜色。其实它就是使用我们所指定的rgba值来设置背景色。
注意：这里指定的rgba值范围都是[0, 1]。而之前的fillStyle指定的rgba值，rgb为[0, 255]，a为[0, 1]。
第12行，通过clear()函数，用之前指定的背景色来清空绘图区域(用背景色填充绘图区域，擦除原有绘制内容)。
注意：这里的参数是gl.COLOR_BUFFER_BIT。这是因为：clear()方法继承自OpenGL，它是基于多基本缓冲区模型。所以清空绘图区域，实际上是在清空颜色缓存区。所以这个参数也能够接受其他的缓存区作为参数。
参数列表图下图：
对于各个缓冲区也有自己的默认值，默认值如下：
运行html文件，最后在浏览器上会看到<canvas>绘图区域内是一片蓝色。
来自：https://blog.csdn.net/xxwlzfb/article/details/52609437