ReflectorForSSRPass.js 10 KB

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