SSAAPassNode.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. import { AdditiveBlending, Color, Vector2, RendererUtils, PassNode, QuadMesh, NodeMaterial } from 'three/webgpu';
  2. import { nodeObject, uniform, mrt, texture, getTextureIndex } from 'three/tsl';
  3. const _size = /*@__PURE__*/ new Vector2();
  4. let _rendererState;
  5. /**
  6. * A special render pass node that renders the scene with SSAA (Supersampling Anti-Aliasing).
  7. * This manual SSAA approach re-renders the scene ones for each sample with camera jitter and accumulates the results.
  8. *
  9. * This node produces a high-quality anti-aliased output but is also extremely expensive because of
  10. * its brute-force approach of re-rendering the entire scene multiple times.
  11. *
  12. * Reference: {@link https://en.wikipedia.org/wiki/Supersampling}
  13. *
  14. * @augments PassNode
  15. * @three_import import { ssaaPass } from 'three/addons/tsl/display/SSAAPassNode.js';
  16. */
  17. class SSAAPassNode extends PassNode {
  18. static get type() {
  19. return 'SSAAPassNode';
  20. }
  21. /**
  22. * Constructs a new SSAA pass node.
  23. *
  24. * @param {Scene} scene - The scene to render.
  25. * @param {Camera} camera - The camera to render the scene with.
  26. */
  27. constructor( scene, camera ) {
  28. super( PassNode.COLOR, scene, camera );
  29. /**
  30. * This flag can be used for type testing.
  31. *
  32. * @type {boolean}
  33. * @readonly
  34. * @default true
  35. */
  36. this.isSSAAPassNode = true;
  37. /**
  38. * The sample level specified as n, where the number of samples is 2^n,
  39. * so sampleLevel = 4, is 2^4 samples, 16.
  40. *
  41. * @type {number}
  42. * @default 4
  43. */
  44. this.sampleLevel = 4;
  45. /**
  46. * Whether rounding errors should be mitigated or not.
  47. *
  48. * @type {boolean}
  49. * @default true
  50. */
  51. this.unbiased = true;
  52. /**
  53. * The clear color of the pass.
  54. *
  55. * @type {Color}
  56. * @default 0x000000
  57. */
  58. this.clearColor = new Color( 0x000000 );
  59. /**
  60. * The clear alpha of the pass.
  61. *
  62. * @type {number}
  63. * @default 0
  64. */
  65. this.clearAlpha = 0;
  66. /**
  67. * A uniform node representing the sample weight.
  68. *
  69. * @type {UniformNode<float>}
  70. * @default 1
  71. */
  72. this.sampleWeight = uniform( 1 );
  73. /**
  74. * Reference to the internal render target that holds the current sample.
  75. *
  76. * @private
  77. * @type {?RenderTarget}
  78. * @default null
  79. */
  80. this._sampleRenderTarget = null;
  81. /**
  82. * Reference to the internal quad mesh.
  83. *
  84. * @private
  85. * @type {QuadMesh}
  86. */
  87. this._quadMesh = new QuadMesh();
  88. }
  89. /**
  90. * This method is used to render the SSAA effect once per frame.
  91. *
  92. * @param {NodeFrame} frame - The current node frame.
  93. */
  94. updateBefore( frame ) {
  95. const { renderer } = frame;
  96. const { scene, camera } = this;
  97. _rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
  98. //
  99. this._pixelRatio = renderer.getPixelRatio();
  100. const size = renderer.getSize( _size );
  101. this.setSize( size.width, size.height );
  102. this._sampleRenderTarget.setSize( this.renderTarget.width, this.renderTarget.height );
  103. //
  104. this._cameraNear.value = camera.near;
  105. this._cameraFar.value = camera.far;
  106. renderer.setMRT( this.getMRT() );
  107. renderer.autoClear = false;
  108. const jitterOffsets = _JitterVectors[ Math.max( 0, Math.min( this.sampleLevel, 5 ) ) ];
  109. const baseSampleWeight = 1.0 / jitterOffsets.length;
  110. const roundingRange = 1 / 32;
  111. const viewOffset = {
  112. fullWidth: this.renderTarget.width,
  113. fullHeight: this.renderTarget.height,
  114. offsetX: 0,
  115. offsetY: 0,
  116. width: this.renderTarget.width,
  117. height: this.renderTarget.height
  118. };
  119. const originalViewOffset = Object.assign( {}, camera.view );
  120. if ( originalViewOffset.enabled ) Object.assign( viewOffset, originalViewOffset );
  121. // render the scene multiple times, each slightly jitter offset from the last and accumulate the results.
  122. for ( let i = 0; i < jitterOffsets.length; i ++ ) {
  123. const jitterOffset = jitterOffsets[ i ];
  124. if ( camera.setViewOffset ) {
  125. camera.setViewOffset(
  126. viewOffset.fullWidth, viewOffset.fullHeight,
  127. viewOffset.offsetX + jitterOffset[ 0 ] * 0.0625, viewOffset.offsetY + jitterOffset[ 1 ] * 0.0625, // 0.0625 = 1 / 16
  128. viewOffset.width, viewOffset.height
  129. );
  130. }
  131. this.sampleWeight.value = baseSampleWeight;
  132. if ( this.unbiased ) {
  133. // the theory is that equal weights for each sample lead to an accumulation of rounding errors.
  134. // The following equation varies the sampleWeight per sample so that it is uniformly distributed
  135. // across a range of values whose rounding errors cancel each other out.
  136. const uniformCenteredDistribution = ( - 0.5 + ( i + 0.5 ) / jitterOffsets.length );
  137. this.sampleWeight.value += roundingRange * uniformCenteredDistribution;
  138. }
  139. renderer.setClearColor( this.clearColor, this.clearAlpha );
  140. renderer.setRenderTarget( this._sampleRenderTarget );
  141. renderer.clear();
  142. renderer.render( scene, camera );
  143. // accumulation
  144. renderer.setRenderTarget( this.renderTarget );
  145. if ( i === 0 ) {
  146. renderer.setClearColor( 0x000000, 0.0 );
  147. renderer.clear();
  148. }
  149. this._quadMesh.render( renderer );
  150. }
  151. renderer.copyTextureToTexture( this._sampleRenderTarget.depthTexture, this.renderTarget.depthTexture );
  152. // restore
  153. if ( camera.setViewOffset && originalViewOffset.enabled ) {
  154. camera.setViewOffset(
  155. originalViewOffset.fullWidth, originalViewOffset.fullHeight,
  156. originalViewOffset.offsetX, originalViewOffset.offsetY,
  157. originalViewOffset.width, originalViewOffset.height
  158. );
  159. } else if ( camera.clearViewOffset ) {
  160. camera.clearViewOffset();
  161. }
  162. //
  163. RendererUtils.restoreRendererState( renderer, _rendererState );
  164. }
  165. /**
  166. * This method is used to setup the effect's MRT configuration and quad mesh.
  167. *
  168. * @param {NodeBuilder} builder - The current node builder.
  169. * @return {PassTextureNode}
  170. */
  171. setup( builder ) {
  172. if ( this._sampleRenderTarget === null ) {
  173. this._sampleRenderTarget = this.renderTarget.clone();
  174. }
  175. let sampleTexture;
  176. const passMRT = this.getMRT();
  177. if ( passMRT !== null ) {
  178. const outputs = {};
  179. for ( const name in passMRT.outputNodes ) {
  180. const index = getTextureIndex( this._sampleRenderTarget.textures, name );
  181. if ( index >= 0 ) {
  182. outputs[ name ] = texture( this._sampleRenderTarget.textures[ index ] ).mul( this.sampleWeight );
  183. }
  184. }
  185. sampleTexture = mrt( outputs );
  186. } else {
  187. sampleTexture = texture( this._sampleRenderTarget.texture ).mul( this.sampleWeight );
  188. }
  189. this._quadMesh.material = new NodeMaterial();
  190. this._quadMesh.material.fragmentNode = sampleTexture;
  191. this._quadMesh.material.transparent = true;
  192. this._quadMesh.material.depthTest = false;
  193. this._quadMesh.material.depthWrite = false;
  194. this._quadMesh.material.premultipliedAlpha = true;
  195. this._quadMesh.material.blending = AdditiveBlending;
  196. this._quadMesh.material.name = 'SSAA';
  197. return super.setup( builder );
  198. }
  199. /**
  200. * Frees internal resources. This method should be called
  201. * when the pass is no longer required.
  202. */
  203. dispose() {
  204. super.dispose();
  205. if ( this._sampleRenderTarget !== null ) {
  206. this._sampleRenderTarget.dispose();
  207. }
  208. }
  209. }
  210. export default SSAAPassNode;
  211. // These jitter vectors are specified in integers because it is easier.
  212. // I am assuming a [-8,8) integer grid, but it needs to be mapped onto [-0.5,0.5)
  213. // before being used, thus these integers need to be scaled by 1/16.
  214. //
  215. // Sample patterns reference: https://msdn.microsoft.com/en-us/library/windows/desktop/ff476218%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396
  216. const _JitterVectors = [
  217. [
  218. [ 0, 0 ]
  219. ],
  220. [
  221. [ 4, 4 ], [ - 4, - 4 ]
  222. ],
  223. [
  224. [ - 2, - 6 ], [ 6, - 2 ], [ - 6, 2 ], [ 2, 6 ]
  225. ],
  226. [
  227. [ 1, - 3 ], [ - 1, 3 ], [ 5, 1 ], [ - 3, - 5 ],
  228. [ - 5, 5 ], [ - 7, - 1 ], [ 3, 7 ], [ 7, - 7 ]
  229. ],
  230. [
  231. [ 1, 1 ], [ - 1, - 3 ], [ - 3, 2 ], [ 4, - 1 ],
  232. [ - 5, - 2 ], [ 2, 5 ], [ 5, 3 ], [ 3, - 5 ],
  233. [ - 2, 6 ], [ 0, - 7 ], [ - 4, - 6 ], [ - 6, 4 ],
  234. [ - 8, 0 ], [ 7, - 4 ], [ 6, 7 ], [ - 7, - 8 ]
  235. ],
  236. [
  237. [ - 4, - 7 ], [ - 7, - 5 ], [ - 3, - 5 ], [ - 5, - 4 ],
  238. [ - 1, - 4 ], [ - 2, - 2 ], [ - 6, - 1 ], [ - 4, 0 ],
  239. [ - 7, 1 ], [ - 1, 2 ], [ - 6, 3 ], [ - 3, 3 ],
  240. [ - 7, 6 ], [ - 3, 6 ], [ - 5, 7 ], [ - 1, 7 ],
  241. [ 5, - 7 ], [ 1, - 6 ], [ 6, - 5 ], [ 4, - 4 ],
  242. [ 2, - 3 ], [ 7, - 2 ], [ 1, - 1 ], [ 4, - 1 ],
  243. [ 2, 1 ], [ 6, 2 ], [ 0, 4 ], [ 4, 4 ],
  244. [ 2, 5 ], [ 7, 5 ], [ 5, 6 ], [ 3, 7 ]
  245. ]
  246. ];
  247. /**
  248. * TSL function for creating a SSAA pass node for Supersampling Anti-Aliasing.
  249. *
  250. * @tsl
  251. * @function
  252. * @param {Scene} scene - The scene to render.
  253. * @param {Camera} camera - The camera to render the scene with.
  254. * @returns {SSAAPassNode}
  255. */
  256. export const ssaaPass = ( scene, camera ) => nodeObject( new SSAAPassNode( scene, camera ) );