技术拆解-同济大学虚拟展厅
虚拟世界不仅要真实,更要超越真实,提供线下难以实现的体验。
其中所有的展品无论从物理结构还是交互方式来看,都是现实世界中不可能存在之物,令整个展馆充满了超越现实的未来感和科技感,为观众提供了真实世界中无法复制的观展体验。
依托游戏化设计理论,观众观展的过程甚至可以像打游戏那样精彩有趣。
开发成本
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 材质(微表面,以及如何在一个材质球上做出不同的材料效果、使
用法线贴图而不是建模)
资料
在线地址:
https://tjdi.tongji.edu.cn/tags/virtual-gallery
官方介绍:
https://mp.weixin.qq.com/s/MMdZocUM7KYkZOW6yhxlgA
B 站教学:
(精)别人根据小意思 VR 的教程做的模仿项目,有细节配置的讲解、如何分析打包后的大小等:
https://www.bilibili.com/video/BV1WB4y1J7Di/
小意思 VR9.13 出的视频,这个人 9.25 就完成 Demo 发布上来了,感觉应该还是不会很耗时的,我们值得尝试一下。
教授的讲解:
https://www.bilibili.com/video/BV148411W7jZ/
场景渲染技巧-汽车展厅: