SAOPass.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
  1. import {
  2. AddEquation,
  3. Color,
  4. CustomBlending,
  5. DepthTexture,
  6. DstAlphaFactor,
  7. DstColorFactor,
  8. HalfFloatType,
  9. MeshNormalMaterial,
  10. NearestFilter,
  11. NoBlending,
  12. ShaderMaterial,
  13. UniformsUtils,
  14. DepthStencilFormat,
  15. UnsignedInt248Type,
  16. Vector2,
  17. WebGLRenderTarget,
  18. ZeroFactor
  19. } from 'three';
  20. import { Pass, FullScreenQuad } from './Pass.js';
  21. import { SAOShader } from '../shaders/SAOShader.js';
  22. import { BlurShaderUtils, DepthLimitedBlurShader } from '../shaders/DepthLimitedBlurShader.js';
  23. import { CopyShader } from '../shaders/CopyShader.js';
  24. /**
  25. * A SAO implementation inspired from @bhouston previous SAO work.
  26. *
  27. * `SAOPass` provides better quality than {@link SSAOPass} but is also more expensive.
  28. *
  29. * ```js
  30. * const saoPass = new SAOPass( scene, camera );
  31. * composer.addPass( saoPass );
  32. * ```
  33. *
  34. * @augments Pass
  35. * @three_import import { SAOPass } from 'three/addons/postprocessing/SAOPass.js';
  36. */
  37. class SAOPass extends Pass {
  38. /**
  39. * Constructs a new SAO pass.
  40. *
  41. * @param {Scene} scene - The scene to compute the AO for.
  42. * @param {Camera} camera - The camera.
  43. * @param {Vector2} [resolution] - The effect's resolution.
  44. */
  45. constructor( scene, camera, resolution = new Vector2( 256, 256 ) ) {
  46. super();
  47. /**
  48. * The scene to render the AO for.
  49. *
  50. * @type {Scene}
  51. */
  52. this.scene = scene;
  53. /**
  54. * The camera.
  55. *
  56. * @type {Camera}
  57. */
  58. this.camera = camera;
  59. /**
  60. * Overwritten to perform a clear operation by default.
  61. *
  62. * @type {boolean}
  63. * @default true
  64. */
  65. this.clear = true;
  66. /**
  67. * Overwritten to disable the swap.
  68. *
  69. * @type {boolean}
  70. * @default false
  71. */
  72. this.needsSwap = false;
  73. this._originalClearColor = new Color();
  74. this._oldClearColor = new Color();
  75. this._oldClearAlpha = 1;
  76. /**
  77. * The SAO parameter.
  78. *
  79. * @type {Object}
  80. */
  81. this.params = {
  82. output: 0,
  83. saoBias: 0.5,
  84. saoIntensity: 0.18,
  85. saoScale: 1,
  86. saoKernelRadius: 100,
  87. saoMinResolution: 0,
  88. saoBlur: true,
  89. saoBlurRadius: 8,
  90. saoBlurStdDev: 4,
  91. saoBlurDepthCutoff: 0.01
  92. };
  93. /**
  94. * The effect's resolution.
  95. *
  96. * @type {Vector2}
  97. * @default (256,256)
  98. */
  99. this.resolution = new Vector2( resolution.x, resolution.y );
  100. this.saoRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, { type: HalfFloatType } );
  101. this.blurIntermediateRenderTarget = this.saoRenderTarget.clone();
  102. const depthTexture = new DepthTexture();
  103. depthTexture.format = DepthStencilFormat;
  104. depthTexture.type = UnsignedInt248Type;
  105. this.normalRenderTarget = new WebGLRenderTarget( this.resolution.x, this.resolution.y, {
  106. minFilter: NearestFilter,
  107. magFilter: NearestFilter,
  108. type: HalfFloatType,
  109. depthTexture: depthTexture
  110. } );
  111. this.normalMaterial = new MeshNormalMaterial();
  112. this.normalMaterial.blending = NoBlending;
  113. this.saoMaterial = new ShaderMaterial( {
  114. defines: Object.assign( {}, SAOShader.defines ),
  115. fragmentShader: SAOShader.fragmentShader,
  116. vertexShader: SAOShader.vertexShader,
  117. uniforms: UniformsUtils.clone( SAOShader.uniforms )
  118. } );
  119. this.saoMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
  120. this.saoMaterial.uniforms[ 'tDepth' ].value = depthTexture;
  121. this.saoMaterial.uniforms[ 'tNormal' ].value = this.normalRenderTarget.texture;
  122. this.saoMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
  123. this.saoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
  124. this.saoMaterial.uniforms[ 'cameraProjectionMatrix' ].value = this.camera.projectionMatrix;
  125. this.saoMaterial.blending = NoBlending;
  126. this.vBlurMaterial = new ShaderMaterial( {
  127. uniforms: UniformsUtils.clone( DepthLimitedBlurShader.uniforms ),
  128. defines: Object.assign( {}, DepthLimitedBlurShader.defines ),
  129. vertexShader: DepthLimitedBlurShader.vertexShader,
  130. fragmentShader: DepthLimitedBlurShader.fragmentShader
  131. } );
  132. this.vBlurMaterial.defines[ 'DEPTH_PACKING' ] = 0;
  133. this.vBlurMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
  134. this.vBlurMaterial.uniforms[ 'tDiffuse' ].value = this.saoRenderTarget.texture;
  135. this.vBlurMaterial.uniforms[ 'tDepth' ].value = depthTexture;
  136. this.vBlurMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
  137. this.vBlurMaterial.blending = NoBlending;
  138. this.hBlurMaterial = new ShaderMaterial( {
  139. uniforms: UniformsUtils.clone( DepthLimitedBlurShader.uniforms ),
  140. defines: Object.assign( {}, DepthLimitedBlurShader.defines ),
  141. vertexShader: DepthLimitedBlurShader.vertexShader,
  142. fragmentShader: DepthLimitedBlurShader.fragmentShader
  143. } );
  144. this.hBlurMaterial.defines[ 'DEPTH_PACKING' ] = 0;
  145. this.hBlurMaterial.defines[ 'PERSPECTIVE_CAMERA' ] = this.camera.isPerspectiveCamera ? 1 : 0;
  146. this.hBlurMaterial.uniforms[ 'tDiffuse' ].value = this.blurIntermediateRenderTarget.texture;
  147. this.hBlurMaterial.uniforms[ 'tDepth' ].value = depthTexture;
  148. this.hBlurMaterial.uniforms[ 'size' ].value.set( this.resolution.x, this.resolution.y );
  149. this.hBlurMaterial.blending = NoBlending;
  150. this.materialCopy = new ShaderMaterial( {
  151. uniforms: UniformsUtils.clone( CopyShader.uniforms ),
  152. vertexShader: CopyShader.vertexShader,
  153. fragmentShader: CopyShader.fragmentShader,
  154. blending: NoBlending
  155. } );
  156. this.materialCopy.transparent = true;
  157. this.materialCopy.depthTest = false;
  158. this.materialCopy.depthWrite = false;
  159. this.materialCopy.blending = CustomBlending;
  160. this.materialCopy.blendSrc = DstColorFactor;
  161. this.materialCopy.blendDst = ZeroFactor;
  162. this.materialCopy.blendEquation = AddEquation;
  163. this.materialCopy.blendSrcAlpha = DstAlphaFactor;
  164. this.materialCopy.blendDstAlpha = ZeroFactor;
  165. this.materialCopy.blendEquationAlpha = AddEquation;
  166. this.fsQuad = new FullScreenQuad( null );
  167. }
  168. /**
  169. * Performs the SAO pass.
  170. *
  171. * @param {WebGLRenderer} renderer - The renderer.
  172. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  173. * destination for the pass.
  174. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  175. * previous pass from this buffer.
  176. * @param {number} deltaTime - The delta time in seconds.
  177. * @param {boolean} maskActive - Whether masking is active or not.
  178. */
  179. render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
  180. // Rendering readBuffer first when rendering to screen
  181. if ( this.renderToScreen ) {
  182. this.materialCopy.blending = NoBlending;
  183. this.materialCopy.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
  184. this.materialCopy.needsUpdate = true;
  185. this._renderPass( renderer, this.materialCopy, null );
  186. }
  187. renderer.getClearColor( this._oldClearColor );
  188. this._oldClearAlpha = renderer.getClearAlpha();
  189. const oldAutoClear = renderer.autoClear;
  190. renderer.autoClear = false;
  191. this.saoMaterial.uniforms[ 'bias' ].value = this.params.saoBias;
  192. this.saoMaterial.uniforms[ 'intensity' ].value = this.params.saoIntensity;
  193. this.saoMaterial.uniforms[ 'scale' ].value = this.params.saoScale;
  194. this.saoMaterial.uniforms[ 'kernelRadius' ].value = this.params.saoKernelRadius;
  195. this.saoMaterial.uniforms[ 'minResolution' ].value = this.params.saoMinResolution;
  196. this.saoMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
  197. this.saoMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
  198. // this.saoMaterial.uniforms['randomSeed'].value = Math.random();
  199. const depthCutoff = this.params.saoBlurDepthCutoff * ( this.camera.far - this.camera.near );
  200. this.vBlurMaterial.uniforms[ 'depthCutoff' ].value = depthCutoff;
  201. this.hBlurMaterial.uniforms[ 'depthCutoff' ].value = depthCutoff;
  202. this.vBlurMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
  203. this.vBlurMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
  204. this.hBlurMaterial.uniforms[ 'cameraNear' ].value = this.camera.near;
  205. this.hBlurMaterial.uniforms[ 'cameraFar' ].value = this.camera.far;
  206. this.params.saoBlurRadius = Math.floor( this.params.saoBlurRadius );
  207. if ( ( this.prevStdDev !== this.params.saoBlurStdDev ) || ( this.prevNumSamples !== this.params.saoBlurRadius ) ) {
  208. BlurShaderUtils.configure( this.vBlurMaterial, this.params.saoBlurRadius, this.params.saoBlurStdDev, new Vector2( 0, 1 ) );
  209. BlurShaderUtils.configure( this.hBlurMaterial, this.params.saoBlurRadius, this.params.saoBlurStdDev, new Vector2( 1, 0 ) );
  210. this.prevStdDev = this.params.saoBlurStdDev;
  211. this.prevNumSamples = this.params.saoBlurRadius;
  212. }
  213. // render normal and depth
  214. this._renderOverride( renderer, this.normalMaterial, this.normalRenderTarget, 0x7777ff, 1.0 );
  215. // Rendering SAO texture
  216. this._renderPass( renderer, this.saoMaterial, this.saoRenderTarget, 0xffffff, 1.0 );
  217. // Blurring SAO texture
  218. if ( this.params.saoBlur ) {
  219. this._renderPass( renderer, this.vBlurMaterial, this.blurIntermediateRenderTarget, 0xffffff, 1.0 );
  220. this._renderPass( renderer, this.hBlurMaterial, this.saoRenderTarget, 0xffffff, 1.0 );
  221. }
  222. const outputMaterial = this.materialCopy;
  223. // Setting up SAO rendering
  224. if ( this.params.output === SAOPass.OUTPUT.Normal ) {
  225. this.materialCopy.uniforms[ 'tDiffuse' ].value = this.normalRenderTarget.texture;
  226. this.materialCopy.needsUpdate = true;
  227. } else {
  228. this.materialCopy.uniforms[ 'tDiffuse' ].value = this.saoRenderTarget.texture;
  229. this.materialCopy.needsUpdate = true;
  230. }
  231. // Blending depends on output
  232. if ( this.params.output === SAOPass.OUTPUT.Default ) {
  233. outputMaterial.blending = CustomBlending;
  234. } else {
  235. outputMaterial.blending = NoBlending;
  236. }
  237. // Rendering SAOPass result on top of previous pass
  238. this._renderPass( renderer, outputMaterial, this.renderToScreen ? null : readBuffer );
  239. renderer.setClearColor( this._oldClearColor, this._oldClearAlpha );
  240. renderer.autoClear = oldAutoClear;
  241. }
  242. /**
  243. * Sets the size of the pass.
  244. *
  245. * @param {number} width - The width to set.
  246. * @param {number} height - The width to set.
  247. */
  248. setSize( width, height ) {
  249. this.saoRenderTarget.setSize( width, height );
  250. this.blurIntermediateRenderTarget.setSize( width, height );
  251. this.normalRenderTarget.setSize( width, height );
  252. this.saoMaterial.uniforms[ 'size' ].value.set( width, height );
  253. this.saoMaterial.uniforms[ 'cameraInverseProjectionMatrix' ].value.copy( this.camera.projectionMatrixInverse );
  254. this.saoMaterial.uniforms[ 'cameraProjectionMatrix' ].value = this.camera.projectionMatrix;
  255. this.saoMaterial.needsUpdate = true;
  256. this.vBlurMaterial.uniforms[ 'size' ].value.set( width, height );
  257. this.vBlurMaterial.needsUpdate = true;
  258. this.hBlurMaterial.uniforms[ 'size' ].value.set( width, height );
  259. this.hBlurMaterial.needsUpdate = true;
  260. }
  261. /**
  262. * Frees the GPU-related resources allocated by this instance. Call this
  263. * method whenever the pass is no longer used in your app.
  264. */
  265. dispose() {
  266. this.saoRenderTarget.dispose();
  267. this.blurIntermediateRenderTarget.dispose();
  268. this.normalRenderTarget.dispose();
  269. this.normalMaterial.dispose();
  270. this.saoMaterial.dispose();
  271. this.vBlurMaterial.dispose();
  272. this.hBlurMaterial.dispose();
  273. this.materialCopy.dispose();
  274. this.fsQuad.dispose();
  275. }
  276. // internal
  277. _renderPass( renderer, passMaterial, renderTarget, clearColor, clearAlpha ) {
  278. // save original state
  279. renderer.getClearColor( this._originalClearColor );
  280. const originalClearAlpha = renderer.getClearAlpha();
  281. const originalAutoClear = renderer.autoClear;
  282. renderer.setRenderTarget( renderTarget );
  283. // setup pass state
  284. renderer.autoClear = false;
  285. if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {
  286. renderer.setClearColor( clearColor );
  287. renderer.setClearAlpha( clearAlpha || 0.0 );
  288. renderer.clear();
  289. }
  290. this.fsQuad.material = passMaterial;
  291. this.fsQuad.render( renderer );
  292. // restore original state
  293. renderer.autoClear = originalAutoClear;
  294. renderer.setClearColor( this._originalClearColor );
  295. renderer.setClearAlpha( originalClearAlpha );
  296. }
  297. _renderOverride( renderer, overrideMaterial, renderTarget, clearColor, clearAlpha ) {
  298. renderer.getClearColor( this._originalClearColor );
  299. const originalClearAlpha = renderer.getClearAlpha();
  300. const originalAutoClear = renderer.autoClear;
  301. renderer.setRenderTarget( renderTarget );
  302. renderer.autoClear = false;
  303. clearColor = overrideMaterial.clearColor || clearColor;
  304. clearAlpha = overrideMaterial.clearAlpha || clearAlpha;
  305. if ( ( clearColor !== undefined ) && ( clearColor !== null ) ) {
  306. renderer.setClearColor( clearColor );
  307. renderer.setClearAlpha( clearAlpha || 0.0 );
  308. renderer.clear();
  309. }
  310. this.scene.overrideMaterial = overrideMaterial;
  311. renderer.render( this.scene, this.camera );
  312. this.scene.overrideMaterial = null;
  313. // restore original state
  314. renderer.autoClear = originalAutoClear;
  315. renderer.setClearColor( this._originalClearColor );
  316. renderer.setClearAlpha( originalClearAlpha );
  317. }
  318. }
  319. SAOPass.OUTPUT = {
  320. 'Default': 0,
  321. 'SAO': 1,
  322. 'Normal': 2
  323. };
  324. export { SAOPass };