前端可视化提效法宝-全链路360度展示平台

1. 2021 vivo开发者大会互联网技术专场 vivo用户运营前端专家

2. 2021.12.16 vivo开发者大会-互联网技术专场

3. 项目特点效果直观 360度产品展示互动性强说明清晰 2021.12.16 vivo开发者大会-互联网技术专场

4. 项目特点效果直观 360度产品展示互动性强说明清晰 2021.12.16 vivo开发者大会-互联网技术专场

5. 基于threejs的360度产品展示平台工业设计模型现有方案设计师处理 3D展示模型与场景不通过前端处理 3D展示页面验收效果通过打包上线 2021.12.16 vivo开发者大会-互联网技术专场

6. 基于threejs的360度产品展示平台工业设计模型现有方案设计师处理 3D展示模型与场景不通过前端处理 3D展示页面验收效果通过打包上线 2021.12.16 vivo开发者大会-互联网技术专场

7. 问题&难点存在问题改进难点联调太繁琐使用unity 打包体积太大，不适合展示类应用重复工作多使用laya 强调多实体的性能，单个实体的细节表现不尽如人意材质不达标性能拖后腿 2021.12.16 vivo开发者大会-互联网技术专场

8. 问题&难点存在问题改进难点联调太繁琐使用unity 打包体积太大，不适合展示类应用重复工作多使用laya 强调多实体的性能，单个实体的细节表现不尽如人意材质不达标性能拖后腿 2021.12.16 vivo开发者大会-互联网技术专场

9. 问题&难点存在问题改进难点联调太繁琐使用unity 打包体积太大，不适合展示类应用重复工作多使用laya 强调多实体的性能，单个实体的细节表现不尽如人意材质不达标性能拖后腿 2021.12.16 vivo开发者大会-互联网技术专场

10. 问题&难点存在问题改进难点联调太繁琐使用unity 打包体积太大，不适合展示类应用重复工作多使用laya 强调多实体的性能，单个实体的细节表现不尽如人意材质不达标性能拖后腿 2021.12.16 vivo开发者大会-互联网技术专场

11. 优化方向减少联调成本设计师编辑材质所见即所得优化页面性能更少的内存占用，更快的加载速度增强材质表现更丰富的材质/光影表现简化发布流程一键打包上线，无需前端介入 2021.12.16 vivo开发者大会-互联网技术专场

12. 优化方向减少联调成本设计师编辑材质所见即所得优化页面性能更少的内存占用，更快的加载速度增强材质表现更丰富的材质/光影表现简化发布流程一键打包上线，无需前端介入 2021.12.16 vivo开发者大会-互联网技术专场

13. 360度展示平台提供360度商品展示页全链路解决方案工业设计模型设计师处理导入3D编辑器调整展示效果打包上线 2021.12.16 vivo开发者大会-互联网技术专场

14. 优势解放前端简化流程表现丰富性能给力全程无需开发参与在线编辑模型特定材质定制shader 相较于threejs方案内存占用一键发布光影表现更加自然生动节省50% 简化联调和沟通的流程 2021.12.16 vivo开发者大会-互联网技术专场

15. 架构模型管理材质管理格式转换场景管理权限管理上线管理模型编辑场景编辑材质库环境编辑用户管理上线管理手势库标签展示动画展示模型展示材质解析 AR 2021.12.16 vivo开发者大会-互联网技术专场

16. 架构模型管理材质管理格式转换场景管理权限管理上线管理模型编辑场景编辑材质库环境编辑用户管理上线管理手势库标签展示动画展示模型展示材质解析 AR 2021.12.16 vivo开发者大会-互联网技术专场

17. 架构模型管理材质管理格式转换场景管理权限管理上线管理模型编辑场景编辑材质库环境编辑用户管理上线管理手势库标签展示动画展示模型展示材质解析 AR 2021.12.16 vivo开发者大会-互联网技术专场

18. FBX转glTF 模型修改配置，专题数据格式转换数据存储资源存储权限管理服务侧模型，环境贴图，打包页面等静态资源编辑/查看权限，上线权限管理 2021.12.16 vivo开发者大会-互联网技术专场

19. 服务侧–格式转换 blender c4d 支持原生导出glTF 需要使用第三方插件 2021.12.16 vivo开发者大会-互联网技术专场

20. 序列化FBX 转换JSON 打包glTF或自定义格式 Node 服务侧—格式转换 Geometry Material Mesh Texture Skin Animation 2021.12.16 vivo开发者大会-互联网技术专场

21. WebGLRenderer Scene 展示侧—选型—three.js Light SpotLight PerspectiveCamera Mesh MeshPhongMaterial Geometry +Vertices[] +colors[] +faces[] +faceVereexUvs[] Camera BoxBufferGeometry +map Material Texture +image 2021.12.16 vivo开发者大会-互联网技术专场

22. WebGLRenderer Scene 展示侧—选型—three.js Light SpotLight PerspectiveCamera Mesh MeshPhongMaterial Geometry +Vertices[] +colors[] +faces[] +faceVereexUvs[] Camera BoxBufferGeometry +map Material Texture +image 2021.12.16 vivo开发者大会-互联网技术专场

23. SystemA System SystemB 1：n 展示侧—选型—playcanvas SystemC World ComponetA 1：n Entity Componet 1：n ComponetB ComponetC 2021.12.16 vivo开发者大会-互联网技术专场

24. 展示侧—选型—基础对比 three.js playcanvas 生态相对丰富相关参考文档内容较少高解析力材质下的内存占用高内存占用低支持自定义shader 支持自定义shader 偏真实生硬明亮表现力强 2021.12.16 vivo开发者大会-互联网技术专场

25. 加载速度模型体积展示侧—优化环境贴图体积 darco压缩 HDR解析dds+png 2021.12.16 vivo开发者大会-互联网技术专场

26. 加载速度模型体积展示侧—优化环境贴图体积 darco压缩 HDR解析dds+png 2021.12.16 vivo开发者大会-互联网技术专场

27. 可编程管线展示侧—自定义shader 可编程管线提供数据顶点着色器图元装配光栅化片元着色器顶点数据绘制顶点位置将顶点装配成三角形用像素填充图元用颜色填充像素 2021.12.16 vivo开发者大会-互联网技术专场

28. 展示侧—自定义shader 优化前优化后 2021.12.16 vivo开发者大会-互联网技术专场

29. 模型操作创建/编辑页面编辑侧参数设置材质管理页面管理公共素材管理环境管理贴图管理用户角色用户管理角色权限 2021.12.16 vivo开发者大会-互联网技术专场

30. 拖拽查看查看编辑侧—编辑页模型操作缩放查看选中实体 raycast命中第一个实体移动/缩放按下空格 2021.12.16 vivo开发者大会-互联网技术专场

31. 参数设置天空盒编辑侧—编辑页贴图高光漫反射自发光 shader 2021.12.16 vivo开发者大会-互联网技术专场

32. 展示端屏幕内容可交互 AR 能力支持更丰富的界面控件 2021.12.16 vivo开发者大会-互联网技术专场

33. 总结 3D技术承载着让用户足不出户就可以直观的感受到产品的能力，随着虚拟现实技术的不断成熟，这一优势无疑会进一步放大。想要呈现更好的展示效果，不仅需要设计师持续的创意输出，平台也需要不断丰富自身的能力，助力功能落地。 2021.12.16 vivo开发者大会-互联网技术专场

34. 2021 vivo开发者大会互联网技术专场苏宁 | vivo 用户运营前端专家相关技术文章后续将在公众号发布敬请关注