基于网页的三维可视化，要效率更要效果

物联网爆炸的时代，各种感知设备层出不穷，云上的数据急剧增长，新基建也把数据中心拔到了七大新基础设施之一的高度。近年来，各互联网公司和IT公司不断提出各种智慧XX，XX大脑，例如城市大脑、交通大脑、智慧交管、智慧高速、智慧公路等等。但不论名字是啥，最终看到的解决方案基本都是云端放数据，终端建应用系统和可视化系统。交通行业的规划、设计、建设、管理、养护用户很多时候也都是通过可视化系统来查询、统计、分析、运用数据，用以支撑业务的推进和业绩的达成。

随着Html5技术的兴起，Web端的应用开始深入各行各业，交通行业当然也不例外。2011年，WebGL1.0标准重磅推出，让网页应用进入了3D时代。基于网页的三维可视化系统应运而生，越来越多的应用被客户要求转到Web端。基于网页是相对于PC版的C/S架构而言的B/S架构；三维可视化是相对二维空间渲染技术而言通过三维空间渲染技术实现的可视化。

WebGL（全写WebGraphics Library）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL 1.0，基于OpenGL ES 2.0，并提供了3D图形的API。它使用HTML5Canvas并允许利用文档对象模型接口。

但在PC端转Web端的三维可视化过程中，往往因为技术上受限WebGL的底层实现以及不同浏览器对WebGL的支持程度不同，可视化系统的加载效率和渲染效果总是差强人意，往往出现鱼（效率）和熊掌（效果）不能兼得的情况，大场景的加载尤为明显。在三维可视化产品销售和项目策划执行过程中，经常听客户说很多时候销售展示的是美若天仙的若彤姐姐，出系统原型时是少了点韵味的亦菲妹妹，结果往往看到的是贾玲兄弟，现实版小龙女对比经常上演。

基于网页的三维可视化系统为什么会不断出现以上情况，本文试着从浏览器、GPU、前端开发框架、三维数据制作、三维可视化引擎、应用系统开发等方面分析下原因，分享一些提升基于网页的三维可视化系统加载效率和渲染效果的经验。

1. 浏览器

目前支持WebGL的浏览器有：Firefox 4+,Google Chrome 9+，Opera12+，Safari5.1+，InternetExplorer 11+和Microsoft Edge build10240+。浏览器方面，影响性能的主要是内存限制和对WebGL的兼容性。

（1）内存限制

浏览器对所能使用的内存极限都有限制，64位的最多可达到4G的内存，而32位少的可怜仅为1.0GB。

（2）WebGL兼容性

主流浏览器对WebGL1.0的兼容性情况列表如下，IE和Edge对WebGL1.0的支持最差，需要调用专用接口才能使用。

以下是主流浏览器对WebGL2.0的兼容性情况列表，WebGL2.0都出来好多年，Edge还是低头了，IE、Safari居然还不支持能联网网页无法显示，市场占有率不低就怪了。

2. GPU

WebGL一些特性也需要用户的硬件设备支持，尤其是GPU。比如 S3 纹理压缩 (S3TC) 只在基于NVIDIATegra（图睿）的GPU的设备上可用。

3. 前端开发框架

现在很多项目为了短平快，很少用原生JS写前端，都会选择公开的前端开发框架，比如Vue、React、Angular等等。不同的三维可视化引擎对开发框架的支持不尽相同，所以建议集成商或开发商选型时一定要考虑兼容性问题，尤其是不能各个子系统用不同的开发框架，否则后期再改很麻烦。

以上三点对三维可视化系统性能造成的影响，我们想说这锅真背不了，请你用64位的Chrome和JS原生框架（经验之谈）以及游戏独显（具体品牌就不推荐了）。

4. 三维数据制作

一般的三维数据处理与发布都是按照采集、建模、导出、切片、发布、应用，具体流程如下：

重点说一下数据建模，因为影响渲染效率跟数据建模有很大关系，三维渲染里有一个指标就是顶点数和面片数，数量越大占内存越大运算量也越大（具体原理要展开的话可以单独写一篇了，私下讨论哈）。

（1）模型的精细程度

一般情况下数据的生产都是在专业的建模软件中完成，比如对于人工建模的平台就是3d Max，倾斜数据生产的平台就是ContexCapture等，这是从原始数据到模型的构建。

可能大家经常听到精模、低模（也称简模）、白模能联网网页无法显示，这里的模可不是嫩模的模哈，特指三维模型的模。以标牌为例解释一下，精模就是尽量把标牌上大于0.5米的所有细节都表达出来，简模就是简单地在标牌两面贴上材质。白模是指不贴材质的三维模型，以建筑物为例，通常是把建筑物的二维面按照楼高拔成一个简单的白色或灰色盒子。

模型的精细程度越高，顶点数和面片数越大，对内存和GPU显存的消耗越大。这实际上对三维建模师提出了一个命题，在保证效果的前提下怎么用最少的顶点和面片表达同一个物体。

这里还得说说3DRoad，自动把二维的CAD设计图纸生成三维道路的过程中，程序已经考虑了如何组织让顶点数和面片数最少。

（2）纹理和材质

关于纹理和材质，可以从贴图大小、光照、展UV、烘焙多方面展开，这里不一一赘述。纹理和材质的好坏既决定加载效率又决定渲染效果，所以对三维建模师的要求还是非常高的，表以为随便招个3dmax培训生就能干了，没有歧视的意思，主要想表达这是专业人士的活。

另外，尽量以色彩代替材质，如果是纯色感觉的物体，尽量以大贴图的altas通过uv的框定来设置色彩，这样就能以尽量少的draw来绘制场景，对性能有巨大帮助。

5. 三维可视化引擎

现在国内三维可视化引擎真可谓琳琅满目，甚至有一些做应用开发的厂商也开始拥有引擎。不是不可以，出于对客户负责任的角度，建议还是要选用专业厂商研发的引擎，否则后患无穷。没有专业的测试，没有产品迭代的规划，没有专门的售后，怎么可以称之为产品呢？当然，如果你的东西只是为了给领导show一把就没有然后也是可以的。

6. 应用开发

最后说说应用开发，主角当然是程序猿。我经常跟他们说能否考虑下用户的视觉感受，总说客户是上帝。程序猿总以实现功能为目标，以为功能实现了客户就会愉快地付钱了，哪知道客户看到系统时常浮现各种小龙女的画面。

你就不能按照设计师设计的UI调整下界面有时就差几个像素，不能问下UI设计师渲染颜色RGB值是多少，不能给数据做下LOD（分级显示），不能打开实时阴影，不能加上波光粼粼的水面吗 …说起来都是泪

结语

系统加载效率高与不高，渲染效果好与不好，客户基于网页的三维可视化需求就在那里。这是一个用脚投票的时代，告诉客户需要他们做的（浏览器、独立显卡、开发框架），把握我们能把握的，不断地从细节（三维模型、三维可视引擎、应用开发）去优化去完善满足客户的要求我们就可能赢。

参考文章

1. Web三维GIS性能瓶颈元凶！

2. Webgl水平不能老停留十年之前

3. 百度百科：WebGL

4. 目前流行的9大前端框架

（声明：纯属个人观点，与任何实体无关，欢迎来撩。