CSM.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. import {
  2. Vector2,
  3. Vector3,
  4. DirectionalLight,
  5. MathUtils,
  6. ShaderChunk,
  7. Matrix4,
  8. Box3
  9. } from 'three';
  10. import { CSMFrustum } from './CSMFrustum.js';
  11. import { CSMShader } from './CSMShader.js';
  12. const _cameraToLightMatrix = new Matrix4();
  13. const _lightSpaceFrustum = new CSMFrustum( { webGL: true } );
  14. const _center = new Vector3();
  15. const _bbox = new Box3();
  16. const _uniformArray = [];
  17. const _logArray = [];
  18. const _lightOrientationMatrix = new Matrix4();
  19. const _lightOrientationMatrixInverse = new Matrix4();
  20. const _up = new Vector3( 0, 1, 0 );
  21. /**
  22. * An implementation of Cascade Shadow Maps (CSM).
  23. *
  24. * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
  25. * use {@link CSMShadowNode} instead.
  26. *
  27. * @three_import import { CSM } from 'three/addons/csm/CSM.js';
  28. */
  29. export class CSM {
  30. /**
  31. * Constructs a new CSM instance.
  32. *
  33. * @param {CSM~Data} data - The CSM data.
  34. */
  35. constructor( data ) {
  36. /**
  37. * The scene's camera.
  38. *
  39. * @type {Camera}
  40. */
  41. this.camera = data.camera;
  42. /**
  43. * The parent object, usually the scene.
  44. *
  45. * @type {Object3D}
  46. */
  47. this.parent = data.parent;
  48. /**
  49. * The number of cascades.
  50. *
  51. * @type {number}
  52. * @default 3
  53. */
  54. this.cascades = data.cascades || 3;
  55. /**
  56. * The maximum far value.
  57. *
  58. * @type {number}
  59. * @default 100000
  60. */
  61. this.maxFar = data.maxFar || 100000;
  62. /**
  63. * The frustum split mode.
  64. *
  65. * @type {('practical'|'uniform'|'logarithmic'|'custom')}
  66. * @default 'practical'
  67. */
  68. this.mode = data.mode || 'practical';
  69. /**
  70. * The shadow map size.
  71. *
  72. * @type {number}
  73. * @default 2048
  74. */
  75. this.shadowMapSize = data.shadowMapSize || 2048;
  76. /**
  77. * The shadow bias.
  78. *
  79. * @type {number}
  80. * @default 0.000001
  81. */
  82. this.shadowBias = data.shadowBias || 0.000001;
  83. /**
  84. * The light direction.
  85. *
  86. * @type {Vector3}
  87. */
  88. this.lightDirection = data.lightDirection || new Vector3( 1, - 1, 1 ).normalize();
  89. /**
  90. * The light intensity.
  91. *
  92. * @type {number}
  93. * @default 3
  94. */
  95. this.lightIntensity = data.lightIntensity || 3;
  96. /**
  97. * The light near value.
  98. *
  99. * @type {number}
  100. * @default 1
  101. */
  102. this.lightNear = data.lightNear || 1;
  103. /**
  104. * The light far value.
  105. *
  106. * @type {number}
  107. * @default 2000
  108. */
  109. this.lightFar = data.lightFar || 2000;
  110. /**
  111. * The light margin.
  112. *
  113. * @type {number}
  114. * @default 200
  115. */
  116. this.lightMargin = data.lightMargin || 200;
  117. /**
  118. * Custom split callback when using `mode='custom'`.
  119. *
  120. * @type {Function}
  121. */
  122. this.customSplitsCallback = data.customSplitsCallback;
  123. /**
  124. * Whether to fade between cascades or not.
  125. *
  126. * @type {boolean}
  127. * @default false
  128. */
  129. this.fade = false;
  130. /**
  131. * The main frustum.
  132. *
  133. * @type {CSMFrustum}
  134. */
  135. this.mainFrustum = new CSMFrustum( { webGL: true } );
  136. /**
  137. * An array of frustums representing the cascades.
  138. *
  139. * @type {Array<CSMFrustum>}
  140. */
  141. this.frustums = [];
  142. /**
  143. * An array of numbers in the range `[0,1]` the defines how the
  144. * mainCSM frustum should be split up.
  145. *
  146. * @type {Array<number>}
  147. */
  148. this.breaks = [];
  149. /**
  150. * An array of directional lights which cast the shadows for
  151. * the different cascades. There is one directional light for each
  152. * cascade.
  153. *
  154. * @type {Array<DirectionalLight>}
  155. */
  156. this.lights = [];
  157. /**
  158. * A Map holding enhanced material shaders.
  159. *
  160. * @type {Map<Material,Object>}
  161. */
  162. this.shaders = new Map();
  163. this._createLights();
  164. this.updateFrustums();
  165. this._injectInclude();
  166. }
  167. /**
  168. * Creates the directional lights of this CSM instance.
  169. *
  170. * @private
  171. */
  172. _createLights() {
  173. for ( let i = 0; i < this.cascades; i ++ ) {
  174. const light = new DirectionalLight( 0xffffff, this.lightIntensity );
  175. light.castShadow = true;
  176. light.shadow.mapSize.width = this.shadowMapSize;
  177. light.shadow.mapSize.height = this.shadowMapSize;
  178. light.shadow.camera.near = this.lightNear;
  179. light.shadow.camera.far = this.lightFar;
  180. light.shadow.bias = this.shadowBias;
  181. this.parent.add( light );
  182. this.parent.add( light.target );
  183. this.lights.push( light );
  184. }
  185. }
  186. /**
  187. * Inits the cascades according to the scene's camera and breaks configuration.
  188. *
  189. * @private
  190. */
  191. _initCascades() {
  192. const camera = this.camera;
  193. camera.updateProjectionMatrix();
  194. this.mainFrustum.setFromProjectionMatrix( camera.projectionMatrix, this.maxFar );
  195. this.mainFrustum.split( this.breaks, this.frustums );
  196. }
  197. /**
  198. * Updates the shadow bounds of this CSM instance.
  199. *
  200. * @private
  201. */
  202. _updateShadowBounds() {
  203. const frustums = this.frustums;
  204. for ( let i = 0; i < frustums.length; i ++ ) {
  205. const light = this.lights[ i ];
  206. const shadowCam = light.shadow.camera;
  207. const frustum = this.frustums[ i ];
  208. // Get the two points that represent that furthest points on the frustum assuming
  209. // that's either the diagonal across the far plane or the diagonal across the whole
  210. // frustum itself.
  211. const nearVerts = frustum.vertices.near;
  212. const farVerts = frustum.vertices.far;
  213. const point1 = farVerts[ 0 ];
  214. let point2;
  215. if ( point1.distanceTo( farVerts[ 2 ] ) > point1.distanceTo( nearVerts[ 2 ] ) ) {
  216. point2 = farVerts[ 2 ];
  217. } else {
  218. point2 = nearVerts[ 2 ];
  219. }
  220. let squaredBBWidth = point1.distanceTo( point2 );
  221. if ( this.fade ) {
  222. // expand the shadow extents by the fade margin if fade is enabled.
  223. const camera = this.camera;
  224. const far = Math.max( camera.far, this.maxFar );
  225. const linearDepth = frustum.vertices.far[ 0 ].z / ( far - camera.near );
  226. const margin = 0.25 * Math.pow( linearDepth, 2.0 ) * ( far - camera.near );
  227. squaredBBWidth += margin;
  228. }
  229. shadowCam.left = - squaredBBWidth / 2;
  230. shadowCam.right = squaredBBWidth / 2;
  231. shadowCam.top = squaredBBWidth / 2;
  232. shadowCam.bottom = - squaredBBWidth / 2;
  233. shadowCam.updateProjectionMatrix();
  234. }
  235. }
  236. /**
  237. * Computes the breaks of this CSM instance based on the scene's camera, number of cascades
  238. * and the selected split mode.
  239. *
  240. * @private
  241. */
  242. _getBreaks() {
  243. const camera = this.camera;
  244. const far = Math.min( camera.far, this.maxFar );
  245. this.breaks.length = 0;
  246. switch ( this.mode ) {
  247. case 'uniform':
  248. uniformSplit( this.cascades, camera.near, far, this.breaks );
  249. break;
  250. case 'logarithmic':
  251. logarithmicSplit( this.cascades, camera.near, far, this.breaks );
  252. break;
  253. case 'practical':
  254. practicalSplit( this.cascades, camera.near, far, 0.5, this.breaks );
  255. break;
  256. case 'custom':
  257. if ( this.customSplitsCallback === undefined ) console.error( 'CSM: Custom split scheme callback not defined.' );
  258. this.customSplitsCallback( this.cascades, camera.near, far, this.breaks );
  259. break;
  260. }
  261. function uniformSplit( amount, near, far, target ) {
  262. for ( let i = 1; i < amount; i ++ ) {
  263. target.push( ( near + ( far - near ) * i / amount ) / far );
  264. }
  265. target.push( 1 );
  266. }
  267. function logarithmicSplit( amount, near, far, target ) {
  268. for ( let i = 1; i < amount; i ++ ) {
  269. target.push( ( near * ( far / near ) ** ( i / amount ) ) / far );
  270. }
  271. target.push( 1 );
  272. }
  273. function practicalSplit( amount, near, far, lambda, target ) {
  274. _uniformArray.length = 0;
  275. _logArray.length = 0;
  276. logarithmicSplit( amount, near, far, _logArray );
  277. uniformSplit( amount, near, far, _uniformArray );
  278. for ( let i = 1; i < amount; i ++ ) {
  279. target.push( MathUtils.lerp( _uniformArray[ i - 1 ], _logArray[ i - 1 ], lambda ) );
  280. }
  281. target.push( 1 );
  282. }
  283. }
  284. /**
  285. * Updates the CSM. This method must be called in your animation loop before
  286. * calling `renderer.render()`.
  287. */
  288. update() {
  289. const camera = this.camera;
  290. const frustums = this.frustums;
  291. // for each frustum we need to find its min-max box aligned with the light orientation
  292. // the position in _lightOrientationMatrix does not matter, as we transform there and back
  293. _lightOrientationMatrix.lookAt( new Vector3(), this.lightDirection, _up );
  294. _lightOrientationMatrixInverse.copy( _lightOrientationMatrix ).invert();
  295. for ( let i = 0; i < frustums.length; i ++ ) {
  296. const light = this.lights[ i ];
  297. const shadowCam = light.shadow.camera;
  298. const texelWidth = ( shadowCam.right - shadowCam.left ) / this.shadowMapSize;
  299. const texelHeight = ( shadowCam.top - shadowCam.bottom ) / this.shadowMapSize;
  300. _cameraToLightMatrix.multiplyMatrices( _lightOrientationMatrixInverse, camera.matrixWorld );
  301. frustums[ i ].toSpace( _cameraToLightMatrix, _lightSpaceFrustum );
  302. const nearVerts = _lightSpaceFrustum.vertices.near;
  303. const farVerts = _lightSpaceFrustum.vertices.far;
  304. _bbox.makeEmpty();
  305. for ( let j = 0; j < 4; j ++ ) {
  306. _bbox.expandByPoint( nearVerts[ j ] );
  307. _bbox.expandByPoint( farVerts[ j ] );
  308. }
  309. _bbox.getCenter( _center );
  310. _center.z = _bbox.max.z + this.lightMargin;
  311. _center.x = Math.floor( _center.x / texelWidth ) * texelWidth;
  312. _center.y = Math.floor( _center.y / texelHeight ) * texelHeight;
  313. _center.applyMatrix4( _lightOrientationMatrix );
  314. light.position.copy( _center );
  315. light.target.position.copy( _center );
  316. light.target.position.x += this.lightDirection.x;
  317. light.target.position.y += this.lightDirection.y;
  318. light.target.position.z += this.lightDirection.z;
  319. }
  320. }
  321. /**
  322. * Injects the CSM shader enhancements into the built-in materials.
  323. *
  324. * @private
  325. */
  326. _injectInclude() {
  327. ShaderChunk.lights_fragment_begin = CSMShader.lights_fragment_begin;
  328. ShaderChunk.lights_pars_begin = CSMShader.lights_pars_begin;
  329. }
  330. /**
  331. * Applications must call this method for all materials that should be affected by CSM.
  332. *
  333. * @param {Material} material - The material to setup for CSM support.
  334. */
  335. setupMaterial( material ) {
  336. material.defines = material.defines || {};
  337. material.defines.USE_CSM = 1;
  338. material.defines.CSM_CASCADES = this.cascades;
  339. if ( this.fade ) {
  340. material.defines.CSM_FADE = '';
  341. }
  342. const breaksVec2 = [];
  343. const scope = this;
  344. const shaders = this.shaders;
  345. material.onBeforeCompile = function ( shader ) {
  346. const far = Math.min( scope.camera.far, scope.maxFar );
  347. scope._getExtendedBreaks( breaksVec2 );
  348. shader.uniforms.CSM_cascades = { value: breaksVec2 };
  349. shader.uniforms.cameraNear = { value: scope.camera.near };
  350. shader.uniforms.shadowFar = { value: far };
  351. shaders.set( material, shader );
  352. };
  353. shaders.set( material, null );
  354. }
  355. /**
  356. * Updates the CSM uniforms.
  357. *
  358. * @private
  359. */
  360. _updateUniforms() {
  361. const far = Math.min( this.camera.far, this.maxFar );
  362. const shaders = this.shaders;
  363. shaders.forEach( function ( shader, material ) {
  364. if ( shader !== null ) {
  365. const uniforms = shader.uniforms;
  366. this._getExtendedBreaks( uniforms.CSM_cascades.value );
  367. uniforms.cameraNear.value = this.camera.near;
  368. uniforms.shadowFar.value = far;
  369. }
  370. if ( ! this.fade && 'CSM_FADE' in material.defines ) {
  371. delete material.defines.CSM_FADE;
  372. material.needsUpdate = true;
  373. } else if ( this.fade && ! ( 'CSM_FADE' in material.defines ) ) {
  374. material.defines.CSM_FADE = '';
  375. material.needsUpdate = true;
  376. }
  377. }, this );
  378. }
  379. /**
  380. * Computes the extended breaks for the CSM uniforms.
  381. *
  382. * @private
  383. * @param {Array<Vector2>} target - The target array that holds the extended breaks.
  384. */
  385. _getExtendedBreaks( target ) {
  386. while ( target.length < this.breaks.length ) {
  387. target.push( new Vector2() );
  388. }
  389. target.length = this.breaks.length;
  390. for ( let i = 0; i < this.cascades; i ++ ) {
  391. const amount = this.breaks[ i ];
  392. const prev = this.breaks[ i - 1 ] || 0;
  393. target[ i ].x = prev;
  394. target[ i ].y = amount;
  395. }
  396. }
  397. /**
  398. * Applications must call this method every time they change camera or CSM settings.
  399. */
  400. updateFrustums() {
  401. this._getBreaks();
  402. this._initCascades();
  403. this._updateShadowBounds();
  404. this._updateUniforms();
  405. }
  406. /**
  407. * Applications must call this method when they remove the CSM usage from their scene.
  408. */
  409. remove() {
  410. for ( let i = 0; i < this.lights.length; i ++ ) {
  411. this.parent.remove( this.lights[ i ].target );
  412. this.parent.remove( this.lights[ i ] );
  413. }
  414. }
  415. /**
  416. * Frees the GPU-related resources allocated by this instance. Call this
  417. * method whenever this instance is no longer used in your app.
  418. */
  419. dispose() {
  420. const shaders = this.shaders;
  421. shaders.forEach( function ( shader, material ) {
  422. delete material.onBeforeCompile;
  423. delete material.defines.USE_CSM;
  424. delete material.defines.CSM_CASCADES;
  425. delete material.defines.CSM_FADE;
  426. if ( shader !== null ) {
  427. delete shader.uniforms.CSM_cascades;
  428. delete shader.uniforms.cameraNear;
  429. delete shader.uniforms.shadowFar;
  430. }
  431. material.needsUpdate = true;
  432. } );
  433. shaders.clear();
  434. }
  435. }
  436. /**
  437. * Constructor data of `CSM`.
  438. *
  439. * @typedef {Object} CSM~Data
  440. * @property {Camera} camera - The scene's camera.
  441. * @property {Object3D} parent - The parent object, usually the scene.
  442. * @property {number} [cascades=3] - The number of cascades.
  443. * @property {number} [maxFar=100000] - The maximum far value.
  444. * @property {('practical'|'uniform'|'logarithmic'|'custom')} [mode='practical'] - The frustum split mode.
  445. * @property {Function} [customSplitsCallback] - Custom split callback when using `mode='custom'`.
  446. * @property {number} [shadowMapSize=2048] - The shadow map size.
  447. * @property {number} [shadowBias=0.000001] - The shadow bias.
  448. * @property {Vector3} [lightDirection] - The light direction.
  449. * @property {number} [lightIntensity=3] - The light intensity.
  450. * @property {number} [lightNear=1] - The light near value.
  451. * @property {number} [lightNear=2000] - The light far value.
  452. * @property {number} [lightMargin=200] - The light margin.
  453. **/