SSRPass.js 19 KB

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