1. 首页
  2. three.js

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

嘿!我是Mau,我正在为客户开发一个网页。n目标是使网页成为多平台(台式机和移动设备,(IOS、Android、Windows)等。n我们正在使用Three.js然后做出反应。n现在,当我试图在手机上打开网页时,网页崩溃,我不知道问题是否发生了,因为我们在功能不够强大的移动设备上测试网站。n如何使我的代码对桌面和移动设备都有效?home1849×897 314 KBn我正在使用带有着色器的平面,但要使其看起来好看,它需要许多顶点,我知道这需要很多绘制调用。此外,我们使用1024像素和2048像素的纹理。我们没有使用任何灯光,也没有雾。相机的平截头体很大,网格尺寸也很大。n请看一下这个项目。n[https://www.polyhedronniverse.com/8] n能否尝试用简单的无光材质(如MeshBasicMaterial)替换所有自定义着色器?此测试也不使用纹理。如果性能更好,则应用程序将绑定片段着色器。n在下一步中,尝试更改自定义着色器,使其不使用纹理。如果性能仍然良好,则纹理分辨率太高。考虑到您当前使用的纹理数据量(根据“网络”选项卡),我想这是导致性能问题的根本原因。n此外,您的应用程序需要传输超过90MB的数据,直到启动为止。这对于我们的桌面应用程序来说也是太多了。n非常感谢您的回复。也许我应该多解释一下着色器。我使用的是附着到三、平面几何.n这些是顶点和碎片着色器;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);}n精度高浮点;可变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(色调,>n因此,为了使平面中的内容看起来更好,它需要很多三角形。当我降低宽度和高度段的数量并在移动设备上进行测试时,性能会更好。我使用更多纹理的地方是在场景的背景上,我已经降低了文件的大小,它只需要传输40 MB(这个更改还没有在公共版本中)n Problems with Performance on Mobile Devicesn

three.js移动设备上的性能问题 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e7%a7%bb%e5%8a%a8%e8%ae%be%e5%a4%87%e4%b8%8a%e7%9a%84%e6%80%a7%e8%83%bd%e9%97%ae%e9%a2%98/