技术拆解-同济大学虚拟展厅

虚拟世界不仅要真实,更要超越真实,提供线下难以实现的体验。

其中所有的展品无论从物理结构还是交互方式来看,都是现实世界中不可能存在之物,令整个展馆充满了超越现实的未来感和科技感,为观众提供了真实世界中无法复制的观展体验。

依托游戏化设计理论,观众观展的过程甚至可以像打游戏那样精彩有趣。

开发成本

7 人团队:

  • 一位老师(柳喆俊)

  • 2 位主力

  • 4 位

耗时 2 个月

2 个月的时间,其实非常依赖这位老师深厚的积累,否则如果零经验,2 个月肯定搞不出来的,坑都踩不完。

功能分析

渲染管线:URP

老师之前是专注 HDRP 的,应该有很多经验可以借鉴到 URP 中。

场景模型

原始的是 Sketchup 模型

用 3dsMax 对模型进行了全盘重建

将首包下载量控制在了 40MB 左右

场景搭建

海报

自定义 Shader 呈现视差效果的主视觉海报

交互

以尽可能简单的交互方式触发尽可能丰富的交互效果,除了必要的行走功能以外,其余交互主要由虚拟角色的位置与运动触发,几乎不产生额外的学习成本。

行走功能基于 Unity 在 2021 年新推出的  Starter Assets  改进而来,将第一人称版本和第三人称版本进行了整合,以确保观众可以根据观展需要切换合适的视角。

渲染效果

用了SSR插件($49):Shiny SSRR 2 Screen Space Raytraced Reflections

这个插件可以带来非常酷的反射效果。Screen Space Raytraced Reflections 似乎是一个后期处理技术。

关于 SSR 技术的介绍:

Unity URP 屏幕空间反射 Screen space Reflection

实时全局光照 Screen Space Reflection

为什么有噪点:这是后期效果,主要是为了弥补(或掩盖)lightmap 有限的精度。

性能优化

我的笔记本,20%左右的 CPU 使用率,30%不到的 GPU 使用率,真的是牛逼!

  • 尽可能减少性能消耗较大的实时光源,剔除了不必要的材质与效果,并且对渲染参数进行了精细的调节,最终达到画质与速度的平衡。

  • 在进入展馆后调用指令生成 Reflection Probe 而非保存 HDR 格式的 Cubemap(场景用了烘焙探针?)

  • 精细调整每一张贴图的尺寸与压缩参数,并通过自定义贴图通道打包方式配合特制的 Shader 来减少贴图数量

  • 使用 Poly Brush 手绘户外建筑物顶点色并配合自定义的 Shader 来表现全局照明与窗户色彩变化

  • 以流式传输方式播放作品介绍视频

  • 尽量用贴图代替实时计算

小意思 VR 的教程内容-技术构成

最大的亮点:A(Art,艺术)和 P(Performance,性能,40MB)

  • 美术:少即是多;二分建模,八分材质;光影、构图、色彩;比例;冷暖对比;动静对比;阴影

  • 人物操控:商城免费包

  • 交互:collider and trigger

  • 动画:自带的 Animator(还有个可选的 PlayMaker)

  • 特效:后处理 Post processing(bloom、AO、色散、SSR 屏幕空间反射)

  • 界面:UGUI

  • 视频播放:VIDEOPlayer 组件,播放流媒体链接

  • 讲解弹幕:简单的 UV 流动,弹幕事先做成贴图。 或者 UGUI,把画布调成 3D 模式,结合动画系统

特效专门拿出来说一下

处理 Post processing(bloom、AO、色散、SSR 屏幕空间反射)

反射优先级概念(屏幕空间反射 SSR>反射探针>天空盒子)

视差贴图 双 UV 需要学习(两张基础贴图,其 UV 的偏移值和用户位置/相机角度关联)

shader-可以先从 ASE/ ShaderGraph 起手(需要数学基础,尤其是向量)

沸腾小球可能用到粒子和 Shader 做顶点偏移

还有些动画可以是设计师直接做到模型里面去

溶解特效 Shader,参考这个讲解这个讲解,或者这个讲解

学完PBR 材质和 UV,知道一套贴图、一个材质球能搞定复杂的材质

PBR 材质(微表面,以及如何在一个材质球上做出不同的材料效果、使

用法线贴图而不是建模)

Unity 渐进式光照烘焙

资料

在线地址:

TJDI Virtual Exhibition 2022

https://tjdi.tongji.edu.cn/tags/virtual-gallery

官方介绍:

https://mp.weixin.qq.com/s/MMdZocUM7KYkZOW6yhxlgA

B 站教学:

https://www.bilibili.com/video/BV1pd4y167BL?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=1ddc293a4439c7106ebd7878040f7c81

(精)别人根据小意思 VR 的教程做的模仿项目,有细节配置的讲解、如何分析打包后的大小等:

https://www.bilibili.com/video/BV1WB4y1J7Di/

小意思 VR9.13 出的视频,这个人 9.25 就完成 Demo 发布上来了,感觉应该还是不会很耗时的,我们值得尝试一下。

教授的讲解:

https://www.bilibili.com/video/BV148411W7jZ/

场景渲染技巧-汽车展厅:

https://www.bilibili.com/video/BV1N4411e7HK/