SSRPass.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555
  1. ( function () {
  2. class SSRPass extends THREE.Pass {
  3. constructor( {
  4. renderer,
  5. scene,
  6. camera,
  7. width,
  8. height,
  9. selects,
  10. bouncing = false,
  11. groundReflector
  12. } ) {
  13. super();
  14. this.width = width !== undefined ? width : 512;
  15. this.height = height !== undefined ? height : 512;
  16. this.clear = true;
  17. this.renderer = renderer;
  18. this.scene = scene;
  19. this.camera = camera;
  20. this.groundReflector = groundReflector;
  21. this.opacity = THREE.SSRShader.uniforms.opacity.value;
  22. this.output = 0;
  23. this.maxDistance = THREE.SSRShader.uniforms.maxDistance.value;
  24. this.thickness = THREE.SSRShader.uniforms.thickness.value;
  25. this.tempColor = new THREE.Color();
  26. this._selects = selects;
  27. this.selective = Array.isArray( this._selects );
  28. Object.defineProperty( this, 'selects', {
  29. get() {
  30. return this._selects;
  31. },
  32. set( val ) {
  33. if ( this._selects === val ) return;
  34. this._selects = val;
  35. if ( Array.isArray( val ) ) {
  36. this.selective = true;
  37. this.ssrMaterial.defines.SELECTIVE = true;
  38. this.ssrMaterial.needsUpdate = true;
  39. } else {
  40. this.selective = false;
  41. this.ssrMaterial.defines.SELECTIVE = false;
  42. this.ssrMaterial.needsUpdate = true;
  43. }
  44. }
  45. } );
  46. this._bouncing = bouncing;
  47. Object.defineProperty( this, 'bouncing', {
  48. get() {
  49. return this._bouncing;
  50. },
  51. set( val ) {
  52. if ( this._bouncing === val ) return;
  53. this._bouncing = val;
  54. if ( val ) {
  55. this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.prevRenderTarget.texture;
  56. } else {
  57. this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
  58. }
  59. }
  60. } );
  61. this.blur = true;
  62. this._distanceAttenuation = THREE.SSRShader.defines.DISTANCE_ATTENUATION;
  63. Object.defineProperty( this, 'distanceAttenuation', {
  64. get() {
  65. return this._distanceAttenuation;
  66. },
  67. set( val ) {
  68. if ( this._distanceAttenuation === val ) return;
  69. this._distanceAttenuation = val;
  70. this.ssrMaterial.defines.DISTANCE_ATTENUATION = val;
  71. this.ssrMaterial.needsUpdate = true;
  72. }
  73. } );
  74. this._fresnel = THREE.SSRShader.defines.FRESNEL;
  75. Object.defineProperty( this, 'fresnel', {
  76. get() {
  77. return this._fresnel;
  78. },
  79. set( val ) {
  80. if ( this._fresnel === val ) return;
  81. this._fresnel = val;
  82. this.ssrMaterial.defines.FRESNEL = val;
  83. this.ssrMaterial.needsUpdate = true;
  84. }
  85. } );
  86. this._infiniteThick = THREE.SSRShader.defines.INFINITE_THICK;
  87. Object.defineProperty( this, 'infiniteThick', {
  88. get() {
  89. return this._infiniteThick;
  90. },
  91. set( val ) {
  92. if ( this._infiniteThick === val ) return;
  93. this._infiniteThick = val;
  94. this.ssrMaterial.defines.INFINITE_THICK = val;
  95. this.ssrMaterial.needsUpdate = true;
  96. }
  97. } ); // beauty render target with depth buffer
  98. const depthTexture = new THREE.DepthTexture();
  99. depthTexture.type = THREE.UnsignedShortType;
  100. depthTexture.minFilter = THREE.NearestFilter;
  101. depthTexture.magFilter = THREE.NearestFilter;
  102. this.beautyRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
  103. minFilter: THREE.NearestFilter,
  104. magFilter: THREE.NearestFilter,
  105. format: THREE.RGBAFormat,
  106. depthTexture: depthTexture,
  107. depthBuffer: true
  108. } ); //for bouncing
  109. this.prevRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
  110. minFilter: THREE.NearestFilter,
  111. magFilter: THREE.NearestFilter,
  112. format: THREE.RGBAFormat
  113. } ); // normal render target
  114. this.normalRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
  115. minFilter: THREE.NearestFilter,
  116. magFilter: THREE.NearestFilter,
  117. format: THREE.RGBAFormat,
  118. type: THREE.HalfFloatType
  119. } ); // metalness render target
  120. this.metalnessRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
  121. minFilter: THREE.NearestFilter,
  122. magFilter: THREE.NearestFilter,
  123. format: THREE.RGBAFormat
  124. } ); // ssr render target
  125. this.ssrRenderTarget = new THREE.WebGLRenderTarget( this.width, this.height, {
  126. minFilter: THREE.NearestFilter,
  127. magFilter: THREE.NearestFilter,
  128. format: THREE.RGBAFormat
  129. } );
  130. this.blurRenderTarget = this.ssrRenderTarget.clone();
  131. this.blurRenderTarget2 = this.ssrRenderTarget.clone(); // this.blurRenderTarget3 = this.ssrRenderTarget.clone();
  132. // ssr material
  133. if ( THREE.SSRShader === undefined ) {
  134. console.error( 'THREE.SSRPass: The pass relies on THREE.SSRShader.' );
  135. }
  136. this.ssrMaterial = new THREE.ShaderMaterial( {
  137. defines: Object.assign( {}, THREE.SSRShader.defines, {
  138. MAX_STEP: Math.sqrt( this.width * this.width + this.height * this.height )
  139. } ),
  140. uniforms: THREE.UniformsUtils.clone( THREE.SSRShader.uniforms ),
  141. vertexShader: THREE.SSRShader.vertexShader,
  142. fragmentShader: THREE.SSRShader.fragmentShader,
  143. blending: THREE.NoBlending
  144. } );
  145. this.ssrMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
  146. this.ssrMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
  147. this.ssrMaterial.defines.SELECTIVE = this.selective;
  148. this.ssrMaterial.needsUpdate = true;
  149. this.ssrMaterial.uniforms[ 'tMetalness' ].value = this.metalnessRenderTarget.texture;
  150. this.ssrMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
  151. this.ssrMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
  152. this.ssrMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
  153. this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;
  154. this.ssrMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height );
  155. this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
  156. this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse ); // normal material
  157. this.normalMaterial = new THREE.MeshNormalMaterial();
  158. this.normalMaterial.blending = THREE.NoBlending; // metalnessOn material
  159. this.metalnessOnMaterial = new THREE.MeshBasicMaterial( {
  160. color: 'white'
  161. } ); // metalnessOff material
  162. this.metalnessOffMaterial = new THREE.MeshBasicMaterial( {
  163. color: 'black'
  164. } ); // blur material
  165. this.blurMaterial = new THREE.ShaderMaterial( {
  166. defines: Object.assign( {}, THREE.SSRBlurShader.defines ),
  167. uniforms: THREE.UniformsUtils.clone( THREE.SSRBlurShader.uniforms ),
  168. vertexShader: THREE.SSRBlurShader.vertexShader,
  169. fragmentShader: THREE.SSRBlurShader.fragmentShader
  170. } );
  171. this.blurMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
  172. this.blurMaterial.uniforms[ 'resolution' ].value.set( this.width, this.height ); // blur material 2
  173. this.blurMaterial2 = new THREE.ShaderMaterial( {
  174. defines: Object.assign( {}, THREE.SSRBlurShader.defines ),
  175. uniforms: THREE.UniformsUtils.clone( THREE.SSRBlurShader.uniforms ),
  176. vertexShader: THREE.SSRBlurShader.vertexShader,
  177. fragmentShader: THREE.SSRBlurShader.fragmentShader
  178. } );
  179. this.blurMaterial2.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget.texture;
  180. this.blurMaterial2.uniforms[ 'resolution' ].value.set( this.width, this.height ); // // blur material 3
  181. // this.blurMaterial3 = new THREE.ShaderMaterial({
  182. // defines: Object.assign({}, THREE.SSRBlurShader.defines),
  183. // uniforms: THREE.UniformsUtils.clone(THREE.SSRBlurShader.uniforms),
  184. // vertexShader: THREE.SSRBlurShader.vertexShader,
  185. // fragmentShader: THREE.SSRBlurShader.fragmentShader
  186. // });
  187. // this.blurMaterial3.uniforms['tDiffuse'].value = this.blurRenderTarget2.texture;
  188. // this.blurMaterial3.uniforms['resolution'].value.set(this.width, this.height);
  189. // material for rendering the depth
  190. this.depthRenderMaterial = new THREE.ShaderMaterial( {
  191. defines: Object.assign( {}, THREE.SSRDepthShader.defines ),
  192. uniforms: THREE.UniformsUtils.clone( THREE.SSRDepthShader.uniforms ),
  193. vertexShader: THREE.SSRDepthShader.vertexShader,
  194. fragmentShader: THREE.SSRDepthShader.fragmentShader,
  195. blending: THREE.NoBlending
  196. } );
  197. this.depthRenderMaterial.uniforms[ 'tDepth' ].value = this.beautyRenderTarget.depthTexture;
  198. this.depthRenderMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
  199. this.depthRenderMaterial.uniforms[ 'cameraFar' ].value = this.camera.far; // material for rendering the content of a render target
  200. this.copyMaterial = new THREE.ShaderMaterial( {
  201. uniforms: THREE.UniformsUtils.clone( THREE.CopyShader.uniforms ),
  202. vertexShader: THREE.CopyShader.vertexShader,
  203. fragmentShader: THREE.CopyShader.fragmentShader,
  204. transparent: true,
  205. depthTest: false,
  206. depthWrite: false,
  207. blendSrc: THREE.SrcAlphaFactor,
  208. blendDst: THREE.OneMinusSrcAlphaFactor,
  209. blendEquation: THREE.AddEquation,
  210. blendSrcAlpha: THREE.SrcAlphaFactor,
  211. blendDstAlpha: THREE.OneMinusSrcAlphaFactor,
  212. blendEquationAlpha: THREE.AddEquation // premultipliedAlpha:true,
  213. } );
  214. this.fsQuad = new THREE.FullScreenQuad( null );
  215. this.originalClearColor = new THREE.Color();
  216. }
  217. dispose() {
  218. // dispose render targets
  219. this.beautyRenderTarget.dispose();
  220. this.prevRenderTarget.dispose();
  221. this.normalRenderTarget.dispose();
  222. this.metalnessRenderTarget.dispose();
  223. this.ssrRenderTarget.dispose();
  224. this.blurRenderTarget.dispose();
  225. this.blurRenderTarget2.dispose(); // this.blurRenderTarget3.dispose();
  226. // dispose materials
  227. this.normalMaterial.dispose();
  228. this.metalnessOnMaterial.dispose();
  229. this.metalnessOffMaterial.dispose();
  230. this.blurMaterial.dispose();
  231. this.blurMaterial2.dispose();
  232. this.copyMaterial.dispose();
  233. this.depthRenderMaterial.dispose(); // dipsose full screen quad
  234. this.fsQuad.dispose();
  235. }
  236. render( renderer, writeBuffer
  237. /*, readBuffer, deltaTime, maskActive */
  238. ) {
  239. // render beauty and depth
  240. renderer.setRenderTarget( this.beautyRenderTarget );
  241. renderer.clear();
  242. if ( this.groundReflector ) {
  243. this.groundReflector.visible = false;
  244. this.groundReflector.doRender( this.renderer, this.scene, this.camera );
  245. this.groundReflector.visible = true;
  246. }
  247. renderer.render( this.scene, this.camera );
  248. if ( this.groundReflector ) this.groundReflector.visible = false; // render normals
  249. this.renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0, 0 ); // render metalnesses
  250. if ( this.selective ) {
  251. this.renderMetalness( renderer, this.metalnessOnMaterial, this.metalnessRenderTarget, 0, 0 );
  252. } // render SSR
  253. this.ssrMaterial.uniforms[ 'opacity' ].value = this.opacity;
  254. this.ssrMaterial.uniforms[ 'maxDistance' ].value = this.maxDistance;
  255. this.ssrMaterial.uniforms[ 'thickness' ].value = this.thickness;
  256. this.renderPass( renderer, this.ssrMaterial, this.ssrRenderTarget ); // render blur
  257. if ( this.blur ) {
  258. this.renderPass( renderer, this.blurMaterial, this.blurRenderTarget );
  259. this.renderPass( renderer, this.blurMaterial2, this.blurRenderTarget2 ); // this.renderPass(renderer, this.blurMaterial3, this.blurRenderTarget3);
  260. } // output result to screen
  261. switch ( this.output ) {
  262. case SSRPass.OUTPUT.Default:
  263. if ( this.bouncing ) {
  264. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
  265. this.copyMaterial.blending = THREE.NoBlending;
  266. this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
  267. if ( this.blur ) this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture; else this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
  268. this.copyMaterial.blending = THREE.NormalBlending;
  269. this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
  270. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.prevRenderTarget.texture;
  271. this.copyMaterial.blending = THREE.NoBlending;
  272. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  273. } else {
  274. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
  275. this.copyMaterial.blending = THREE.NoBlending;
  276. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  277. if ( this.blur ) this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture; else this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
  278. this.copyMaterial.blending = THREE.NormalBlending;
  279. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  280. }
  281. break;
  282. case SSRPass.OUTPUT.SSR:
  283. if ( this.blur ) this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture; else this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
  284. this.copyMaterial.blending = THREE.NoBlending;
  285. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  286. if ( this.bouncing ) {
  287. if ( this.blur ) this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.blurRenderTarget2.texture; else this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
  288. this.copyMaterial.blending = THREE.NoBlending;
  289. this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
  290. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.ssrRenderTarget.texture;
  291. this.copyMaterial.blending = THREE.NormalBlending;
  292. this.renderPass( renderer, this.copyMaterial, this.prevRenderTarget );
  293. }
  294. break;
  295. case SSRPass.OUTPUT.Beauty:
  296. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.beautyRenderTarget.texture;
  297. this.copyMaterial.blending = THREE.NoBlending;
  298. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  299. break;
  300. case SSRPass.OUTPUT.Depth:
  301. this.renderPass( renderer, this.depthRenderMaterial, this.renderToScreen ? null : writeBuffer );
  302. break;
  303. case SSRPass.OUTPUT.Normal:
  304. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;
  305. this.copyMaterial.blending = THREE.NoBlending;
  306. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  307. break;
  308. case SSRPass.OUTPUT.Metalness:
  309. this.copyMaterial.uniforms[ 'tDiffuse' ].value = this.metalnessRenderTarget.texture;
  310. this.copyMaterial.blending = THREE.NoBlending;
  311. this.renderPass( renderer, this.copyMaterial, this.renderToScreen ? null : writeBuffer );
  312. break;
  313. default:
  314. console.warn( 'THREE.SSRPass: Unknown output type.' );
  315. }
  316. }
  317. renderPass( renderer, passMaterial, renderTarget, clearColor, clearAlpha ) {
  318. // save original state
  319. this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
  320. const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
  321. const originalAutoClear = renderer.autoClear;
  322. renderer.setRenderTarget( renderTarget ); // setup pass state
  323. renderer.autoClear = false;
  324. if ( clearColor !== undefined && clearColor !== null ) {
  325. renderer.setClearColor( clearColor );
  326. renderer.setClearAlpha( clearAlpha || 0.0 );
  327. renderer.clear();
  328. }
  329. this.fsQuad.material = passMaterial;
  330. this.fsQuad.render( renderer ); // restore original state
  331. renderer.autoClear = originalAutoClear;
  332. renderer.setClearColor( this.originalClearColor );
  333. renderer.setClearAlpha( originalClearAlpha );
  334. }
  335. renderOverride( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {
  336. this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
  337. const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
  338. const originalAutoClear = renderer.autoClear;
  339. renderer.setRenderTarget( renderTarget );
  340. renderer.autoClear = false;
  341. clearColor = overrideMaterial.clearColor || clearColor;
  342. clearAlpha = overrideMaterial.clearAlpha || clearAlpha;
  343. if ( clearColor !== undefined && clearColor !== null ) {
  344. renderer.setClearColor( clearColor );
  345. renderer.setClearAlpha( clearAlpha || 0.0 );
  346. renderer.clear();
  347. }
  348. this.scene.overrideMaterial = overrideMaterial;
  349. renderer.render( this.scene, this.camera );
  350. this.scene.overrideMaterial = null; // restore original state
  351. renderer.autoClear = originalAutoClear;
  352. renderer.setClearColor( this.originalClearColor );
  353. renderer.setClearAlpha( originalClearAlpha );
  354. }
  355. renderMetalness( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {
  356. this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
  357. const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
  358. const originalAutoClear = renderer.autoClear;
  359. renderer.setRenderTarget( renderTarget );
  360. renderer.autoClear = false;
  361. clearColor = overrideMaterial.clearColor || clearColor;
  362. clearAlpha = overrideMaterial.clearAlpha || clearAlpha;
  363. if ( clearColor !== undefined && clearColor !== null ) {
  364. renderer.setClearColor( clearColor );
  365. renderer.setClearAlpha( clearAlpha || 0.0 );
  366. renderer.clear();
  367. }
  368. this.scene.traverseVisible( child => {
  369. child._SSRPassBackupMaterial = child.material;
  370. if ( this._selects.includes( child ) ) {
  371. child.material = this.metalnessOnMaterial;
  372. } else {
  373. child.material = this.metalnessOffMaterial;
  374. }
  375. } );
  376. renderer.render( this.scene, this.camera );
  377. this.scene.traverseVisible( child => {
  378. child.material = child._SSRPassBackupMaterial;
  379. } ); // restore original state
  380. renderer.autoClear = originalAutoClear;
  381. renderer.setClearColor( this.originalClearColor );
  382. renderer.setClearAlpha( originalClearAlpha );
  383. }
  384. setSize( width, height ) {
  385. this.width = width;
  386. this.height = height;
  387. this.ssrMaterial.defines.MAX_STEP = Math.sqrt( width * width + height * height );
  388. this.ssrMaterial.needsUpdate = true;
  389. this.beautyRenderTarget.setSize( width, height );
  390. this.prevRenderTarget.setSize( width, height );
  391. this.ssrRenderTarget.setSize( width, height );
  392. this.normalRenderTarget.setSize( width, height );
  393. this.metalnessRenderTarget.setSize( width, height );
  394. this.blurRenderTarget.setSize( width, height );
  395. this.blurRenderTarget2.setSize( width, height ); // this.blurRenderTarget3.setSize(width, height);
  396. this.ssrMaterial.uniforms[ 'resolution' ].value.set( width, height );
  397. this.ssrMaterial.uniforms[ 'cameraProjectionMatrix' ].value.copy( this.camera.projectionMatrix );
  398. this.ssrMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
  399. this.blurMaterial.uniforms[ 'resolution' ].value.set( width, height );
  400. this.blurMaterial2.uniforms[ 'resolution' ].value.set( width, height );
  401. }
  402. }
  403. SSRPass.OUTPUT = {
  404. 'Default': 0,
  405. 'SSR': 1,
  406. 'Beauty': 3,
  407. 'Depth': 4,
  408. 'Normal': 5,
  409. 'Metalness': 7
  410. };
  411. THREE.SSRPass = SSRPass;
  412. } )();