向场景添加超过 37 个聚光灯时的 Three.js 错误答案

【问题标题】：Three.js error when adding more than 37 spotlights to scene向场景添加超过 37 个聚光灯时的 Three.js 错误
【发布时间】：2013-05-31 14:35:54
【问题描述】：

我正在使用 Three.js r58（使用 WebGLRenderer）创建一个系统，显示建筑物的 3D 模型以及内部灯光的实际位置和昏暗程度。

数据库中的每个灯光都由一个 CubeGeometry 对象（物理灯光）和一个 SpotLight（用于显示灯光输出的外观）表示，如下所示：

// 'this' is an existing custom object as populated from the database - all code there is fine
var geometry = new THREE.CubeGeometry(4.8, 0.6, 1.36);
var material = new THREE.MeshBasicMaterial({color:0x444444, vertexColors:THREE.FaceColors});

this.objectMesh = new THREE.Mesh(geometry, material);
this.objectMesh.position.set(0, 20, 0);

scene.add(this.objectMesh);

this.lightEmitter = new THREE.SpotLight(0xffffff, 0, 22, true);
this.lightEmitter.position.set(this.objectMesh.position.x, this.objectMesh.position.y - (this.objectMesh.geometry.height / 10), this.objectMesh.position.z);
this.lightEmitter.rotation.set(this.objectMesh.rotation.x, this.objectMesh.rotation.y, this.objectMesh.rotation.z)
this.lightEmitter.target.position.set(this.objectMesh.position.x, 0, this.objectMesh.position.z);
this.lightEmitter.angle = 0.9;
scene.add(this.lightEmitter);

现在，场景中最多有 37 盏灯，一切都运行良好，但只要我添加 38 号灯，我就会收到以下错误：Could not initialise shader VALIDATE_STATUS: false, gl error [1285]

在配备 GeForce GTX 650 的 Windows 7 PC 上的 Firefox 和 Chrome 以及 Ubuntu 笔记本电脑上的 Firefox 中会出现此错误（不确定显卡，但如果需要，可以查找）。在 Android Nexus 7 上的 Chrome 上，我收到另一个错误：(0) : error C6007: Constant register limit exceeded; more than 256 constant registers needed to compiled program 50 lines, 1 errors - 不确定这是否相关。

如果我从场景中移除建筑模型并加载到平面中，我也会得到：ERROR: too many uniforms，有 38 个灯，有 37 个灯可以正常工作。我也尝试过阻止灯光和物体投射和接收阴影，但没有帮助。

在场景中渲染如此多的灯光是否会遇到硬件和/或 OpenGL 和/或 WebGL 限制？如果没有，是否有人知道可能导致问题的原因？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

在正向渲染中，OpenGL ES（和 WebGL）对同时开启的灯光数量有限制。这些限制通常是 8，所以我很惊讶你能达到 37。延迟渲染会改变事情，你可以拥有任意数量的灯光。所以不要使用WebGLRenderer，而是使用WebGLDeferredRenderer.

【讨论】：

我忘了提到并非所有的灯都同时亮着。在撰写问题时，有 6 个灯亮着，而无论下一个灯是亮还是灭，仍然会出现相同的错误，尽管我目前在该建筑模型中有 16 个灯没有错误，而不同的建筑模型使用精确相同的代码同时亮起 20 多个灯。
@gaitat：在固定管道着色器中可以使用的灯光数量是有限制的，但是 Threejs 不使用它（我认为固定管道无论如何都不能在 WebGL 中使用） . Winterblood：您只是达到了硬件限制=>每次使用灯光时，threejs都需要分配一些寄存器来处理它（用于灯光位置，颜色，...），可用的寄存器数量受您的图形限制卡片。您无能为力，除了只创建亮着的灯并丢弃其他灯，这样在任何时候都只有少数灯需要处理（比如少于 10 个）。