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. 机能

（编辑：河北网）

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