三.js多重聚光灯性能答案

【问题标题】：Three.js multiple spotlight performance三.js多重聚光灯性能
【发布时间】：2015-03-19 01:37:01
【问题描述】：

我在 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: 而且如果我以后加点灯，性能会更上一层楼……

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

【问题讨论】：

标签： javascript performance three.js webgl

【解决方案1】：

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

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

【讨论】：

我只有 10 个简单的聚光灯也有完全相同的问题，我得到 45-50 FPS，无论如何我们仍然可以在没有 PITA 纹理处理的情况下使用灯光吗？

【解决方案2】：

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

对于许多灯光，你可以尝试使用 WebGLDeferredRenderer，它可以比默认渲染器更好地处理多个灯光。不过，这是一项正在进行的实验性工作，因此您可能会遇到其他问题。另外我不确定它是否有助于阴影映射性能。

【讨论】：

我尝试移除所有阴影，但只有 10 个聚光灯的性能仍然非常低：s

【解决方案3】：

我遇到了完全相同的问题，除了 mrdoob 和 yaku 的建议非常有用之外，另一种方法是减少几何图形中的段和多边形的数量。

即如果您的场景中有一个简单的圆柱体，您可以通过在初始化时分配 heightSegments 和radialSegments 来减少段数：

作为一个非常简单的示例，如果您需要创建一个简单的圆柱体，请避免这样做：

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

改为尝试：

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

当然，如果您想要更平滑的圆柱体，您可以根据需要将径向段从 8 个增加到 16 个或更多，但对于 heightSegments，在简单圆柱体中拥有超过 1 个段根本没有用。

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

【讨论】：