Pass.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. import {
  2. BufferGeometry,
  3. Float32BufferAttribute,
  4. OrthographicCamera,
  5. Mesh
  6. } from 'three';
  7. /**
  8. * Abstract base class for all post processing passes.
  9. *
  10. * This module is only relevant for post processing with {@link WebGLRenderer}.
  11. *
  12. * @abstract
  13. * @three_import import { Pass } from 'three/addons/postprocessing/Pass.js';
  14. */
  15. class Pass {
  16. /**
  17. * Constructs a new pass.
  18. */
  19. constructor() {
  20. /**
  21. * This flag can be used for type testing.
  22. *
  23. * @type {boolean}
  24. * @readonly
  25. * @default true
  26. */
  27. this.isPass = true;
  28. /**
  29. * If set to `true`, the pass is processed by the composer.
  30. *
  31. * @type {boolean}
  32. * @default true
  33. */
  34. this.enabled = true;
  35. /**
  36. * If set to `true`, the pass indicates to swap read and write buffer after rendering.
  37. *
  38. * @type {boolean}
  39. * @default true
  40. */
  41. this.needsSwap = true;
  42. /**
  43. * If set to `true`, the pass clears its buffer before rendering
  44. *
  45. * @type {boolean}
  46. * @default false
  47. */
  48. this.clear = false;
  49. /**
  50. * If set to `true`, the result of the pass is rendered to screen. The last pass in the composers
  51. * pass chain gets automatically rendered to screen, no matter how this property is configured.
  52. *
  53. * @type {boolean}
  54. * @default false
  55. */
  56. this.renderToScreen = false;
  57. }
  58. /**
  59. * Sets the size of the pass.
  60. *
  61. * @abstract
  62. * @param {number} width - The width to set.
  63. * @param {number} height - The width to set.
  64. */
  65. setSize( /* width, height */ ) {}
  66. /**
  67. * This method holds the render logic of a pass. It must be implemented in all derived classes.
  68. *
  69. * @abstract
  70. * @param {WebGLRenderer} renderer - The renderer.
  71. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  72. * destination for the pass.
  73. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  74. * previous pass from this buffer.
  75. * @param {number} deltaTime - The delta time in seconds.
  76. * @param {boolean} maskActive - Whether masking is active or not.
  77. */
  78. render( /* renderer, writeBuffer, readBuffer, deltaTime, maskActive */ ) {
  79. console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
  80. }
  81. /**
  82. * Frees the GPU-related resources allocated by this instance. Call this
  83. * method whenever the pass is no longer used in your app.
  84. *
  85. * @abstract
  86. */
  87. dispose() {}
  88. }
  89. // Helper for passes that need to fill the viewport with a single quad.
  90. const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  91. // https://github.com/mrdoob/three.js/pull/21358
  92. class FullscreenTriangleGeometry extends BufferGeometry {
  93. constructor() {
  94. super();
  95. this.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
  96. this.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
  97. }
  98. }
  99. const _geometry = new FullscreenTriangleGeometry();
  100. /**
  101. * This module is a helper for passes which need to render a full
  102. * screen effect which is quite common in context of post processing.
  103. *
  104. * The intended usage is to reuse a single full screen quad for rendering
  105. * subsequent passes by just reassigning the `material` reference.
  106. *
  107. * This module can only be used with {@link WebGLRenderer}.
  108. *
  109. * @augments Mesh
  110. * @three_import import { FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
  111. */
  112. class FullScreenQuad {
  113. /**
  114. * Constructs a new full screen quad.
  115. *
  116. * @param {?Material} material - The material to render te full screen quad with.
  117. */
  118. constructor( material ) {
  119. this._mesh = new Mesh( _geometry, material );
  120. }
  121. /**
  122. * Frees the GPU-related resources allocated by this instance. Call this
  123. * method whenever the instance is no longer used in your app.
  124. */
  125. dispose() {
  126. this._mesh.geometry.dispose();
  127. }
  128. /**
  129. * Renders the full screen quad.
  130. *
  131. * @param {WebGLRenderer} renderer - The renderer.
  132. */
  133. render( renderer ) {
  134. renderer.render( this._mesh, _camera );
  135. }
  136. /**
  137. * The quad's material.
  138. *
  139. * @type {?Material}
  140. */
  141. get material() {
  142. return this._mesh.material;
  143. }
  144. set material( value ) {
  145. this._mesh.material = value;
  146. }
  147. }
  148. export { Pass, FullScreenQuad };