Fragment shader error occurs when multiple lights casting shadows are used in three.js

Question

Fragment shader error occurs when multiple lights casting shadows are used in three.js

Imagine a scenario where you have a street with numerous streetlights (over 20) and you position an object nearby, expecting to see a shadow.

The lights are represented as:

var light = new THREE.PointLight(0xffffff, 0.5, 6.0);

Only the street has .receiveShadow = true and only the car has .castShadow = true (in addition to later including the lights)

https://i.sstatic.net/y7ORZ.png

In three.js, setting .castShadow = true for all the lights leads to the following error:

THREE.WebGLProgram: shader error:  0 gl.VALIDATE_STATUS false 
gl.getProgramInfoLog Fragment shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16).

Fortunately, in our scenario, we only require a few lights (maximum of 4) to cast shadows, as most of the lights are out of range anyway.

I attempted two approaches:

Iterating through all the lights and dynamically setting .castShadow = true or .castShadow = false.
Additionallly, adding and removing the lights completely while configuring them with or without shadows.

Both methods resulted in the same error message.

Is there another approach that could be effective?

Update

@neeh created a Fiddle demonstrating this issuehere (to replicate the error, adjust var numLightRows = 8; to a higher value). Note that there will be a separate error when too many lights are added, which is not related to the initial problem.

It was also noted that from the source code found here, a pointShadowMap is generated even if not utilized. This clarifies why there is no improvement with a more efficient method. This issue directly relates to the GLSL code.

Therefore, we are restricted by the GPU, which in some cases may only support 16 IMAGE_UNITS (though different GPUs may vary - my CPU functions well with more). You can verify your system's capabilities using

renderer.capabilities.maxTextures

. Nonetheless, as mentioned earlier, only 4 lights are truly necessary.

The challenge persists.

javascript three.js glsl

Answer 1

Answer №1

The Issue at Hand

Indeed, a new shadow map is not necessarily created for every light with the castShadow attribute set to true. For more information on this, refer to this specific issue. A shadow map essentially serves as the canvas where shadows are computed and then applied onto a surface.

An error message may arise: "gl.getProgramInfoLog Fragment shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16)."

This indicates that your device can handle a maximum of 16 textures per draw call. Usually, drawing a single object like a car or a street requires one draw call.

In order to render an object that receives shadows, all the corresponding shadow maps need to be combined with the diffuse map. This means using N+1 texture units for a single draw call, where N represents the number of lights casting shadows.

If you delve into the Three.js shaders, you will encounter the following snippet:

#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

To determine your browser's capability in handling texture units, utilize this tool and check the 'Fragment shader' section under 'Max Texture Image Units'.

A Potential Solution

Creating and deleting lights dynamically can be inefficient due to the memory-intensive nature of allocating shadow maps.

Instead, as suggested by gaitat, opt to enable shadows solely for the closest lights. Implement the following steps within your rendering loop:

Disable all shadows: light.castShadow = false;
Determine the nearest lights
Enable shadow for the N nearest lights: light.castShadow = true;

Potential Enhancement

The above algorithm has drawbacks since it assigns one shadow map per light, leading to potential freezes when encountering new unallocated shadow maps.

The proposed approach involves reusing existing shadow maps for nearby lights. Manage shadow maps with the following technique:

// 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;

You can access the maximum number of texture units through

renderer.capabilities.maxTextures

. Use this value to determine how many shadow maps to create, while ensuring adequate allocation for regular maps such as diffuseMap and normalMap.

View an illustrative implementation in this fiddle example (utilizing only 4 shadow maps).

Answer 2

The Issue at Hand

Indeed, a new shadow map is not necessarily created for every light with the castShadow attribute set to true. For more information on this, refer to this specific issue. A shadow map essentially serves as the canvas where shadows are computed and then applied onto a surface.

An error message may arise: "gl.getProgramInfoLog Fragment shader sampler count exceeds MAX_TEXTURE_IMAGE_UNITS (16)."

This indicates that your device can handle a maximum of 16 textures per draw call. Usually, drawing a single object like a car or a street requires one draw call.

In order to render an object that receives shadows, all the corresponding shadow maps need to be combined with the diffuse map. This means using N+1 texture units for a single draw call, where N represents the number of lights casting shadows.

If you delve into the Three.js shaders, you will encounter the following snippet:

#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

To determine your browser's capability in handling texture units, utilize this tool and check the 'Fragment shader' section under 'Max Texture Image Units'.

A Potential Solution

Creating and deleting lights dynamically can be inefficient due to the memory-intensive nature of allocating shadow maps.

Instead, as suggested by gaitat, opt to enable shadows solely for the closest lights. Implement the following steps within your rendering loop:

Disable all shadows: light.castShadow = false;
Determine the nearest lights
Enable shadow for the N nearest lights: light.castShadow = true;

Potential Enhancement

The above algorithm has drawbacks since it assigns one shadow map per light, leading to potential freezes when encountering new unallocated shadow maps.

The proposed approach involves reusing existing shadow maps for nearby lights. Manage shadow maps with the following technique:

// 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;

You can access the maximum number of texture units through

renderer.capabilities.maxTextures

. Use this value to determine how many shadow maps to create, while ensuring adequate allocation for regular maps such as diffuseMap and normalMap.

View an illustrative implementation in this fiddle example (utilizing only 4 shadow maps).

Fragment shader error occurs when multiple lights casting shadows are used in three.js

Update

Answer №1

The Issue at Hand

A Potential Solution

Potential Enhancement

Similar questions

Using jQuery to manipulate HTML elements that are dynamically loaded via ajax

How to delete an array within an array in MongoDB if it exists

Selection Change Event for Dropdown Menu

Dealing with the validation of two forms on a single webpage: Strategies and Solutions

Issue with the loop function

A Step-by-Step Guide to Setting Up a Scoreboard for Your Rock Paper Scissors Game

Passing parent HTML attributes to child components in Angular 2

Tips for including a permanent button at the bottom of a material ui dialog box

developing a dynamic structure that can store multiple levels of data

Web Browser cross-origin AJAX requests

Instructions for sending an array of integers as an argument from JavaScript to Python

Tips for adjusting line placement on a leaflet map

Steps to configure ExpressJS to listen on a custom domain

JavaScript: Repeated Depth First Exploration for hierarchical rearrangement implemented with d3's recursion()

Explore through descendant elements and locate attributes (up to a specified number of levels)

Utilitarian pool method yields the output from the specified callback function

Exploring how to read class decorator files in a Node.js environment

How can I implement SSO and Auth for multiple sub-domains using PHP?

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

Tips for incorporating a new column into your JavaScript code