Web3D技术探索之路

1. Web3D技术探索之路刘茜奇安信科技集团

2.

3. 个人简介大屏主视觉开发 Web3D开发 2017-2018 2020-今 QAX QAX 流体、三维重构 3D地图引擎开发 2013-2016 USTB 2019-2020 QAX

4.

5. • 业务背景 • 场景拆解和搭建 • 技术架构 • 优化方案 • 未来规划和展望

6. • 业务背景 • 场景拆解和搭建 • 技术架构 • 优化方案 • 未来规划和展望

7. 大屏主视觉业务

8. 2021年之前 3D贴图工程师 3D开发能力业务场景需求平面设计能力

9. 竞品技术方案对比 DataV RayData 51World

10. 2021年之后 3D搭建工程师 3D开发能力业务场景需求 3D建模能力

11. 奇安信3D演化道路 2019-2020 City District Earth Topo 2020-2021

12. • 业务背景 • 场景拆解和搭建 • 技术架构 • 优化方案 • 未来规划和展望

13. City场景拆解水平近远精模素模天际线天际素模精模

14. City场景拆解垂直高度数据氛围城市基础

15. 模型选择 • fbx • FilmBox（MotionBuilder），3D ⻆色动画软件，Autodesk 家族 • 专注于动作制作，在modeling和rendering上有赖于其他软件的配合 • obj、mtl • Alias|Wavefront（Alias），加拿大图像业巨头 • 两种格式需要配合使用，很受欢迎 • collada • Sony ，基于 XML • 为娱乐而生、Google Earth • glTF • 工业界（Microsoft、Cesium、Unity etc.）共同提出、维护 • 高效、可扩展

16. glTF2.0

17. glTF2.0

18. 建模工具选择 Blender优势 • 实时渲染 • 开源免费，扩展性强，插件丰富 • 全平台（Windows、MacOS、Linux） • 基于工作流的交互方式 • 操作效率高

19. 渲染底层选择

20. 编辑器选择

21. 设计-研发约定 glTF支持 glTF不支持 • Bloom • SSAO • HDR • 粒子动画 • 涟漪动画 • 菲涅尔 • 脚本逻辑 • 。。。

22. 基于业务的编辑器模型加载代码生成业务模型光照氛围后期数据动画脚本

23. 基于glTF2.0设计研发工作流

24. 建模阶段

25. 模型数据来源 Blender GIS 插件行政区划 GeoJSON 开放地理数据 ShapeFile 坐标映射地图数据模型导出 FBX

26. 城市模型导出服务器发布矢量瓦片 5G空间服务端 binary 材质贴图自研的3D地图Lib 生成地理信息的面划定范围导出 FBX模型客户端

27. 插件实现UV动画导出 Blender插件 Mapping的k帧 Blender材质编辑器 Blender插件导出机制及引擎解析

28. 研发阶段

29. 研发需要实现的能力模型加载代码生成业务模型光照氛围后期数据动画脚本

30. IBL+HDR 等量矩形贴图立方体贴图

31. 基于业务的编辑器模型加载代码生成业务模型光照氛围后期数据动画脚本

32. 后期 SSAO Bloom 原图亮度提取高斯模糊叠加原图原图深度缓冲 AO 叠加原图

33. 研发需要实现的能力模型加载代码生成业务模型光照氛围后期数据动画脚本

34. 氛围粒子动画匀变速运动涟漪/扫光

35. 研发需要实现的能力模型加载代码生成业务模型光照氛围后期数据动画脚本

36. 帧动画

37. 交付阶段

38. 导出项目工程 assets lib 场景内容 Runtime

39. • 业务背景 • 场景拆解和搭建 • 技术架构 • 优化方案 • 未来规划和展望

40. 3D编辑器

41. 3D编辑器框架

42. 模块组织关系 3D编辑器消费资源模块能力消费 ECS引擎

43. 资源模块

44. ECS设计

45. 脚本生命周期

46. 研发需要实现的能力模型加载代码生成业务模型光照氛围后期数据动画脚本

47. ECS脚本开发自定义行为组件实体添加组件

48. 代码分层业务逻辑代码业务组件渲染基础核心依赖

49. • 业务背景 • City场景案例 • 技术架构 • 优化方案 • 未来规划和展望

50. 优化方案增加本地缓存，减少网络请求多线程计算，减少主线程压力 • 计算优化：WebWorker • 缓存优化：IndexedDB • 交互优化：GPU拾取 CPU GPU 减少GPU上传 • 渲染优化：Mesh合并 • 纹理优化：纹理合并内存减少GPU和CPU内存占用 • 面数优化：复用资源 • 文字优化：矢量字体

51. 渲染优化渲染的场景大，模型多，导致帧率低减少DrawCall 合并前相同材质的物体合并Geometry 合并后

52. 面数优化大场景中，使用的模型面数多，文件大，复制的面数少，物体多 8ms 树 1ms 0.64ms 树林 0.5ms 0.5ms 利用纹理和alpha使用简易面森林合并且复用物体

53. 纹理优化图片上传多、琐碎纹理合并上传，Mesh调整UV使用材质多个属性通道烘焙到一个纹理 Ambient Occlusion (R) Roughness (G) Metallic (B) NormalMap Base Color

54. 文字优化超大文字渲染更优方案，SDF（Signed Distance Field） SDF字符集生成SDF文字 24 256 渲染SDF文字代码 Signed Distance Field SDF文字图集 500

55. 计算优化文字碰撞检测、模型解析占用主线程时间，希望可以不阻塞主线程 WorkerPool伪代码 Web Worker 生成WorkerPool，根据task值判断结果类型 SharedArrayBuffer Worker Running 分配任务 Worker Waiting 结束任务结束任务分配任务 Worker Running Pool 分配任务创建任务，根据task值判断任务类型结束任务 Worker Pool

56. 交互优化物体多，物体合并，拾取不准确，射线检测慢 GPU拾取给每个实体一种颜色，渲染一遍，有鼠标事件时读取像素颜色，反推实体ID • 多Mesh合并后的精确拾取 • GPU修改顶点的物体拾取八叉树拾取使用八叉树数据结构，将场景中的模型放入不同cell中，适合稳定布局场景

57. • 业务背景 • City场景案例 • 技术架构 • 优化方案 • 未来规划和展望

58. 材质编辑器材质节点编辑，解决自定义材质问题，帮助设计师创造材质

59. 地图 vs 定制建筑

60. 总结 • 3D模型化：释放压力 • 场景搭建和工作流：明确⻆色分工 • ECS引擎：组合灵活 • 优化方案：量体裁衣

61.

62.