七人团队,2个月的时间,打造出跑在WebGL上的「元宇宙展馆」
同济大学设计创意学院(以下简称 D&I)副教授、数字动画与数字娱乐实验室负责人柳喆俊老师在年初的时候怎么也不会想到,今年的毕业季除了要盯学生的毕业设计,还得在两个月内打造一个虚拟的毕业设计展馆。
“因为疫情反复,我们无法预判能不能如往常一样举办线下毕展。一直等到 5 月才最终确定今年的毕展将完全采用线上的形式。”柳老师接受采访的时候表示,“这个工程还是很有挑战的,一方面是之前没做过类似的创作,另一方面是必须在这么短的时间里拿出符合学院知名度和影响力的成果,才能不辜负学生们的毕设作品。”
柳老师带领一个仅有三位核心成员(柳老师本人和他的两位研究生)的七人团队,花了两个月的时间为同学们的毕设打造了一个精彩纷呈的「元宇宙展馆」,该体验基于 Unity 开发,采用了 WebGL 技术,观众在浏览器中即可进入访问。除了馆内陈列的毕设,这个展馆本身就是一件值得大家去细细体验、探索的作品。
柳老师所就职的同济大学设计创意学院是 CUMULUS 全球设计、艺术与媒体院校联盟成员,ICSID 国际工业设计协会成员,DESIS 社会创新和可持续设计联盟成员。2007-2010 年间同济大学艺术设计系和同济大学设计创意学院连续 3 次被美国《商业周刊》评选为全球最佳设计学院及课程之一,2022 年在 QS 世界高校排行榜上位居全球“艺术与设计”学科第 12 名,已连续五年领跑亚洲其它高校。
谈及何谓“元宇宙”,柳老师表示它本身是很开放、包容的概念,用 Unity 实现的各类应用大都可以被归入其中。相比于去固化元宇宙的定义,他认为更有价值的事情是探索“元宇宙”这个概念所指引的发展方向:只要这些探索能够促进科学研究、提高生活质量、驱动社会变革,那么所有尝试都将是有益的。
本次「元宇宙展馆」正是一次有益的探索,柳老师不仅让仍在建设中的同济新楼抢先在虚拟世界中亮相,更是基于 Unity 引擎将 WebGL 的体验打造得精美流畅,颠覆了“WebGL=低画质”的传统印象;隐藏其中的学生毕设也能让用户享受到探索与发现的乐趣,在虚拟世界中流连忘返。
现实大楼在建,虚拟世界先行
让在建的大楼,在虚拟世界中“先用起来”。
去过 D&I 的朋友一定会发现,承载此次毕展的虚拟空间并不是学院最具代表性的“IF IT IS”三幢建筑,而是四平路上正在建设中的新大楼。尽管具体使用方案尚未确定,但仍不能阻止师生们基于设计蓝图展开想象的翅膀。
当下很多虚拟体验基本上是把现实世界里的场景与产品映射到虚拟世界去,但是在未来,这个过程很可能是反过来,由创意和设计来驱动生产。这次选择现实中在建大楼作为数字孪生体,也是柳老师团队在对未来进行畅想,或许等大楼竣工的时刻会发现,里面的元素就沿用了这次虚拟展馆的设计也未可知。
WebGL也能打造出“高颜值”体验
在实际着手开发以前,最重要的一步是技术选型。柳老师从 APP、云渲染、WebGL 等方案中,最终选择了以 WebGL 为主,以 APP 为辅的技术路径。
“原生 APP 无疑是执行效率最高、功能潜力最大的,但由于观众必须事先下载较大的文件后方可打开,一定程度上增加了使用成本,很可能不少潜在观众会选择放弃进入虚拟展馆参观”,柳老师表示,“更为便利的云渲染也是备选方案之一,但由于其服务价格与同时访问人数成正比,并且存在难以避免的些许延迟,考虑到经费限制和具体的项目需求,最后也只能作罢。”
虽然这个时代有“颜值即正义”的说法,但虚拟空间中的高颜值往往意味着高性能消耗,也正是因为这个原因,目前网上大部分的 WebGL 内容所展现的画质都是上世纪游戏的渲染水准。由于是第一次尝试使用 WebGL 技术表现体量较大、风格写实的空间,柳老师做出这一决定时内心比较忐忑,生怕画面效果令人失望,因此当时向学院领导表示只能“尽量试一试”,并将“视实际效果决定是否上线”。好在最终结果令人惊喜:WebGL 版的「元宇宙展馆」精致逼真,与桌面版本相差无几。那柳老师是如何使用性能受限的 WebGL 技术,打造出高颜值作品的呢?
最关键的第一步无疑是选择渲染管线,考虑到 WebGL 的局限性,柳老师选择使用以执行效能见长的 Unity 通用渲染管线(URP)。经过若干年发展 URP 管线日趋成熟,它已经能够产生非常精美逼真的渲染效果,而且适用于包括 WebGL 在内 Unity 支持的所有平台,最适合本项目的需求。但由于柳老师此前所积累的大量经验都在高清渲染管线(HDRP)方向,为开发这个项目他特意完整地阅读了 URP 的相关文档,好在它并不复杂,即便新用户也能快速上手。
当然,仅靠 URP 管线并不能自动达到画质与速度两全其美的结果,所有美术与程序资产都需要经过高度优化才有可能做到这一点。好在柳老师曾在 UBISOFT 工作,当时还是硬件性能捉襟见肘的 PS2 时代,因此在这方面他有丰富的经验。虽然有现成的 Sketchup 建筑模型,但为了优化渲染效能、更有效地利用三角面和贴图,柳老师决定使用 3dsMax 对模型进行全盘重建。此外,他还尽可能减少性能消耗较大的实时光源,剔除了不必要的材质与效果,并且对渲染参数进行了精细的调节,最终达到画质与速度的平衡。
除了执行效能以外,另一个影响体验的重要因素是数据下载量。若点开虚拟展馆后需要下载几百兆数据、等待三五分钟时间,那大部分观众可能等到一半便会关闭浏览器。所以,从一开始柳老师便时刻留意文件尺寸的增长,最终将首包下载量控制在了 40MB 左右,也就是说大部分用户在一分钟以内便可完成下载并开始游历虚拟展馆了。
为了做到这一点,除了对模型、贴图进行充分的优化以外,其它给项目“减重”的工作还包括:在进入展馆后调用指令生成 Reflection Probe 而非保存 HDR 格式的 Cubemap;精细调整每一张贴图的尺寸与压缩参数,并通过自定义贴图通道打包方式配合特制的 Shader 来减少贴图数量;使用 Poly Brush 手绘户外建筑物顶点色并配合自定义的 Shader 来表现全局照明与窗户色彩变化;以流式传输方式播放作品介绍视频,等等。
最后,就交互设计而言,考虑到许多观众可能并不具备丰富的游戏经验,因此柳老师决定以尽可能简单的交互方式触发尽可能丰富的交互效果,除了必要的行走功能以外,其余交互主要由虚拟角色的位置与运动触发,几乎不产生额外的学习成本。行走功能基于 Unity 在 2021 年新推出的 Starter Assets 改进而来,将第一人称版本和第三人称版本进行了整合,以确保观众可以根据观展需要切换合适的视角。
虚拟体验,一定要带来增值价值
在柳老师的构想中,虚拟世界不仅要真实,更要超越真实,提供线下难以实现的体验。否则,虚拟世界充其量就是个数字孪生体,难以发掘元宇宙的最大潜力。因此,尽管选择了真实世界中的建筑物作为展览空间,但其中所有的展品无论从物理结构还是交互方式来看,都是现实世界中不可能存在之物,令整个展馆充满了超越现实的未来感和科技感,为观众提供了真实世界中无法复制的观展体验。
这是入口处的动态雕塑《元·时·空》,由变体“&”符号构成的悬空时钟及缓缓行进的八大行星与大屏幕上的无垠星空相映成趣,突显出元宇宙与真实世界时空交错的意涵。
这是用于展示学生作品的交互影像装置,名为《光之协奏》。镶嵌着柔和灯光的金属曲线悬浮在空中缓缓旋转,而当观众靠近信息触点时它们将幻化为大屏幕展示作品宣传影片。
这是另一个用于展示学生作品的悖论空间,名为《次元通道》。每当用户打开并穿越一扇木门便会进入一个平行宇宙,展馆中的作品也将随之改变。
除了这些精彩有趣的作品展区以外,通过自定义 Shader 呈现视差效果的主视觉海报也提供了真实世界中不存在的观赏体验,在二楼的这些海报甚至可以与主角和场景物品互动,流动的图案让人充分体会到传统的平面设计作品到了元宇宙之中会如何焕发出全新的活力。
由于只有 2 个月的开发时间,柳老师还有很多的想法这次来不及一一实现。未来,这个展馆里除了毕设作品以外,还会增加多人互动的社交属性;依托游戏化设计理论,观众观展的过程甚至可以像打游戏那样精彩有趣。柳老师期望,可以让学生们参与到布展的过程中,在虚拟空间中给他们每个人划拨一块区域,让每位学生都能独立打造专属于自己的作品展示空间。
创意为源,技术为器
仅就数字技术而言,大学的主要任务是让大家掌握基础工具的使用,并在此基础上培养分析解决问题与自我学习的能力。
设计创意学院以“面向产业转型和未来生活的智能可持续设计”为学科定位,提出了本、硕、博创新设计人才培养框架,分别按“技”、“理”、“道”三层级来培养人才。在众多创意工具中,柳老师选择了 Unity 作为游戏设计课程的主要工具。
“我认为大学的主要任务是让学生通过学习基础工具的使用方法,掌握自我学习与分析解决问题的能力,并在此过程中培养艺术感与创造力。Unity 的应用范围广泛,不仅可以用来开发游戏,也可以用于教育、科研、数字人、虚拟展馆、交互装置、动画影视等等各种不同方向”柳老师自己本人也是 Unity 重度使用者,“通过我的课程,学生们基本能够掌握 Unity 引擎的主要功能模块、C# 脚本的编写,甚至包括初步具备 Shader 的设计能力。当然,Unity 涉及了一个非常庞大的知识体系,将来用 Unity 做什么、在哪个方向深入探索,则完全由他们自己决定。”
下面这些都是柳老师和他指导的设创学子利用 Unity 完成的精彩作品,若您想了解更多师生原创内容,敬请访问:
http://www.aboutleo.cn/wordpress/creations
柳老师的国家级虚仿金课《镜头语言虚拟实验》
http://www.aboutleo.cn/wordpress/20201101-2
学生原创4DVR游戏《次要任务》
http://www.aboutleo.cn/wordpress/20201125-2
学生原创恐怖冒险游戏《Dagon》
http://www.aboutleo.cn/wordpress/20210701-2
学生原创交互MV《抗生素》
http://www.aboutleo.cn/wordpress/20210701-5
学生原创交互MV《加州旅馆》
http://www.aboutleo.cn/wordpress/20210701-6
学生原创音乐游戏《Acousma》
http://www.aboutleo.cn/wordpress/20220116-2
http://www.aboutleo.cn/wordpress/20210314-2
虽然「元宇宙展馆」诞生于疫情的背景下,但是却不会止步于疫情时代。通过这次创作尝试,柳老师及其团队看到了虚拟展馆在未来的巨大发展空间及价值。相信在明年的毕业季上,「元宇宙展馆」将带来更多惊喜。
柳喆俊(Aaron Leo),现任同济大学设计创意学院副教授、硕士生导师、数字媒体设计师,并任数字动画与数字娱乐实验室以及沉浸式体感仿真实验室的创办人与负责人。其教学、科研与创作主要涉及三维动画、三维交互软件设计、游戏设计、虚拟现实与虚拟仿真等领域,带领学生完成的数字媒体类作品曾在国内外竞赛中屡获奖项。
Unity 非常欢迎与广大高校合作,共同推动实时 3D 人才的普惠教育发展。Unity 在业内拥有丰富的实战经验,并且已经整理出一套专业的教学体系,可以帮助院校实现数字化人才培养的教学体系升级,以推动产教融合的深度对接,满足院校及人才的发展需求。
https://unity.cn/unity-educational-cooperation
长按关注
第一时间了解Unity引擎动向,学习最新开发技巧
点击“阅读原文”,了解Unity教育计划