Mozilla揭秘WebXR时代设计技巧

前不久，为了帮助VR用户熟悉WebXR的用法，Mozilla推出了一款教学体验：《Hello WebXR》。用交互式的内容展示VR的操作方式并不是首创，SteamVR、Oculus等平台均有类似的体验，对于初学者来讲效果不错。

通过推出《Hello WebXR》，Mozilla希望向更多人（尤其是开发者）展示在网页端VR中可实现的多样化交互，而为了让整个教学体验像游戏一样轻松，Mozilla在设计上加入不少巧思。

整体感觉

《Hello WebXR》的概念其实是一个简单、轻松且容易上手的交互式体验，相当于多种迷你应用的合集，主要是帮助初学者了解VR，并展示新推出的WebXR API。这个API接口支持几乎任何一台VR头显，尤其是Oculus Quest一体机，因此一些内容更侧重于移动性。

为了打造教学体验中的大厅场景，Mozilla参考了网络和3D内容平台Sketchfab上的大量设计。在确定框架后，便开始用Blender工具开始绘图，并在VR中测试，整个大厅的主旨是看起来友好而温馨，采用大多数人都可以接受的中性色调。

流程

在Blender完成创作后，3D模型导出为glTF，并使用PNG（大多数）或JPG格式的图像进行纹理渲染。对于网页端VR来说，很重要的一不就是对全部纹理进行手动优化，来降低3D资源的大小。此外，还使用Draco压缩工具来优化用摄影测量法实现的3D模型，将大小进一步从1.41MB降低到683KB。

总得来讲，《Hello WebXR》的视觉设计流程比较传统、简单，纹理渲染和修改使用了Photoshop，而网格和灯光贴图是用Blender完成的，并导出为glTF和PNG格式。

特殊着色器和效果

1）光线着色器：这是一个简单的渐变效果，由于是用附加模式进行渲染，使得黑色变成透明，深蓝叠加蓝色没有饱和为白色。光线的目标是一个曲面网格，由一个圆柱和圆盘组合而成；

2）门着色器：用于渲染门的星空透视特效，根据极坐标进行渲染，并叠加在动态的蓝色底色上；

3）立体球形着色器：用于渲染立体球形的变形效果（形状和色彩），这种光晕效果是通过调整红蓝色系位置实现的；

4）缩放着色器：用于优化的缩放效果，只显示油画的部分纹理和白色原型光晕。这个着色器是一个平面，使用光线交接的贴图坐标来计算缩放所显示的纹理尺寸。

5）SDF文字着色器：使用Troika库，可快速渲染SDF文字，无须生成纹理。

性能测试

与PC端或高端设备不同，在优化在Quest移动端平台的性能上，需要用特殊办法来处理多边形数量、材质和纹理复杂程度。Mozilla希望WebXR教学应用在Quest上像普通应用或PC VR应用一样运行顺畅，因此决定采用以下手段：

1）在保证整洁平滑的情况下，将多边形数量降低至最少；

2）网格尽可能合并，所有共享相同材质的静止物体合并在一起，并导出为同一个网格；

3）尽可能简化、降低或回收利用材质，也就是说：场景中几乎所有元素都具备一个不变的材质，只使用两个定向光（手柄）；

此外，由于不变材质不发光，于是需要提前计算出光影图，这样做有利有弊，优点是：光线质量比实时光照更好，因为渲染在线下提前完成，不受时间限制，因此不需要在Blender中进行路线追踪就能实现全局照明，模拟真实的光线。另外一点，由于不需要实时光线渲染，着色也是不变的，只需要在网格上应用纹理就足够。

相反光影图也具有两大缺点，即：体积容易变大，纹理应用在模型上时容易出现可见的像素或像素噪音（因为纹理分辨率不足或渲染效果不够顺滑，不够细致），使用2048x2048分辨率的纹理可以解决这一问题，同时Mozilla还将1万个样本用于渲染。另一点，光影图不支持动态修改光线，不过好在《Hello WebXR》应用的光线是静态的。

音效和眩晕测试

《Hello WebXR》中包括一个展示空间音频的场景，每一种声音都伴随着对应的动画作为视觉提示，它们是由关键帧组成的动态网格。

除了展示音频外，还有一个测试VR眩晕感的城市场景，其特点是多边形数量少，但看起来足够逼真，将用户置身于一个高楼大厦顶端。经过一番体验，发现这种VR场景并没有产生眩晕感，还发现只是单纯将人转移到500米的虚拟高度并不足以让人眩晕，不仅正确纹理规模是关键，场景也需要给人带来一种不安全感才能更沉浸。另外，体验者与其他建筑的相对位置和规模，以及灯光和纹理还需要更逼真。

于是，Mozilla将建筑的纹理简化成简单的黑白色调，通过位置和规模的对比，提升眩晕感。这个场景只包含两个网格：建筑和传送门，场景中用户的移动范围有限，因此只需要渲染场景中心的部分，亮度和纹理都是重复且不变的。

总结

在《Hello WebXR》开发过程中，Mozilla有一些遗憾的地方，比如：

· 没有使用合适的硬件来渲染光影图，因此花了11小时才完成渲染，没办法快速进行修改；

· 还没有测试眩晕场景就开始优化第一版本，浪费了一周时间；

· 贴图分级细化水平偏低，纹理质量看起来不够高，近距离观看VR中的图像时能够注意到差异；

· 内容创作流程还有待简化；

除此之外，也有一些令人满意的地方：

· 视觉效果比较干净、美观，尽管使用简单材质和纹理，效果并不会看起来廉价；

· 合并网格和简化材料对于性能提升有很大帮助，不过目前还没有在3DoF VR头显上测试过；

· BASIS或Draco工具效果不错，如果用JPG或PNG格式的图像作为纹理，那么载入时间要长很多。参考：Mozilla