创建大量点光源时出现three.js错误

Question

//////stars
for (let index = 0; index < 1000; index++) {
const stargeometry = new THREE.SphereGeometry(1, 24, 24); //make star sphere size
const starmaterial = new THREE.MeshStandardMaterial({ color: 0xffffff }); //make star texture
const star = new THREE.Mesh(stargeometry, starmaterial); //creat the star
const [starx, stary, starz] = Array(3).fill().map(() => THREE.MathUtils.randFloatSpread(10000));//star random position from -x to positive x
star.position.set(starx, stary, starz); //set the stars
this.scene.add(star);//add the stars to the scene
const light = new THREE.PointLight(0xffffff, 2, 50 );
light.position.set( starx, stary, starz );
this.scene.add( light );
}

chrome给出的错误

THRE.WebGLProgram:着色器错误：0 35715 false gl.getProgramInfoLog Fragment着色器未编译。

**更新：**

在索引<100代码运行平稳，生成具有各自点光的恒星

在索引<200装载过程显著增加

在索引<300及以上它只是放弃并输出错误。

Answer 1

在正向渲染(一种常见的渲染方法，也是three.js使用的方法(中，场景中可以存在的动态点光源的数量是有限的，而且非常低。每个灯光都会显著增加渲染成本，硬件限制可能低至12。请参阅本期内容进行讨论。

常见的解决方案是离线烘焙照明(例如在Blender中(，或者使用发射材料和屏幕空间绽放效果。这些并不能真正将光线投射到场景中的动态对象上，但如果围绕限制进行一些规划，效果会很好。