云栖2021，元宇宙建设中···

“好在这里有一个完全沉浸式的虚拟环境，为绝望国家里的所有人提供一个机会——短暂逃离无法忍受的现实。这个虚构之地，就是元宇宙。”

——尼尔·斯蒂芬森《雪崩》

①

写在建设之前

二十年前，尼尔·斯蒂芬森在他的小说《雪崩》中对未来科技进行了一波赛博朋克式的探索：虚拟现实、移动计算、数字货币和增强现实等赫然在目；

二十年后，Facebook 掌门人宣称，他们将不再是一家社交公司，而是会成为一家“元宇宙公司”；Roblox和Epic创始人也都深信：Metaverse 将带来与电话、互联网同等规模的变革。

越来越多的人开始期待“元宇宙”究竟能给我们的世界带来怎样的改变，是成为互联网的接替者，让我们更加身临其境？还是缔造一种新型基础设施，让我们的生活、娱乐、办公、制造等形成完美闭环？……

无可否认的是，这个世界一定基于虚拟现实技术，由阿里云设计中心孵化的“数字巡展”Digital Exihibition产品正是为构建一个全新的虚拟现实沉浸体验而打造。

“数字巡展”Digital Exihibition是一种将物理世界进行数字转译或重构、在虚拟/现实空间中结合新技术体验、信息可视，进行仿真互动、沉浸展示的解决方案。

能够解决各传统行业在数字化转型场景中的沉浸体验、创新展示等问题，涵盖互动沙盘、智慧园区、数字孪生、云上展厅、智慧文旅、VR/AR/MR、虚拟直播、产业巡检等。

已服务过金融、能源、科技等200+真实客户案例，挖掘客户诉求，用智能化、绿色化的方式推动传统行业数字化转型。

-数字巡展产品概念

-数字巡展产品矩阵

②

云栖的元宇宙建设

2021年的云栖是融合“前沿、探索与想象力”的科技盛宴，数字巡展希望在这个舞台上打造出不一样的数字科技谷，帮助不论是远在天边的线上参与者还是近在眼前的现场参会者都能获得更好的临场感。

-云栖大会数字谷

整个云栖导览的策划始于大会前的预热，中与大会中的参与，终于大会后的离场，以用户的体验链路为核心从线上到线下进行了四个维度的创意策划。

-云栖大会思维互动导览体系

Level 1 线上沉浸

-PC端沉浸体验效果演示

Level 2 线上传播

-移动端沉浸体验效果演示

Level 3 线下互动

‍-会场触屏端沉浸体验效果演示

Level 4 线下监控

-会场热力大屏沉浸体验效果演示

〇设计&策划

云栖导览的3D设计，是围绕云栖大会“云栖小镇变身为云栖数字谷”的世界观进行创作的。我们希望3D导览在满足功能性的同时，也能体现数字新世界的沉浸感。云栖导览伴随预热期官网第一次发布到10月19号云栖大会正式开始，前后迭代了3个版本。

-云栖数字谷效果图

-草图设定

PC端1.0

PC端2.0

PC端3.0

〇 3D视效&工作流

云栖导览项目的3D模型设计，要兼顾线上端和移动端的设备性能问题，我们始终在平衡品质和性能之间的关系。3D设计分为以下几个关键步骤：

-3D设计流程

a、高模设计

云栖数字谷是基于GIS数据信息进行搭建的，确保了导览系统功能的准确性。我们在数字谷中添加了丰富的元素，来展现数字新世界的科技氛围。这部分内容被完整的应用在了线下会场热力大屏中。

-热力大屏效果

b、拓扑低模

我们对模型重新拓扑，优化了模型的布线，整理出分别适配手机端、PC端和触屏端的模型。

c、拆UV‍

初始的模型是在C4D里制作的，对于相对简单的模型，我们用C4D自带的工具进行展UV。对于较为复杂的模型，我们建议使用专业的工具来拆分UV，比如RizomUV。

d、制作贴图

展好UV后，我们使用渲染器将漫射光照信息烘焙到纹理贴图上。烘培好的贴图如果存在瑕疵或者不满意的地方，可以在Photoshop里做调整。

e、动画设定

在3D导览触屏端的“路线引导”功能需要使用很多段动画。我们在实际制作中，发现在Blender里制作和导出动画，出现错误的概览是最低的。

-触屏端的路线引导功能

f、还原效果

最后经过复杂的引擎配置流程，我们的3D模型在不同客户端得以上线。

-模型优化演示

g、经验总结

本次的美术资源生产管线需要结合不同的工具创作美术资源；考虑到不同客户端的适配问题，我们制作了多个版本的模型；由于没有统一的标准，模型的面数，贴图大小和数量，动画长度等都存在未知难点。这些技术黑盒的存在，使我们在效果还原过程中增加了很多探索成本。在项目结束后我们将设计过程中的经验和规范标准进行了沉淀，方便后续项目复用。

-设计推敲的过程稿

〇 ‍技术&体验

建筑爆炸以及分层内部漫游

好的导览一定需要有分层的建筑内部展示以及各层的内部漫游。因此在技术上我们实现了这两个特点。同时在细节上做了更丰富的交互处理。用户不仅通过hover（线上）/点触（线下）可以看到展开后的建筑，在点选某层后，也可以通过左上角的UI在各层间进行切换或者直接越级跳回到初始界面。

线下路线动画

在云栖场地一共有5块线下触屏，我们为线下的参会者设计了五块屏到各馆的导航动画指引，参会者可以通过点击“到这去”触发路线动画，同时可以360度浏览路线。

丰富的视觉效果（视效升级）

本次项目在之前的基础上做了视效升级，主要以现场的真实环境为主，还原了场地的真实现状，更方便参会者导览。

跨端多屏联动

不同于传统的纯线上会展，本次导览做到了“跨端多屏”的技术效果。在pc端（线上）、移动端（线上）、触屏（线下），大屏（线下）都完成了适配，一套素材完成了各终端设备的体验需求。

从Iot到RDS再到前端大屏，4部门数据协作

为了给观众展示场地实时人流热度，我们从市场运营部门收集需求，通过IoT部门传回各馆出入口人流数据到RDS数据库，然后由RDS数据库做数据逻辑的处理计算出各主要场馆的实时人流数据（每一分钟请求一次数据），之后由我们在前端对数据进行展示。在多部门协作过程中，为了节省开发时间，我们与后端同学沟通确定数据接口结构以后，利用mock.js假数据模拟可能的人数来调整前端显示的数据效果。本次项目完成了从IoT数据到后端关系型数据库再到前端展示的全链路开发。

灵活运维的参数化设计

由于大会的特殊性，导致需求的频繁更改，比如展商的频繁更换等，甚至到最后一刻都有修改的需求。而展位和全部论坛加起来一共有将近500个，因此人手工配置不现实。于是我们提供业务方excel表格，根据excel表格更改需求，然后再由excel表格转存为csv，导入代码统一做数据处理。

镜头导览体验优化

为了避免镜头切换的180度跨度过大的转换，我们设置了两个机位，根据用户当前所处位置判断选择相对旋转度数小的角度做旋转，这样能够保证旋转始终小于90度；不仅如此，为了让每个用户都能够从默认界面开始探索，我们设置了15秒的时间，若在15秒内无人操作则自动重置至默认状态。

两个默认回归视角：

15s无交互重置：

设置时间戳

由于论坛时间每天都在变化，因此我们根据4天的上下午时间段设置了时间戳。比如上午最后一场论坛结束后就会自动切换为下午的论坛时间。避免了每天手动修改时间。

2021年10月20日上午（左）下午（右）A馆-云栖之巅:

性能优化

在性能优化方面，oculus quest对于webxr的guideline是模型面数在100000以内，drawcalls在100以内。因为需要展示将近500的展区与论坛，我们将drawcalls尽量做到了200以下，在移动端将模型减面至70000，同时将材质尺寸减小到512*512，大幅节省了显卡内存。如图所示pc与移动端帧率都能保持在60fps左右，同时二者效果没有明显差别。

-PC端帧率（60fps）与渲染参数

-移动端帧率（60fps）与渲染参数

线下体验硬件标准化

从疫情期间的纯线上展览到后疫情时代的线上线下结合的形式，我们也积累的如下图所示的硬件标准。根据不同的交互以及场景需求，配置相应的硬件设备。

③

建设结果

〇现场照片

-现场大屏实拍

〇福布斯top10

设计师的想象力是无限的，我们常常跳出自己的行业去虚拟世界中遨游，妄想通过画笔和电脑去操作时间与空间，正如电影《头号玩家》的场景，在未来的某一天，人们可以随意切换身份，自由的穿梭于物理世界和数字世界，在虚拟空间各时间点所构成的元宇宙世界中学习、工作、购物、旅游；而当这些想法遇到行业客户时，妄想便不再是妄想。

-云栖互动导览设计开发团队合影

我们把云栖互动导览的创作思路同样运用到更多的行业，帮助金融行业的客户进行数字化园区智慧管理，帮助政府行业用低成本的方式搭建数字党建馆，帮助因为疫情无法办展的各行各业实现线上办展、线上逛展和线上交易；现在想象一下，数字巡展可以跟一万种行业进行碰撞，当你以虚拟现实的方式轻轻拨动他，那么便得到了元宇宙的设计新基建。

当我们拿着这套解决方案和团队中的各类前沿设计产品找到了福布斯，获得了福布斯中国最具商业价值智能设计企业Top10的称号。