Three.js性能与对象数量有关

Question

我最近使用Javascript和3D库three.js

在WebGL中创建了一个项目

然而，它的性能非常差，开始时很慢，最好接近可以。

我游戏的对象是：1辆车，6个橙子，161个cheerios，1个桌子，1个叉子，6个蜡烛。

1. 你可以像在比赛游戏中那样控制汽车（WASD或方向键），你可以通过限制为cheerios的赛道驾驶。该车由几个三个几何形状（箱形，圆环形，圆柱形，球形）组成。如果橙色与汽车碰撞，则玩家会回到赛道的起点并失去1点生命。
2. 所有橙子都以直线运动方式移动，并且如果它们碰撞就会杀死它。橙色模型由three.js几何球体和圆柱体组成。
3. 该表是一个立方体，按xyz坐标缩放为300x1x300。
4. 每支蜡烛都是一个亮点光源，其强度会发生变化而产生闪烁的感觉。
5. 除了6个点光源外，还有环境光和1个方向光，均使用three.js创建。
6. 叉子作为类似广告牌的行为，旋转为始终指向当前活动的摄像机，由飞机表示。
7. 每当橙色到达其轨迹的末端并暂时消失，或者汽车完成一圈时，就会发生爆炸的颗粒。
8. 每次爆炸都可能有几个粒子（至少100个），每个粒子都是一个非常小的平面，具有类似广告牌的行为。
9. 创建爆炸后，会单独创建所有粒子并将其添加到场景中。
10. 每次爆炸都有时间以毫秒为单位，通常为1000.当它到期时，爆炸将从场景中移除。
11. 游戏的所有对象都有自己的纹理，并非所有纹理都具有“良好”的大小，即尺寸为2的幂（32x32,256x256,1024x1024等）。每个纹理都加载了一个不推荐使用的方法THREE.ImageUtils.loadTexture（URL）。
12. 一切都是用three.js建造的，从场景，相机和灯光到网格，几何形状和材料。

我注意到在添加了这么多的cheerios后，性能急剧下降，所以问题可能源于每帧渲染的大量的cheerios。

由于它们都共享相同的模型（具有简单纹理的简单环面），是否有任何方法仅使用1个模型用于所有的cheerios（很像使用VS libs的openGL）？

如何改善其性能？

告诉我您是否需要有关此问题的更多具体信息。

Answer 1

我猜它有些东西，你称之为昂贵的（在计算能力方面）three.js方法太多次了。我会首先描述你的游戏，以确定问题是在cpu绑定还是gpu绑定。

  

除了6个点光源外，还有环境光和1   定向灯，全部用three.js创建。

每个像素的照明计算单独是昂贵的，并且必须对每个像素进行照明计算。考虑减少光源。

  

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

我希望这是通过广告牌粒子系统完成的，而不是单独的平面。否则三个js可能会为每个平面做一次绘制调用。

Answer 2

创建几何体。然后创建cheerios网格。创建网格后，不要将其添加到场景中，而是使用

将其合并到几何体中

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

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