ShadowMapViewer.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. ( function () {
  2. /**
  3. * This is a helper for visualising a given light's shadow map.
  4. * It works for shadow casting lights: DirectionalLight and SpotLight.
  5. * It renders out the shadow map and displays it on a HUD.
  6. *
  7. * Example usage:
  8. * 1) Import ShadowMapViewer into your app.
  9. *
  10. * 2) Create a shadow casting light and name it optionally:
  11. * let light = new DirectionalLight( 0xffffff, 1 );
  12. * light.castShadow = true;
  13. * light.name = 'Sun';
  14. *
  15. * 3) Create a shadow map viewer for that light and set its size and position optionally:
  16. * let shadowMapViewer = new ShadowMapViewer( light );
  17. * shadowMapViewer.size.set( 128, 128 ); //width, height default: 256, 256
  18. * shadowMapViewer.position.set( 10, 10 ); //x, y in pixel default: 0, 0 (top left corner)
  19. *
  20. * 4) Render the shadow map viewer in your render loop:
  21. * shadowMapViewer.render( renderer );
  22. *
  23. * 5) Optionally: Update the shadow map viewer on window resize:
  24. * shadowMapViewer.updateForWindowResize();
  25. *
  26. * 6) If you set the position or size members directly, you need to call shadowMapViewer.update();
  27. */
  28. class ShadowMapViewer {
  29. constructor( light ) {
  30. //- Internals
  31. const scope = this;
  32. const doRenderLabel = light.name !== undefined && light.name !== '';
  33. let userAutoClearSetting;
  34. //Holds the initial position and dimension of the HUD
  35. const frame = {
  36. x: 10,
  37. y: 10,
  38. width: 256,
  39. height: 256
  40. };
  41. const camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 10 );
  42. camera.position.set( 0, 0, 2 );
  43. const scene = new THREE.Scene();
  44. //HUD for shadow map
  45. const shader = THREE.UnpackDepthRGBAShader;
  46. const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
  47. const material = new THREE.ShaderMaterial( {
  48. uniforms: uniforms,
  49. vertexShader: shader.vertexShader,
  50. fragmentShader: shader.fragmentShader
  51. } );
  52. const plane = new THREE.PlaneGeometry( frame.width, frame.height );
  53. const mesh = new THREE.Mesh( plane, material );
  54. scene.add( mesh );
  55. //Label for light's name
  56. let labelCanvas, labelMesh;
  57. if ( doRenderLabel ) {
  58. labelCanvas = document.createElement( 'canvas' );
  59. const context = labelCanvas.getContext( '2d' );
  60. context.font = 'Bold 20px Arial';
  61. const labelWidth = context.measureText( light.name ).width;
  62. labelCanvas.width = labelWidth;
  63. labelCanvas.height = 25; //25 to account for g, p, etc.
  64. context.font = 'Bold 20px Arial';
  65. context.fillStyle = 'rgba( 255, 0, 0, 1 )';
  66. context.fillText( light.name, 0, 20 );
  67. const labelTexture = new THREE.Texture( labelCanvas );
  68. labelTexture.magFilter = THREE.LinearFilter;
  69. labelTexture.minFilter = THREE.LinearFilter;
  70. labelTexture.needsUpdate = true;
  71. const labelMaterial = new THREE.MeshBasicMaterial( {
  72. map: labelTexture,
  73. side: THREE.DoubleSide
  74. } );
  75. labelMaterial.transparent = true;
  76. const labelPlane = new THREE.PlaneGeometry( labelCanvas.width, labelCanvas.height );
  77. labelMesh = new THREE.Mesh( labelPlane, labelMaterial );
  78. scene.add( labelMesh );
  79. }
  80. function resetPosition() {
  81. scope.position.set( scope.position.x, scope.position.y );
  82. }
  83. //- API
  84. // Set to false to disable displaying this shadow map
  85. this.enabled = true;
  86. // Set the size of the displayed shadow map on the HUD
  87. this.size = {
  88. width: frame.width,
  89. height: frame.height,
  90. set: function ( width, height ) {
  91. this.width = width;
  92. this.height = height;
  93. mesh.scale.set( this.width / frame.width, this.height / frame.height, 1 );
  94. //Reset the position as it is off when we scale stuff
  95. resetPosition();
  96. }
  97. };
  98. // Set the position of the displayed shadow map on the HUD
  99. this.position = {
  100. x: frame.x,
  101. y: frame.y,
  102. set: function ( x, y ) {
  103. this.x = x;
  104. this.y = y;
  105. const width = scope.size.width;
  106. const height = scope.size.height;
  107. mesh.position.set( - window.innerWidth / 2 + width / 2 + this.x, window.innerHeight / 2 - height / 2 - this.y, 0 );
  108. if ( doRenderLabel ) labelMesh.position.set( mesh.position.x, mesh.position.y - scope.size.height / 2 + labelCanvas.height / 2, 0 );
  109. }
  110. };
  111. this.render = function ( renderer ) {
  112. if ( this.enabled ) {
  113. //Because a light's .shadowMap is only initialised after the first render pass
  114. //we have to make sure the correct map is sent into the shader, otherwise we
  115. //always end up with the scene's first added shadow casting light's shadowMap
  116. //in the shader
  117. //See: https://github.com/mrdoob/three.js/issues/5932
  118. uniforms.tDiffuse.value = light.shadow.map.texture;
  119. userAutoClearSetting = renderer.autoClear;
  120. renderer.autoClear = false; // To allow render overlay
  121. renderer.clearDepth();
  122. renderer.render( scene, camera );
  123. renderer.autoClear = userAutoClearSetting; //Restore user's setting
  124. }
  125. };
  126. this.updateForWindowResize = function () {
  127. if ( this.enabled ) {
  128. camera.left = window.innerWidth / - 2;
  129. camera.right = window.innerWidth / 2;
  130. camera.top = window.innerHeight / 2;
  131. camera.bottom = window.innerHeight / - 2;
  132. camera.updateProjectionMatrix();
  133. this.update();
  134. }
  135. };
  136. this.update = function () {
  137. this.position.set( this.position.x, this.position.y );
  138. this.size.set( this.size.width, this.size.height );
  139. };
  140. //Force an update to set position/size
  141. this.update();
  142. }
  143. }
  144. THREE.ShadowMapViewer = ShadowMapViewer;
  145. } )();