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

Three.js perfomance related with number of objects

本文关键字：对象 js 性能 Three 更新时间：2023-09-26

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

然而，它的表现非常糟糕，一开始很慢，充其量也会接近正常。

我的游戏对象是：1辆车，6个橙子，161个啦啦队，1张桌子，1把叉子，6支蜡烛。

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

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

由于它们都共享同一个模型（一个具有简单纹理的简单圆环体），有没有办法对所有的cheerios只使用一个模型？

如何提高其性能？

如果你需要关于这个问题的更具体的信息，请告诉我。

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

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

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

我想这是因为你多次调用昂贵的（就计算能力而言）three.js方法。我会先分析你的游戏，以确定问题是在cpu绑定还是gpu绑定。

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

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

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

我希望这是通过一个广告牌粒子系统，而不是作为单独的平面。否则，三个js可能会在每架飞机上进行一次绘制调用。