WebGL 入门-WebGL简介与3D图形学

什么是WebGL？

WebGL是一项使用JavaScript实现3D绘图的技术，浏览器无需插件支持，Web开发者就能借助系统显卡（GPU）进行编写代码从而呈现3D场景和对象。

WebGL基于OpenGL ES 2.0，OpenGL ES 是 OpenGL 三维图形 API 的子集，针对手机、平板电脑和游戏主机等嵌入式设备而设计。浏览器内核通过对OpenGL API的封装，实现了通过JavaScript调用3D的能力。WebGL 内容作为 HTML5 中的Canvas标签的特殊上下文实现在浏览器中。

WebGL标准由科纳斯组织（Khronos Group）开发和维护，Google、Mozilla、Opera和Apple 等浏览器厂商都是其中的成员，为这一标准做出了显著贡献。

WebGL支持现状

目前所有的主流桌面浏览器都已经支持WebGL，但手机端的浏览器只有部分最新版支持。

桌面浏览器

• Mozilla Firefox 4+
• Google Chrome 8+
• Internet Explorer 11+
• Safari 5.1+
• Opera 12+

移动浏览器

• Firefox 25+
• Google Chrome 31+
• Opera Mobile 12+
• Android Browser 暂不支持
• iOS Safari暂不支持
• IE Mobile 暂不支持

 

3D图形学

在真正开始学习WlebGL之前，我们还要改了解下3D图形学，有助于接下来的3D图形编程。

3D坐标系

笛卡儿坐标系相比大家都很熟悉，即数学中常见的直角坐标系，由两条互相垂直的坐标轴组成，通常标记为x轴和y轴。这种坐标系可以用于定义页面中元素的坐标位置。

而在绘制3D图形时，除了x轴和y轴，我们还需要一个z轴，用于表示深度，即3D物体距离屏幕的距离。

点、线、面和网格

3D空间内的所有物体都是由点、线及面组成。一个点由3个值组成 - x、y、z，表示3D空间内的唯一位置。2个点可以连成一条线，3个点我们就可以形成一个平面。多个面相互拼接就组成了网格。

我们常见的球体看起来很圆滑，其实是由很多个点、线、面组合而成的。

纹理贴图及材质

网格本身是没有纹理和材质的。

纹理可以定义一个网格表面的外观，可以是纯色或者是填充位图，甚至更加复杂。

材质就是网格表面的特性，模型外表是否透明、是否会反射等都是通过网格的材质所定义的。

变换和矩阵

3D网格的形状由顶点位置决定。模型变换就是利用矩阵对模型的大小、位移、旋转等进行操作。如果你不了解矩阵也无须担心，许多WebGL库都能帮助我们完成相应的操作。

摄像机、视口和投影

我们在Canvas上看到的3D空间并非一个真实的3D空间，而是用数学算法将模拟的3D空间投射到2D视口的图像而已。投影就是将模拟的三维空间内的物体映射到屏幕上生成一个二维图像的过程。投影分为正交投影和透视投影，这也就是摄像机的实现原理。

摄像机是用户观察场景的眼睛，摄像机的视野决定了透视关系和我们在Canvas上看到的内容。

着色器

为了最终的渲染模型，开发者必须精确的定义定点、变换、材质和相机之间的关系。这就是由着色器来完成的。着色器包含了将模型投射到屏幕上的算法，通常是由类C语言编写，编译并运行在图形处理单元(GPU)中。