【WebGL】WebGL入门

发表于2018-05-03
评论0 4.1k浏览
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

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引