这是一篇关于三维建模的文章，问题是网上视频教程那么多，有必要再写一篇文章吗？嘿嘿，如果这么想，很可能在Web3D项目上你会遭遇性能危机，也就是模型在浏览器上“跑”不起来。本期文章不是讲建模工具使用方法和教程（网上很多），而是从性能优化角度告诉你Web端（网页）建模如何节省面数，该注意哪些细节和方法。
建模基本思想
以最少的面，实现可接受的效果。因为面数越多，消耗计算机的算力越大，会有加载慢、卡顿的情况。
下图列举了一些不合适的做法，有的甚至用了很多面，却没有为模型外观增色。
上述例子让你对模型面数能有直观的感受。但现如今，细分建模流程应用比较广泛，设计师为了追求效果，往往容易忽略性能问题。所以，在Web3D项目中不是把模型做的都很精细，而是从场景出发选择对整体有利的方案。细分建模绝对不能作为一个主要方法，接下来看看具体案例。
微观上的细节处理
这里我们对比下细分建模与非细分建模。以立方体为例，模型细分数越多，立方体表面越“丝滑”。这种建模方法用来渲染图片或视频可以呈现非常好的效果，对于曲面较多的结构非常适合。但全部以细分流程来建模浏览器会很崩溃。下图可以放大观察不同细分级别呈现的效果对比。
Web端建模推荐用倒角处理圆滑部分，虽然效果上不如细分建模，有点“硬”的感觉。但在工程上是非常好的选择，相比之下在平整处没有“多余”的面，节省计算资源，见下图。
我们对模型增加点复杂度，比如模型结构差异较大（方中有圆）该如何处理？还是对比细分建模。如下图，为了让圆柱部分更圆滑，细分建模需要对整体加足够多的分段数。
替代方案是布尔建模，布尔建模可以处理模型各自的面数。比如，将圆柱体面数增多或减少，再进行布尔操作，面数更可控。
当然，布尔建模会破坏立方体表面布线，需要的话，还可以使用“移花接木”的方式将模型拼接在一起，达到以假乱真的效果。拼接的好处是降低建模成本与模型复杂度，容易二次编辑。
上述替代方案用了较少的面，但是表面如何做到平滑？特别是曲面的圆柱体。这就用到了平滑着色的算法，不需要很多面，用处理法线的方式让模型看起来“平滑”，以节省计算资源。图右所示平滑着色（shade smooth）效果。
接下来给大家看下法线的高级玩法——较少的面实现表面光滑效果，本质上是平面，视觉上是有曲率的，见图右。
宏观上的建模决策
传统的硬表面建模工具会直接处理模型（见下图），一旦成型很难修改，甚至需要重新建模。如，倒角的分段数给多给少确定后不好修改。替代方案是非破坏性建模。
非破坏建模可以保有一定的参数，方便后续修改，面数更可控，便于从整个场景考虑某个模型是否需要增减面数，提高效率。
以上，虽然只展示了简单的细节处理，但正是这“一砖一瓦”的斟酌，才能构建性能优良的场景模型。原则是不单纯追求四边面布线与细分外观，而是把面数用在刀刃儿上。
那除了模型细节处理，有更简单的办法来节省面数吗？下面以一个具体场景来说明我们的终极杀手锏——关联复制。
从整体考虑，降低整体面数，方法是“复用”模型。如果是普通复制，一样会增加面数。需要关联复制模型的几何数据，才能降低面数，如上图。
我们做的园区项目就是依靠大量关联复制来节省面数。如树木、建筑、路灯、信号灯等等。规划场景时就需要在宏观上考量，哪些可以复用，哪些需要与其他模型合并。
因为建筑体需要展示内部结构，我们对相同结构的楼层都进行了关联复制。尽可能的节省资源，同时保证效果。整个场景的三角面数4w+，glTF文件4.5Mb。当然，为了降低draw calls，合并了一些模型，还不是关联的极限。
当然，不能单纯的节省面数，任何建模方法都不是唯一的选择。这里梳理了硬表面建模的决策模型，从宏观上做建模决策。
我们会综合考虑上述因素来决定采用哪种建模方法。比如，模型有形变需求，布尔建模不如细分建模，因为布尔建模会破坏布线结构容易造成交叉面或破面问题；模型表面出现着色问题，就需要处理法线或者布线来解决；比如，模型在场景中的远近，远处的模型可以降低面数，镜头覆盖到的主要模型可以多增加些细节等等，甚至看不到的地方可以直接去面，如模型的背面、底面。
模型的外观处理
以上，是降低场景模型面数来优化性能。在设计师的角度还可以从材质入手进一步优化。
以往文章提到，我们走的是PBR流程。材质上，我们可以运用颜色（Base Color）、粗糙度（Rough）、金属度（Metal）、法线（Normal）、自发光（Emissive）、AO（Occlusion）来表现模型外观，但材质数量过多也需要更多时间渲染。我们可以利用烘焙技术，把多个材质信息烘焙到贴图上形成一个材质，如下图所示（glTF官方样例）。甚至可以把灯光、阴影都烘焙到Base Color上来节省浏览器的渲染计算。
如下图，不同的材质通道用一个着色器（绿色部分）形成一个材质。
前文提到用法线模拟光滑的表面，我们也可以用法线贴图来对模型刻画假的细节，这样也能变相节省面数，提高性能。
当然，在材质运用上，要遵循奥卡姆剃刀原则：如无必要，勿增实体。如同颜色管理，颜色相似的材质，尽量消除不必要的差异。距离较远或较小的模型，同样也不需要复杂的材质表现。
最后
从建模细节到模型外观处理，目前能挖掘的优化方向是这些了。
本篇文章不是追求效果来讲建模，而是在终局角度反观设计师该如何建模，如何对场景做整体规划，对视觉效果的追求要持一定的克制态度，并为整个体验负责。虽然视觉效果上不如做图片和视频，但对Web3D设计师的挑战却更大。
为了突出性能，文章难免局限。实际运用上，会综合考虑各种建模方法和技巧，以达成设计目标。细分建模也是必要的手段，需要灵活安排。关于Web3D上的精进，欢迎读者留言提供不一样的视角与解决方案，共同进步。
