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

淘宝人生专属“小屋”虚拟角色和虚拟场景技术探索梵昀阿里巴巴淘宝互动娱乐前端工程师目录我们有什么 我们想做什么01我们一起来创作02技术框架内幕03未来展望04我们有什么？我们想做什么？淘宝人生首页旅行玩法首页人生小屋入口路径我们想做什么：人生小屋演示视频人生小屋我们一起来创作Get Started!技术框架内幕制作场景资产标准室内场景Step1:加载房间模型引擎选择3D场景模型场景文件格式转换场景导入室内场景同Step1:加载家具模型场景室内场景Step2:加载相机预备知识1.透视相机：Perspective camera2.正交相机：Orthographic cameraSceneCameraRendererRender the scene with camera将相机捕捉到的场景帧，通过渲染器渲染到画布上展示给用户室内场景坐标系统:MVP矩阵变换局部空间：Local Space，或者称为物体空间(Object Space)，局部坐标是对象相对于局部原点的坐标世界空间：World Space，世界坐标作为一个更大空间范围的坐标系统室内场景Step2:加载相机选择透视相机：Perspective cameraFOV:视场角，相机视锥体的两端的夹角。视场角的大小决定了视野范围，视场角越大，视野就越大。目标物体超过这个角就不会被收在镜头里。室内场景Step3:相机如何围绕场景中心旋转？OrbitControlOrbitControl 轨道控制器：使相机围绕目标进行轨道运动三维场景能旋转的本质：相机对象的旋转鼠标左右拖动改变相机位置、角度、渲染空间数据引起图像变化室内场景Step3 trick:相机视野变换？FOVFieldField ofof ViewView 相机视野相机视野相机位于顶部，俯视视角时，看到整个房间？相机的张角变大，视野FOV 增大camera.rotationXxzy相机平视相机俯视，FOV增大z zxy室内场景Up till now:场景模型展示疑问为何墙壁被隐藏了？单面墙视角在入户门背后时，如何隐藏门框？mesh visibility室内场景Step4:隐藏门框 mesh visibilityz zxy世界坐标系camera.worldPosition（x，y，z）doorEdge.worldPosition（x,y,z）相机z坐标 门框z坐标，隐藏门框mesh角色Step1:加载虚拟人?美术生产人物动起来Step2:Joystick操控摇杆Joystick 2个重要参数：joystick force:strength in%joystick angle:angle in radian疑问相机没有跟随移动，人走出视野人物动起来且始终在视野中Step3:相机跟随场景的相机，挂载到人物node父节点上，人物在中心Joystick操控人物node移动场景相机同步移动，场景视角改变，人物始终在中心子节点设置的坐标位置是相对于父节点的局部空间坐标，相机始终位于人物node正前游戏逻辑家具选中方案：RaycastRaycast光线投射原理：1.确定射线起点：常用相机原点2.确定射线终点：鼠标点击点（视口坐标-世界坐标:MVP）3.创建射线对象：起点是相机坐标，终点为鼠标点击处4.检测碰撞结果：射线和检测物体的包围和求交5.捕获与此射线相交的空间中的物体6.相交的物体按照深度排序，并返回如何选中家具？射线起点：相机射线终点：鼠标点击检测物体：家具返回：与家具相交点的位置游戏逻辑家具拖拽移动:Raycast核心点：如何得知鼠标拖拽位置的世界坐标？射线起点：相机射线终点：鼠标点击检测物体：地板返回：与地板相交点的位置游戏逻辑人物与家具碰撞：Raycast如何检测人物与家具碰撞？射线起点：人物射线方向：人物走动方向检测物体：家具返回：与家具相交点的位置大量家具时，低端机达不到大量家具时，低端机达不到fps30fps30格子游戏逻辑人物与家具碰撞：格子看不见的逻辑层：tileInfo将地板划分为 n*n 二维数组形式家具所占地砖 x*y此位置地砖保存该家具信息游戏逻辑与家具动作交互动作触发点足够靠近动作触发点旋转人物转向（基于家具自转角度+触发点位置）播放动画 Play animation视效优化阴影渲染:shadow mapWhat is a shadow map?贴图叠加。传统的实时渲染？若有n个光源：1.使用 第1个灯光 spot light 渲染一次整个场景，产生一个shadow map 2.使用 第2个灯光 directional light 产生一个shadowmap3.4.5.最终将 n 次渲染的阴影结果进行合并，每个mesh渲染读取n个shadow map大量计算和性能 阴影渲染Part1：家具阴影渲染如何提升阴影所需性能？方案1：可以有多个灯光，但只有一个平行光可产生阴影方案2：使用 光照贴图 或 环境光照遮挡贴图 来预先计算离线照明的效果方案3：使用 假阴影，添加一个平面放到物体下方的地面上，同时赋予一个看着像阴影的纹理图片材质离线渲染离线渲染面光源阴影渲染Part2：人物阴影渲染人物假阴影人物假阴影方案3，面光源投影，人物下方添加一个阴影材质的平面更好的效果：模糊处理如何实时渲染？离屏渲染实时渲染人物阴影人物阴影渲染Off-Screen renderingGPU屏幕渲染：On-Screen Rendering：当前屏幕渲染，屏幕上显示GPU读取帧缓冲区（Frame Buffer）渲染好的的数据Off-Screen Rendering：离屏渲染，因为一些限制，无法把渲染结果直接写入frame buffer，GPU在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作，之后再写入frame buffer。为什么会使用离屏渲染？为什么会使用离屏渲染？当使用圆角，阴影，遮罩的时候，图层属性的混合体被指定为在未预合成之前不能直接在屏幕中绘制，需要屏幕外渲染被唤起。实时渲染人物阴影：离屏渲染，单独在内存中创建一个屏幕外缓冲区并进行渲染未来展望增强社交属性：室内单人多人多样的社交玩法，好友聚会，好友社交，多人实时通信方案 提升小屋视觉效果：全局光照离线烘焙，添加更加真实的光影效果