Mozilla分享：《Hello WebXR》的创作研发过程记录

来源：映维网 作者 广州客

Mozilla日前为WebXR v1.0 API发布了一个名为Hello WebXR的演示内容。对于今天这篇由迭戈·戈博纳（Diego F. Goberna）撰写的博文，团队希望尽可能多地介绍有关其视觉涉及的方方面面，并主要面向有意创建基础3D场景并正在寻找更多技巧方法的开发者，以及单纯对Hello WebXR的创建过程感兴趣的人士。所以，这不是一篇详细教程，只是项目进展的记录。下面是映维网的具体整理：

1. 概念

我们从一开始的想法就是提供一种简单的，慢节奏的，易于使用的体验，并且纳入众多不同的交互和迷你体验来向VR新手介绍这项媒介，同时展示最近发布的WebXR API。它几乎可以支持任何VR设备，但我们的主要目标设备是OculusQuest，所以我们认为我们可以提供一些共享相同物理空间的迷你体验，以及一些必须转移到不同的场景的体验。

我们首先采集有关“大厅”的参考资料并制作概念图：

然后，我们使用Blender来绘制大厅，并在VR中对其进行测试。我们需要确保它散发出舒适的感觉，又要保持中立以支持所有受众。

2. 管道

3D模型已导出为glTF格式（Blender现在提供了一个导出器，而three.js提供了一个加载程序），并且几乎一直使用纹理PNG，但在后期所有纹理都是手动优化，从而大幅减少其大小。特定纹理保留在PNG（手柄透明度）中，其他纹理则转换为JPG。较大的纹理使用basicu命令行程序转换为BASIS。

glTF文件导出时不包含材质，因为它们是通过代码手动创建，并在加载时分配给特定的对象，以便我们能够获得所需的确切材质，并且可以轻松进行调整。

总的来说，我们的管道非常传统和简单。我们使用Photoshop绘制或调整纹理。网格和光照贴图是使用Blender创建，并导出到glTF和PNG。

对于创建光照贴图UV，在展开之前，我们将仔细挑选的边缘标记为接缝，然后在大多数情况下使用默认的展开器将对象展开。最后，使用UVPackMaster 2 PRO对UV进行优化。

摄影测量对象使用了Draco压缩，这将asset的大小从1.41MB减少到683KB，不到一半。

3. 特殊着色器和效果

为了实现特殊的效果，我们自行创建了一些着色器：

3.1 光束着色器

这是通过沿一个轴偏移纹理并以叠加模式渲染而实现：

纹理是简单的渐变。由于是在加性模式下渲染，因此黑色变成透明（不添加），而深蓝色添加蓝色不会饱和到白色：

射线目标是弯曲的网格。顶部圆柱和底部圆盘无缝连接，但它们的面和UV方向相反。

3.2 门着色器

这是为了实现大门的星空效果。朝内推进的感觉是通过从中心推动网格，并当其悬停时缩放Z来实现：

下面这个纹理使用极坐标在着色器中渲染，并添加到随时间变化的基础蓝色之中：

3.3 全景球着色器

用于全景球的变形（形状和颜色）。

光晕效果是对景观缩略图进行汇总的特殊纹理，我们先前已通过向左移动红色通道和向右移动蓝色通道进行了修改：

3.4 缩放着色器

用于画作的缩放效果，仅显示纹理的一部分，以及白色的圆形光晕。几何图形是一个简单的平面，着色器获取射线相交的UV坐标以计算要在缩放中显示的纹理量。

3.5 SDF文本着色器

文本渲染是使用Troika库完成。它用起来非常方便，因为它能够仅使用指向TTF文件的网址来渲染SDF文本，无需生成纹理。

4. 性能

（编辑：广州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!