Javascript 与对象数量相关的Three.js性能

我最近在WebGL中做了一个项目，使用Javascript和3D library three.js

然而，它的性能非常差，开始时速度很慢，充其量接近正常

我游戏的对象是：1辆车，6个桔子，161个樱桃，1张桌子，1把叉子，6支蜡烛

你可以像在比赛中一样控制汽车（WASD或方向键），你可以在cheerios限制的赛道上驾驶。汽车由几个3.js几何体（长方体、圆环体、圆柱体、球体）组成。如果一个桔子与汽车相撞，玩家返回赛道的起点并失去1条生命

所有的橙子都以匀速直线运动，如果它们与汽车相撞，可能会导致汽车死亡。橙色模型由3.js几何体球体和圆柱体组成

该表是一个按xyz坐标缩放为300x1x300的立方体

每根蜡烛都是一个点光源，其强度会发生变化，从而产生闪烁的感觉

除了6个点光源之外，还有环境光和1个平行光，都是用three.js创建的

分叉是一种类似于广告牌的行为，旋转时始终指向当前活动摄影机（由平面表示）

每当一个橘子到达它的轨迹末端并暂时消失，或者汽车跑完一圈，就会发生粒子爆炸

每次爆炸可以有几个粒子（至少100个），每个粒子都是一个非常小的平面，具有类似广告牌的行为

创建爆炸后，将单独创建其所有粒子并将其添加到场景中

每次爆炸还有一个生存时间，单位为毫秒，通常为1000。当爆炸过期时，爆炸将从场景中移除

游戏中的所有对象都有自己的纹理，并且不是所有的纹理都有“好”的大小，也就是说，尺寸是2的幂（32x32、256x256、1024x1024等）。每个纹理都使用不推荐的方法THREE.ImageUtils.loadTexture（URL）加载

从场景、摄影机和灯光，到网格、几何体和材质，所有内容都是使用three.js构建的

我注意到，在添加了如此多的cheerios后，性能显著降低，因此问题可能根源于每帧渲染的cheerios数量过多

因为它们都共享同一个模型（一个简单的圆环体和一个简单的纹理），有没有办法只为所有cheerios使用一个模型（很像openGL和VS libs）

如何提高其性能

---

如果您需要有关该问题的更多具体信息，请告诉我。

我猜您多次调用昂贵（计算能力方面）的three.js方法可能有点类似。我会首先分析你们的游戏，确定问题是cpu限制还是gpu限制

除了6个点光源外，还有环境光和1个点光源 平行光，都是用three.js创建的

每个像素的照明计算都很昂贵，必须对每个像素进行照明计算。考虑减少光源。

每次爆炸可以有几个粒子（至少100个），每个粒子 粒子是一个非常小的平面，具有类似广告牌的行为

---

我希望这是通过布告牌粒子系统完成的，而不是作为单个平面。否则，三个js可能会对每个平面执行一个draw调用

创建一个几何体。然后创建cheerios网格。创建网格后，不要将其添加到场景中，而是将其与几何体合并

var globalCheeriosGeometry = new THREE.Geometry();
// create 161 cherios meshes and add them to global geometry
globalCheeriosGeometry.mergeMesh( cheeriosMesh );

---

因此，您将创建一个包含场景中所有切里欧的几何体。然后使用该几何体创建一个网格并将其添加到场景中。这将显著减少场景中的绘制调用数。

是否将cheerios放置在容器对象中？我不确定你的性能到底有什么问题，但也许你可以将cheerios上的一些计算作为一个单独的项目进行批处理。你在使用物理吗？你好吗。我猜问题不在于three.js，而在于你的碰撞和物理系统。关闭所有碰撞，然后查看它是否运行得很快。然后检查你的粒子系统。@gman我目前正在使用蛮力碰撞检查（我们的老师要求某种类型的碰撞检测，并建议使用AABB算法）。因此，每次我更新游戏时，我也会检查所有可能的碰撞，这显然没有通过任何更先进的碰撞技术进行优化（不幸的是，我们在课程中没有处理这些问题）。这确实有所帮助，而且可能是多次实例化同一网格的答案，但程序似乎仍然很慢，最有可能是因为我实现了粒子爆炸。至少有一点帮助=）它是作为单个平面完成的。你能告诉我如何使用公告牌粒子系统吗？试试threejs.org/examples/#webgl\u points\u dynamic，threejs.org/examples/#webgl\u gpu particle\u system