2月，基于 Cocos Creator 研发的线上数字空间 TRUE SPACE 首次开放。本次，该项目负责人陈炫烨将和我们聊一聊 TRUE SPACE 的技术亮点与实现，分享如何用 Cocos 打造一个元宇宙虚拟展会。
楼宇科技 TRUE 大会是美的楼宇科技事业部举办的高规格的年度行业大会。上个月底，第二届楼宇科技 TRUE 大会在上海举行。与往年不同，今年大会首次开放了线上数字空间 TRUE SPACE，打破传统单一的参会方式，为广大用户提供全新的线上虚拟逛展体验。
TRUE SPACE 由美的楼宇科技研究院 TEAM x.y.z. 和 IBUX 团队共同打造，使用 Cocos Creator 研发，集云逛展、娱乐、社交、直播等多种功能于一身，是目前市面上标杆级的类元宇宙在线应用。
在 TRUE SPACE 中，玩家可以生成自己的虚拟形象，畅游本届大会的八大主题场景，解锁隐藏在场景中的游戏互动和惊喜彩蛋；玩家之间可以自由对话、交换名片、连麦交流，更便捷、更趣味地进行社交活动；同时还可以观看线下各大论坛的实时直播，线上线下同步互动。
此外我们还实现了不少有趣的效果，比如花朵生长、失重、穿梭、水体、地球导航、拍照分享等，有很多小心思。本文我将挑一些比较通用的功能分享给大家。
技术选型
为什么选择使用 Cocos 开发呢？
首先，我们希望 TRUE SPACE 能够通过网页直接访问，并且和大会官网无缝衔接。Cocos 的网页发布能力和相对完善的编辑器能力，能够帮助我们更好地实现这一需求，这也成为我们选择 Cocos 的主要原因。此外，Cocos 的引擎源码是开源的，也能方便我们做一些定制化和问题的定位。
技术要点
反射探针
反射是营造场景质感的一个重要手段。由于开发时我们使用的 v3.5.2 还不支持反射探针，为了能让场景有更好的视觉表现，我写了一个反射探针的插件。当然，v3.7 新增了反射探针功能，我们可以直接在编辑器里创建与设置。
捕捉
反射探针的原理其实很简单，就是将相机的 fov 设置成90度，对场景的6个方向进行拍摄，并存储为图片。为了让图片能更好的的预览和节约存储空间，我将图片转成了全景图，并在保存的过程当中，对图片做了基于粗糙度的预卷积计算。所以最终输出的图片如下。
加载
将图片加载到 cubemap 的多级 mipmap 中，遇到了个坑，在一些低版本的 iOS 的浏览器中，不支持设置 framebuffer 的 mipmap 等级。最后我们是通过直接读取纹理数据的方式绕过了使用 framebuffer。
插值
反射探针的插值，是通过物体包围盒与反射探针 box 相交的体积比例，作为权重实现的。
盒子投影（boxProjection)
如果简单地对捕捉的环境做反射，你会发现空间上是有问题的。如下图，地面反射的场景距离用户非常远，很不协调。
那么如何解决呢？
方案是开启 boxProjection。将贴图的采样投影到一个 box 内，让地面可以在正确的范围内反射场景，这样会有相对正确的空间感（InteriorCubeMap 也是类似的原理，InteriorCubeMap 可以用于做假室内效果）。
开启 boxProjection
但是这样又出现了个新问题，超出 box 的地方，会出现严重的采样错误，并且交界处会出现边界线。
有边界线
解决方案就是将 box 的最小尺寸设置成物体的包围盒的大小，这样可以减少很大一部分的视觉问题。
边界线消失
在写这个插件的过程当中，其实也遇到不少问题，比如 gfx 不支持 cubemap 作为 framebuffer 的输出，这里我用了比较 hack 的手段，直接使用 webgl 的原生方法来绕过 gfx，但是这样会造成平台兼容性的问题。不过这个插件只是用于离线生成，所以问题也不大。
PBR 优化
常规的 PBR 渲染会包含两张预计算的环境贴图，分别对应了 specular 和 diffuse。移动端对贴图带宽是很敏感的，所以能省则省。
这里我做了两个优化策略，一个是用 SH 替代 diffuse 卷积图，另一个是直接用粗糙度为1的 specuar 卷积图。
第二个方案的效果看起来和 diffuse 卷积图很接近，而且对资源的需求更少，只要一张卷积图就够了，所以采用了这个方案，插件里我全做了支持。PBR 的计算都是在线性空间，最后输出要做一个 tonemap（将 HDR 转成 LDR）和 gamma 矫正，这里我将两个合在一起用了一个近似。
动态生成海报
TRUE SPACE 做了一个拍照分享功能，用户可以将自己的游玩画面生成海报分享给微信好友。这背后有两个问题：如何生成这张图片，以及微信如何能识别这张图片。
生成图片
生成海报的主要原理是利用相机的 targetTexture 功能，用户可以将相机拍到的内容输出到一张 renderTxture 上，然后将这张图给到 Spite 的 spriteFrame 即可。
所以处理流程是这样的，先用场景相机渲染三维场景到一张 renderTxture 上，然后再用 UI 相机将 UI 渲染到这张 renderTxture 上，就能得到一张完整的海报。
那么海报生成了后可以直接拿去分享吗？答案是不行，微信没法识别这张图片，因为它本质上不是图片。所以我们要把它转变成一张真正的图片。
微信识别图片
经过测试，我们发现微信可以识别 img 标签，并且还能用于好友之间的分享，所以上面的问题就变成了如何将 renderTexture 转换成 img 标签。
Cocos 的 renderTexture 内置了一个 readPixel 方法，可以直接读取图像数据。因此只需将图像数据生成 dataURL 喂给 img 标签即可。
动态 UI 适配
默认情况下当浏览器的分辨率与设计分辨率不一致时，UI 会出现比例严重失调的情况。TRUE SPACE 做了全平台适配，UI 比例会根据宽高比自适应，包括折叠屏也都可以适配。
更换形象
TRUE SPACE 更换形象的操作挺有意思的：镜头会往角色推进，背景会被虚化，并且角色不会被任何物体遮挡。
这是如何实现的呢？其实这里用了两台相机，当点击个人头像时，一台相机负责渲染场景，另外一台相机负责渲染角色，清除深度（clearFlags 设置为 DepthOnly），并将角色渲染到画面的最前端。
场景切换动画
我们做了一个比较有趣的场景切换效果，原理是把 UI 渲染到一张 renderTexture 上，然后将这个 renderTexture 赋值给 Sprite，最后通过自定义 SpriteMaterial 实现。
需要注意，当浏览器尺寸发生变化时，复用 renderTexture 会让 Sprite 丢失画面。经过大量尝试，我最后通过 new RenderTextue() 解决了这个问题。
