JSFiddle - React, Tailwind, and code Playground

by Subhasish2015

HTML

<input type="file" id="fileLoader"/>
        <canvas id="tempImg" style="display:none;"></canvas>
        <canvas id="canvas"></canvas>
        
        
        <script id="new-vs" type="not-js">
            attribute vec2 position, texcoord;
            varying vec2 mytexcoord;
            void main() {
              gl_Position = vec4(position.x, position.y, 0.0, 1.0);
              mytexcoord = texcoord;//position.xy * .5 + .5;
            }
            </script>

            <script id="new-fs" type="not-js">
            precision mediump float;
            varying vec2 texcoord;
            uniform sampler2D u_texture;

            void main() {
              vec3 c = texture2D(u_texture, texcoord).rgb;
              float val = c.r * 0.2989 + c.g * 0.5870 + c.b * 0.1140;
              gl_FragColor = vec4(vec3(val), 1.0);
            }
            </script>

            <script id="hist-vs" type="not-js">
            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;
            }
            </script>
            <script id="hist-fs" type="not-js">
            precision mediump float;
            
            void main() {
                gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
            }
            </script>
            <script id="cdf-fs" type="not-js">
            precision mediump float;
            uniform sampler2D u_texture;
            uniform float pixelCount, clipLimit;
            void main() {
                vec2 uv = gl_FragCoord.xy;
                vec4...

JavaScript

var pixelCount = 0;
var ar = {};
var arrays = {
    indices: [0, 1, 2, 2, 1, 3],
    normal: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
    position: {
        numComponents: 2,
        data: [-1, -1, 1, -1, -1, 1, 1, 1]
    },
    texcoord: [0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0]
};
var canvas = document.getElementById("canvas");
canvas.width = window.innerWidth * 0.95;
canvas.height = window.innerHeight * 0.90;
var texture, gl, pixelIds, numIds, quadBufferInfo, newProgramInfo, histProgramInfo, maxProgramInfo, showProgramInfo, showProgramInfo2;

var initGL = function () {
    gl = canvas.getContext("webgl");
    var ext = gl.getExtension("OES_texture_float");
    if (!ext) {
        alert("requires OES_texture_float");
    }
    texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

    newProgramInfo = twgl.createProgramInfo(gl, ["new-vs", "show2-fs"]);
    histProgramInfo = twgl.createProgramInfo(gl, ["hist-vs", "hist-fs"]);
    maxProgramInfo = twgl.createProgramInfo(gl, ["new-vs", "cdf-fs"]);
    showProgramInfo = twgl.createProgramInfo(gl, ["new-vs", "equalize-fs"]);
    showProgramInfo2 = twgl.createProgramInfo(gl, ["new2-vs", "show2-fs"]);
};

var dummyPixelIds = new Float32Array(16384 * 256);
// Just fill a buffer with an incrementing count. If we wanted to make this
// generic we'd re-use this buffer and just make it bigger if we were
// processing a bigger image
for (var i = 0; i < 16384 * 256; ++i) {
    dummyPixelIds[i] = i;
}

var prepareHistogram = function (img) {
    //arrays.texcoord = [0.2, 0.2, 1.0, 0.2, 0.2, 1.0, 1.0, 1.0];
    arrays.position.data = [-1, -1, 1, -1, -1, 1, 1, 1];
    gl.arrays = arrays;
    quadBufferInfo =...