Three-csm NPM | npm.io

three-csm

Cascaded shadow maps (CSMs) implementation for Three.js. This approach provides higher resolution of shadows near the camera and lower resolution far away by using several shadow maps. CSMs are usually used for shadows cast by the sun over a large terrain.

Examples

Basic

Cascaded Shadow Maps

Installation

<script src="/build/three-csm.js"></script>

Using CommonJS:

npm i three-csm

const THREE = require('three');
THREE.CSM = require('three-csm');

Using ES6 modules:

import * as THREE from 'three';
import CSM from 'three-csm';
THREE.CSM = CSM;

Basic usage

let camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // or any other type of shadowmap
	
let csm = new THREE.CSM({
	maxFar: camera.far,
	cascades: 4,
	shadowMapSize: 1024,
	lightDirection: new THREE.Vector3(1, -1, 1).normalize(),
	camera: camera,
	parent: scene
});

let material = new THREE.MeshPhongMaterial(); // works with Phong and Standard materials
csm.setupMaterial(material); // must be called to pass all CSM-related uniforms to the shader

let mesh = new THREE.Mesh(new THREE.BoxBufferGeometry(), material);
mesh.castShadow = true;
mesh.receiveShadow = true;

scene.add(mesh);

Finally, in your update loop, call the update function before rendering:

csm.update(camera.matrix);

API

`CSM`

`constructor(settings: CSMParams)`

Parameters

settings — Object which contains all setting for CSMs.

	- `settings.camera` — Instance of `THREE.PerspectiveCamera` which is currently used for rendering.

	- `settings.parent` — Instance of `THREE.Object3D` that will contain all directional lights.

	- `settings.cascades` — Number of shadow cascades. Optional.

	- `settings.maxCascades` — Maximum number of shadow cascades. Should be greater or equal to `cascades`. Important if you want to change the number of shadow cascades at runtime using `CSM.updateCascades()` method. Optional.

	- `settings.maxFar` — Frustum far plane distance (i.e. shadows are not visible farther this distance from camera). May be smaller than `camera.far` value. Optional.

	- `settings.mode` — Defines a split scheme (how large frustum is splitted into smaller ones). Can be `uniform` (linear), `logarithmic`, `practical` or `custom`. For most cases `practical` may be the best choice. Equations used for each scheme can be found in [*GPU Gems 3. Chapter 10*](https://developer.nvidia.com/gpugems/GPUGems3/gpugems3_ch10.html). If mode is set to `custom`, you'll need to define your own `customSplitsCallback`. Optional.

	- `settings.practicalModeLambda` — Lambda parameter for `practical` mode.  Optional.`

	- `settings.customSplitsCallback` — A callback to compute custom cascade splits when mode is set to `custom`. Callback should accept three number parameters: `cascadeCount`, `nearDistance`, `farDistance` and return an array of split distances ranging from 0 to 1, where 0 is equal to `nearDistance` and 1 is equal to `farDistance`. Check out the official modes in CSM.js to learn how they work.

	- `settings.shadowMapSize` — Resolution of shadow maps (one per cascade). Optional.

	- `settings.shadowBias` — Serves the same purpose as [THREE.LightShadow.bias](https://threejs.org/docs/#api/en/lights/shadows/LightShadow.bias). Gets multiplied by the size of a shadow frustum. Optional.

	- `settings.shadowNormalBias` — Serves the same purpose as [THREE.LightShadow.normalBias](https://threejs.org/docs/#api/en/lights/shadows/LightShadow.normalBias). Gets multiplied by the size of a shadow frustum. Optional.

	- `settings.lightIntensity` — Same as [THREE.DirectionalLight.intensity](https://threejs.org/docs/#api/en/lights/DirectionalLight). Optional.

	- `settings.lightColor` — Same as [THREE.DirectionalLight.color](https://threejs.org/docs/#api/en/lights/DirectionalLight). Optional.

	- `settings.lightDirection` — Normalized `THREE.Vector3()`. Optional.

	- `settings.lightDirectionUp` — Up vector used for `settings.lightDirection`. Optional, defaults to [THREE.Object3D.DEFAULT_UP](https://threejs.org/docs/?q=object#api/en/core/Object3D.DEFAULT_UP).

	- `settings.lightMargin` — Defines how far shadow camera is moved along z axis in cascade frustum space. The larger is the value the more space `LightShadow` will be able to cover. Should be set to high values for scenes with large or tall shadow casters. Optional.

	- `settings.fade` — If `true`, enables smooth transition between cascades. Optional.

	- `settings.noLastCascadeCutOff` — If `true`, disables cutting off the last cascade for better shadow coverage. Optional.