three.js移动设备上的性能问题

嘿！我是Mau，我正在为客户开发一个网页。
目标是使网页成为多平台（台式机和移动设备，（IOS、Android、Windows）等。
我们正在使用Three.js然后做出反应。
现在，当我试图在手机上打开网页时，网页崩溃，我不知道问题是否发生了，因为我们在功能不够强大的移动设备上测试网站。
如何使我的代码对桌面和移动设备都有效？home1849×897 314 KB
我正在使用带有着色器的平面，但要使其看起来好看，它需要许多顶点，我知道这需要很多绘制调用。此外，我们使用1024像素和2048像素的纹理。我们没有使用任何灯光，也没有雾。相机的平截头体很大，网格尺寸也很大。
请看一下这个项目。n[https://www.polyhedronniverse.com/8]
能否尝试用简单的无光材质（如MeshBasicMaterial）替换所有自定义着色器？此测试也不使用纹理。如果性能更好，则应用程序将绑定片段着色器。
在下一步中，尝试更改自定义着色器，使其不使用纹理。如果性能仍然良好，则纹理分辨率太高。考虑到您当前使用的纹理数据量（根据“网络”选项卡），我想这是导致性能问题的根本原因。
此外，您的应用程序需要传输超过90MB的数据，直到启动为止。这对于我们的桌面应用程序来说也是太多了。
非常感谢您的回复。也许我应该多解释一下着色器。我使用的是附着到三、平面几何.
这些是顶点和碎片着色器；nattribute vec3 position;attribute vec2 uv;uniform mat4 projectionMatrix;uniform mat4 modelViewMatrix;uniform mat3 normalMatrix;uniform float time;uniform vec2 mousePosition;varying vec2 vUv;varying float vElevation;varying float = d * d * (3.0 - 2.0 * = k2 + = fract(k4 * (1.0 / += noise( vec3( pos, t ) * 02.0 ) * 00.5000;r += noise( vec3( pos, t ) * 04.0 ) * 00.2500;r += noise( vec3( pos, t ) * 08.0 ) * 00.1250;r += noise( vec3( pos, t ) * 16.0 ) * 00.0625;return r / 1.9375;}void = vUv * = fbm( displacement * 3.0 + pos2 * 2.0, t * = fbm( displacement * 5.0 + pos4 * 2.0, t * = projectionMatrix * modelViewMatrix * vec4 ( position, 1.0);}
精度高浮点；可变vec2 vUv；可变浮点vElevation；均匀浮点uHue；均匀浮点a；浮点hue2rgb（浮点f1，浮点f2，浮点色调）{if（色调；=f1+（f2-f1）*（（2.0/3.0）-色调）*==2.0*hsl.z=uHue+vElevation*.05；色调+=smoothstep（.6,1.0，vElevation）*.2；浮动+=高光*+=高光*=hsl2rgb（色调，>
因此，为了使平面中的内容看起来更好，它需要很多三角形。当我降低宽度和高度段的数量并在移动设备上进行测试时，性能会更好。我使用更多纹理的地方是在场景的背景上，我已经降低了文件的大小，它只需要传输40 MB（这个更改还没有在公共版本中）
Problems with Performance on Mobile Devicesn

three.js移动设备上的性能问题

three.js[已解决]正交摄影机的变换控件：gizmos缩放问题

three.js多次渲染同一模型（obj模型），FPS要低得多

three.js可缩放场景背景

three.js移动导入的Gltf模型

three.js平面明暗处理的问题

three.js如何渲染立方体材质？

three.js如何创建要在网格中拟合的线段

three.jsGLTFLoader.js这是我的登记簿错误

three.js使用threejs的光流

three.js使用光线投射动态绘制多边形