WebGLShadowMap.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. /**
  2. * @author alteredq / http://alteredqualia.com/
  3. * @author mrdoob / http://mrdoob.com/
  4. */
  5. THREE.WebGLShadowMap = function ( _renderer, _lights, _objects ) {
  6. var _gl = _renderer.context,
  7. _state = _renderer.state,
  8. _frustum = new THREE.Frustum(),
  9. _projScreenMatrix = new THREE.Matrix4(),
  10. _min = new THREE.Vector3(),
  11. _max = new THREE.Vector3(),
  12. _lookTarget = new THREE.Vector3(),
  13. _lightPositionWorld = new THREE.Vector3(),
  14. _renderList = [],
  15. _MorphingFlag = 1,
  16. _SkinningFlag = 2,
  17. _NumberOfMaterialVariants = ( _MorphingFlag | _SkinningFlag ) + 1,
  18. _depthMaterials = new Array( _NumberOfMaterialVariants ),
  19. _distanceMaterials = new Array( _NumberOfMaterialVariants );
  20. var cubeDirections = [
  21. new THREE.Vector3( 1, 0, 0 ), new THREE.Vector3( - 1, 0, 0 ), new THREE.Vector3( 0, 0, 1 ),
  22. new THREE.Vector3( 0, 0, - 1 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, - 1, 0 )
  23. ];
  24. var cubeUps = [
  25. new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 1, 0 ),
  26. new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 1 ), new THREE.Vector3( 0, 0, - 1 )
  27. ];
  28. var cube2DViewPorts = [
  29. new THREE.Vector4(), new THREE.Vector4(), new THREE.Vector4(),
  30. new THREE.Vector4(), new THREE.Vector4(), new THREE.Vector4()
  31. ];
  32. var _vector4 = new THREE.Vector4();
  33. // init
  34. var depthShader = THREE.ShaderLib[ "depthRGBA" ];
  35. var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
  36. var distanceShader = THREE.ShaderLib[ "distanceRGBA" ];
  37. var distanceUniforms = THREE.UniformsUtils.clone( distanceShader.uniforms );
  38. for ( var i = 0; i !== _NumberOfMaterialVariants; ++ i ) {
  39. var useMorphing = ( i & _MorphingFlag ) !== 0;
  40. var useSkinning = ( i & _SkinningFlag ) !== 0;
  41. var depthMaterial = new THREE.ShaderMaterial( {
  42. uniforms: depthUniforms,
  43. vertexShader: depthShader.vertexShader,
  44. fragmentShader: depthShader.fragmentShader,
  45. morphTargets: useMorphing,
  46. skinning: useSkinning
  47. } );
  48. depthMaterial._shadowPass = true;
  49. _depthMaterials[ i ] = depthMaterial;
  50. var distanceMaterial = new THREE.ShaderMaterial( {
  51. uniforms: distanceUniforms,
  52. vertexShader: distanceShader.vertexShader,
  53. fragmentShader: distanceShader.fragmentShader,
  54. morphTargets: useMorphing,
  55. skinning: useSkinning
  56. } );
  57. distanceMaterial._shadowPass = true;
  58. _distanceMaterials[ i ] = distanceMaterial;
  59. }
  60. //
  61. var scope = this;
  62. this.enabled = false;
  63. this.autoUpdate = true;
  64. this.needsUpdate = false;
  65. this.type = THREE.PCFShadowMap;
  66. this.cullFace = THREE.CullFaceFront;
  67. this.render = function ( scene ) {
  68. var faceCount, isPointLight;
  69. if ( scope.enabled === false ) return;
  70. if ( scope.autoUpdate === false && scope.needsUpdate === false ) return;
  71. // set GL state for depth map
  72. _gl.clearColor( 1, 1, 1, 1 );
  73. _state.disable( _gl.BLEND );
  74. _state.enable( _gl.CULL_FACE );
  75. _gl.frontFace( _gl.CCW );
  76. if ( scope.cullFace === THREE.CullFaceFront ) {
  77. _gl.cullFace( _gl.FRONT );
  78. } else {
  79. _gl.cullFace( _gl.BACK );
  80. }
  81. _state.setDepthTest( true );
  82. // render depth map
  83. for ( var i = 0, il = _lights.length; i < il; i ++ ) {
  84. var light = _lights[ i ];
  85. if ( light instanceof THREE.PointLight ) {
  86. faceCount = 6;
  87. isPointLight = true;
  88. var vpWidth = light.shadowMapWidth / 4.0;
  89. var vpHeight = light.shadowMapHeight / 2.0;
  90. // These viewports map a cube-map onto a 2D texture with the
  91. // following orientation:
  92. //
  93. // xzXZ
  94. // y Y
  95. //
  96. // X - Positive x direction
  97. // x - Negative x direction
  98. // Y - Positive y direction
  99. // y - Negative y direction
  100. // Z - Positive z direction
  101. // z - Negative z direction
  102. // positive X
  103. cube2DViewPorts[ 0 ].set( vpWidth * 2, vpHeight, vpWidth, vpHeight );
  104. // negative X
  105. cube2DViewPorts[ 1 ].set( 0, vpHeight, vpWidth, vpHeight );
  106. // positive Z
  107. cube2DViewPorts[ 2 ].set( vpWidth * 3, vpHeight, vpWidth, vpHeight );
  108. // negative Z
  109. cube2DViewPorts[ 3 ].set( vpWidth, vpHeight, vpWidth, vpHeight );
  110. // positive Y
  111. cube2DViewPorts[ 4 ].set( vpWidth * 3, 0, vpWidth, vpHeight );
  112. // negative Y
  113. cube2DViewPorts[ 5 ].set( vpWidth, 0, vpWidth, vpHeight );
  114. } else {
  115. faceCount = 1;
  116. isPointLight = false;
  117. }
  118. if ( ! light.castShadow ) continue;
  119. if ( ! light.shadowMap ) {
  120. var shadowFilter = THREE.LinearFilter;
  121. if ( scope.type === THREE.PCFSoftShadowMap ) {
  122. shadowFilter = THREE.NearestFilter;
  123. }
  124. var pars = { minFilter: shadowFilter, magFilter: shadowFilter, format: THREE.RGBAFormat };
  125. light.shadowMap = new THREE.WebGLRenderTarget( light.shadowMapWidth, light.shadowMapHeight, pars );
  126. light.shadowMapSize = new THREE.Vector2( light.shadowMapWidth, light.shadowMapHeight );
  127. light.shadowMatrix = new THREE.Matrix4();
  128. }
  129. if ( ! light.shadowCamera ) {
  130. if ( light instanceof THREE.SpotLight ) {
  131. light.shadowCamera = new THREE.PerspectiveCamera( light.shadowCameraFov, light.shadowMapWidth / light.shadowMapHeight, light.shadowCameraNear, light.shadowCameraFar );
  132. } else if ( light instanceof THREE.DirectionalLight ) {
  133. light.shadowCamera = new THREE.OrthographicCamera( light.shadowCameraLeft, light.shadowCameraRight, light.shadowCameraTop, light.shadowCameraBottom, light.shadowCameraNear, light.shadowCameraFar );
  134. } else {
  135. light.shadowCamera = new THREE.PerspectiveCamera( light.shadowCameraFov, 1.0, light.shadowCameraNear, light.shadowCameraFar );
  136. }
  137. scene.add( light.shadowCamera );
  138. if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
  139. }
  140. if ( light.shadowCameraVisible && ! light.cameraHelper ) {
  141. light.cameraHelper = new THREE.CameraHelper( light.shadowCamera );
  142. scene.add( light.cameraHelper );
  143. }
  144. var shadowMap = light.shadowMap;
  145. var shadowMatrix = light.shadowMatrix;
  146. var shadowCamera = light.shadowCamera;
  147. _lightPositionWorld.setFromMatrixPosition( light.matrixWorld );
  148. shadowCamera.position.copy( _lightPositionWorld );
  149. // save the existing viewport so it can be restored later
  150. _renderer.getViewport( _vector4 );
  151. _renderer.setRenderTarget( shadowMap );
  152. _renderer.clear();
  153. // render shadow map for each cube face (if omni-directional) or
  154. // run a single pass if not
  155. for ( var face = 0; face < faceCount; face ++ ) {
  156. if ( isPointLight ) {
  157. _lookTarget.copy( shadowCamera.position );
  158. _lookTarget.add( cubeDirections[ face ] );
  159. shadowCamera.up.copy( cubeUps[ face ] );
  160. shadowCamera.lookAt( _lookTarget );
  161. var vpDimensions = cube2DViewPorts[ face ];
  162. _renderer.setViewport( vpDimensions.x, vpDimensions.y, vpDimensions.z, vpDimensions.w );
  163. } else {
  164. _lookTarget.setFromMatrixPosition( light.target.matrixWorld );
  165. shadowCamera.lookAt( _lookTarget );
  166. }
  167. shadowCamera.updateMatrixWorld();
  168. shadowCamera.matrixWorldInverse.getInverse( shadowCamera.matrixWorld );
  169. if ( light.cameraHelper ) light.cameraHelper.visible = light.shadowCameraVisible;
  170. if ( light.shadowCameraVisible ) light.cameraHelper.update();
  171. // compute shadow matrix
  172. shadowMatrix.set(
  173. 0.5, 0.0, 0.0, 0.5,
  174. 0.0, 0.5, 0.0, 0.5,
  175. 0.0, 0.0, 0.5, 0.5,
  176. 0.0, 0.0, 0.0, 1.0
  177. );
  178. shadowMatrix.multiply( shadowCamera.projectionMatrix );
  179. shadowMatrix.multiply( shadowCamera.matrixWorldInverse );
  180. // update camera matrices and frustum
  181. _projScreenMatrix.multiplyMatrices( shadowCamera.projectionMatrix, shadowCamera.matrixWorldInverse );
  182. _frustum.setFromMatrix( _projScreenMatrix );
  183. // set object matrices & frustum culling
  184. _renderList.length = 0;
  185. projectObject( scene, shadowCamera );
  186. // render shadow map
  187. // render regular objects
  188. for ( var j = 0, jl = _renderList.length; j < jl; j ++ ) {
  189. var object = _renderList[ j ];
  190. var geometry = _objects.update( object );
  191. var material = object.material;
  192. if ( material instanceof THREE.MeshFaceMaterial ) {
  193. var groups = geometry.groups;
  194. var materials = material.materials;
  195. for ( var k = 0, kl = groups.length; k < kl; k ++ ) {
  196. var group = groups[ k ];
  197. var groupMaterial = materials[ group.materialIndex ];
  198. if ( groupMaterial.visible === true ) {
  199. var depthMaterial = getDepthMaterial( object, groupMaterial, isPointLight, _lightPositionWorld );
  200. _renderer.renderBufferDirect( shadowCamera, _lights, null, geometry, depthMaterial, object, group );
  201. }
  202. }
  203. } else {
  204. var depthMaterial = getDepthMaterial( object, material, isPointLight, _lightPositionWorld );
  205. _renderer.renderBufferDirect( shadowCamera, _lights, null, geometry, depthMaterial, object, null );
  206. }
  207. }
  208. }
  209. }
  210. // restore GL state
  211. var clearColor = _renderer.getClearColor(),
  212. clearAlpha = _renderer.getClearAlpha();
  213. _renderer.setClearColor( clearColor, clearAlpha );
  214. _state.enable( _gl.BLEND );
  215. if ( scope.cullFace === THREE.CullFaceFront ) {
  216. _gl.cullFace( _gl.BACK );
  217. }
  218. _renderer.setViewport( _vector4.x, _vector4.y, _vector4.z, _vector4.w );
  219. _renderer.resetGLState();
  220. scope.needsUpdate = false;
  221. };
  222. function getDepthMaterial( object, material, isPointLight, lightPositionWorld ) {
  223. var geometry = object.geometry;
  224. var newMaterial = null;
  225. var materialVariants = _depthMaterials;
  226. var customMaterial = object.customDepthMaterial;
  227. if ( isPointLight ) {
  228. materialVariants = _distanceMaterials;
  229. customMaterial = object.customDistanceMaterial;
  230. }
  231. if ( ! customMaterial ) {
  232. var useMorphing = geometry.morphTargets !== undefined &&
  233. geometry.morphTargets.length > 0 && material.morphTargets;
  234. var useSkinning = object instanceof THREE.SkinnedMesh && material.skinning;
  235. var variantIndex = 0;
  236. if ( useMorphing ) variantIndex |= _MorphingFlag;
  237. if ( useSkinning ) variantIndex |= _SkinningFlag;
  238. newMaterial = materialVariants[ variantIndex ];
  239. } else {
  240. newMaterial = customMaterial;
  241. }
  242. newMaterial.visible = material.visible;
  243. newMaterial.wireframe = material.wireframe;
  244. newMaterial.wireframeLinewidth = material.wireframeLinewidth;
  245. if ( isPointLight && newMaterial.uniforms.lightPos !== undefined ) {
  246. newMaterial.uniforms.lightPos.value.copy( lightPositionWorld );
  247. }
  248. return newMaterial;
  249. }
  250. function projectObject( object, camera ) {
  251. if ( object.visible === false ) return;
  252. if ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Points ) {
  253. if ( object.castShadow && ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) ) {
  254. var material = object.material;
  255. if ( material.visible === true ) {
  256. object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
  257. _renderList.push( object );
  258. }
  259. }
  260. }
  261. var children = object.children;
  262. for ( var i = 0, l = children.length; i < l; i ++ ) {
  263. projectObject( children[ i ], camera );
  264. }
  265. }
  266. };