WebGL让你拿浏览器作3D Render！

WebGL现在也可以作些简单的3DRer噜，只要你的浏览器有支援WebGL（IE泪目。），就可以到这个网页体验一下WebGL可以作到怎样的程度。你可以在这个页面改变物体的材质、选择光源、添加球体、立方体，以及决定物体的堆叠方式等等，一切都是基于OpenGL的呦～

WebGLPathTracing

WEBGL基础知识介绍

1、场景（scene）

场景如其名，即显示3D空间内物体的容器，就好比一个箱子是一个3D场景。

2、坐标系：

webgl使用笛卡尔坐标系（宽度、高度和深度），我们也可以指定使用其它坐标系统。

WEBGL与过去我所使用的flash3D坐标系有一些区别，在flash3d中，屏幕的左上角为坐标系原点，向下为Y轴正方向，向右为X轴正方向，而在webgl中，屏幕的中心点为原点。

但是在3D世界中还有第三个坐标轴即Z轴，它表示场景的深度。

在webgl的世界中我们可以使用左手法则来辅助记忆三个轴的正方向，伸出左手，食指伸直保持水平，中指垂直向下，拇指指向自己，其余手指收起，食指所指方向即x轴的正方向，中指所指方向即y轴正方向，拇指所指的方向即z轴的正方向。

3、投影的概念：

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

4、摄像机：

摄像机是场景内的一个观察者，人通过屏幕看到的画面实际上是3D空间内的物体映射到摄像机内的画面，这个画面很可能并不是完整的，仅仅是摄像机当前可见范围内的。这与摄像机的种类有关。

在three.js中有两种，正交摄像机和透视摄像机。

正交摄像机的视野范围就像一个正方体，正方体内的物体沿着正方体的边缘投影到每个侧面的物体大小都与立方体内的物体大小相同，所以使用正交摄像机投影到屏幕的画面我们是无法分辨物体的远近的，这种摄像机多用于在3D空间绘制2D图形，如医用检查设备，我们不使用。

透视摄像机就如一个顶部被削平的金字塔，金字塔顶部被削平的面可以理解为我们的屏幕，在金字塔内的物体沿着金字塔纵方向进行投影，并投射到顶部，假设有两个大小形状完全相同的物体分别位于金子塔内的不同高度，他们投影到顶部的影子的大小就会不同，这就是透视相机的。使用透视摄像机我们可以在平面内很容易分辨出3D空间内物体的远近。现在把金字塔放倒，将削平的顶端对这你的眼睛，这样就很容易理解在透视相机时计算机是如何渲染物体的了。

5、渲染：

渲染即执行代码在屏幕上绘制图形的过程。渲染是实时执行的，就如一个播放的电影，由许多连续的帧组成，帧就好比一场电影中的一个瞬时的画面。

6、点与向量

点是由三个值组成，x、y和z，每个点可以表示3D空间的一个唯一位置，每个点也可表示一个向量，也叫做三维向量，向量可以理解为指向场景中心的一个线段，我们知道点有三个值，这样的向量叫做单位向量或标量，它仅仅表示向量的方向，不能表示向量的长度，现在我们给一个这个标量再增加一个值，第四个值表示向量的长度，这样我们就有了一个既有长度又有方向的向量了，这样的向量叫做四维向量。

7、面、顶点与三角形：

我们知道要确定一个唯一的平面我们至少需要三个点，将三个点用线连起来就形成了一个三角平面，我们称这三个点为顶点，顶点就是图形突起的部。

8、网格模型：

3D空间内任何形状的物体都称之为模型，无论是立体模型还是平面模型都由至少三个顶点组成，将这些顶点用线连接起来就组成了模型。还需要知道在现在计算机图形学中，所有的模型，无论复杂程度，都是由多个三角形拼接而成的。我们常见的球体看起来很圆滑，其实是由很多个三角形绘制而成，由于密度很高肉眼很难察觉其边缘的顶点。

由于这些模型都是使用线条连接而成，看起来就像一张捕鱼的渔网被扭曲成各种形状，我们称这种没有材质的模型叫做网格模型（它看起来是镂空的）。

9、纹理贴图以及材质

纹理就是一个平面化的图形，它可以是纯色填充的也可以是使用位图填充的。

材质就是使用纹理构建的一种代码环境中的对象，我们将材质对象应用到模型网格上，使其更加逼真形象，达到预期设想的效果。

更加容易理解的方式：纹理好比一颗大树，材质好比是用这颗大树打造的一块木板，我们可以将木板钉在一个立方体网格对象上，这样我们就有了一个木箱。

10、矩阵和模型变换

如果向量是一个数组[x,y,z]，那么矩阵就是一个二维数组即，

矩阵代码

| x x x x |

| |

| y y y y |

| |

| z z z z |

| |

| 0 0 0 1 |

每一列表示一个四维向量，上面我们创建了一个4X4的矩阵，在webgl中我们常用的矩阵为4X4和3X3。

模型变换就是利用矩阵使得模型的大小、位移、旋转等产生变化的过程，通常我们会使用模型的内置矩阵与变换矩阵相乘从而得到变换后的新矩阵并赋予模型。每个模型被创建后都会拥有自己的模型矩阵，我们无需关注模型矩阵是如何产生的，只需要知道对模型进行模型变换需要将模型矩阵与变换矩阵相乘。具体如何 *** 作矩阵自行查询相关资料，这里不做赘述。

11、视图变换

视图变换就是不通过调整模型本身的参数，而是直接控制摄像机、场景的移动而产生的视觉变化，比如我们将摄像机像模型方向拉近，我们就会感觉模型在逐渐变大，我们将场景原点逐渐拉远我们就会感觉模型在渐渐远离我们。

13、着色器语言

1) 顶点着色器：顶点着色器是用来控制光照、颜色、位移等，假如我们要渲染一个三形，顶点着色器就将执行三次，它会为每个顶点都执行一次。注意在顶点着色器执行时我们还没有通过屏幕看到绘制的图形，顶点着色器是为后续的光栅化处理做铺垫，它将为光栅化 *** 作提供必要的资源，顶点着色器是光栅化处理的仓库。

2) 片段着色器：了解片段着色器先要了解光栅化是什么意思，光栅化就是绘制每两个顶点之间的像素并形成线段的过程，就好比我们要画一个栅栏，我们要一根一根的画。

片段着色器就是告诉GPU如何光栅化的语言，就如其名字，将光照、纹理、位移等沿着顶点之间的线段逐个像素的渲染。

14、webgl中最流行的js库three.js介绍：

首先最外层为场景，场景中包含一个或多个摄像机，场景中还可以包含模型、粒子等。

模型、粒子等也可包含在Object3D对象中。

创建一个模型的过程是：

1) 创建模型所需要的顶点

2) 创建一个几何图形对象，并将顶点传递给几何图形对象。

3) 创建模型的纹理对象即材质。

4) 创建网格对象，并将几何图形对象以及纹理对象传递给网格对象。

5) 将网格添加到可容纳网格对象的容器内，如scene、Object3D等。

术语FAQ：

1、场景：Scene

2、位置：Position

3、投影：Projector

4、正交：Orthographic

5、透视：Perspective

6、摄像机：Camera

7、渲染：Render

8、向量：Vector

9、三维向量：Vector3

10、四维向量：Vector4

11、矩阵：Matrix

12、3行3列矩阵：Matrix3

13、4行4列矩阵：Matrix4

14、顶点：Vertex

15、顶点的复数形式：Vertices

16、几何对象：Geometry

17、纹理：Texture

18、材质：Material

19、网格：Mesh

20、变换：Transform

21、视图：View

Unity5正式版发布已经一个多月，相信有很多人特别关注它的WebGL导出功能。其实WebGL并不是一个新东西，早在2012年，各大浏览器已经陆续开始支持WebGL了，一些基于WebGL的3D引擎如Three.js也相继出现，不过无论是完善程度还是使用门槛，都无法与传统引擎相比，所以多数团队对WebGL还是保持着理性的观望态度。

我在2004年的时候就曾把自己的3D引擎封装到IE的ActiveX中。可惜用户对浏览器插件是非常反感的，这严重地阻碍着网页3D的发

展。虽然在这期间，一些3D页游通过浏览器插件取得了不错的成绩，但我一直认为那跟端游没有什么区别，想玩游戏的人是不会介意下载客户端的，而网页3D的

用途也绝不仅仅是游戏。

直到最近，各大浏览器厂商纷纷宣布，未来不再支持浏览器插件的安装，Unity方面也声称WebGL将取代WebPlayer和Flash成为发布到网页的唯一途径，这是否预示着网页3D的时代终于来临还言之尚早，但至少在技术上，曾经难以逾越的鸿沟已悄然消失。

去年，我的团队接了一个项目，做一个类似91家居的模拟装修软件。当时就是想做有端的，用的Unity4.x。后来看到居然在线的DIY系统用WebGL实现的还不错，就想把产品升级到Unity5并尝试一下WebGL导出功能，毕竟这样的软件还是做到网页里更适合。

目前Unity5的WebGL平台还只是一个体验版本（Preview），功能尚未完全且存在一些问题，在这里分享一些我们在项目的移植过程中积累到的经验，供大家参考借鉴。

一：js效率

这个是我之前最担心的。我们的产品得益于PhysX的超强效率，实现了动态场景的快速烘焙（间接光预运算），编码成js之后，PhysX的效率究竟如何？实验结果如下：

两个场景在不同平台下的烘焙时间。单位（秒）

两个场景的烘焙结果

Firefox的运行效率还算令人满意。我们知道Unity使用的是Mozilla提出的asm.js来提升js的运行效率，而目前其他浏览器还未针对asm.js进行优化，不过这是迟早的事。而且除了烘焙功能之外，其他功能在不同的浏览器上看不到太大的性能差距。

二：js程序包尺寸

这个我也比较担心。如果内容无法在页面载入之后立刻呈现，用户会失掉耐心从而关闭页面。把所有优化选项设置好之后，我们的产品导出的程序包尺寸如下（压缩后）：

主程序（项目名.jsgz）：5.1M

内存初始化包（项目名.html.memgz）：2.7M

内置资源（项目名.datagz）：1M

不得不说还是很大。内置资源中字体占了很大的比重，将来可以把全部界面做到网页里，这样就可以使用浏览器字体，这个还好说，主程序包是把

Unity的整个Runtime加上我们自己的代码全部编译到一起所以才那么大。关于这个我给Unity团队写了好几封信，问他们有没有可能不要把一些从

未用到的模块编进去，他们表示会考虑但由于耦合度等原因难度应该不小。内存初始化包我不是很了解，可能是asm.js必备的东西，希望Unity推出

WebGL正式版的时候这个问题能得到改善吧。

输出的项目包含Release和Compressed两个文件夹，只需保留Compressed就可以了，生成的.htaccess文件会将地址自动转向到这个压缩版本的程序包，并为HTTP请求加上一个压缩Header，浏览器下载完成后会自动解压。

三：移动平台

这是很多人关心的问题。作为HTML5的一部分，WebGL理应可以运行在所有平台不是吗？不过事实就是目前WebGL在移动平台被支持的并不好，想进

微信就更是难上加难。对此我们的方案是为用户创建的每一个样板间保存一系列360度全景图，分享到微信之后可以漫游，但不能编辑。想想这样的方案似乎也很

合理，手机那么小的屏幕实在不适合做复杂的三维编辑工作。等移动平台完全支持WebGL之后，会有更适合手机的3D应用出来。

四：图形接口适配

Unity5终于支持了Deferred

Shading，之前的只能叫Deferred Lighting。不过在目前的WebGL

1.0上还是不能用，还是只能用Deferred Lighting。我们知道WebGL

1.0对应的是OpenGL ES 2.0，而WebGL 2.0对应的是OpenGL ES

3.0，所以项目适配到WebGL平台，与适配到移动平台基本上是一样的。WebGL

2.0的标准刚刚制定完成，支持的浏览器不知何时能推出，所以目前的适配工作，是以WebGL

1.0为目标平台的。除了不能用MRT之外，我们需要把3D Texture以2D切片拼接的方式实现，还有Depth

Texture要手动Encode到RGBA格式，这些工作太熟悉了，好像10年前就在做，不禁感叹实时3D这些年发展得真慢，除了游戏之外好像真的没有什么太好的应用。

五：材质与全局光照

Unity5新的材质系统，可调的参数并不多，所以还是用我们原来自己的，也是统一材质。新加的Reflection

Probe感觉很初级，就是世界坐标的一个AABB，都不能旋转，其实BPCEM（Box Projected Cubemap

Environment

Mapping）是可以旋转的，不过还是不能处理复杂户型，矩形边界以外的地方反射错得都很离谱。我们的反射方案是在BPCEM的基础上，加了一点点光线跟踪，虽然还存在一些问题，不过效果我已经很满意了，最重要的是，它的帧数比SSR（Screen

Space Reflection）高得多。

改进后的反射方案

由于样板间都是用户自行创建，我们没办法使用Unity自带的烘焙系统（Enlighten），而且传统的烘焙方法生成的Lightmap容量太大，根本不适合网络应用。我们自己的烘焙系统，是将3D空间划分成128x16x128的方格，然后用一个3D

Texture保存每个方格的光照信息，再通过自定义渲染路径将3D Lightmap加进去。

六：编辑器集成管理后台

管理后台要实现模型的管理和上传功能，于是索性将它做到Unity

Editor中。在这里，我们可以对模型进行减面（CruncherPlugin），材质调整，对模型对应的商品进行命名，分类，定价，最后导出Assetbundle并上传。Unity强大的编辑器API使这一切变得非常容易。

模拟装修平台只是网页3D的一个应用举例，随着WebGL不断的规范和成熟，会有越来越多非游戏类的，有实用价值的应用涌现出来。

---