HueSaturationShader.js 1.5 KB

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