这是一篇主要面向设计师关于3D可视化场景设计的实践分享，前端研发、图形研发也可以围观。涵盖：3D场景的可视化拆解、动效的分类和实现方式、氛围类动效的制作、粒子效果制作、数据类效果的制作、UV动画制作规范。
3D场景的可视化拆解
首先我们依据业务载体对常见业务场景做了分类，包括：园区（Block）、城市（City）、行政区（District）、地球（Earth）、拓扑（Topo），并将其简称为B-C-D-E-T场景。
然后我们分别对B-C-D-E-T场景的3D模型进行了拆解和分层，归纳了场景设计元素。本次分享主要从城市（City）和地球（Earth）两个场景讲一下关于数据、氛围类动效的实现技巧。
在城市场景里我们以地面到天空的空间顺序，拆分城市场景中的地形、水、道路、建筑、动效等元素。又将拆解后的元素分为城市基础层、氛围动效层、数据形态层，最后汇总出我们三维数字城市的视觉标准。
在地球场景中，我们沿着球的半径从内至外分别拆分为：球体内发光（菲涅尔）-球体外发光-陆地-海洋-国界线-数据。从近至远的空间场景又分为：前景主视觉地球-中景粒子-远景星空。
通过上述结构化的定义各个场景，使得设计师、研发及客户需求之间有了一个标准化的定制体系，对于相互协作有了极大的帮助：
- 通过一套完整的视觉体系框架，可以更容易排列组合客户的定制化需求，让各种程度的复杂需求都有对应的结构体系。
- 对设计侧来说，这是一套普适的设计指南，全面定义场景中模型元素，规范设计师建模体系，提高制作效率。
- 对于研发来说，可以快速识别出需要研发侧实现的部分，在工作流上的分工更加清晰。
动效的分类和实现方式
我们对三维场景中常见的动效，按照功能，分为数据类和氛围类。
氛围类的动效有：上升粒子、车流线、装饰环、雨和雪的天气模拟等。
数据类型的动效有：建筑物的打点，园区的围栏、攻击飞线、道路热力等。
我们按照3D场景动效的实现原理，分为以下5种：
PRS动画（position、rotation、scale）
本质上是通过旋转、平移、缩放的k帧插值实现动画，可随glTF模型导出。
UV动画
通过改变纹理坐标映射的k帧插值，改变UV映射，实现纹理滚动效果的动画，通过自研插件的开发，可以随模型导出。
粒子动画
建模师在blender中通过粒子发射器，调整数量、速度、随机、重力等参数，结合拾取贴图，实现不同的粒子效果，例如雨、雪、烟花等。粒子动画无法导出，需要单独研发实现。
顶点动画（形变动画）
通过在k帧中直接修改mesh顶点的位置来实现，通常在mesh顶点数目较少，以及动画简单的情况下使用，如草的摆动，树的摆动，水的波动等，可随glTF模型导出。
蒙皮动画
通过在动画中直接修改bone（骨骼）的位置，让mesh的顶点随着bone的变化而变化，通常用于人体形态动画，如人物的跑动，跳跃等，可随glTF模型导出。
氛围类动效的制作技巧（以车流线为例）
常见的氛围类动画有：车流线、围栏、上升线条、粒子等。我们以车流线为例讲述它实现技巧：
- 首先进行基础道路模型的制作。为模拟真实道路效果，提前分出左右两个车道，并搭配不同的车流色贴图。
2.在blender中提前对道路模型手动展UV，两条道路的UV需要首尾相连，这一步是车流线按照现实中道路方向运动的关键。如下图：
右侧红A对应左侧UV图中的绿A，红B对应绿B，道路拐弯处同理，保持首尾相连的连续车流线。
3.对贴图纹理的映射坐标K帧后通过UV动画插件导出，研发可直接控制UV的X轴或Y轴的运动来实现效果。
这样的设计方法在交付的过程中，可以最大限度的节省研发的时间，提高效率，快速的复现设计效果。同时设计师对于动效的把控会更精准，减少设计稿和实现效果之间的视觉差。
粒子效果制作技巧（以上升线条为例）
粒子效果通常用来做氛围动画，下面以上升线条为例，介绍如何实现：
- 建模师做好带有透明度的线条贴图后，通过粒子发射器的渲染集合拾取贴图，模拟上升线条基础状态。
- 通过粒子发射器调整重力，速度，随机，数量等参数，模拟上升线条的运动效果。
-
研发同学也是通过拾取贴图来模拟线条上升的效果，这里需要注意的是提供给研发白色的基础贴图，后期方便研发端直接修改线条的颜色。同时与研发同学约定好线条的速度、大小、颜色等。
-
同理，运用这个方法可以使用于多个粒子效果，比如：上升数字效果，悬浮的星空效果等。
数据类效果的制作技巧（以道路热力为例）
数据类的效果与氛围最大的区别就是数据动效是有真实数据的。在上文中，我们将道路的UV按照道路方向展开，实现了车流线动画，接下来，我们在保证道路面顶点位置不变的前提下，稍微调整顶点UV的展开方式，实现了真实车辆分布的热力效果。
- 首先要展平道路的UV，并对道路的方位进行定位。
- 通过了解研发实现思路后，我们以UV的左下角为（0，0）坐标原点，沿X轴正方向为（1，0），Y轴正方向为（0，1），对角为（1，1）。
- 对UV进行坐标系定位，研发可以更容易将数据与道路UV贴合，从而不产生数据偏差。
Blender的UV导出插件
如之前文章所述，雷尔 Web3D 小组选择使用 glTF 2.0 标准作为建模侧和研发侧的模型资产格式。并专门开发了blender导出UV动画的插件，如下图所示为blender插件的完整工作流。
UV动画制作规范
在制作这些动效的过程中，我们发现目前90%的效果都是可以用UV动画来实现的，从而我们制定了一些流程来规范设计师制作的标准，同时提升交付研发时的效率。
- 在blender中，UV动画导出插件仅支持导出链路为：
- UV动画导出支持的边界：
- 类型：UV动画导出仅支持：Location、Rotation、Scale 。
- K帧：仅支持keyframe 类型帧。
- Timeline：仅支持连续型K帧 Timeline，不支持中断。
-
尽量不要多个对象共享同一材质；
-
一个物体可以同时使用多个material，在Slot1 位置可以切换；
-
material 后的2表示这个材质被2个物体共同使用，点击2，blender会自动切换为多个材质（虽然是多个材质，但贴图等资源还是复用模式，导出gltf大小几乎不变）。
关于设计侧建模的具体实践，以及研发侧的WebGL实现3D视觉的小技巧等的解决方案，我们后续还会有文章一一分享，敬请期待。
