HueSaturationShader.js 1.5 KB

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