我正在开发基于Three.js的移动VR网络应用程序。为了测试该应用程序，我使用了两种设备：
这是我正在使用的：
GLTF模型 我以这种格式加载所有内容，并在可能的情况下抽取模型。在此应用程序中，大约有8种模型（一些动物，一些建筑物，船等），相当低调，有些动画。没什么特别的，如果我仅在启用了灯光的空场景中加载模型，则可以达到45-55fps。启用StereoEffect（VR）可获得类似结果。没有阴影。
纹理 GLTF模型使用的每个纹理均已预先压缩，从而缩短了加载时间。所有图像的大小调整为2的幂。无论如何，地形纹理很大（300kb），其正常纹理甚至更大（700kb）。我不能再减少它，否则它将失去很多细节。
材料 我处理所有加载的材料，并将它们转换为MeshLambertMaterial（如果可能）以及MeshPhongMaterial。
灯光 我只使用了几盏灯：Ambient和SpotLight，它们被用作太阳。没有阴影（不需要）。
Skybox 有两种：一种用于背景（夜空），另一种用于背景（透明云）（自动旋转）。
镜头光晕 它相当昂贵，但是应用程序需要它。我设置了NoBlending模式，以防它更快。 DepthTest设置为false以避免云之间的伪影。 另外，我将场景中涉及的每个模型的渲染顺序设置更改为不在其之前渲染。
在正常模式和VR模式（带有StereoEffect）下，均可接受帧速率。
但是，当包括“高级”效果（例如，天空/太阳着色器和水着色器）时，帧速率会变得糟透了。
我正在使用这两个示例中的内容：
https://threejs.org/examples/webgl_shaders_sky.html
https://threejs.org/examples/webgl_shaders_ocean.html
这些是我为改善这一点所做的一些测试：
着色器精度 我试图修改着色器代码，但我根本不知道自己在做什么（着色器语言是我遇到的最困难的一种语言，这显然是因为我的数学不足。）我刚刚添加了“中等”精度来提高性能，但是着色器停止工作（全黑）。在海洋着色器中，发生了类似的事情：光线反射出真实的不良光线，并且在较大的白色区域中应该进行详细的光线反射。看来两个着色器只能以“高”精度工作，这使得它们在移动设备上的运行情况确实很差。
设备像素比率 我的笔记本电脑的分辨率为1.25dpi，即使禁用了抗锯齿也足够了。但是移动设备获得3dpi的分辨率，可以得到高质量的图像，但是在低GPU设备上的确很慢，在启用VR模式且屏幕一分为二的情况下，速度甚至会更高！我知道我可以限制移动设备上的2dpi分辨率，这肯定会提高帧速率，但是我想避免这种情况，如果可能的话不会丢失任何质量（当您通过VR硬纸板上的一些塑料镜头注视屏幕时，这种情况会更加明显..）。
抗锯齿 在启用了抗锯齿的ADRENO506上，帧率降至20fps ..而在VR模式下仅为10 fps。 使用FXAA作曲器可以改善效果，但效果不会太大。
WebGLDeferredRenderer 我可以看到海洋着色器有所改进。 但是在天空/太阳着色器中，它仍然非常慢。在这里真的值得吗？我认为这将有助于加载着色器。
全屏 该应用程序需要全屏运行，但是启用它会丢失20fps。这正常吗？
更多想法... 我认为我可以尝试更多的方法：创建一个附加场景，以较低的分辨率渲染那里的天空和海洋，然后（以某种方式）将其与渲染所有模型的第一个场景集成。我不知道这是否行得通，我对闪电，渲染订单等存在严重怀疑。但是，其想法是以较低的质量渲染困难的零件，而使模型保持高质量。
任何建议将不胜感激，在这一点上，我向所有人开放。