WebGLShadowMap.js 9.7 KB

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