淘宝人生专属小屋--虚拟人和虚拟场景技术探索

1. 淘宝人生专属“小屋” 虚拟角色和虚拟场景技术探索梵昀阿里巴巴淘宝互动娱乐前端工程师

2. 目录 01 我们有什么我们想做什么 02 我们一起来创作 03 技术框架内幕 04 未来展望

3.

4. 我们有什么？我们想做什么？入口路径淘宝人生首页旅行玩法首页人生小屋

5. 我们想做什么：人生小屋人生小屋演示视频

6. 我们一起来创作 Get Started!

7. 技术框架内幕

8. 室内场景 Step1: 加载房间模型制作场景场景文件格式转换 3D场景模型资产标准场景导入引擎选择

9. 室内场景同Step1: 加载家具模型场景

10. 1. 透视相机：Perspective camera 室内场景 Step2: 加载相机? 预备知识 Scene Camera Renderer 2. 正交相机：Orthographic camera Render the scene with camera 将相机捕捉到的场景帧，通过渲染器渲染到画布上展示给用户

11. 室内场景坐标系统: MVP矩阵变换 • • 局部空间： Local Space，或者称为物体空间(Object Space)，局部坐标是对象相对于局部原点的坐标世界空间：World Space，世界坐标作为一个更大空间范围的坐标系统

12. 室内场景 Step2: 加载相机? 选择透视相机：Perspective camera FOV: 视场角，相机视锥体的两端的夹角。视场角的大小决定了视野范围，视场角越大，视野就越大。目标物体超过这个角就不会被收在镜头里。

13. 室内场景 Step3: 相机如何围绕场景中心旋转？OrbitControl OrbitControl 轨道控制器：使相机围绕目标进行轨道运动三维场景能旋转的本质：相机对象的旋转鼠标左右拖动改变相机位置、角度、渲染空间数据引起图像变化

14. y 室内场景 Step3 trick: 相机视野变换？FOV y z Field of View 相机视野相机平视相机位于顶部，俯视视角时，看到整个房间？ x 相机的张角变大，视野FOV 增大 z 相机俯视，FOV增大 camera.rotationX x

15. 室内场景 Up till now: 场景模型展示疑问❓ • 为何墙壁被隐藏了？单面墙 • 视角在入户门背后时，如何隐藏门框？ mesh visibility

16. 室内场景 Step4: 隐藏门框 mesh visibility y 世界坐标系 x camera.worldPosition（x，y，z）> doorEdge.worldPosition（x, y, z）相机z坐标 > 门框z坐标，隐藏门框mesh z

17. 美术生产角色 Step1: 加载虚拟人

18. 人物动起来 Step2: Joystick操控摇杆 Joystick 2个重要参数： • • joystick force: strength in % joystick angle: angle in radian 疑问 ❓ 相机没有跟随移动，人走出视野

19. 人物动起来且始终在视野中 Step3: 相机跟随场景的相机，挂载到人物node父节点上，人物在中心子节点设置的坐标位置是相对于父节点的局部空间坐标，相机始终位于人物node正前 Joystick操控人物node移动场景相机同步移动，场景视角改变，人物始终在中心

20. 游戏逻辑家具选中方案：Raycast Raycast光线投射原理： 1. 确定射线起点：常用相机原点 2. 确定射线终点：鼠标点击点（视口坐标 -> 世界坐标: MVP） 3. 创建射线对象：起点是相机坐标，终点为鼠标点击处 4. 检测碰撞结果：射线和检测物体的包围和求交 5. 捕获与此射线相交的空间中的物体 6. 相交的物体按照深度排序，并返回如何选中家具？ • 射线起点：相机 • 射线终点：鼠标点击 • 检测物体：家具 • 返回：与家具相交点的位置

21. 游戏逻辑家具拖拽移动: Raycast 核心点：如何得知鼠标拖拽位置的世界坐标？ • 射线起点：相机 • 射线终点：鼠标点击 • 检测物体：地板 • 返回：与地板相交点的位置

22. 游戏逻辑人物与家具碰撞：Raycast 如何检测人物与家具碰撞？ • 射线起点：人物 • 射线方向：人物走动方向 • 检测物体：家具 • 返回：与家具相交点的位置大量家具时，低端机达不到 fps30 格子

23. 游戏逻辑人物与家具碰撞：格子看不见的逻辑层：tileInfo • 将地板划分为 n * n 二维数组形式 • 家具所占地砖 x * y • 此位置地砖保存该家具信息

24. 游戏逻辑与家具动作交互 • 足够靠近动作触发点 • 旋转人物转向（基于家具自转角度 + 触发点位置） • 动作触发点播放动画 Play animation

25. 视效优化阴影渲染: shadow map What is a shadow map? 贴图叠加。传统的实时渲染？若有n个光源： 1. 2. 3. 4. 5. 使用第1个灯光 spot light 渲染一次整个场景，产生一个shadow map 使用第2个灯光 directional light 产生一个shadow map … … 最终将 n 次渲染的阴影结果进行合并，每个mesh渲染读取n个shadow map 大量计算和性能 ❓

26. 阴影渲染 Part1：家具阴影渲染如何提升阴影所需性能？方案1：可以有多个灯光，但只有一个平行光可产生阴影方案2：使用光照贴图或环境光照遮挡贴图来预先计算离线照明的效果离线渲染方案3：使用假阴影，添加一个平面放到物体下方的地面上，同时赋予一个看着像阴影的纹理图片材质离线渲染面光源

27. 人物假阴影阴影渲染 • Part2：人物阴影渲染 • 方案3，面光源投影，人物下方添加一个阴影材质的平面更好的效果：模糊处理如何实时渲染？离屏渲染实时渲染人物阴影

28. 人物阴影渲染 Off-Screen rendering GPU屏幕渲染： • On-Screen Rendering：当前屏幕渲染，屏幕上显示GPU 读取帧缓冲区（Frame Buffer）渲染好的的数据 • Off-Screen Rendering：离屏渲染，因为一些限制，无法把渲染结果直接写入frame buffer，GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作，之后再写入frame buffer。为什么会使用离屏渲染？当使用圆角，阴影，遮罩的时候，图层属性的混合体被指定为在未预合成之前不能直接在屏幕中绘制，需要屏幕外渲染被唤起。实时渲染人物阴影：离屏渲染，单独在内存中创建一个屏幕外缓冲区并进行渲染

29. • 增强社交属性：室内单人 • 多人多样的社交玩法，好友聚会，好友社交，多人实时通信方案未来展望 • 提升小屋视觉效果：全局光照离线烘焙，添加更加真实的光影效果

30. 扫码回复「D2」获取第十七届 D2 演讲 PDF 材料后续也将推送 D2 会后技术文章，敬请关注！！

31. 感谢大家观看