SAOPass.js 13 KB

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