JSFiddle - React, Tailwind, and code Playground

by ryubro

HTML

<script src="https://developer.mozilla.org/samples/webgl/sample2/sylvester.js"></script>
<script src="https://developer.mozilla.org/samples/webgl/sample2/glUtils.js"></script>
<body onload="start()">
    <canvas id="glcanvas" width="200" height="100">Your browser doesn't appear to support the <code>&lt;canvas&gt;</code> element.</canvas>
    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        attribute vec2 aTextureCoord;

        varying highp vec2 vTextureCoord;

        void main(void) {
            gl_Position = vec4(aVertexPosition, 1.0);
            vTextureCoord = aTextureCoord;
        }
    </script>
    <script id="shader-fs" type="x-shader/x-fragment">
        varying highp vec2 vTextureCoord;

        uniform sampler2D uSampler;
        
        uniform highp vec4 uOrigColor;
        uniform highp vec4 uDestColor;

        void main(void) {
            highp vec4 orig = texture2D(uSampler, vTextureCoord);
            highp vec4 dest = orig;
            highp float gap = 0.05; // threshold
            if (orig.r > uOrigColor.r - gap && orig.r < uOrigColor.r + gap
                && orig.r > uOrigColor.g - gap && orig.g < uOrigColor.g + gap 
                && orig.r > uOrigColor.b - gap && orig.b < uOrigColor.b + gap) {
                dest = uDestColor;
            }
            gl_FragColor = dest;
        }
    </script>
    <br/>
    <label>from:</label><input type="color" id="original_color" value="#dd0000" />
    <label>to:</label><input type="color" id="destined_color" value="#dd00dd" />
    <button id="change_button">Change</button>
</body>

JavaScript

function changeColor() {
    console.log('change');
    origColInt = hexToRgb($('#original_color').val());
    origColFloat = rgbIntToFloat(origColInt);

    destColInt = hexToRgb($('#destined_color').val());
    destColFloat = rgbIntToFloat(destColInt);
    
    if (gl && gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        uniformOrigColor = gl.getUniformLocation(shaderProgram, "uOrigColor");
        uniformDestColor = gl.getUniformLocation(shaderProgram, "uDestColor");
        gl.uniform4f(uniformOrigColor, origColFloat[0], origColFloat[1], origColFloat[2], 1.0);
        gl.uniform4f(uniformDestColor, destColFloat[0], destColFloat[1], destColFloat[2], 1.0);
    }
}

// http://stackoverflow.com/a/5624139/1236145
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

function rgbIntToFloat(rgb) {
    rgbFloat = [];
    $.each(rgb, function() {
        rgbFloat.push(this / 255.0);
    });
    return rgbFloat;
}

var gl; // A global variable for the WebGL context

function start() {
    var canvas = document.getElementById("glcanvas");

    // Initialize the GL context
    gl = initWebGL(canvas);

    // Only continue if WebGL is available and working

    if (gl) {
        initShaders();
        initBuffers();
        initTextures();
        //drawScene();
        setInterval(drawScene, 15);
    }
    
    $('#change_button').click(changeColor);
}

function initWebGL(canvas) {
    gl = null;

    try {
        // Try to grab the standard context. If it fails, fallback to experimental.
        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    } catch (e) {}

    // If we don't have a GL context, give up now
    if (!gl) {
        alert("Unable to initialize WebGL. Your browser may not support it.");
        gl = null;
    }

    return...