ShadowMapViewer.js 5.5 KB

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