在第一次学习中,我知道了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>
绘图区域内是一片蓝色。