Chapter 594: ShadowMapViewer

Core Idea

This is a helper for visualising a given light's shadow map. It works for shadow casting lights: DirectionalLight and SpotLight. It renders out the shadow map and displays it on a HUD.

This module can only be used with WebGLRenderer. When using WebGPURenderer, import the class from ShadowMapViewerGPU.js.

Key Concepts

enabled : boolean: Whether to display the shadow map viewer or not.
position : Object: The position of the viewer. When changing this property, make sure to call ShadowMapViewer#update.
size : Object: The size of the viewer. When changing this property, make sure to call ShadowMapViewer#update.

Code Examples

const lightShadowMapViewer = new ShadowMapViewer( light );
lightShadowMapViewer.position.x = 10;
lightShadowMapViewer.position.y = SCREEN_HEIGHT - ( SHADOW_MAP_HEIGHT / 4 ) - 10;
lightShadowMapViewer.size.width = SHADOW_MAP_WIDTH / 4;
lightShadowMapViewer.size.height = SHADOW_MAP_HEIGHT / 4;
lightShadowMapViewer.update();

What it demonstrates: Typical usage of ShadowMapViewer.

Reference Tables

Constructor

Signature
`new ShadowMapViewer( light : Light )`

Properties

Property	Description
`.enabled : boolean`	Whether to display the shadow map viewer or not.
`.position : Object`	The position of the viewer. When changing this property, make sure to call ShadowMapViewer#update.
`.size : Object`	The size of the viewer. When changing this property, make sure to call ShadowMapViewer#update.

Methods

Method	Description
`.render( renderer : WebGLRenderer )`	Renders the viewer. This method must be called in the app's animation loop.
`.update()`	Updates the viewer.
`.updateForWindowResize()`	Resizes the viewer. This method should be called whenever the app's window is resized.

Key Takeaways

Most relevant properties: enabled, position, size.
Key methods: render, update, updateForWindowResize.

Connects To

Source: examples/jsm/utils/ShadowMapViewer.js