Question

我在three.js做一些赛车游戏，我坚持以下问题......

我有2辆车，所以我们需要为每辆车的后车灯和前车灯提供4盏聚光灯（最低）...

我们还需要路上一些灯......

所以我有这个代码：

//front car1 light
var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, Math.PI/2, 1 );
SpotLight.position.set( 50, 10, 700 );
SpotLight.target.position.set(50, 0, 800);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//front car2 light
var SpotLight = new THREE.SpotLight( 0xffffff, 5, 300, -Math.PI/2, 1 );
SpotLight.position.set( -50, 10, 40 );
SpotLight.target.position.set(-50, 0, 100);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//rear car1 light
var SpotLight = new THREE.SpotLight( 0xff0000, 2, 200, Math.PI/2, 2 );
SpotLight.position.set( 50, 20, 660 );
SpotLight.target.position.set(50, 0, 600);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//rear car2 light
var SpotLight = new THREE.SpotLight( 0xff0000, 2, 100, Math.PI/2, 1 );
SpotLight.position.set( -50, 20, -35 );
SpotLight.target.position.set(-50, 0, -100);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

//some road light
var SpotLight = new THREE.SpotLight( 0x404040, 3, 500, Math.PI/2, 2 );
SpotLight.position.set( 0, 300, 0 );
SpotLight.target.position.set(0, 0, 0);
SpotLight.castShadow = true;
SpotLight.shadowCameraVisible = false;
SpotLight.shadowDarkness = 0.5;
scene.add(SpotLight);

没什么特别..但是性能下降到20-30 FPS并且有点滞后：-1：如果我将来添加一些灯，性能将进一步提升......

有没有人遇到过类似的问题？怎么处理这个？或者也许我做错了什么？

Answer 1

在进行实时渲染时，灯光非常耗时。你需要找到最便宜的方法来模仿你所追求的结果。

例如，您可以在汽车前面放置一个纹理平面，其纹理看起来就像聚光灯瞄准地板一样。它不会是正确的，但它会给人以正确的印象，你将节省4个聚光灯，你的游戏将以60fps的速度运行。

Answer 2

在这种情况下，阴影很可能是罪魁祸首 - 在引擎盖下，场景需要从每个阴影投射光的角度进行渲染。如果可能，将它们保存为最重要的一个，禁用其他灯光上的阴影。

对于许多灯光，您可以尝试使用WebGLDeferredRenderer，它可以比默认渲染器更好地处理多个灯光。虽然它正在进行实验性工作，但您可能会遇到其他问题。此外，我不确定它是否有助于阴影贴图性能。

Answer 3

除了mrdoob＆amp; amp; yaku的建议，这是非常有帮助的，另一种方法是减少细分数量和几何中的多边形。

即如果场景中有一个简单的柱面，则可以通过指定heightSegments＆amp; amp;初始化时间的radialSegments：

作为一个非常简单的例子，如果你需要创建一个简单的柱面，请避免做这样的事情：

sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 16, 32);

而不是尝试：

sampleCylinderGeo = new THREE.CylinderGeometry(2, 2, 5, 8, 1);

当然，如果你想要更平滑的气缸，你可以根据需要将径向段从8增加到16或更多，但对于heightSegments，在一个简单的气缸中只有1个以上的段是没用的。

因此，只需根据您的需要调整分段数，这样您就可以节省大量不必要的分段，并在使用灯光时获得更多FPS，特别是在场景中有很多几何形状时。

Three.js多重聚光灯表现

3 个答案: