LUTPass.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. import { ShaderPass } from './ShaderPass.js';
  2. const LUTShader = {
  3. name: 'LUTShader',
  4. uniforms: {
  5. lut: { value: null },
  6. lutSize: { value: 0 },
  7. tDiffuse: { value: null },
  8. intensity: { value: 1.0 },
  9. },
  10. vertexShader: /* glsl */`
  11. varying vec2 vUv;
  12. void main() {
  13. vUv = uv;
  14. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  15. }
  16. `,
  17. fragmentShader: /* glsl */`
  18. uniform float lutSize;
  19. uniform sampler3D lut;
  20. varying vec2 vUv;
  21. uniform float intensity;
  22. uniform sampler2D tDiffuse;
  23. void main() {
  24. vec4 val = texture2D( tDiffuse, vUv );
  25. vec4 lutVal;
  26. // pull the sample in by half a pixel so the sample begins
  27. // at the center of the edge pixels.
  28. float pixelWidth = 1.0 / lutSize;
  29. float halfPixelWidth = 0.5 / lutSize;
  30. vec3 uvw = vec3( halfPixelWidth ) + val.rgb * ( 1.0 - pixelWidth );
  31. lutVal = vec4( texture( lut, uvw ).rgb, val.a );
  32. gl_FragColor = vec4( mix( val, lutVal, intensity ) );
  33. }
  34. `,
  35. };
  36. /**
  37. * Pass for color grading via lookup tables.
  38. *
  39. * ```js
  40. * const lutPass = new LUTPass( { lut: lut.texture3D } );
  41. * composer.addPass( lutPass );
  42. * ```
  43. *
  44. * @augments ShaderPass
  45. * @three_import import { LUTPass } from 'three/addons/postprocessing/LUTPass.js';
  46. */
  47. class LUTPass extends ShaderPass {
  48. /**
  49. * Constructs a LUT pass.
  50. *
  51. * @param {{lut:Data3DTexture,intensity:number}} [options={}] - The pass options.
  52. */
  53. constructor( options = {} ) {
  54. super( LUTShader );
  55. /**
  56. * The LUT as a 3D texture.
  57. *
  58. * @type {?Data3DTexture}
  59. * @default null
  60. */
  61. this.lut = options.lut || null;
  62. /**
  63. * The intensity.
  64. *
  65. * @type {?number}
  66. * @default 1
  67. */
  68. this.intensity = 'intensity' in options ? options.intensity : 1;
  69. }
  70. set lut( v ) {
  71. const material = this.material;
  72. if ( v !== this.lut ) {
  73. material.uniforms.lut.value = null;
  74. if ( v ) {
  75. material.uniforms.lutSize.value = v.image.width;
  76. material.uniforms.lut.value = v;
  77. }
  78. }
  79. }
  80. get lut() {
  81. return this.material.uniforms.lut.value;
  82. }
  83. set intensity( v ) {
  84. this.material.uniforms.intensity.value = v;
  85. }
  86. get intensity() {
  87. return this.material.uniforms.intensity.value;
  88. }
  89. }
  90. export { LUTPass };