1. 概述
1.1 应用场景
此文档为适配产品 FVS 的建模标准。
建模标准共分为 4 个阶段:「建模准备阶段」、「模型制作阶段」、「模型导出阶段」、「FVS调整阶段」
1.2 注意事项
其中标题后有“*”的为建模过程中重点需要关注的地方,注意避坑。
部分内容在建模和操作方式上会区别于其他建模、渲染工具。
2. 建模准备阶段
2.1 确认模型风格/色系
模型风格大致分为:实景风格、科技风格、实景科技结合风格。
模型风格 | 示例图 | 说明 | 注意事项 |
---|---|---|---|
实景风格 | 通常使用更真实的材质贴图,例如砖石、木材、金属等,增强真实感 | 实景风格的色系通常只讲究冷暖色调,指色彩心理上的冷热感觉 暖色意味着画面中有更多的红橙黄,让整体看着更舒适、柔和 冷色意味着画面中有更多的蓝绿紫,让整体看着更凉爽、通透 | |
科技风格 | 通常使用更抽象。更未来感的材质,例如发光、透明、虚拟纹理等,增强科技感和创新性 | 色系通常根据 ui 设计来决定 例如 ui 设计如果整体是蓝色风格,模型建议走蓝色科技风格,目的是让整个界面看着更加的整体、和谐 | |
实景科技结合风格 | 通常是主体物做实景风格,场景环境做科技风格;或者就是主体物做科技风格,场景环境做实景风格。两种风格作为结合去展示 | 根据 ui 设计来决定科技风场景或主体物的色系倾向。通常都是科技风去主导色系 例如 ui 设计如果整体是紫色风格,那模型中科技风的那部分就是走紫色科技风,目的是让界面搭配更加的整体、和谐 |
2.2 模型精细度、规模、数量
模型的精细度根据用户要求决定。详细看 3D建模精细度等级说明 中的精细度划分。
确认需要建模的场景的规模,统计有多少种建模对象,例如多少栋建筑、多少台设备等。
2.3 收集建模参考资料
这个是硬性要求,便于更好的设计和理解模型。
建模资料收集模板和指南详细看 3D建模材料收集指南 。
参考资料为网络上的优秀案例或者 FVSdemo ,便于设计师理解你想要的模型效果、设计思路。
2.4 确定建模工具*
FVS目前支持的模型格式为glb(gltf2.0)
常用的建模工具为: Blender 、3Dmax 、Maya 、C4D 等,我们推荐使用 Blender 。Blender 自带 glb 导出方式,无需安装插件。其余建模软件均需要另外安装导出插件。
以下为市面上常用的模型格式转换 glb 的方法:
3. 模型制作阶段
3.1 规范命名模型对象
名称要合理且避免使用特殊字符(#¥$+=等),确保能根据自己命名的名称来区分不同的对象。如果后续要绑定数据做交互,那就需要对象与数据保持名称相同。
注: FVS 产品中也可以修改对象名称。
3.2 统一尺度单位
FVS 的三维场景定义在 10000 的单位长度, 1 个单位长度为 1 米。
注:通常以米作为建模通用单位。
如果不统一单位进行建模,后期增加模型做拼接、校对等操作时,会发现大小比例不一致导致无法正常组合。
Blender 中更改长度单位的方法:
3.3 几何体拓扑
建模的结构要简单且清晰,避免不必要的复杂性。
优先使用四边形和三角形做拓扑,在建模过程中更容易控制和编辑,使得模型后期调整和修改更加方便和高效,也减少了因为不规则多边形造成的模型变形。
并且四边形和三角形是大多数三维引擎所支持的基本几何单元,可以更好的兼容各种渲染引擎和后期处理软件。
3.4 模型材质*
制作模型对象的材质时,应当遵循 PBR 流程。
注: PBR 是一种渲染技术,通过模拟真实世界中光线和材质的物理交互,来实现更加真实的渲染效果。
与 FVS 适配的贴图通道有:
Albedo(反射率):描述物体表面对漫射光的反射率,反映物体的颜色和基本反射特性。
Metalness(金属度):描述物体表面是金属还是非金属的属性,用于指定物体材质中金属部分的表现。
Roughness(粗糙度):描述物体表面的粗糙程度,数值越高表示越粗糙。
Emission(自发光):描述物体是否发光的属性,用于指定物体是否具有自发光的效果。
Alpha(透明度):描述物体的透明度,值越低表示越透明,值为 0 表示完全透明。
Normal(法线/法向):描述物体表面的法向量,用于模拟凹凸不平的表面细节,使得渲染结果更加真实。
AO(环境光遮蔽):用来模拟环境中光线的散射和遮挡效果,增强场景中物体之间的明暗关系,使得渲染更逼真。
注:只需要了解以上 7 种通道,其余的通道不需要处理,也无法导出适配 FVS 。
以下为常用并且能导出到 FVS 中呈现效果的材质节点:
1)混合模式要切换
注:透明度需要配合打开“ blender -材质属性-混合模式”中选择合适的 Alpha 模式。
在实时渲染中并不完全由 Alpha 来决定透明度,还需要搭配不同的混合模式来表现透明效果。
其中 Alpha 钳制只能表现不透明和完全透明的效果。 Alpha 混合可以表现出半透明效果。
注:在使用 Alpha 混合时,会容易遇到明显的渲染顺序错误,此时应当打开“背面剔除”来解决。
如上图: 0.6 alpha 透明度的状态下,打开 alpha 混合,未开背面剔除时,出现了明显的渲染顺序错误,即猴头的正脸与后脑混淆不清。
如上图: 0.6 alpha 透明度的状态下,打开 alpha 混合,并打开背面剔除时,正脸清晰。
2)表现出质感
要求:对于一些光滑,金属,镜面等材质,需要通过设置合理的材质参数来明显区分出来。
说明:可以通过金属度,粗糙度的参数调整来区分出光滑,粗糙,金属,镜面等不同的材质质感。
3)环境贴图/ HDR /世界环境
fvs内置hdr.zip ,FVS内置的 HDR,需要可自取。
在 Blender 中, Eevee 渲染模式下添加世界环境。
在 FVS 中也可以自定义设置环境贴图。
注:建模软件中与 FVS 中的环境贴图保持一致有助于在 FVS 中还原建模时调整的效果。
4)环境贴图对自带反射效果模型的影响
反射效果会出现在金属、玻璃等材质效果上。可以通过切换不同的环境贴图或者自定义环境贴图调整至模型的理想效果。
并且环境贴图强度的弱和强也会影响反射材质在环境映射的亮暗,自行根据效果需求进行调整。
不同的环境贴图效果对比:
环境贴图强度影响的效果对比:
5)自发光
需要在 blender 和 FVS 中都打开发光并设置,根据效果需求自行调整发光所涉及的相关参数。
自发光强度对比:
如上图,在同样的自发光蓝色下,去设置不同的自发光强度数值,并在 FVS 中设置统一的发光强度后得到的效果。
结论: blender 中,自发光数值超过 1 以上的发光强度是无法导出的,只有发光强度在 1 及 1 以下时,才能在 FVS 中区分出明显的亮暗,并且发光的颜色更为准确。
3.5 层级结构*
场景中如果有分版块、楼层等这种多层次结构的关系,务必要把关系整理清晰,(创建父子集/群组),便于模型管理修改。建议层级控制在 2 层,避免有过多的层级。
建议一层和二层都用空物体纯轴作为节点,第三层作为实体对象节点。否则 FVS 中涉及隐藏(禁用)的逻辑,会导致实体对象节点在隐藏(禁用)时,其下子节点无法设置显示。
在不同的节点下,也要避免出现名称重复的问题,否则会出现 FVS 中图层绑定的相关问题。
3.6 模型原点*
单个对象的原点要设置在底部的中心。便于在建模软件和 FVS 中设置旋转、放大缩小等调整。
整体模型要放在世界坐标的中心。便于在 FVS 中快速找到模型,并且便于调整模型的位置以及设置模型自转等功能。
3.7 模型法向
应当确保方向正确,均为正面,避免模型表面出现渲染问题。
红色为法向方向不正确,蓝色为正确。如果不正确就要选中不正确的面再通过 SHIFT+CTRL+N 来重新调整法线。
3.8 关联复制*
相同的对象/物体应当尽量做关联复制,可以起到共用一份物体数据,减少文件大小及预览帧数的作用。
注: Blender 中关联复制的快捷键是 ALT+D 。
3.9 UV贴图
即图像纹理。模型对象的 UV 贴图展开正常,对应纹理的大小比例在场景中显示合理。
3.10 贴图大小*
应当控制贴图大小,每张贴图分辨率控制在 2K 以下,大小控制在 2MB 以下。
贴图应尽量为正方形,且分辨率应为 2 的 N 次方,如 256,512,1024 等等,大场景下可以使用更高分辨率的贴图来保证清晰度。
3.11 模型动画*
在三维软件制作动画时,应当从第 0 或第 1 帧开始。
应当设置帧率为 30FPS 。并且动画应当符合实际逻辑。
1)循环动画:
例如车辆行进、货物运输等。应当只导出一段非重复动画,然后在 FVS 中使用循环播放,且最好首尾能够无缝衔接。
2)非线性动画:
例如物体展开、合上等。需要进行独立导出,就需要使用 NLA 分成多段动画后导出,并按照实际去分别命名。
3)UV动画:
例如快速行驶的车影、电子围栏等。需要在 blender 中创建材质(blender4.2 支持),按照正常导出 glb 的材质格式( PBR 流程)制作,如下图:
添加时间线面板,将时间指针放置在起始帧位置并选中映射节点,右键>插入关键帧
注:材质动画是无法导出的,所以在材质上任意一个通道 K 帧都是无效的。
4. 模型导出阶段
4.1 UV动画导出方式*
注:FVS 专属的 UV动画 导出方式。
点击文件>导出>导出 gltf2.0 ,在导出设置中:「 动画模式」选择场景,勾选「动画指针」,然后其他的按照需求设置即可导出模型 。
4.2 导出格式*
注:FVS目前支持的模型格式为 glb( gltf2.0 )。
4.3 模型压缩*
使用 draco 压缩导出,若无法使用可通过 Node.js 来压缩。
4.4 模型检查*
检查模型上没有材质丢失、破面、重面、黑块等显示问题。
导出的 glb 文件应该拖进 babylonjs 网站进行自查。建议模型整体 meshs 数量保证在 1000 以内,超过 3000 会有明显性能影响,有明显卡顿。
利用 babylonjs 沙盒,打开网页后将 glb 文件拖入窗口,等待加载完成后即可快速预览 glb 模型进行自查。
4.5 模型合并*
了解清楚需要交互、做标签的对象,通过“合并”来整理不需要交互的模型对象,预留出需要交互的模型对象。并且合并也有优化模型的作用。可以有效减少 meshs 的数量。
注: blender 中合并对象的方式为选中对象,按 CTRL+J 。
附详细的模型优化方式:FVS模型性能优化指南
4.6 glb文件命名
Glb 命名合理,且避免使用特殊字符(#¥$+=等),这类特殊符号,会导致无法加载的问题。
5. FVS调整阶段
5.1 光照和影子*
按需在 FVS 中调整光照和影子。
实景风格是必须要有的,否则会没有体积感,显假。科技风格是可以不需要投影的。
注:实景风格下,无光照和影子和有光照和影子效果差异是比较大的。
附详细光照、阴影的帮助教程:
5.2 天空背景、地面特效*
1)天空背景根据模型类型在 FVS 中设置。
实景风格通常是有建地面和道路的,所以通常只需要设置真实的天空效果作为背景,地面特效是不需要的。
天空背景有动态天空和静态天空盒 2 种供选择。
科技风格通常根据色调进行天空效果和地面特效的设置,最好是纯色天空效果,科技风网格纹路作为地面特效。
天空背景有渐变和纯色两种。
附详细天空背景帮助教程:FVS天空背景调整视频课程
2)地面特效在 FVS 中有内置素材可供选择或自定义上传。
附详细地面特效帮助教程:
5.3 环境贴图
根据模型的场景在 FVS 中设置环境贴图。
环境贴图是一种用来模拟环境光照和背景的技术,用来为场景添加细节和真实感,让场景呈现更加真实生动。
在 FVS 中可以通过调整环境贴图内置素材进行调整或自定义上传。
5.4 特效
1)如果有想要模糊场景边界的需求,可以通过雾气特效来进行设置。
2)科技风格场景可以添加粒子、冲击波、飞升线条来加强酷炫感。
5.5 发光
根据模型场景在 FVS 中设置发光效果。
因为科技风格的模型需要体现未来感,所以发光是一个必须要设置的功能,增强科技感。
附详细发光帮助教程:FVS发光调整视频
5.6 调整整体画面效果(滤镜)
在 FVS 中可以通过饱和度、亮度、对比度这三个功能来调整整体画面效果。
附详细滤镜帮助教程:FVS滤镜调整视频
5.7 抗锯齿开关
根据场景需求自行调整抗锯齿开关。
附详细滤镜帮助教程:FVS泛光及抗锯齿视频
5.8 环境反射开关
如果场景需要在地面上反射出模型的倒影,可以在 FVS 中选中模型打开“环境反射”。
注:大型场景的环境反射开启后会比较影响场景性能。请自行根据需求选择开启或关闭。
5.9 模型动画管理*
在 FVS 中的模型动画管理功能,可以选择开启在建模过程中做的动画,循环播放设置。
5.10 Glb文件替换
在 FVS 中替换模型时,切勿将文件名称命名的过于相似,否则替换会有显示问题。
5.11 自定义线框风格
FVS 中可启用模型的「线框风格」来实现科技感线框效果,提高三维场景的科技氛围。
在导入模型时,进行风格预处理。选中整体模型后还支持线条粗细、颜色的自定义设置。
启用模型的线框风格前后效果对比:
附详细自定义线框风格帮助教程:FVS自定义模型线框风格
5.12 流畅渲染模式
在 FVS 中的顶部功能栏有「流畅渲染」这个功能,打开后可以降低三维组件在编辑模式下的渲染特效,提升三维场景编辑时的性能。
注:流畅渲染打开之后不会影响相关配置项的设置,并且在预览模式下预览的仍会是完整的效果。
如图打开「流畅渲染」后的画面、帧数对比:
附详细自定义线框风格帮助教程:FVS三维场景流畅渲染模式