HueSaturationShader.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /**
  2. * @module HueSaturationShader
  3. * @three_import import { HueSaturationShader } from 'three/addons/shaders/HueSaturationShader.js';
  4. */
  5. /**
  6. * Hue and saturation adjustment, {@link https://github.com/evanw/glfx.js}.
  7. *
  8. * hue: -1 to 1 (-1 is 180 degrees in the negative direction, 0 is no change, etc.
  9. * saturation: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
  10. *
  11. * @constant
  12. * @type {ShaderMaterial~Shader}
  13. */
  14. const HueSaturationShader = {
  15. name: 'HueSaturationShader',
  16. uniforms: {
  17. 'tDiffuse': { value: null },
  18. 'hue': { value: 0 },
  19. 'saturation': { value: 0 }
  20. },
  21. vertexShader: /* glsl */`
  22. varying vec2 vUv;
  23. void main() {
  24. vUv = uv;
  25. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  26. }`,
  27. fragmentShader: /* glsl */`
  28. uniform sampler2D tDiffuse;
  29. uniform float hue;
  30. uniform float saturation;
  31. varying vec2 vUv;
  32. void main() {
  33. gl_FragColor = texture2D( tDiffuse, vUv );
  34. // hue
  35. float angle = hue * 3.14159265;
  36. float s = sin(angle), c = cos(angle);
  37. vec3 weights = (vec3(2.0 * c, -sqrt(3.0) * s - c, sqrt(3.0) * s - c) + 1.0) / 3.0;
  38. float len = length(gl_FragColor.rgb);
  39. gl_FragColor.rgb = vec3(
  40. dot(gl_FragColor.rgb, weights.xyz),
  41. dot(gl_FragColor.rgb, weights.zxy),
  42. dot(gl_FragColor.rgb, weights.yzx)
  43. );
  44. // saturation
  45. float average = (gl_FragColor.r + gl_FragColor.g + gl_FragColor.b) / 3.0;
  46. if (saturation > 0.0) {
  47. gl_FragColor.rgb += (average - gl_FragColor.rgb) * (1.0 - 1.0 / (1.001 - saturation));
  48. } else {
  49. gl_FragColor.rgb += (average - gl_FragColor.rgb) * (-saturation);
  50. }
  51. }`
  52. };
  53. export { HueSaturationShader };