Проблема

Да a новый карта теней будет создана для каждого источника света, имеющего castShadow = true (На самом деле это не так, проверьте эта проблема). Карта теней — это рисунок, на котором рассчитывается тень, чтобы затем наложить ее на поверхность.

gl.getProgramInfoLog Количество образцов фрагментного шейдера превышает MAX_TEXTURE_IMAGE_UNITS (16).

Это означает, что ваше устройство может отправлять не более 16 текстур за один вызов отрисовки. Как правило, машина (улица?), на которую вы хотите наложить тени, требует 1 вызова отрисовки.

Чтобы нарисовать объект, который получает тени, все карты теней должны быть смешаны вместе с диффузной картой. Таким образом, для одного вызова отрисовки требуется использовать N+1 текстурных блоков. (N — количество источников света, которые могут отбрасывать тень.)

Если вы покопаетесь в шейдерах Three.js, вы найдете это :

#ifdef USE_SHADOWMAP

    #if NUM_DIR_LIGHTS > 0

        // Reserving NUM_DIR_LIGHTS texture units
        uniform sampler2D directionalShadowMap[ NUM_DIR_LIGHTS ];
        varying vec4 vDirectionalShadowCoord[ NUM_DIR_LIGHTS ];

    #endif

    ...

#endif

Воспользуйтесь этим инструментом, чтобы узнать, сколько текстурных блоков может обрабатывать ваш браузер (Фрагментный шейдер > Макс. количество единиц изображения текстуры).

Решение ?

Динамическое создание и удаление источников света плохо, потому что требует много памяти (распределение карты теней...).

Но, как сказал gaitat, вы можете включить тени только для ближайших источников света. Просто сделайте следующее в цикле рендеринга:

1. Отключить все тени: light.castShadow = false;
2. Искать ближайшие огни
3. Включить тень для N ближайших источников света: light.castShadow = true;

Улучшение

Этот одинокий алгоритм плох, потому что он выделяет одну карту теней для каждого источника света. В дополнение к потреблению памяти, рендеринг будет немного зависать каждый раз, когда вы пересекаете новый источник света, для которого не выделена карта теней...

Следовательно, идея состоит в том, чтобы повторно использовать одни и те же карты теней для ближайших источников света. Вы можете работать с теневыми картами следующим образом:

// create a new shadow map
var shadowMapCamera = new THREE.PerspectiveCamera(90, 1, 0.5, 500);
var shadow = new THREE.LightShadow(shadowMapCamera);

// use the shadow map on a light
light.shadow = shadow;
shadow.camera.position.copy(light.position);
light.castShadow = true;

Вы можете получить максимальное количество текстурных блоков с помощью renderer.capabilities.maxTextures. Таким образом, вы можете вычислить количество карт теней для создания на их основе, но не забудьте оставить часть для более обычных карт, таких как диффузная карта, нормальная карта...

Проверьте эту скрипту для полной реализации (используются только 4 карты теней).