SSAARenderPass.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. import {
  2. AdditiveBlending,
  3. Color,
  4. HalfFloatType,
  5. ShaderMaterial,
  6. UniformsUtils,
  7. WebGLRenderTarget
  8. } from 'three';
  9. import { Pass, FullScreenQuad } from './Pass.js';
  10. import { CopyShader } from '../shaders/CopyShader.js';
  11. /**
  12. * Supersample Anti-Aliasing Render Pass.
  13. *
  14. * This manual approach to SSAA re-renders the scene ones for each sample with camera jitter and accumulates the results.
  15. *
  16. * ```js
  17. * const ssaaRenderPass = new SSAARenderPass( scene, camera );
  18. * ssaaRenderPass.sampleLevel = 3;
  19. * composer.addPass( ssaaRenderPass );
  20. * ```
  21. *
  22. * @augments Pass
  23. * @three_import import { SSAARenderPass } from 'three/addons/postprocessing/SSAARenderPass.js';
  24. */
  25. class SSAARenderPass extends Pass {
  26. /**
  27. * Constructs a new SSAA render pass.
  28. *
  29. * @param {Scene} scene - The scene to render.
  30. * @param {Camera} camera - The camera.
  31. * @param {?(number|Color|string)} [clearColor=0x000000] - The clear color of the render pass.
  32. * @param {?number} [clearAlpha=0] - The clear alpha of the render pass.
  33. */
  34. constructor( scene, camera, clearColor = 0x000000, clearAlpha = 0 ) {
  35. super();
  36. /**
  37. * The scene to render.
  38. *
  39. * @type {Scene}
  40. */
  41. this.scene = scene;
  42. /**
  43. * The camera.
  44. *
  45. * @type {Camera}
  46. */
  47. this.camera = camera;
  48. /**
  49. * The sample level. Specified as n, where the number of
  50. * samples is 2^n, so sampleLevel = 4, is 2^4 samples, 16.
  51. *
  52. * @type {number}
  53. * @default 4
  54. */
  55. this.sampleLevel = 4;
  56. /**
  57. * Whether the pass should be unbiased or not. This property has the most
  58. * visible effect when rendering to a RGBA8 buffer because it mitigates
  59. * rounding errors. By default RGBA16F is used.
  60. *
  61. * @type {boolean}
  62. * @default true
  63. */
  64. this.unbiased = true;
  65. /**
  66. * Whether to use a stencil buffer or not. This property can't
  67. * be changed after the first render.
  68. *
  69. * @type {boolean}
  70. * @default false
  71. */
  72. this.stencilBuffer = false;
  73. /**
  74. * The clear color of the render pass.
  75. *
  76. * @type {?(number|Color|string)}
  77. * @default 0x000000
  78. */
  79. this.clearColor = clearColor;
  80. /**
  81. * The clear alpha of the render pass.
  82. *
  83. * @type {?number}
  84. * @default 0
  85. */
  86. this.clearAlpha = clearAlpha;
  87. // internals
  88. this._sampleRenderTarget = null;
  89. this._oldClearColor = new Color();
  90. this._copyUniforms = UniformsUtils.clone( CopyShader.uniforms );
  91. this._copyMaterial = new ShaderMaterial( {
  92. uniforms: this._copyUniforms,
  93. vertexShader: CopyShader.vertexShader,
  94. fragmentShader: CopyShader.fragmentShader,
  95. transparent: true,
  96. depthTest: false,
  97. depthWrite: false,
  98. premultipliedAlpha: true,
  99. blending: AdditiveBlending
  100. } );
  101. this._fsQuad = new FullScreenQuad( this._copyMaterial );
  102. }
  103. /**
  104. * Frees the GPU-related resources allocated by this instance. Call this
  105. * method whenever the pass is no longer used in your app.
  106. */
  107. dispose() {
  108. if ( this._sampleRenderTarget ) {
  109. this._sampleRenderTarget.dispose();
  110. this._sampleRenderTarget = null;
  111. }
  112. this._copyMaterial.dispose();
  113. this._fsQuad.dispose();
  114. }
  115. /**
  116. * Sets the size of the pass.
  117. *
  118. * @param {number} width - The width to set.
  119. * @param {number} height - The width to set.
  120. */
  121. setSize( width, height ) {
  122. if ( this._sampleRenderTarget ) this._sampleRenderTarget.setSize( width, height );
  123. }
  124. /**
  125. * Performs the SSAA render pass.
  126. *
  127. * @param {WebGLRenderer} renderer - The renderer.
  128. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  129. * destination for the pass.
  130. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  131. * previous pass from this buffer.
  132. * @param {number} deltaTime - The delta time in seconds.
  133. * @param {boolean} maskActive - Whether masking is active or not.
  134. */
  135. render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive */ ) {
  136. if ( ! this._sampleRenderTarget ) {
  137. this._sampleRenderTarget = new WebGLRenderTarget( readBuffer.width, readBuffer.height, { type: HalfFloatType, stencilBuffer: this.stencilBuffer } );
  138. this._sampleRenderTarget.texture.name = 'SSAARenderPass.sample';
  139. }
  140. const jitterOffsets = _JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];
  141. const autoClear = renderer.autoClear;
  142. renderer.autoClear = false;
  143. renderer.getClearColor( this._oldClearColor );
  144. const oldClearAlpha = renderer.getClearAlpha();
  145. const baseSampleWeight = 1.0 / jitterOffsets.length;
  146. const roundingRange = 1 / 32;
  147. this._copyUniforms[ 'tDiffuse' ].value = this._sampleRenderTarget.texture;
  148. const viewOffset = {
  149. fullWidth: readBuffer.width,
  150. fullHeight: readBuffer.height,
  151. offsetX: 0,
  152. offsetY: 0,
  153. width: readBuffer.width,
  154. height: readBuffer.height
  155. };
  156. const originalViewOffset = Object.assign( {}, this.camera.view );
  157. if ( originalViewOffset.enabled ) Object.assign( viewOffset, originalViewOffset );
  158. // render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
  159. for ( let i = 0; i < jitterOffsets.length; i ++ ) {
  160. const jitterOffset = jitterOffsets[ i ];
  161. if ( this.camera.setViewOffset ) {
  162. this.camera.setViewOffset(
  163. viewOffset.fullWidth, viewOffset.fullHeight,
  164. viewOffset.offsetX + jitterOffset[ 0 ] * 0.0625, viewOffset.offsetY + jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
  165. viewOffset.width, viewOffset.height
  166. );
  167. }
  168. let sampleWeight = baseSampleWeight;
  169. if ( this.unbiased ) {
  170. // the theory is that equal weights for each sample lead to an accumulation of rounding errors.
  171. // The following equation varies the sampleWeight per sample so that it is uniformly distributed
  172. // across a range of values whose rounding errors cancel each other out.
  173. const uniformCenteredDistribution = ( - 0.5 + ( i + 0.5 ) / jitterOffsets.length );
  174. sampleWeight += roundingRange * uniformCenteredDistribution;
  175. }
  176. this._copyUniforms[ 'opacity' ].value = sampleWeight;
  177. renderer.setClearColor( this.clearColor, this.clearAlpha );
  178. renderer.setRenderTarget( this._sampleRenderTarget );
  179. renderer.clear();
  180. renderer.render( this.scene, this.camera );
  181. renderer.setRenderTarget( this.renderToScreen ? null : writeBuffer );
  182. if ( i === 0 ) {
  183. renderer.setClearColor( 0x000000, 0.0 );
  184. renderer.clear();
  185. }
  186. this._fsQuad.render( renderer );
  187. }
  188. if ( this.camera.setViewOffset && originalViewOffset.enabled ) {
  189. this.camera.setViewOffset(
  190. originalViewOffset.fullWidth, originalViewOffset.fullHeight,
  191. originalViewOffset.offsetX, originalViewOffset.offsetY,
  192. originalViewOffset.width, originalViewOffset.height
  193. );
  194. } else if ( this.camera.clearViewOffset ) {
  195. this.camera.clearViewOffset();
  196. }
  197. renderer.autoClear = autoClear;
  198. renderer.setClearColor( this._oldClearColor, oldClearAlpha );
  199. }
  200. }
  201. // These jitter vectors are specified in integers because it is easier.
  202. // I am assuming a [-8,8) integer grid, but it needs to be mapped onto [-0.5,0.5)
  203. // before being used, thus these integers need to be scaled by 1/16.
  204. //
  205. // Sample patterns reference: https://msdn.microsoft.com/en-us/library/windows/desktop/ff476218%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
  206. const _JitterVectors = [
  207. [
  208. [ 0, 0 ]
  209. ],
  210. [
  211. [ 4, 4 ], [ - 4, - 4 ]
  212. ],
  213. [
  214. [ - 2, - 6 ], [ 6, - 2 ], [ - 6, 2 ], [ 2, 6 ]
  215. ],
  216. [
  217. [ 1, - 3 ], [ - 1, 3 ], [ 5, 1 ], [ - 3, - 5 ],
  218. [ - 5, 5 ], [ - 7, - 1 ], [ 3, 7 ], [ 7, - 7 ]
  219. ],
  220. [
  221. [ 1, 1 ], [ - 1, - 3 ], [ - 3, 2 ], [ 4, - 1 ],
  222. [ - 5, - 2 ], [ 2, 5 ], [ 5, 3 ], [ 3, - 5 ],
  223. [ - 2, 6 ], [ 0, - 7 ], [ - 4, - 6 ], [ - 6, 4 ],
  224. [ - 8, 0 ], [ 7, - 4 ], [ 6, 7 ], [ - 7, - 8 ]
  225. ],
  226. [
  227. [ - 4, - 7 ], [ - 7, - 5 ], [ - 3, - 5 ], [ - 5, - 4 ],
  228. [ - 1, - 4 ], [ - 2, - 2 ], [ - 6, - 1 ], [ - 4, 0 ],
  229. [ - 7, 1 ], [ - 1, 2 ], [ - 6, 3 ], [ - 3, 3 ],
  230. [ - 7, 6 ], [ - 3, 6 ], [ - 5, 7 ], [ - 1, 7 ],
  231. [ 5, - 7 ], [ 1, - 6 ], [ 6, - 5 ], [ 4, - 4 ],
  232. [ 2, - 3 ], [ 7, - 2 ], [ 1, - 1 ], [ 4, - 1 ],
  233. [ 2, 1 ], [ 6, 2 ], [ 0, 4 ], [ 4, 4 ],
  234. [ 2, 5 ], [ 7, 5 ], [ 5, 6 ], [ 3, 7 ]
  235. ]
  236. ];
  237. export { SSAARenderPass };