Performance Three.js-提高移动性能（VR硬纸板）

我正在开发一个基于Three.js的移动虚拟现实web应用程序。要测试应用程序，我使用两个设备：

• 安卓Nexus5（带Adreno330），大约8岁
• 安卓BQ AQUARIS X（带Adreno 506），大约3岁

以下是我正在使用的：

GLTF车型 我以这种格式加载所有内容，尽可能地抽取模型。在这个应用程序中，大约有8个模型（一些动物，一些建筑物，一艘船等），非常低保利，一些动画。没什么特别的，如果我只在启用灯光的空场景中加载模型，我会得到45-55fps。启用立体效果（VR）时的类似结果。没有阴影

纹理 GLTF模型使用的每个纹理都经过了压缩，从而缩短了加载时间。所有图像的大小都调整为二的幂。无论如何，地形纹理相当大（300kb），其正常纹理更大（700kb）。我不能再减少它，否则它会丢失很多细节

材料 我处理所有加载的材质，并将其转换为MeshLambertMaterial（如果可能）和MeshPhongMaterial

灯光 我只使用两种灯光：环境光和聚光灯，它们被用作太阳。无阴影投射（无需）

Skybox 有两种：一种是背景（夜空），另一种是近景，带有透明云（自动旋转）

Lensflare 它相当昂贵，但应用程序需要它。我设置了NoBlending模式，以防速度更快。DepthTest设置为false以避免云之间的瑕疵。 此外，我还更改了场景中涉及的每个模型的渲染顺序设置，使其在渲染之前不进行渲染

---

帧速率是可以接受的，无论是在正常模式还是VR模式（具有立体效果）。 但是，当包含“高级”效果时，例如天空/太阳着色器和水着色器，帧速率会非常糟糕。 我使用这两个例子：

以下是我为改进这一点所做的一些测试：

着色器精度 我试图修改着色器代码，但我根本不知道自己在做什么（着色器语言是我面临的最难的语言，显然是因为我缺乏数学知识……）。我刚刚添加了“mediump”精度以提高性能，但着色器停止工作（全黑）。在海洋着色器中，类似的情况也会发生：光线反射非常差，并且有一个大的白色区域，在那里应该有详细的光线反射。看起来这两个着色器都只能在“highp”精度下工作，这使得它们在移动设备上运行非常糟糕

设备像素比率 我的笔记本电脑有1.25dpi，即使禁用了抗锯齿功能，这也足够了。但是移动设备使用3dpi，它可以获得高质量的图像，但在低GPU设备上速度非常慢，如果启用VR模式，屏幕会一分为二，速度会更慢！我知道我可以限制在移动设备上使用2dpi，这当然可以提高帧速率，但如果可能的话，我希望避免使用2dpi，以不损失任何质量（当您通过VR纸板上的塑料镜头观看屏幕时，这一点更为明显）

抗锯齿 在ADRENO506上，启用抗锯齿后，帧速率降至20fps。。在虚拟现实模式下只有10 fps。 使用FXAA composer可以改善结果，但不会太多

WebGLDeferredRenderer 我可以看到海洋着色器中的一些改进。 但是在天空/太阳着色器中，它仍然非常缓慢。在这里真的值得吗？我认为这将有助于加载着色器

全屏 该应用程序需要全屏运行，但启用它时我会损失20帧/秒。这正常吗

更多想法… 我认为我可以尝试更多的东西：创建一个额外的场景，在那里渲染天空和海洋，但分辨率较低，然后（不知何故…）将其与渲染所有模型的第一个场景集成。我不知道这是否有效，我对闪电、下达命令等有严重怀疑。。但我们的想法是以较低的质量渲染困难的部分，使模型具有较高的质量

---

如果您有任何建议，我将不胜感激。现在我对一切都敞开了心扉。

对于所有这些必备条件（高帧率、高dpi、全屏、抗锯齿、立体视图，在8年前的设备上），您不应该使用“天空和水”着色器示例。这些着色器在片段着色器中进行计算，这意味着每像素要进行大量计算。你应该尝试使用或编写自己的材质来减轻GPU的负载。事实上，8岁的手机比3岁的手机的帧速率要高一倍，奇怪的是：我知道这些材质可能很昂贵，但我需要它们用于这个应用程序。我更愿意尝试更改代码的某些部分，而不是删除它们。此外，这是一款VR应用程序，所以立体视图和全屏是“必备”功能，对不起。同样适用于可接受的帧速率，任何低于50fps的速度都会让你在几秒钟内感到恶心。我想以某种方式调整当前代码，也许在不同的场景/渲染器中渲染着色器，我不知道。