title: How can I modify this WebGL fragment shader to increase brightness of highlights as well as reduce
body: <p>I am currently using this fragment shader in WebGL to apply highlights/shadows adjustments to photo textures.</p>
  
  <p>The shader itself was pulled directly from the excellent <a href="https://github.com/BradLarson/GPUImage" rel="nofollow noreferrer">GPUImage</a> library for iOS.</p>
  
  <pre><code>uniform sampler2D inputImageTexture;
      varying highp vec2 textureCoordinate;
  
      uniform lowp float shadows;
      uniform lowp float highlights;
  
      const mediump vec3 luminanceWeighting = vec3(0.3, 0.3, 0.3);
  
      void main()
      {
          lowp vec4 source = texture2D(inputImageTexture, textureCoordinate);
          mediump float luminance = dot(source.rgb, luminanceWeighting);
  
          mediump float shadow = clamp((pow(luminance, 1.0/(shadows+1.0)) + (-0.76)*pow(luminance, 2.0/(shadows+1.0))) - luminance, 0.0, 1.0);
          mediump float highlight = clamp((1.0 - (pow(1.0-luminance, 1.0/(2.0-highlights)) + (-0.8)*pow(1.0-luminance, 2.0/(2.0-highlights)))) - luminance, -1.0, 0.0);
          lowp vec3 result = vec3(0.0, 0.0, 0.0) + ((luminance + shadow + highlight) - 0.0) * ((source.rgb - vec3(0.0, 0.0, 0.0))/(luminance - 0.0));
  
          gl_FragColor = vec4(result.rgb, source.a);
      }
  </code></pre>
  
  <p>This shader as it stands, will only reduce highlights on a scale of <code>0.0 - 1.0</code>.  However I would like it to also brighten the highlights on a scale of <code>1.0-2.0</code>.</p>
  
  <p>With the aim of having a complete filter that reduces the images highlights when the highlights uniform is less than <code>1.0</code> and increases the intensity of the highlights when it is above <code>1.0</code>.  The same goes for the darkness shadows uniform</p>
  
  <p>Highlights:</p>
  
  <pre><code>0.0(duller) ---- 1.0 (default - original pixel values) ----- 2.0 (brighter)
  </code></pre>
  
  <p>I have tried simply changing the clamp on the highlights variable to <code>0.0,2.0</code>, and although this does indeed increase the brightness of the highlights when the uniform is above <code>1.0</code> it also seriously messes up the colors.</p>
  
  <p>My understanding of image processing and constructing fragment shaders is extremely weak at best as you my be able to tell.</p>
  
  <p>I'm just hoping someone can point me in the right direction.</p>
  
  <p>EDIT:</p>
  
  <p>Here are some example screenshots:-</p>
  
  <ol>
  <li>The current filter with highlights set to <code>1.00</code> (basically the source image)</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/rRZe6.jpg" alt="enter image description here"></p>
  
  <ol start="2">
  <li>The current filter with highlights set to <code>0.00</code> as you can see the highlights get flattened/removed.</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/bE02w.jpg" alt="enter image description here"></p>
  
  <ol start="3">
  <li>And finally here is what happens when I change the <code>clamp</code> in the fragment shader to allow values above <code>1.00</code> and set the highlights value to <code>2.00</code></li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/oJ4mM.jpg" alt="enter image description here"></p>
  
  <p>I simply wish to be able to boost the highlights, making them brighter/more defined.  i.e. the opposite of setting the value to <code>0.00</code></p>