Skip to content

Renderer: Rename shadowMap.color to shadowMap.colored. #32608

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sunag merged 3 commits into from
Dec 22, 2025
Merged

Renderer: Rename shadowMap.color to shadowMap.colored. #32608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3afb164
Renderer: Rename `shadowMap.color` to `shadowMap.colorEnabled`.
Mugen87 Dec 22, 2025
2e51444
Renderer: Clean up.
Mugen87 Dec 22, 2025
eb84c46
Rename to `colored`.
Mugen87 Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/webgpu_caustics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.shadowMap.enabled = true;
renderer.shadowMap.color = true;
renderer.shadowMap.colored = true;
renderer.inspector = new Inspector();
document.body.appendChild( renderer.domElement );

Expand Down
2 changes: 1 addition & 1 deletion examples/webgpu_shadowmap_opacity.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
renderer.toneMapping = THREE.AgXToneMapping;
renderer.toneMappingExposure = 1.5;
renderer.shadowMap.enabled = true;
renderer.shadowMap.color = true;
renderer.shadowMap.colored = true;
renderer.inspector = new Inspector();
container.appendChild( renderer.domElement );

Expand Down
2 changes: 1 addition & 1 deletion examples/webgpu_volume_caustics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@

renderer = new THREE.WebGPURenderer( { antialias: true } );
renderer.shadowMap.enabled = true;
renderer.shadowMap.color = true;
renderer.shadowMap.colored = true;
renderer.inspector = new Inspector();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
Expand Down
2 changes: 1 addition & 1 deletion src/nodes/lighting/ShadowNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,7 @@ class ShadowNode extends ShadowBaseNode {

let shadowColor;

if ( renderer.shadowMap.color === true ) {
if ( renderer.shadowMap.colored === true ) {

if ( shadowMap.texture.isCubeTexture ) {

Expand Down
8 changes: 4 additions & 4 deletions src/renderers/common/Renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,7 @@ class Renderer {
* Shadow map configuration
* @typedef {Object} ShadowMapConfig
* @property {boolean} enabled - Whether to globally enable shadows or not.
* @property {boolean} color - Whether to include shadow color or not.
* @property {boolean} colored - Whether shadows can have a custom color or not.
Copy link
Collaborator

@WestLangley WestLangley Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, but this is still not clear to me.

Where is the "custom color" set?

What does this property enable, precisely? When is it required?

If you can explain that in a few words, then perhaps we can come up with a better definition.

Copy link
Collaborator

@sunag sunag Dec 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

material.castShadowNode allows to customize the colors and opacity of the cast shadow per material with a vec4.

three.js/src/renderers/common/Renderer.js

Lines 3056 to 3060 in 288d8a3

if ( this.shadowMap.colored !== true ) {
warnOnce( 'Renderer: `shadowMap.colored` needs to be set to `true` when using `material.castShadowNode`.' );
}

Copy link
Collaborator

@WestLangley WestLangley Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So renderer.shadowMap.colored = true is only required if material.castShadowNode is defined?

Copy link
Collaborator

@sunag sunag Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now, yes. But your question made me rethink a few things.

This hasn't been implemented in the PBR yet; it should be eventually. The concept of colored shadows should be replaced by light transmission.

I think we could consider a more suitable name in this sense, if we consider that there is no colored shadow in the physically-based sense, but rather the transmission of light and the tint due to its color interference.

Should this be called shadowMap.transmitted?

Copy link
Collaborator

@WestLangley WestLangley Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shadows are the absence of light in three.js, as they are in the real world.

On a related note, light.shadow.intensity = 0.5 is a hack that, in effect, allows light to transmit through the object, brightening (and potentially tinting) the shadow. This property works without setting renderer.shadowMap.colored = true.

Copy link
Collaborator

@sunag sunag Dec 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it's no different from what is stated here.

The term transmitted should imply that the shadow should somehow consider the transmission of light in non-opaque materials.

* @property {number} type - The shadow map type.
*/

Expand All @@ -669,7 +669,7 @@ class Renderer {
*/
this.shadowMap = {
enabled: false,
color: false,
colored: false,
type: PCFShadowMap
};

Expand Down Expand Up @@ -3053,9 +3053,9 @@ class Renderer {
shadowRGB = material.castShadowNode.rgb;
shadowAlpha = material.castShadowNode.a;

if ( this.shadowMap.color !== true ) {
if ( this.shadowMap.colored !== true ) {

warnOnce( 'Renderer: `shadowMap.color` needs to be enabled when using `material.castShadowNode`.' );
warnOnce( 'Renderer: `shadowMap.colored` needs to be set to `true` when using `material.castShadowNode`.' );

}

Expand Down