VR 及 3D 技术在 Web 端架构设计与实践

1. 2021.07.04 VR 及 3D 技术在 Web 端架构设计与实践李阳 / 资深工程师 / ⻉壳 · 如视

2.

3. 李阳 @掬一捧 solome.js.org • 资深工程师 • ⻉壳如视用户端负责人 • 负责 VR 展示、VR 带看、AI 讲房、性能优化等用户侧的前端研发工作

4. 01 02 03 04 基于 VR 3D 模型新型业务场景面临的性能挑战总结的前端架构设计探索、实践及应对方案

5. 01 基于 VR 3D 模型的前端架构设计 VR 3D 模型的组成与形态基于 3D 模型与传统 DOM 开发的差异性对比前端架构分层 & 交互状态数据帧序列抽象

6. 三维模型 - 3D 模型建模 VR 3D 扫描设备 WebGL 渲染 3D 模型

7. 三维模型 - 多边形网格 (Polygon Mesh) 三维模型是怎样抽象建模的？

8. 三维模型 - 网格模型 + UV 贴图

9. 三维模型 - 网格模型 + UV 贴图把纹理贴图通过 UV 坐标映射到 3D 物体表面

10. VR 3D 模型形态 - 立方体全景三维模型全景立方体全景

11. VR 3D 模型形态 - 眼镜模式三维模型 VR 眼镜模式（全景）

12. 三⻆面片少，数据量低，内存占用低 Tween 补间过渡动画

13. 三⻆面片少，数据量低，内存占用低全景看细节，三维模型看整体 Tween 补间过渡动画

14. 基于 3D 模型与传统 DOM 开发的差异性对比 • 坐标体系 & 坐标系间转换 • 复杂交互：面向异步 Hooks 事件 • 碰撞监测 3D vs DOM

15. 坐标系体系 Local Space

16. 坐标系体系 World Space Local Space

17. 坐标系体系 World Space Local Space Camera

18. 坐标系体系 World Space Local Space Screen Space Camera

19. 面向异步Hooks事件 • 点击（单指） • 点击（单指） • 滚动（单指） • 滚动（单指） • 旋转（双指） • 放大缩小（多指） • 拖拽位移（多指） • 模式切换（动画） • ... ...

20. 面向异步Hooks事件 - 举例：全景走点

21. 面向异步Hooks事件 - 举例：全景走点 wantsTapGesture 将要触发点击 tapGesture 触发点击 panoSelected 选中全景点位 wantsToMoveToPano 将要移动全景点位 panoWillLoad 全景点位资源将要加载 panoLoaded 全景点位资源完成加载 initAnimationWillStart 动画开始触发九个异步事件 initAnimationEnded 动画结束 panoArrived 完成全景走点

22. 碰撞检测

23. 碰撞检测物体间的遮挡物体间的碰撞 Three.js Raycaster( origin, direction, near, far ) - origin — 射线的起点向量。 - direction — 射线的方向向量，应该归一化。 - near — 所有返回的结果应该比 near 远。 - far — 所有返回的结果应该比 far 近。 .intersectObject ( object, recursive ) - object — 检测该物体是否与射线相交。 - recursive — 如果设置，则会检测物体所有的子代。

24. 架构分层 DOM View 层 <canvas /> 三维视图首屏模块控制面板全景模式三维模式信息面板模块/组件户型模式眼镜模式动态模块 •VR 语音导览 •VR 实时带看协议层 jsBridge CompassPlugin RTC TVVideoPlugin WebSocket TagPlugin … .... 数据层 •AI/AR 讲房 •... ... Stores (Proxy/Mobx) Data/HTML Shell Web 服务插件生态 Node.js/Go 服务 Data/Keyframes WebSocket 服务

25. 数据层 - 序列帧抽象 & 数据驱动数据来源序列帧 — "翻译" JS Proxy & MobX 用户行为 WebSocket 推送 • 用户行为提前 "录制" • 策略/nlg 离线或实时生成 UI 响应

26. 02 新型业务场景探索、实践三维空间分析计算与二次加工 VR 实时带看：同屏连线，高效看房 VR 智能讲房：智能解说，身临其境

27.

28. 技术能力 - 三维空间分析计算 & 二次加工电视广告扫地机器人寻宝抽奖

29. 技术能力 - 三维空间分析计算 & 二次加工普通房源（ 2室1厅）白模户改装修（ 3室1厅）

30. 技术能力 - 三维空间分析计算 & 二次加工普通房源（2室1厅）白模户改装修（3室1厅）复杂简洁复杂

31. 三维空间 - "迷宫" 经典信息流布局搜索导航推荐筛选需要用户探索细节列表

32. VR实时带看 - 同屏连线高效看房传统看房模式 VR 线上实时带看用户无目的的找房经纪人带领看房用户经纪人

33. VR 实时带看 - 举例: App 与微信小程序实时语音同屏 WebView & H5 实时通信语音通道 miniProgram RTC语音通道 miniProgram Native RTMP iOS/Android App TRTC SDK RTP 腾讯云实时音视频服务 jsBridge via WebSocket VRWebView iOS/Android Native jsBridge Scheme keyframes WebSocket 画面帧数据通道 keyframes 序列帧通道 VRWebView

34. VR智能讲房 - 同屏连线高效看房传统一对一带看的缺陷 • 人力成本 • 专业水平: 了解程度、沟通能力 “方言” • 响应实时性：响应的及时性 • “社交恐惧症”

35. VR智能讲房 - 同屏连线高效看房职业经纪人的数字化形象我们将职业经纪人搬到手机上 …

36. VR智能讲房 - 同屏连线高效看房智能讲房策略 NLG服务调度服务 LRC 文本行为序列 WebSocket 通信剧本服务序列帧数据音视频 mp3/mp4 增强现实形象采集音色分析视频拼接服务动作：嘴型、招手效果：美白、瘦脸、褪绿幕语音TTS服务音色、语速、拟真

37. VR智能讲房 - 同屏连线高效看房扫码体验 — 点击"视说"

38. 03 面临的性能挑战及应对方案速度、内存占用造成的性能瓶颈基于 WebSocket 更 “智能” 地渐进增强、优雅降级...

39. 面临的问题加载耗时平均7.6s 慢内存溢出黑白屏崩溃 • 首屏加载耗时，用户留存率低 • VR ⻚面无法打开或交互期间黑白屏 • 模块繁多且彼此间依赖次序紊乱 • 低端设备或强内存依赖业务 "症状" 明显 • 无优先级策略，非模块化有序加载 • 黑白名单降级机制优化空间有限

40. VR 加载耗时 - 问题分析 50+MB 流量请求实时计算模块繁多 • 200+张2048尺寸图片请求 • 3D 模型文件解压缩 • 地图、模型等数据 • 户型图数据解析 • 讲房、广告等音视频 • 三维空间分析 + 碰撞检测 • 看房、讲房、带看业务模块繁多 • 加载渲染逻辑错乱备注：⻩色区域为网络请求

41.

42. VR加载耗时 - 优化策略动态加载上线 6.2s 动态加载 • 组件\模块化: 加载优先级策略 ➙ "懒" 加载减少预载数量 • 时机控制: VR 全景就绪再渲染 7.2s • 网络缓存: 浏览器、Node端等请求、计算 4.8s 6.2s ⺴络优化 • 限制 HTTP 请求数，避免密集网络请求消耗 • 增加 HTTP2 协议支持、静态资源动态域名请求 • Basis Universal 压缩: 不依赖jpg/png格式 2020年12月份平均加载时⻓ 2.55s

43. VR加载耗时 - 挖掘客户端能力资源预载 HTTP请求拦截代理&缓存 loading过程中节省500ms • WebView 缓存 "阈值" 低 • 客户端网络请求性能更高客户端首屏渲染没有Loading过程提前看VR

44. VR 首屏加载耗时 - 效果展示 Loading 加载时⻓(s) 8 7.6 6.2 1.92 Loading加载 1.86 Loading加载-iOS 1.98 Loading加载-Android

45. 在VR交互过程中，内存占用逐步递增增加内存池 • 选用更优秀的WebView控件 • 实现WebView独立进程降低内存占用 • 渲染机制上有新突破: 模型分片渲染 • 体验降级:黑白名单机制

46. VR性能瓶颈 - 影响因素⻥⻣图

47. VR性能瓶颈 - 影响因素⻥⻣图

48. VR性能瓶颈 - 影响因素⻥⻣图

49. 内存溢出 - WebScoket ⻓链, 动态增强或降级 VR ⻚面: 模块 + 交互 • 模块、业务场景 ("懒"加载) 信息收集用户 VR 行为、软硬件容器等各维度信息用户 "画像" 行为分析 • 设备类型、温度、电量、网络 • WebView容器类型等分析用户终端最大承受能力，加强体验或降级 • … … 后台推送 “热插拔” 服务后台 WebSocket ⻓连接 QA 云测统计数据仓库

50. 04 总结

51. 可玩性三维领域研发比如三维空间二次加工"乐高"式游戏序列帧 "热插拔" WebSocket • 数据驱动 • modules • 核心基础建设 • 序列帧抽象 • components • 更注重实时数据、推荐 • 序列化 & 反序列化 • plugins • 逐步抛弃主动式 Ajax • 动态添加 & 销毁欢迎大家加入这个领域~ 自动播放，提高信息获取效率性能，终端设备内存控制更智能、

52. 2021.07.04

53. 在此键入姓名在此键入Tittle

54.