WebGLShadowMap.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  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. _webglObjects = _objects.objects,
  13. _webglObjectsImmediate = _objects.objectsImmediate,
  14. _matrixPosition = new THREE.Vector3(),
  15. _renderList = [];
  16. // init
  17. var depthShader = THREE.ShaderLib[ "depthRGBA" ];
  18. var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
  19. var _depthMaterial = new THREE.ShaderMaterial( {
  20. uniforms: depthUniforms,
  21. vertexShader: depthShader.vertexShader,
  22. fragmentShader: depthShader.fragmentShader
  23. } );
  24. var _depthMaterialMorph = new THREE.ShaderMaterial( {
  25. uniforms: depthUniforms,
  26. vertexShader: depthShader.vertexShader,
  27. fragmentShader: depthShader.fragmentShader,
  28. morphTargets: true
  29. } );
  30. var _depthMaterialSkin = new THREE.ShaderMaterial( {
  31. uniforms: depthUniforms,
  32. vertexShader: depthShader.vertexShader,
  33. fragmentShader: depthShader.fragmentShader,
  34. skinning: true
  35. } );
  36. var _depthMaterialMorphSkin = new THREE.ShaderMaterial( {
  37. uniforms: depthUniforms,
  38. vertexShader: depthShader.vertexShader,
  39. fragmentShader: depthShader.fragmentShader,
  40. morphTargets: true,
  41. skinning: true
  42. } );
  43. _depthMaterial._shadowPass = true;
  44. _depthMaterialMorph._shadowPass = true;
  45. _depthMaterialSkin._shadowPass = true;
  46. _depthMaterialMorphSkin._shadowPass = true;
  47. //
  48. var scope = this;
  49. this.enabled = false;
  50. this.type = THREE.PCFShadowMap;
  51. this.cullFace = THREE.CullFaceFront;
  52. this.debug = false;
  53. this.cascade = false;
  54. this.render = function ( scene, camera ) {
  55. if ( scope.enabled === false ) return;
  56. var i, il, j, jl, n,
  57. shadowMap, shadowMatrix, shadowCamera,
  58. webglObject, object, material, light,
  59. lights = [],
  60. k = 0,
  61. fog = null;
  62. // set GL state for depth map
  63. _gl.clearColor( 1, 1, 1, 1 );
  64. _state.setBlend( false );
  65. _gl.enable( _gl.CULL_FACE );
  66. _gl.frontFace( _gl.CCW );
  67. if ( scope.cullFace === THREE.CullFaceFront ) {
  68. _gl.cullFace( _gl.FRONT );
  69. } else {
  70. _gl.cullFace( _gl.BACK );
  71. }
  72. _state.setDepthTest( true );
  73. // preprocess lights
  74. // - skip lights that are not casting shadows
  75. // - create virtual lights for cascaded shadow maps
  76. for ( i = 0, il = _lights.length; i < il; i ++ ) {
  77. light = _lights[ i ];
  78. if ( ! light.castShadow ) continue;
  79. if ( ( light instanceof THREE.DirectionalLight ) && light.shadowCascade ) {
  80. for ( n = 0; n < light.shadowCascadeCount; n ++ ) {
  81. var virtualLight;
  82. if ( ! light.shadowCascadeArray[ n ] ) {
  83. virtualLight = createVirtualLight( light, n );
  84. virtualLight.originalCamera = camera;
  85. var gyro = new THREE.Gyroscope();
  86. gyro.position.copy( light.shadowCascadeOffset );
  87. gyro.add( virtualLight );
  88. gyro.add( virtualLight.target );
  89. camera.add( gyro );
  90. light.shadowCascadeArray[ n ] = virtualLight;
  91. //console.log( "Created virtualLight", virtualLight );
  92. } else {
  93. virtualLight = light.shadowCascadeArray[ n ];
  94. }
  95. updateVirtualLight( light, n );
  96. lights[ k ] = virtualLight;
  97. k ++;
  98. }
  99. } else {
  100. lights[ k ] = light;
  101. k ++;
  102. }
  103. }
  104. // render depth map
  105. for ( i = 0, il = lights.length; i < il; i ++ ) {
  106. light = lights[ i ];
  107. if ( ! light.shadowMap ) {
  108. var shadowFilter = THREE.LinearFilter;
  109. if ( scope.type === THREE.PCFSoftShadowMap ) {
  110. shadowFilter = THREE.NearestFilter;
  111. }
  112. var pars = { minFilter: shadowFilter, magFilter: shadowFilter, format: THREE.RGBAFormat };
  113. light.shadowMap = new THREE.WebGLRenderTarget( light.shadowMapWidth, light.shadowMapHeight, pars );
  114. light.shadowMapSize = new THREE.Vector2( light.shadowMapWidth, light.shadowMapHeight );
  115. light.shadowMatrix = new THREE.Matrix4();
  116. }
  117. if ( ! light.shadowCamera ) {
  118. if ( light instanceof THREE.SpotLight ) {
  119. light.shadowCamera = new THREE.PerspectiveCamera( light.shadowCameraFov, light.shadowMapWidth / light.shadowMapHeight, light.shadowCameraNear, light.shadowCameraFar );
  120. } else if ( light instanceof THREE.DirectionalLight ) {
  121. light.shadowCamera = new THREE.OrthographicCamera( light.shadowCameraLeft, light.shadowCameraRight, light.shadowCameraTop, light.shadowCameraBottom, light.shadowCameraNear, light.shadowCameraFar );
  122. } else {
  123. console.error( "THREE.ShadowMapPlugin: Unsupported light type for shadow", light );
  124. continue;
  125. }
  126. scene.add( light.shadowCamera );
  127. if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
  128. }
  129. if ( light.shadowCameraVisible && ! light.cameraHelper ) {
  130. light.cameraHelper = new THREE.CameraHelper( light.shadowCamera );
  131. scene.add( light.cameraHelper );
  132. }
  133. if ( light.isVirtual && virtualLight.originalCamera == camera ) {
  134. updateShadowCamera( camera, light );
  135. }
  136. shadowMap = light.shadowMap;
  137. shadowMatrix = light.shadowMatrix;
  138. shadowCamera = light.shadowCamera;
  139. //
  140. shadowCamera.position.setFromMatrixPosition( light.matrixWorld );
  141. _matrixPosition.setFromMatrixPosition( light.target.matrixWorld );
  142. shadowCamera.lookAt( _matrixPosition );
  143. shadowCamera.updateMatrixWorld();
  144. shadowCamera.matrixWorldInverse.getInverse( shadowCamera.matrixWorld );
  145. //
  146. if ( light.cameraHelper ) light.cameraHelper.visible = light.shadowCameraVisible;
  147. if ( light.shadowCameraVisible ) light.cameraHelper.update();
  148. // compute shadow matrix
  149. shadowMatrix.set(
  150. 0.5, 0.0, 0.0, 0.5,
  151. 0.0, 0.5, 0.0, 0.5,
  152. 0.0, 0.0, 0.5, 0.5,
  153. 0.0, 0.0, 0.0, 1.0
  154. );
  155. shadowMatrix.multiply( shadowCamera.projectionMatrix );
  156. shadowMatrix.multiply( shadowCamera.matrixWorldInverse );
  157. // update camera matrices and frustum
  158. _projScreenMatrix.multiplyMatrices( shadowCamera.projectionMatrix, shadowCamera.matrixWorldInverse );
  159. _frustum.setFromMatrix( _projScreenMatrix );
  160. // render shadow map
  161. _renderer.setRenderTarget( shadowMap );
  162. _renderer.clear();
  163. // set object matrices & frustum culling
  164. _renderList.length = 0;
  165. projectObject( scene, shadowCamera );
  166. // render regular objects
  167. var objectMaterial, useMorphing, useSkinning;
  168. for ( j = 0, jl = _renderList.length; j < jl; j ++ ) {
  169. webglObject = _renderList[ j ];
  170. object = webglObject.object;
  171. // culling is overriden globally for all objects
  172. // while rendering depth map
  173. // need to deal with MeshFaceMaterial somehow
  174. // in that case just use the first of material.materials for now
  175. // (proper solution would require to break objects by materials
  176. // similarly to regular rendering and then set corresponding
  177. // depth materials per each chunk instead of just once per object)
  178. objectMaterial = getObjectMaterial( object );
  179. useMorphing = object.geometry.morphTargets !== undefined && object.geometry.morphTargets.length > 0 && objectMaterial.morphTargets;
  180. useSkinning = object instanceof THREE.SkinnedMesh && objectMaterial.skinning;
  181. if ( object.customDepthMaterial ) {
  182. material = object.customDepthMaterial;
  183. } else if ( useSkinning ) {
  184. material = useMorphing ? _depthMaterialMorphSkin : _depthMaterialSkin;
  185. } else if ( useMorphing ) {
  186. material = _depthMaterialMorph;
  187. } else {
  188. material = _depthMaterial;
  189. }
  190. _renderer.setMaterialFaces( objectMaterial );
  191. _renderer.renderBufferDirect( shadowCamera, _lights, fog, material, object );
  192. }
  193. // set matrices and render immediate objects
  194. for ( j = 0, jl = _webglObjectsImmediate.length; j < jl; j ++ ) {
  195. webglObject = _webglObjectsImmediate[ j ];
  196. object = webglObject.object;
  197. if ( object.visible && object.castShadow ) {
  198. object._modelViewMatrix.multiplyMatrices( shadowCamera.matrixWorldInverse, object.matrixWorld );
  199. _renderer.renderImmediateObject( shadowCamera, _lights, fog, _depthMaterial, object );
  200. }
  201. }
  202. }
  203. // restore GL state
  204. var clearColor = _renderer.getClearColor(),
  205. clearAlpha = _renderer.getClearAlpha();
  206. _gl.clearColor( clearColor.r, clearColor.g, clearColor.b, clearAlpha );
  207. _state.setBlend( true );
  208. if ( scope.cullFace === THREE.CullFaceFront ) {
  209. _gl.cullFace( _gl.BACK );
  210. }
  211. _renderer.resetGLState();
  212. };
  213. function projectObject( object, shadowCamera ) {
  214. if ( object.visible === true ) {
  215. var webglObject = _objects.objects[ object.id ];
  216. if ( webglObject && object.castShadow && ( object.frustumCulled === false || _frustum.intersectsObject( object ) === true ) ) {
  217. object._modelViewMatrix.multiplyMatrices( shadowCamera.matrixWorldInverse, object.matrixWorld );
  218. _renderList.push( webglObject );
  219. }
  220. for ( var i = 0, l = object.children.length; i < l; i ++ ) {
  221. projectObject( object.children[ i ], shadowCamera );
  222. }
  223. }
  224. }
  225. function createVirtualLight( light, cascade ) {
  226. var virtualLight = new THREE.DirectionalLight();
  227. virtualLight.isVirtual = true;
  228. virtualLight.onlyShadow = true;
  229. virtualLight.castShadow = true;
  230. virtualLight.shadowCameraNear = light.shadowCameraNear;
  231. virtualLight.shadowCameraFar = light.shadowCameraFar;
  232. virtualLight.shadowCameraLeft = light.shadowCameraLeft;
  233. virtualLight.shadowCameraRight = light.shadowCameraRight;
  234. virtualLight.shadowCameraBottom = light.shadowCameraBottom;
  235. virtualLight.shadowCameraTop = light.shadowCameraTop;
  236. virtualLight.shadowCameraVisible = light.shadowCameraVisible;
  237. virtualLight.shadowDarkness = light.shadowDarkness;
  238. virtualLight.shadowBias = light.shadowCascadeBias[ cascade ];
  239. virtualLight.shadowMapWidth = light.shadowCascadeWidth[ cascade ];
  240. virtualLight.shadowMapHeight = light.shadowCascadeHeight[ cascade ];
  241. virtualLight.pointsWorld = [];
  242. virtualLight.pointsFrustum = [];
  243. var pointsWorld = virtualLight.pointsWorld,
  244. pointsFrustum = virtualLight.pointsFrustum;
  245. for ( var i = 0; i < 8; i ++ ) {
  246. pointsWorld[ i ] = new THREE.Vector3();
  247. pointsFrustum[ i ] = new THREE.Vector3();
  248. }
  249. var nearZ = light.shadowCascadeNearZ[ cascade ];
  250. var farZ = light.shadowCascadeFarZ[ cascade ];
  251. pointsFrustum[ 0 ].set( - 1, - 1, nearZ );
  252. pointsFrustum[ 1 ].set( 1, - 1, nearZ );
  253. pointsFrustum[ 2 ].set( - 1, 1, nearZ );
  254. pointsFrustum[ 3 ].set( 1, 1, nearZ );
  255. pointsFrustum[ 4 ].set( - 1, - 1, farZ );
  256. pointsFrustum[ 5 ].set( 1, - 1, farZ );
  257. pointsFrustum[ 6 ].set( - 1, 1, farZ );
  258. pointsFrustum[ 7 ].set( 1, 1, farZ );
  259. return virtualLight;
  260. }
  261. // Synchronize virtual light with the original light
  262. function updateVirtualLight( light, cascade ) {
  263. var virtualLight = light.shadowCascadeArray[ cascade ];
  264. virtualLight.position.copy( light.position );
  265. virtualLight.target.position.copy( light.target.position );
  266. virtualLight.lookAt( virtualLight.target );
  267. virtualLight.shadowCameraVisible = light.shadowCameraVisible;
  268. virtualLight.shadowDarkness = light.shadowDarkness;
  269. virtualLight.shadowBias = light.shadowCascadeBias[ cascade ];
  270. var nearZ = light.shadowCascadeNearZ[ cascade ];
  271. var farZ = light.shadowCascadeFarZ[ cascade ];
  272. var pointsFrustum = virtualLight.pointsFrustum;
  273. pointsFrustum[ 0 ].z = nearZ;
  274. pointsFrustum[ 1 ].z = nearZ;
  275. pointsFrustum[ 2 ].z = nearZ;
  276. pointsFrustum[ 3 ].z = nearZ;
  277. pointsFrustum[ 4 ].z = farZ;
  278. pointsFrustum[ 5 ].z = farZ;
  279. pointsFrustum[ 6 ].z = farZ;
  280. pointsFrustum[ 7 ].z = farZ;
  281. }
  282. // Fit shadow camera's ortho frustum to camera frustum
  283. function updateShadowCamera( camera, light ) {
  284. var shadowCamera = light.shadowCamera,
  285. pointsFrustum = light.pointsFrustum,
  286. pointsWorld = light.pointsWorld;
  287. _min.set( Infinity, Infinity, Infinity );
  288. _max.set( - Infinity, - Infinity, - Infinity );
  289. for ( var i = 0; i < 8; i ++ ) {
  290. var p = pointsWorld[ i ];
  291. p.copy( pointsFrustum[ i ] );
  292. p.unproject( camera );
  293. p.applyMatrix4( shadowCamera.matrixWorldInverse );
  294. if ( p.x < _min.x ) _min.x = p.x;
  295. if ( p.x > _max.x ) _max.x = p.x;
  296. if ( p.y < _min.y ) _min.y = p.y;
  297. if ( p.y > _max.y ) _max.y = p.y;
  298. if ( p.z < _min.z ) _min.z = p.z;
  299. if ( p.z > _max.z ) _max.z = p.z;
  300. }
  301. shadowCamera.left = _min.x;
  302. shadowCamera.right = _max.x;
  303. shadowCamera.top = _max.y;
  304. shadowCamera.bottom = _min.y;
  305. // can't really fit near/far
  306. //shadowCamera.near = _min.z;
  307. //shadowCamera.far = _max.z;
  308. shadowCamera.updateProjectionMatrix();
  309. }
  310. // For the moment just ignore objects that have multiple materials with different animation methods
  311. // Only the first material will be taken into account for deciding which depth material to use for shadow maps
  312. function getObjectMaterial( object ) {
  313. return object.material instanceof THREE.MeshFaceMaterial
  314. ? object.material.materials[ 0 ]
  315. : object.material;
  316. }
  317. };