ReflectorForSSRPass.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. ( function () {
  2. class ReflectorForSSRPass extends THREE.Mesh {
  3. constructor( geometry, options = {} ) {
  4. super( geometry );
  5. this.type = 'ReflectorForSSRPass';
  6. const scope = this;
  7. const color = options.color !== undefined ? new THREE.Color( options.color ) : new THREE.Color( 0x7F7F7F );
  8. const textureWidth = options.textureWidth || 512;
  9. const textureHeight = options.textureHeight || 512;
  10. const clipBias = options.clipBias || 0;
  11. const shader = options.shader || ReflectorForSSRPass.ReflectorShader;
  12. const useDepthTexture = options.useDepthTexture === true;
  13. const yAxis = new THREE.Vector3( 0, 1, 0 );
  14. const vecTemp0 = new THREE.Vector3();
  15. const vecTemp1 = new THREE.Vector3(); //
  16. scope.needsUpdate = false;
  17. scope.maxDistance = ReflectorForSSRPass.ReflectorShader.uniforms.maxDistance.value;
  18. scope.opacity = ReflectorForSSRPass.ReflectorShader.uniforms.opacity.value;
  19. scope.color = color;
  20. scope.resolution = options.resolution || new THREE.Vector2( window.innerWidth, window.innerHeight );
  21. scope._distanceAttenuation = ReflectorForSSRPass.ReflectorShader.defines.DISTANCE_ATTENUATION;
  22. Object.defineProperty( scope, 'distanceAttenuation', {
  23. get() {
  24. return scope._distanceAttenuation;
  25. },
  26. set( val ) {
  27. if ( scope._distanceAttenuation === val ) return;
  28. scope._distanceAttenuation = val;
  29. scope.material.defines.DISTANCE_ATTENUATION = val;
  30. scope.material.needsUpdate = true;
  31. }
  32. } );
  33. scope._fresnel = ReflectorForSSRPass.ReflectorShader.defines.FRESNEL;
  34. Object.defineProperty( scope, 'fresnel', {
  35. get() {
  36. return scope._fresnel;
  37. },
  38. set( val ) {
  39. if ( scope._fresnel === val ) return;
  40. scope._fresnel = val;
  41. scope.material.defines.FRESNEL = val;
  42. scope.material.needsUpdate = true;
  43. }
  44. } );
  45. const normal = new THREE.Vector3();
  46. const reflectorWorldPosition = new THREE.Vector3();
  47. const cameraWorldPosition = new THREE.Vector3();
  48. const rotationMatrix = new THREE.Matrix4();
  49. const lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
  50. const view = new THREE.Vector3();
  51. const target = new THREE.Vector3();
  52. const textureMatrix = new THREE.Matrix4();
  53. const virtualCamera = new THREE.PerspectiveCamera();
  54. let depthTexture;
  55. if ( useDepthTexture ) {
  56. depthTexture = new THREE.DepthTexture();
  57. depthTexture.type = THREE.UnsignedShortType;
  58. depthTexture.minFilter = THREE.NearestFilter;
  59. depthTexture.magFilter = THREE.NearestFilter;
  60. }
  61. const parameters = {
  62. minFilter: THREE.LinearFilter,
  63. magFilter: THREE.LinearFilter,
  64. format: THREE.RGBFormat,
  65. depthTexture: useDepthTexture ? depthTexture : null
  66. };
  67. const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
  68. if ( ! THREE.MathUtils.isPowerOfTwo( textureWidth ) || ! THREE.MathUtils.isPowerOfTwo( textureHeight ) ) {
  69. renderTarget.texture.generateMipmaps = false;
  70. }
  71. const material = new THREE.ShaderMaterial( {
  72. transparent: useDepthTexture,
  73. defines: Object.assign( {}, ReflectorForSSRPass.ReflectorShader.defines, {
  74. useDepthTexture
  75. } ),
  76. uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
  77. fragmentShader: shader.fragmentShader,
  78. vertexShader: shader.vertexShader
  79. } );
  80. material.uniforms[ 'tDiffuse' ].value = renderTarget.texture;
  81. material.uniforms[ 'color' ].value = scope.color;
  82. material.uniforms[ 'textureMatrix' ].value = textureMatrix;
  83. if ( useDepthTexture ) {
  84. material.uniforms[ 'tDepth' ].value = renderTarget.depthTexture;
  85. }
  86. this.material = material;
  87. const globalPlane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), clipBias );
  88. const globalPlanes = [ globalPlane ];
  89. this.doRender = function ( renderer, scene, camera ) {
  90. material.uniforms[ 'maxDistance' ].value = scope.maxDistance;
  91. material.uniforms[ 'color' ].value = scope.color;
  92. material.uniforms[ 'opacity' ].value = scope.opacity;
  93. vecTemp0.copy( camera.position ).normalize();
  94. vecTemp1.copy( vecTemp0 ).reflect( yAxis );
  95. material.uniforms[ 'fresnelCoe' ].value = ( vecTemp0.dot( vecTemp1 ) + 1. ) / 2.; // TODO: Also need to use glsl viewPosition and viewNormal per pixel.
  96. reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
  97. cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
  98. rotationMatrix.extractRotation( scope.matrixWorld );
  99. normal.set( 0, 0, 1 );
  100. normal.applyMatrix4( rotationMatrix );
  101. view.subVectors( reflectorWorldPosition, cameraWorldPosition ); // Avoid rendering when reflector is facing away
  102. if ( view.dot( normal ) > 0 ) return;
  103. view.reflect( normal ).negate();
  104. view.add( reflectorWorldPosition );
  105. rotationMatrix.extractRotation( camera.matrixWorld );
  106. lookAtPosition.set( 0, 0, - 1 );
  107. lookAtPosition.applyMatrix4( rotationMatrix );
  108. lookAtPosition.add( cameraWorldPosition );
  109. target.subVectors( reflectorWorldPosition, lookAtPosition );
  110. target.reflect( normal ).negate();
  111. target.add( reflectorWorldPosition );
  112. virtualCamera.position.copy( view );
  113. virtualCamera.up.set( 0, 1, 0 );
  114. virtualCamera.up.applyMatrix4( rotationMatrix );
  115. virtualCamera.up.reflect( normal );
  116. virtualCamera.lookAt( target );
  117. virtualCamera.far = camera.far; // Used in WebGLBackground
  118. virtualCamera.updateMatrixWorld();
  119. virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
  120. material.uniforms[ 'virtualCameraNear' ].value = camera.near;
  121. material.uniforms[ 'virtualCameraFar' ].value = camera.far;
  122. material.uniforms[ 'virtualCameraMatrixWorld' ].value = virtualCamera.matrixWorld;
  123. material.uniforms[ 'virtualCameraProjectionMatrix' ].value = camera.projectionMatrix;
  124. material.uniforms[ 'virtualCameraProjectionMatrixInverse' ].value = camera.projectionMatrixInverse;
  125. material.uniforms[ 'resolution' ].value = scope.resolution; // Update the texture matrix
  126. textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 );
  127. textureMatrix.multiply( virtualCamera.projectionMatrix );
  128. textureMatrix.multiply( virtualCamera.matrixWorldInverse );
  129. textureMatrix.multiply( scope.matrixWorld ); // Render
  130. renderTarget.texture.encoding = renderer.outputEncoding; // scope.visible = false;
  131. const currentRenderTarget = renderer.getRenderTarget();
  132. const currentXrEnabled = renderer.xr.enabled;
  133. const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
  134. const currentClippingPlanes = renderer.clippingPlanes;
  135. renderer.xr.enabled = false; // Avoid camera modification
  136. renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
  137. renderer.clippingPlanes = globalPlanes;
  138. renderer.setRenderTarget( renderTarget );
  139. renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
  140. if ( renderer.autoClear === false ) renderer.clear();
  141. renderer.render( scene, virtualCamera );
  142. renderer.xr.enabled = currentXrEnabled;
  143. renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
  144. renderer.clippingPlanes = currentClippingPlanes;
  145. renderer.setRenderTarget( currentRenderTarget ); // Restore viewport
  146. const viewport = camera.viewport;
  147. if ( viewport !== undefined ) {
  148. renderer.state.viewport( viewport );
  149. } // scope.visible = true;
  150. };
  151. this.getRenderTarget = function () {
  152. return renderTarget;
  153. };
  154. }
  155. }
  156. ReflectorForSSRPass.prototype.isReflectorForSSRPass = true;
  157. ReflectorForSSRPass.ReflectorShader = {
  158. defines: {
  159. DISTANCE_ATTENUATION: true,
  160. FRESNEL: true
  161. },
  162. uniforms: {
  163. color: {
  164. value: null
  165. },
  166. tDiffuse: {
  167. value: null
  168. },
  169. tDepth: {
  170. value: null
  171. },
  172. textureMatrix: {
  173. value: new THREE.Matrix4()
  174. },
  175. maxDistance: {
  176. value: 180
  177. },
  178. opacity: {
  179. value: 0.5
  180. },
  181. fresnelCoe: {
  182. value: null
  183. },
  184. virtualCameraNear: {
  185. value: null
  186. },
  187. virtualCameraFar: {
  188. value: null
  189. },
  190. virtualCameraProjectionMatrix: {
  191. value: new THREE.Matrix4()
  192. },
  193. virtualCameraMatrixWorld: {
  194. value: new THREE.Matrix4()
  195. },
  196. virtualCameraProjectionMatrixInverse: {
  197. value: new THREE.Matrix4()
  198. },
  199. resolution: {
  200. value: new THREE.Vector2()
  201. }
  202. },
  203. vertexShader:
  204. /* glsl */
  205. `
  206. uniform mat4 textureMatrix;
  207. varying vec4 vUv;
  208. void main() {
  209. vUv = textureMatrix * vec4( position, 1.0 );
  210. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  211. }`,
  212. fragmentShader:
  213. /* glsl */
  214. `
  215. uniform vec3 color;
  216. uniform sampler2D tDiffuse;
  217. uniform sampler2D tDepth;
  218. uniform float maxDistance;
  219. uniform float opacity;
  220. uniform float fresnelCoe;
  221. uniform float virtualCameraNear;
  222. uniform float virtualCameraFar;
  223. uniform mat4 virtualCameraProjectionMatrix;
  224. uniform mat4 virtualCameraProjectionMatrixInverse;
  225. uniform mat4 virtualCameraMatrixWorld;
  226. uniform vec2 resolution;
  227. varying vec4 vUv;
  228. #include <packing>
  229. float blendOverlay( float base, float blend ) {
  230. return( base < 0.5 ? ( 2.0 * base * blend ) : ( 1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );
  231. }
  232. vec3 blendOverlay( vec3 base, vec3 blend ) {
  233. return vec3( blendOverlay( base.r, blend.r ), blendOverlay( base.g, blend.g ), blendOverlay( base.b, blend.b ) );
  234. }
  235. float getDepth( const in vec2 uv ) {
  236. return texture2D( tDepth, uv ).x;
  237. }
  238. float getViewZ( const in float depth ) {
  239. return perspectiveDepthToViewZ( depth, virtualCameraNear, virtualCameraFar );
  240. }
  241. vec3 getViewPosition( const in vec2 uv, const in float depth/*clip space*/, const in float clipW ) {
  242. vec4 clipPosition = vec4( ( vec3( uv, depth ) - 0.5 ) * 2.0, 1.0 );//ndc
  243. clipPosition *= clipW; //clip
  244. return ( virtualCameraProjectionMatrixInverse * clipPosition ).xyz;//view
  245. }
  246. void main() {
  247. vec4 base = texture2DProj( tDiffuse, vUv );
  248. #ifdef useDepthTexture
  249. vec2 uv=(gl_FragCoord.xy-.5)/resolution.xy;
  250. uv.x=1.-uv.x;
  251. float depth = texture2DProj( tDepth, vUv ).r;
  252. float viewZ = getViewZ( depth );
  253. float clipW = virtualCameraProjectionMatrix[2][3] * viewZ+virtualCameraProjectionMatrix[3][3];
  254. vec3 viewPosition=getViewPosition( uv, depth, clipW );
  255. vec3 worldPosition=(virtualCameraMatrixWorld*vec4(viewPosition,1)).xyz;
  256. if(worldPosition.y>maxDistance) discard;
  257. float op=opacity;
  258. #ifdef DISTANCE_ATTENUATION
  259. float ratio=1.-(worldPosition.y/maxDistance);
  260. float attenuation=ratio*ratio;
  261. op=opacity*attenuation;
  262. #endif
  263. #ifdef FRESNEL
  264. op*=fresnelCoe;
  265. #endif
  266. gl_FragColor = vec4( blendOverlay( base.rgb, color ), op );
  267. #else
  268. gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
  269. #endif
  270. }
  271. `
  272. };
  273. THREE.ReflectorForSSRPass = ReflectorForSSRPass;
  274. } )();