如果你第一次接触WebGL、Canvas等概念,可能不知道它们都是什么,所以下面会对这几个常说的概念的进行简单的解释。但是如果想真理解这几个概念,你还需要分别找一个对应代码案例测试体验下,如果只看文字,会比较抽象,无法深入理解。
SVG
svg是一套二维绘制标准,通过一个标签或者说元素来绘制一个图形,如果你有前端基础相比你能理解标签或元素的概念,比如div元素。不过场景的HTML元素,不是用来绘图而已,svg的标签可以用来绘制二维图形。
- 矩形
- 圆形
- 折线
- 多边形
- 路径
- 椭圆
- 直线
Canvas
canvas和div一样是HTML标准的一个元素,只不过canvas具有绘图功能,而div基本不具有。
<!--canvas标签创建一个宽高均为500像素,背景为蓝色的矩形画布-->
<canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
通过canvas的getContext方法返回一个上下文ctx对象,ctx对象具有一系列绘图API,这些API都可以使用使用JavaScript语言通过ctx来调用,这要比SVG灵活的多。
返回2D环境
返回2D环境,就是大家平常说的canvas,通过canvas对象可以返回webgl绘图环境,也可以返回2D绘环境,不过大家在表达的时候,2D绘图环境通常表达为canvas,而canvas返回的3D环境,使用WebGL去表述。
var ctx=canvas.getContext('2d');
WebGL
WebGL是一个技术标准,来源于比较成熟的OpenGL和OpenGL ES标准,目前大多数浏览器都能够支持WebGL技术标准。通过WebGL技术标准可以实现3D绘图。
要想实现WebGL或者说获得WebGL API来绘制三维场景,需要通过HTML的Canvas元素来实现。具体来说就是通过getContext()方法,参数是2d返回2D绘图环境,参数是’webgl’返回3D,也就是WebGL绘图环境。返回的上下文对象gl具有一系列的方法,这些方法就是WebGL API,比如
gl.linkProgram()
。其实你也可以把WebGL描述为Canvas,不过WebGL标准比较复杂,所以平时大家沟通,说到canvas,往往是指他的2D绘图功能,如果谈到canvas三维绘图,通常会说WebGL而是canvas。这就是一个约定俗成的问题,没必要深究,还是那句话,多看两句代码,要比看文字有用的多,文字的准确度是远低于代码的。
//通过getElementById()方法获取canvas画布
var canvas=document.getElementById('webgl');
//通过方法getContext()获取WebGL上下文
var gl=canvas.getContext('webgl');
Three.js
Three.js以WebGL的一款的三维引擎,对于WebGL API和着色器语言GLSL进行了封装。
如果你有前端基础你可以简单吧threejs类比为jquery,都是一个js库。虽然你也学习原生HTM和JavaScript,但是实际做项目的时候还是为依赖jquery、vuejs等前端库或框架。同样做大多数的3D项目,都没必要使用原生WebGL去编写,通常借助一款3D引擎去实现,国内使用最多的就是Three.js引擎,中文资料也比较多,如果你想学习WebGL,选择Three.js还是不错的。