前不久，为了帮助VR用户熟悉WebXR的用法，Mozilla推出了一款教学体验：《HelloWebXR》。用交互式的内容展示VR的操作方式并不是首创，SteamVR、Oculus等平台均有类似的体验，对于初学者来讲效果不错。
通过推出《HelloWebXR》，Mozilla希望向更多人（尤其是开发者）展示在网页端VR中可实现的多样化交互，而为了让整个教学体验像游戏一样轻松，Mozilla在设计上加入不少巧思。
为了打造教学体验中的大厅场景，Mozilla参考了网络和3D内容平台Sketchfab上的大量设计。在确定框架后，便开始用Blender工具开始绘图，并在VR中测试，整个大厅的主旨是看起来友好而温馨，采用大多数人都可以接受的中性色调。
- 2）门着色器：用于渲染门的星空透视特效，根据极坐标进行渲染，并叠加在动态的蓝色底色上；
- 3）立体球形着色器：用于渲染立体球形的变形效果（形状和色彩），这种光晕效果是通过调整红蓝色系位置实现的；
- 4）缩放着色器：用于优化的缩放效果，只显示油画的部分纹理和白色原型光晕。这个着色器是一个平面，使用光线交接的贴图坐标来计算缩放所显示的纹理尺寸。
- 5）SDF文字着色器：使用Troika库，可快速渲染SDF文字，无须生成纹理。
此外，由于不变材质不发光，于是需要提前计算出光影图，这样做有利有弊，优点是：光线质量比实时光照更好，因为渲染在线下提前完成，不受时间限制，因此不需要在Blender中进行路线追踪就能实现全局照明，模拟真实的光线。另外一点，由于不需要实时光线渲染，着色也是不变的，只需要在网格上应用纹理就足够。
相反光影图也具有两大缺点，即：体积容易变大，纹理应用在模型上时容易出现可见的像素或像素噪音（因为纹理分辨率不足或渲染效果不够顺滑，不够细致），使用2048x2048分辨率的纹理可以解决这一问题，同时Mozilla还将1万个样本用于渲染。另一点，光影图不支持动态修改光线，不过好在《HelloWebXR》应用的光线是静态的。
除了展示音频外，还有一个测试VR眩晕感的城市场景，其特点是多边形数量少，但看起来足够逼真，将用户置身于一个高楼大厦顶端。经过一番体验，发现这种VR场景并没有产生眩晕感，还发现只是单纯将人转移到500米的虚拟高度并不足以让人眩晕，不仅正确纹理规模是关键，场景也需要给人带来一种不安全感才能更沉浸。另外，体验者与其他建筑的相对位置和规模，以及灯光和纹理还需要更逼真。
于是，Mozilla将建筑的纹理简化成简单的黑白色调，通过位置和规模的对比，提升眩晕感。这个场景只包含两个网格：建筑和传送门，场景中用户的移动范围有限，因此只需要渲染场景中心的部分，亮度和纹理都是重复且不变的。
除此之外，也有一些令人满意的地方：
- ·视觉效果比较干净、美观，尽管使用简单材质和纹理，效果并不会看起来廉价；
- ·合并网格和简化材料对于性能提升有很大帮助，不过目前还没有在3DoFVR头显上测试过；
- ·BASIS或Draco工具效果不错，如果用JPG或PNG格式的图像作为纹理，那么载入时间要长很多。参考：
