FilmNode.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { TempNode } from 'three/webgpu';
  2. import { rand, Fn, fract, time, uv, clamp, mix, vec4, nodeProxy } from 'three/tsl';
  3. /**
  4. * Post processing node for creating a film grain effect.
  5. *
  6. * @augments TempNode
  7. * @three_import import { film } from 'three/addons/tsl/display/FilmNode.js';
  8. */
  9. class FilmNode extends TempNode {
  10. static get type() {
  11. return 'FilmNode';
  12. }
  13. /**
  14. * Constructs a new film node.
  15. *
  16. * @param {Node} inputNode - The node that represents the input of the effect.
  17. * @param {?Node<float>} [intensityNode=null] - A node that represents the effect's intensity.
  18. * @param {?Node<vec2>} [uvNode=null] - A node that allows to pass custom (e.g. animated) uv data.
  19. */
  20. constructor( inputNode, intensityNode = null, uvNode = null ) {
  21. super( 'vec4' );
  22. /**
  23. * The node that represents the input of the effect.
  24. *
  25. * @type {Node}
  26. */
  27. this.inputNode = inputNode;
  28. /**
  29. * A node that represents the effect's intensity.
  30. *
  31. * @type {?Node<float>}
  32. * @default null
  33. */
  34. this.intensityNode = intensityNode;
  35. /**
  36. * A node that allows to pass custom (e.g. animated) uv data.
  37. *
  38. * @type {?Node<vec2>}
  39. * @default null
  40. */
  41. this.uvNode = uvNode;
  42. }
  43. /**
  44. * This method is used to setup the effect's TSL code.
  45. *
  46. * @param {NodeBuilder} builder - The current node builder.
  47. * @return {ShaderCallNodeInternal}
  48. */
  49. setup( /* builder */ ) {
  50. const uvNode = this.uvNode || uv();
  51. const film = Fn( () => {
  52. const base = this.inputNode.rgb;
  53. const noise = rand( fract( uvNode.add( time ) ) );
  54. let color = base.add( base.mul( clamp( noise.add( 0.1 ), 0, 1 ) ) );
  55. if ( this.intensityNode !== null ) {
  56. color = mix( base, color, this.intensityNode );
  57. }
  58. return vec4( color, this.inputNode.a );
  59. } );
  60. const outputNode = film();
  61. return outputNode;
  62. }
  63. }
  64. export default FilmNode;
  65. /**
  66. * TSL function for creating a film node for post processing.
  67. *
  68. * @tsl
  69. * @function
  70. * @param {Node<vec4>} inputNode - The node that represents the input of the effect.
  71. * @param {?Node<float>} [intensityNode=null] - A node that represents the effect's intensity.
  72. * @param {?Node<vec2>} [uvNode=null] - A node that allows to pass custom (e.g. animated) uv data.
  73. * @returns {FilmNode}
  74. */
  75. export const film = /*@__PURE__*/ nodeProxy( FilmNode );