1. 首页
  2. three.js

three.js具有较低对象计数的FPS下降

各位专家,我用Blender程序设计了一个3D模型。当我将我的模型导入到ThreeJS项目时,我面临着fps低的问题。我已经检查了场景和三角形中的对象数。对象计数似乎是324。为什么fps下降会出现这种结果?对象计数太高或是否存在另一个错误的编程问题?如果您能告知我这种情况,我将不胜感激。n这是我的webgl渲染器和动态观察控制代码块;ncreateRenderer() = = = new = = new THREE.PMREMGenerator(this.renderer);oPmremGenerator.compileEquirectangularShader();this.controls.addEventListener(\”change\”, this.renderScene);this.renderer.dispose();},renderScene() {this.renderer.render(this.scene, this.camera);// this.camera.updateMatrixWorld();},n这是显示对象计数和fps值的图像;n屏幕截图2021-07-29 00.10.21120×947 222 KBn感谢您的支持。n当我缩小时,我可以围绕我的模型快速旋转。但是当我放大时,旋转过程会变慢。n这通常意味着你的设备在片段着色器中达到了极限。PBR材质(MeshStandardMaterial、MeshPhysicalMaterial)、场景中的灯光数量和阴影都会增加片段着色器的成本,放大这些昂贵的片段会填满屏幕。n要提高这种情况下的性能,您可以这样做:n(a)减少灯光的数量n(b)烘焙灯光n(c)使用更便宜的材质,如MeshPhongMaterial、MeshLambertMaterial或MeshBasicMaterial(Unlight)n如果您从Blender导出glTF/GLB,您可以在three.js. 要获得Phong或Lambert,您必须遍历对象并替换其材质。n感谢您的帮助@Donmcurdy。我正在以GLB格式导出我的模型。所以,我已经检查了模型中的所有对象,每个对象的材质都是由MeshStandard或MeshPhysical材质组成的。如果这些材料类型严重影响性能,我将尝试将所有材料替换为MeshBasicMaterial。但我的大部分材料都有纹理。如何将实际纹理设置为新的MeshBasicMaterial?如果我将当前使用的材质上的纹理保留在另一个变量中,并将其传输到新材质,是否正确?n感谢您的支持。n我在场景中只使用了三个灯光(1个环境光和2个方向光),我已将所有材质类型更改为MeshBasicMaterial并禁用了阴影。但仍然会出现fps下降。当我从场景中移除所有灯光时,fps值非常高。我在哪里犯错?n这是我的代码,表示override=oMaterial[key];if(oValue&;typeof oValue===“object”和oValue中的“minFilter”){卵蓝(;}}},nHm这部分看起来不轻,我想你不想处理新材料。n700K顶点是一个相当大的数目,*DoubleSide将使这样会更慢,而且每盏灯都会增加成本。也可能是顶点和对象计数是这里问题的一部分(即,缩小时,任何东西都不能被截头体剔除)。如果你想发布一个演示,其他人可能会调试得更好,我只是根据这里的截图猜测。n我建议研究场景图的复杂性。场景图的每一帧、每一个节点都将被访问并更新其世界变换矩阵,这可能会非常昂贵。n另一件事是材质/纹理切换,您只有“几个”对象,但取决于它们的绘制顺序-three.js必须切换材质和纹理,在最坏的情况下-对于每个对象。这可能会很昂贵,因为它可能需要将纹理重新上传到GPU(取决于GPU内存),或者至少需要缓存问题,因为您一直在使用不同的内存区域。n谢谢您的帮助@donmccurdy。当我移除阴影并使用MeshBasicMaterial时,性能显著提高。但是我不明白为什么我不应该对新指定的材料使用dispose方法?处理方法到底是什么?我也在用this.renderer.renderLists.dispose();它会影响性能吗?n非常感谢。n谢谢您的帮助@Usnul。事实上,我使用的纹理不是高质量的图像。我使用512x512px分辨率的纹理。我是否需要将图像分辨率降低到低于512px?mlelayakan:n但是我不明白为什么我不应该对新指定的物料使用dispose方法?处理方法到底是什么?n当您完全使用某个材质时,应使用dispose()方法销毁该材质并从GPU中删除其资源。n是否需要将图像分辨率降低到512px以下?n它取决于纹理的总体积。比如说,如果使用的纹理少于100个,那么在该分辨率下就可以了。这里有一点数学知识可以帮助你计算出你正在使用多少GPU内存:(4 bytes per pixel in case of PNG)*(image width)*(image height)n因此,对于512×512 PNG,它们需要精确1 MB的GPU内存n如果你使用JPG,它们是PNG的大小,因为他们没有PNG的alpha(透明)通道,所以每像素3个字节,而不是PNG的每像素4个字节。n现在,假设你使用webvr-managerDesktopMobile.js,你有以下每种材质的纹理:n- 漫反射n- 金属性n- 粗糙度n- 正常n FPS Drop With Lower Object Countn

three.js具有较低对象计数的FPS下降 为WP2原创文章,链接:https://www.wp2.cn/three-js/three-js%e5%85%b7%e6%9c%89%e8%be%83%e4%bd%8e%e5%af%b9%e8%b1%a1%e8%ae%a1%e6%95%b0%e7%9a%84fps%e4%b8%8b%e9%99%8d/