Mozilla分享:《Hello WebXR》的创作研发过程记录
副标题[/!--empirenews.page--]
来源:映维网 作者 广州客 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. 性能 (编辑:广州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |