WebGLShadowMap.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  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. _lightShadows = _lights.shadows,
  11. _shadowMapSize = new THREE.Vector2(),
  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. _materialCache = {};
  21. var cubeDirections = [
  22. new THREE.Vector3( 1, 0, 0 ), new THREE.Vector3( - 1, 0, 0 ), new THREE.Vector3( 0, 0, 1 ),
  23. new THREE.Vector3( 0, 0, - 1 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, - 1, 0 )
  24. ];
  25. var cubeUps = [
  26. new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 1, 0 ),
  27. new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 1 ), new THREE.Vector3( 0, 0, - 1 )
  28. ];
  29. var cube2DViewPorts = [
  30. new THREE.Vector4(), new THREE.Vector4(), new THREE.Vector4(),
  31. new THREE.Vector4(), new THREE.Vector4(), new THREE.Vector4()
  32. ];
  33. // init
  34. var depthMaterialTemplate = new THREE.MeshDepthMaterial();
  35. depthMaterialTemplate.depthPacking = THREE.RGBADepthPacking;
  36. depthMaterialTemplate.clipping = true;
  37. var distanceShader = THREE.ShaderLib[ "distanceRGBA" ];
  38. var distanceUniforms = THREE.UniformsUtils.clone( distanceShader.uniforms );
  39. for ( var i = 0; i !== _NumberOfMaterialVariants; ++ i ) {
  40. var useMorphing = ( i & _MorphingFlag ) !== 0;
  41. var useSkinning = ( i & _SkinningFlag ) !== 0;
  42. var depthMaterial = depthMaterialTemplate.clone();
  43. depthMaterial.morphTargets = useMorphing;
  44. depthMaterial.skinning = useSkinning;
  45. _depthMaterials[ i ] = depthMaterial;
  46. var distanceMaterial = new THREE.ShaderMaterial( {
  47. defines: {
  48. 'USE_SHADOWMAP': ''
  49. },
  50. uniforms: distanceUniforms,
  51. vertexShader: distanceShader.vertexShader,
  52. fragmentShader: distanceShader.fragmentShader,
  53. morphTargets: useMorphing,
  54. skinning: useSkinning,
  55. clipping: true
  56. } );
  57. _distanceMaterials[ i ] = distanceMaterial;
  58. }
  59. //
  60. var scope = this;
  61. this.enabled = false;
  62. this.autoUpdate = true;
  63. this.needsUpdate = false;
  64. this.type = THREE.PCFShadowMap;
  65. this.renderReverseSided = true;
  66. this.renderSingleSided = true;
  67. this.render = function ( scene, camera ) {
  68. if ( scope.enabled === false ) return;
  69. if ( scope.autoUpdate === false && scope.needsUpdate === false ) return;
  70. if ( _lightShadows.length === 0 ) return;
  71. // Set GL state for depth map.
  72. _state.clearColor( 1, 1, 1, 1 );
  73. _state.disable( _gl.BLEND );
  74. _state.setDepthTest( true );
  75. _state.setScissorTest( false );
  76. // render depth map
  77. var faceCount, isPointLight;
  78. for ( var i = 0, il = _lightShadows.length; i < il; i ++ ) {
  79. var light = _lightShadows[ i ];
  80. var shadow = light.shadow;
  81. if ( shadow === undefined ) {
  82. console.warn( 'THREE.WebGLShadowMap:', light, 'has no shadow.' );
  83. continue;
  84. }
  85. var shadowCamera = shadow.camera;
  86. _shadowMapSize.copy( shadow.mapSize );
  87. if ( light instanceof THREE.PointLight ) {
  88. faceCount = 6;
  89. isPointLight = true;
  90. var vpWidth = _shadowMapSize.x;
  91. var vpHeight = _shadowMapSize.y;
  92. // These viewports map a cube-map onto a 2D texture with the
  93. // following orientation:
  94. //
  95. // xzXZ
  96. // y Y
  97. //
  98. // X - Positive x direction
  99. // x - Negative x direction
  100. // Y - Positive y direction
  101. // y - Negative y direction
  102. // Z - Positive z direction
  103. // z - Negative z direction
  104. // positive X
  105. cube2DViewPorts[ 0 ].set( vpWidth * 2, vpHeight, vpWidth, vpHeight );
  106. // negative X
  107. cube2DViewPorts[ 1 ].set( 0, vpHeight, vpWidth, vpHeight );
  108. // positive Z
  109. cube2DViewPorts[ 2 ].set( vpWidth * 3, vpHeight, vpWidth, vpHeight );
  110. // negative Z
  111. cube2DViewPorts[ 3 ].set( vpWidth, vpHeight, vpWidth, vpHeight );
  112. // positive Y
  113. cube2DViewPorts[ 4 ].set( vpWidth * 3, 0, vpWidth, vpHeight );
  114. // negative Y
  115. cube2DViewPorts[ 5 ].set( vpWidth, 0, vpWidth, vpHeight );
  116. _shadowMapSize.x *= 4.0;
  117. _shadowMapSize.y *= 2.0;
  118. } else {
  119. faceCount = 1;
  120. isPointLight = false;
  121. }
  122. if ( shadow.map === null ) {
  123. var pars = { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat };
  124. shadow.map = new THREE.WebGLRenderTarget( _shadowMapSize.x, _shadowMapSize.y, pars );
  125. shadowCamera.updateProjectionMatrix();
  126. }
  127. if ( shadow instanceof THREE.SpotLightShadow ) {
  128. shadow.update( light );
  129. }
  130. var shadowMap = shadow.map;
  131. var shadowMatrix = shadow.matrix;
  132. _lightPositionWorld.setFromMatrixPosition( light.matrixWorld );
  133. shadowCamera.position.copy( _lightPositionWorld );
  134. _renderer.setRenderTarget( shadowMap );
  135. _renderer.clear();
  136. // render shadow map for each cube face (if omni-directional) or
  137. // run a single pass if not
  138. for ( var face = 0; face < faceCount; face ++ ) {
  139. if ( isPointLight ) {
  140. _lookTarget.copy( shadowCamera.position );
  141. _lookTarget.add( cubeDirections[ face ] );
  142. shadowCamera.up.copy( cubeUps[ face ] );
  143. shadowCamera.lookAt( _lookTarget );
  144. var vpDimensions = cube2DViewPorts[ face ];
  145. _state.viewport( vpDimensions );
  146. } else {
  147. _lookTarget.setFromMatrixPosition( light.target.matrixWorld );
  148. shadowCamera.lookAt( _lookTarget );
  149. }
  150. shadowCamera.updateMatrixWorld();
  151. shadowCamera.matrixWorldInverse.getInverse( shadowCamera.matrixWorld );
  152. // compute shadow matrix
  153. shadowMatrix.set(
  154. 0.5, 0.0, 0.0, 0.5,
  155. 0.0, 0.5, 0.0, 0.5,
  156. 0.0, 0.0, 0.5, 0.5,
  157. 0.0, 0.0, 0.0, 1.0
  158. );
  159. shadowMatrix.multiply( shadowCamera.projectionMatrix );
  160. shadowMatrix.multiply( shadowCamera.matrixWorldInverse );
  161. // update camera matrices and frustum
  162. _projScreenMatrix.multiplyMatrices( shadowCamera.projectionMatrix, shadowCamera.matrixWorldInverse );
  163. _frustum.setFromMatrix( _projScreenMatrix );
  164. // set object matrices & frustum culling
  165. _renderList.length = 0;
  166. projectObject( scene, camera, shadowCamera );
  167. // render shadow map
  168. // render regular objects
  169. for ( var j = 0, jl = _renderList.length; j < jl; j ++ ) {
  170. var object = _renderList[ j ];
  171. var geometry = _objects.update( object );
  172. var material = object.material;
  173. if ( material instanceof THREE.MultiMaterial ) {
  174. var groups = geometry.groups;
  175. var materials = material.materials;
  176. for ( var k = 0, kl = groups.length; k < kl; k ++ ) {
  177. var group = groups[ k ];
  178. var groupMaterial = materials[ group.materialIndex ];
  179. if ( groupMaterial.visible === true ) {
  180. var depthMaterial = getDepthMaterial( object, groupMaterial, isPointLight, _lightPositionWorld );
  181. _renderer.renderBufferDirect( shadowCamera, null, geometry, depthMaterial, object, group );
  182. }
  183. }
  184. } else {
  185. var depthMaterial = getDepthMaterial( object, material, isPointLight, _lightPositionWorld );
  186. _renderer.renderBufferDirect( shadowCamera, null, geometry, depthMaterial, object, null );
  187. }
  188. }
  189. }
  190. }
  191. // Restore GL state.
  192. var clearColor = _renderer.getClearColor(),
  193. clearAlpha = _renderer.getClearAlpha();
  194. _renderer.setClearColor( clearColor, clearAlpha );
  195. scope.needsUpdate = false;
  196. };
  197. function getDepthMaterial( object, material, isPointLight, lightPositionWorld ) {
  198. var geometry = object.geometry;
  199. var result = null;
  200. var materialVariants = _depthMaterials;
  201. var customMaterial = object.customDepthMaterial;
  202. if ( isPointLight ) {
  203. materialVariants = _distanceMaterials;
  204. customMaterial = object.customDistanceMaterial;
  205. }
  206. if ( ! customMaterial ) {
  207. var useMorphing = false;
  208. if ( material.morphTargets ) {
  209. if ( geometry instanceof THREE.BufferGeometry ) {
  210. useMorphing = geometry.morphAttributes && geometry.morphAttributes.position && geometry.morphAttributes.position.length > 0;
  211. } else if ( geometry instanceof THREE.Geometry ) {
  212. useMorphing = geometry.morphTargets && geometry.morphTargets.length > 0;
  213. }
  214. }
  215. var useSkinning = object instanceof THREE.SkinnedMesh && material.skinning;
  216. var variantIndex = 0;
  217. if ( useMorphing ) variantIndex |= _MorphingFlag;
  218. if ( useSkinning ) variantIndex |= _SkinningFlag;
  219. result = materialVariants[ variantIndex ];
  220. } else {
  221. result = customMaterial;
  222. }
  223. if ( _renderer.localClippingEnabled &&
  224. material.clipShadows === true &&
  225. material.clippingPlanes.length !== 0 ) {
  226. // in this case we need a unique material instance reflecting the
  227. // appropriate state
  228. var keyA = result.uuid, keyB = material.uuid;
  229. var materialsForVariant = _materialCache[ keyA ];
  230. if ( materialsForVariant === undefined ) {
  231. materialsForVariant = {};
  232. _materialCache[ keyA ] = materialsForVariant;
  233. }
  234. var cachedMaterial = materialsForVariant[ keyB ];
  235. if ( cachedMaterial === undefined ) {
  236. cachedMaterial = result.clone();
  237. materialsForVariant[ keyB ] = cachedMaterial;
  238. }
  239. result = cachedMaterial;
  240. }
  241. result.visible = material.visible;
  242. result.wireframe = material.wireframe;
  243. var side = material.side;
  244. if ( scope.renderSingleSided && side == THREE.DoubleSide ) {
  245. side = THREE.FrontSide;
  246. }
  247. if ( scope.renderReverseSided ) {
  248. if ( side === THREE.FrontSide ) side = THREE.BackSide;
  249. else if ( side === THREE.BackSide ) side = THREE.FrontSide;
  250. }
  251. result.side = side;
  252. result.clipShadows = material.clipShadows;
  253. result.clippingPlanes = material.clippingPlanes;
  254. result.wireframeLinewidth = material.wireframeLinewidth;
  255. result.linewidth = material.linewidth;
  256. if ( isPointLight && result.uniforms.lightPos !== undefined ) {
  257. result.uniforms.lightPos.value.copy( lightPositionWorld );
  258. }
  259. return result;
  260. }
  261. function projectObject( object, camera, shadowCamera ) {
  262. if ( object.visible === false ) return;
  263. if ( object.layers.test( camera.layers ) && ( object instanceof THREE.Mesh || object instanceof THREE.Line || object instanceof THREE.Points ) ) {
  264. if ( object.castShadow && ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) ) {
  265. var material = object.material;
  266. if ( material.visible === true ) {
  267. object.modelViewMatrix.multiplyMatrices( shadowCamera.matrixWorldInverse, object.matrixWorld );
  268. _renderList.push( object );
  269. }
  270. }
  271. }
  272. var children = object.children;
  273. for ( var i = 0, l = children.length; i < l; i ++ ) {
  274. projectObject( children[ i ], camera, shadowCamera );
  275. }
  276. }
  277. };