电商3D购物-自研引擎探索和业务实践

1. 电商3D购物自研引擎探索和业务实践 B2C零售-前端技术- 沈彬（梓泷）大淘宝-XR技术- 杨舟（阿查）

2. 目录 01 背景介绍 02 自研3D引擎AceNNR 03 3D场景构建业务引擎 04 性能优化方案

3.

4. 背景介绍

5. 背景 - 3D购物业务探索基础商品体验可看商品3D化，围绕单商品决策点，提供更直观的选购体验可试可搭配可玩

6. 背景 - 3D购物业务探索沉浸式购物围绕电商的不同场域，建设不同类型的3D场景和玩法，提升沉浸式3D感知搜索/推荐场景营销场景

7. 背景 - 研发面临的问题引擎选择业务开发性能优化对于3D购物，我们需有了引擎之后，怎么 3D模型小则几M，大要什么样的引擎，来快速的开发，支持业则百M，如何快速下满足各方面的诉求？务的快速迭代？载，防止用户长时间等待？

8. 自研3D引擎AceNNR

9. 自研3D引擎AceNNR 需要解决问题包体跨平台效果多实例开发效率

10. 自研3D引擎AceNNR-架构 Behaviour Scene Node Mesh Texture Camera Animation Particle Material Physics Lighting & Shadow • 底层依赖成熟的开源库BGFX，解决Graphic API的跨平台问题 Rendering System Forward Rendering Post Processing Culling Draw call batching Multi-thread Bgfx OpenGL Metal DirectX Vulkan 设计思路： • 简化设计，仅提供必要的功能模块，解决包体问题 WebGL OpenGLES • 引擎基于C++开发，并支持全平台：Windows，Mac，iOS, Android, Web（WebAssembly） • 最终包体大小： • ios, android: < 4MB • webassembly: < 1MB (Gzipped)

11. 自研3D引擎AceNNR-效果虚拟人场景商品材质标准PBR 液体玻璃布料光照自定义材质（供应商定制）环境光 Light Probe Reflection Probe Lightmap Shadow Map 各向异性 NeRF 车漆直接光钻石效果对齐 Unity Editor AceNNR

12. 自研3D引擎AceNNR-效果展示标准PBR 玻璃+液体钻石场景

13. 自研3D引擎AceNNR-效果展示 NeRF

14. 自研3D引擎AceNNR-效果展示

15. 自研3D引擎AceNNR-多实例单实例全局单例游戏应用资源独占？平台应用 AceNNR 多实例组件化注：此处的资源指：CPU，内存等等系统资源资源共享

16. 自研3D引擎AceNNR-多实例挑战 Behaviour Scene Node Mesh Texture Camera Animation Particle Material Physics Lighting & Shadow Rendering System Forward Rendering Post Processing Culling Draw call batching Multi-thread Bgfx OpenGL Metal DirectX Vulkan WebGL OpenGLES 注：移动端显存和内存在同一块物理内存上，我们暂时都算做内存占用 • BGFX为单实例 • 3D引擎的内存消耗较大，其中90%是GPU资源占用（贴图，Mesh），多实例该如何管理内存？

17. 自研3D引擎AceNNR-多实例方案页面跳转流程页面回退流程页面B 页面A 1.页面跳转 1.页面回退 EngineB EngineA 2.引擎挂起 3.释放GPU对象 4.关闭BGFX BGFX 页面B 页面A 5.启动引擎 4.初始化BGFX EngineB EngineA 5.引擎恢复 6.从磁盘加载资源 7.初始化BGFX 8.重新创建GPU资源 BGFX 2.关闭引擎 3.释放GPU对象 4.关闭BGFX

18. 自研3D引擎AceNNR-开发模式浏览器（兼容）同层渲染（性能）前端UI（React，Vue .etc）事件通信 • 业务的DOM UI开发和原来的方式一致业务3D逻辑 • 业务3D逻辑可以通过typescript binding开发，和UI之间通过事件机制通信 Typescript Binding • 前端同学的开发方式和普通的页面开发一致（VSCode+Chrome） js binding Engine（C++）要点： Engine（WebAssembly） • 根据容器环境的不同，自动切换到使用wasm运行，或者Native （C++）

19. 场景构建业务引擎

20. 场景构建业务引擎 - 业务形态分析商品权益人 + 电商必备元素：各式各样的场景：不同的玩法交互：收集玩法试穿试戴展览性质

21. 场景构建业务引擎 - 整体架构 Feeds流原则：围绕3D业务形态的特点，面向实体及场景级别能力的封装，接入便捷且高效场景交互翻页 Tab交互运镜控制比例控制场景构建 Feeds布局 Tab布局商品目标：底层依赖多视角载具设置 2D&3D混合小地图锚点商品摆放动态内容加载宝箱人物 Sku切换动画播放不同样式锚点全景展示开箱动画人物渲染包围盒 . . . 锚点连线&动效相机展示摆放逻辑人物运动动画基础能力形态切换展馆货架原子功能让开发者在不需要3D 基础的前提下，迅速搭建引擎能力范围内的3D业务视差 Feeds滚动商品缩放商品切换交互资源工具包图像闪烁动画旋转动画物体手势交互商品模型加载创建文字坐标转换尺寸获取射线动画 . . . 相机手势交互视频资源加载创建视频碰撞检测可视检查引擎模型 A ce NNR T3D 模型 webview 同层容器

22. 场景构建业务引擎 - 商品原子功能锚点宝箱 Sku切换动画播放不同样式锚点文案不同样式锚点文案手势交互包围盒展示锚点连线呼吸动效锚点连线呼吸动效事件响应 … 事件响应 … 事件响应 …

23. 场景构建业务引擎 - feeds和多tab布局 3D布局通过XZ平面模拟2D 多 tab页面的布局来实现，feeds 一排两列纵向摆放商品，每个 tab刚好撑满一屏场景构建》3D货架平视、俯视两种视角通过正交投影和透视投影两种成像方式，及相机的位置旋转角度等控制，来实现效果不同形状的模型适配 3D模型和2D文字混排通过计算商品模型的mesh 包围盒，利用地面部分的对角线和高度 2D文字和3D商品的地面处于同一平面进行摆放，根据相机类型设置相应间距

24. 场景构建业务引擎 - 各类模版 + 载具设置场景构建》3D展馆内容加载商品加载宝箱加载视频加载海报加载锚点绘制完整场景

25. 场景构建业务引擎 - 场景交互》feeds滚动通过touch事件判断滑动方向，做相机滚动、前景滚动、惯性滚动

26. 场景构建业务引擎 - 列表切换场景交互》商品切换单品切换相机纵深移动 + 平移相机圆柱体寻径

27. 场景构建业务引擎 - 场景交互》商品缩放计算模型包围盒根据包围盒中心点计算出8个顶点坐标从世界坐标转化为屏幕坐标世界坐标系中的8个顶点计算坐标点在X轴和y轴的最大最小距离计算缩放比scale 根据scale计算出移动的焦距屏幕坐标系中的8个顶点模型放大焦距计算

28. 性能优化方案

29. 性能优化方案- 引擎启动提速页面加载 html 主文档预请求资源加载 JS 资源预加载 Web资源LRU缓存 TurbeWeb容器数据加载数据引擎加载 JS引擎 wasm引擎默认资源数据预请求 JSI/JSC AceNNREngine 同层容器

30. 性能优化方案- 模型加载提速网络全局拦截预先下载 android接口曝光埋点拦截 ios接口 native渲染共用缓存模型下载 jsbridge接口同层渲染模型读取模型管理 3D资源缓存空间上层业务主动调用Api webview资源拦截 web渲染模型解压并缓存

31. 性能优化方案- 模型加载提速模型瘦身不同lod级别 Astc压缩纹理渐进加载

32. 感谢大家观看