ReflectorForSSRPass.js 10 KB

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