2023虚拟人和虚拟场景技术探索

虚拟角色和虚拟场景技术探索目录我们有什么

我们想做什么01我们一起来创作02技术框架内幕03未来展望04我们有什么？我们想做什么？淘宝人生首页旅行玩法首页人生小屋入口路径我们想做什么：人生小屋演示视频人生小屋我们一起来创作Get

Started!技术框架内幕制作场景资产标准室内场景Step1:

加载房间模型引擎选择3D场景模型场景文件格式转换场景导入室内场景同Step1:

加载家具模型场景1.

透视相机：Perspective

camera室内场景Step2:

加载相机📷

预备知识Scene Camera Renderer2.

正交相机：Orthographic

cameraRender

the

scene

with

camera将相机捕捉到的场景帧，通过渲染器渲染到画布上展示给用户室内场景坐标系统:

MVP矩阵变换局部空间：

Local

Space，或者称为物体空间(ObjectSpace)，局部坐标是对象相对于局部原点的坐标世界空间：World

Space，世界坐标作为一个更大空间范围的坐标系统室内场景Step2:

加载相机📷选择透视相机：Perspective

cameraFOV:

视场角，相机视锥体的两端的夹角。视场角的大小决定了视野范围，视场角越大，视野就越大。目标物体超过这个角就不会被收在镜头里。室内场景Step3:

相机如何围绕场景中心旋转？OrbitControlOrbitControl

轨道控制器：使相机围绕目标进行轨道运动三维场景能旋转的本质：相机对象的旋转鼠标左右拖动改变相机位置、角度、渲染空间数据引起图像变化室内场景相机的张角变大，视野FOV

增大camera.rotationXyxz相机平视相机俯视，FOV增大zxStep3

trick:

相机视野变换？FOVyField

of

View

相机视野相机位于顶部，俯视视角时，看到整个房间？室内场景Up

till

now:

场景模型展示疑问❓为何墙壁被隐藏了？单面墙视角在入户门背后时，如何隐藏门框？mesh

visibility室内场景zxStep4:

隐藏门框

mesh

visibilityy世界坐标系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光线投射原理：确定射线起点：常用相机原点确定射线终点：鼠标点击点（视口坐标

->

世界坐标:

MVP）创建射线对象：起点是相机坐标，终点为鼠标点击处检测碰撞结果：射线和检测物体的包围和求交捕获与此射线相交的空间中的物体相交的物体按照深度排序，并返回如何选中家具？射线起点：相机射线终点：鼠标点击检测物体：家具返回：与家具相交点的位置游戏逻辑家具拖拽移动:

Raycast核心点：如何得知鼠标拖拽位置的世界坐标？射线起点：相机射线终点：鼠标点击检测物体：地板返回：与地板相交点的位置游戏逻辑人物与家具碰撞：Raycast如何检测人物与家具碰撞？射线起点：人物射线方向：人物走动方向检测物体：家具返回：与家具相交点的位置大量家具时，低端机达不到fps30格子游戏逻辑人物与家具碰撞：格子看不见的逻辑层：tileInfo将地板划分为

n

*

n

二维数组形式家具所占地砖

x

*

y此位置地砖保存该家具信息游戏逻辑与家具动作交互动作触发点足够靠近动作触发点旋转人物转向（基于家具自转角度

+

触发点位置）播放动画

Play

animation视效优化阴影渲染:

shadow

mapWhat

is

a

shadow

map?贴图叠加。传统的实时渲染？若有n个光源：使用

第1个灯光

spot

light

渲染一次整个场景，产生一个shadow

map使用

第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在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作，之后再写入framebuffer。为什么会使用离屏渲染？当使用圆角，阴影，遮罩的时候，图层属性的混合体被指定为在未预