ShaderPass.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import {
  2. ShaderMaterial,
  3. UniformsUtils
  4. } from 'three';
  5. import { Pass, FullScreenQuad } from './Pass.js';
  6. /**
  7. * This pass can be used to create a post processing effect
  8. * with a raw GLSL shader object. Useful for implementing custom
  9. * effects.
  10. *
  11. * ```js
  12. * const fxaaPass = new ShaderPass( FXAAShader );
  13. * composer.addPass( fxaaPass );
  14. * ```
  15. *
  16. * @augments Pass
  17. * @three_import import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
  18. */
  19. class ShaderPass extends Pass {
  20. /**
  21. * Constructs a new shader pass.
  22. *
  23. * @param {Object|ShaderMaterial} [shader] - A shader object holding vertex and fragment shader as well as
  24. * defines and uniforms. It's also valid to pass a custom shader material.
  25. * @param {string} [textureID='tDiffuse'] - The name of the texture uniform that should sample
  26. * the read buffer.
  27. */
  28. constructor( shader, textureID = 'tDiffuse' ) {
  29. super();
  30. /**
  31. * The name of the texture uniform that should sample the read buffer.
  32. *
  33. * @type {string}
  34. * @default 'tDiffuse'
  35. */
  36. this.textureID = textureID;
  37. /**
  38. * The pass uniforms.
  39. *
  40. * @type {?Object}
  41. */
  42. this.uniforms = null;
  43. /**
  44. * The pass material.
  45. *
  46. * @type {?ShaderMaterial}
  47. */
  48. this.material = null;
  49. if ( shader instanceof ShaderMaterial ) {
  50. this.uniforms = shader.uniforms;
  51. this.material = shader;
  52. } else if ( shader ) {
  53. this.uniforms = UniformsUtils.clone( shader.uniforms );
  54. this.material = new ShaderMaterial( {
  55. name: ( shader.name !== undefined ) ? shader.name : 'unspecified',
  56. defines: Object.assign( {}, shader.defines ),
  57. uniforms: this.uniforms,
  58. vertexShader: shader.vertexShader,
  59. fragmentShader: shader.fragmentShader
  60. } );
  61. }
  62. // internals
  63. this._fsQuad = new FullScreenQuad( this.material );
  64. }
  65. /**
  66. * Performs the shader pass.
  67. *
  68. * @param {WebGLRenderer} renderer - The renderer.
  69. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  70. * destination for the pass.
  71. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  72. * previous pass from this buffer.
  73. * @param {number} deltaTime - The delta time in seconds.
  74. * @param {boolean} maskActive - Whether masking is active or not.
  75. */
  76. render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
  77. if ( this.uniforms[ this.textureID ] ) {
  78. this.uniforms[ this.textureID ].value = readBuffer.texture;
  79. }
  80. this._fsQuad.material = this.material;
  81. if ( this.renderToScreen ) {
  82. renderer.setRenderTarget( null );
  83. this._fsQuad.render( renderer );
  84. } else {
  85. renderer.setRenderTarget( writeBuffer );
  86. // TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
  87. if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
  88. this._fsQuad.render( renderer );
  89. }
  90. }
  91. /**
  92. * Frees the GPU-related resources allocated by this instance. Call this
  93. * method whenever the pass is no longer used in your app.
  94. */
  95. dispose() {
  96. this.material.dispose();
  97. this._fsQuad.dispose();
  98. }
  99. }
  100. export { ShaderPass };