Ytukyg

I was trying to implement a histogram for a image using webgl.
I am able to do it in javascript HTML5 Canvas by taking a array of 255 length and increasing pixel values of each index through out 0-255 and using createLinearGradient to create a histogram.

for(var c = 0; c < 256; c++){

    histogram[c] = 0;

}

var ctx = document.getElementById('canvas').getContext('2d');

var pixels= ctx.getImageData(0, 0, width, height).data;

for (var i = 0, j = 0; i < u8a.length; i++, j = j + 4) {

    histogram[pixels[j]]++; //increasing pixel index for histogram

}

And for implementing the same in WebGL, I am referring this jsfiddle but what I see is the histogram is not smooth and not sorted.

So, I am stuck with 2 things here with WebGL:

-How can we sort the pixel values from 0.0(0) to 1.0(255) in the above mentioned fiddle?

-How to make the histogram smooth in webgl with/without linear gradient?

Code :

precision mediump float;

uniform sampler2D u_histTexture;

uniform vec2 u_resolution;

uniform sampler2D u_maxTexture;

void main() {

    // get the max color constants

    vec4 maxColor = texture2D(u_maxTexture, vec2(0));

    // compute our current UV position

    vec2 uv = gl_FragCoord.xy / u_resolution;

    // Get the history for this color

    // (note: since u_histTexture is 256x1 uv.y is irrelevant

   vec4 hist = texture2D(u_histTexture, uv);

   // scale by maxColor so scaled goes from 0 to 1 with 1 = maxColor

   vec4 scaled = hist / maxColor;

   // 1 > maxColor, 0 otherwise

   vec4 color = step(uv.yyyy, scaled);

   float rr = 0.2989 * color.r + 0.5870 * color.g + 0.1140 * color.b;

       gl_FragColor = vec4(rr, rr, rr, 1);

}

Best i can work out is that you dont want to sort, but rather you want to do a black and white histogram (all channels r,g,b combined).

To do that you need just one pass that sums all channels rather than 4 passes as it currently does.

You need to make changes to the following shaders and replace a some render calls in javascript.

Change "hist-vs" to

attribute float pixelId;

uniform vec2 u_resolution;

uniform sampler2D u_texture;

void main() {

  vec2 pixel = vec2(mod(pixelId, u_resolution.x), floor(pixelId / u_resolution.x));

  vec2 uv = (pixel + 0.5) / u_resolution;

  vec4 color = texture2D(u_texture, uv);

  float colorSum = (color.r + color.g + color.b) / 3.0 ; 

  gl_Position = vec4((colorSum * 255.0 + 0.5) / 256.0 * 2.0 - 1.0, 0.5, 0, 1);

  gl_PointSize = 1.0;

}

Change "max-vs" to

precision mediump float;

uniform sampler2D u_texture;

void main() {

  vec4 maxColor = vec4(0);

  for (int i = 0; i < 256; i++) {

    vec2 uv = vec2((float(i) + 0.5) / 256.0, 0.5);

    maxColor = max(maxColor, vec4(texture2D(u_texture, uv).rgb, 1));

  }

  gl_FragColor = maxColor;

}

Change "show-fs" to

precision mediump float;    

uniform sampler2D u_histTexture;

uniform vec2 u_resolution;

uniform sampler2D u_maxTexture;    

void main() {

  vec3 maxColor = texture2D(u_maxTexture, vec2(0)).rgb;

  vec2 uv = gl_FragCoord.xy / u_resolution;

  vec3 hist = texture2D(u_histTexture, uv).rgb;

  gl_FragColor = vec4(step(uv.yyy, hist / maxColor) * uv.x, 1);

}

Changes to javascript

Then in Javascript rather than call the first shader 4 times you need only call it once. Also as the mask uniform is not needed you dont need to pass that to the shader.

The for loop that originally looked like

  for (var channel = 0; channel < 4; ++channel) {

    gl.colorMask(channel === 0, channel === 1, channel === 2, channel === 3);

    twgl.setUniforms(histProgramInfo, {

      u_texture: tex,

      u_colorMult: [

        channel === 0 ? 1 : 0,

        channel === 1 ? 1 : 0,

        channel === 2 ? 1 : 0,

        channel === 3 ? 1 : 0,

      ],

      u_resolution: [img.width, img.height],

    });

    twgl.drawBufferInfo(gl, gl.POINTS, pixelIdBufferInfo);

  }

replace all those lines with

gl.colorMask(true, true, true, false);

twgl.setUniforms(histProgramInfo, {  u_texture: tex,  u_resolution: [img.width, img.height]});

twgl.drawBufferInfo(gl, gl.POINTS, pixelIdBufferInfo);