Unity5 WebGL试用手记，网页3D的时代何时来临

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不断的规范和成熟，会有越来越多非游戏类的，有实用价值的应用涌现出来。