JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/common/webgl-utils.js"></script>
<script src="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/resources/J3DI.js"></script>
<script src="https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/resources/J3DIMath.js"></script>
<canvas id="example">If you're seeing this your web browser doesn't support the &lt;canvas&gt; element. Ouch!</canvas>
<div id="framerate"></div>

CSS

</style>

<script id="vshader" type="x-shader/x-vertex">
uniform mat4 u_modelViewProjMatrix;
uniform mat4 u_normalMatrix;
uniform vec3 lightDir;

attribute vec3 vNormal;
attribute vec4 vTexCoord;
attribute vec4 vPosition;

varying float v_Dot;
varying vec2 v_texCoord;

void main() {
    gl_Position = u_modelViewProjMatrix * vPosition;
    v_texCoord = vTexCoord.st;
    //vec4 transNormal = u_normalMatrix * vec4(vNormal, 1);
    //v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
}
</script>

<script id="fshader" type="x-shader/x-fragment">
precision mediump float;

uniform sampler2D sampler2d;

varying float v_Dot;
varying vec2 v_texCoord;

void main() {
    vec2 texCoord = vec2(v_texCoord.s, 1.0 - v_texCoord.t);
    vec4 color = texture2D(sampler2d, texCoord);
    color += vec4(0.1, 0.1, 0.1, 1);
    gl_FragColor = vec4(color.xyz, color.a);
}
</script>

<style>

JavaScript

$(document).ready(function() {
    function init() {
        // Initialize
        var gl = initWebGL(
        // The id of the Canvas Element
        "example",
        // The ids of the vertex and fragment shaders
        "vshader", "fshader",
        // The vertex attribute names used by the shaders.
        // The order they appear here corresponds to their index
        // used later.
        //["vNormal", "vColor", "vPosition"],
        ["vColor", "vPosition"],
        // The clear color and depth values
        [0, 0, 0.5, 1], 10000);
        if (!gl) {
            return;
        }
        // Set some uniform variables for the shaders
        gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
        gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
        // Enable texturing
        gl.enable(gl.TEXTURE_2D);
        // Create a box. On return 'gl' contains a 'box' property with
        // the BufferObjects containing the arrays for vertices,
        // normals, texture coords, and indices.
        //gl.box = makeBox(gl);
        initSprites();
        gl.box = updateSprites(gl);
        // Load an image to use. Returns a WebGLTexture object
        spiritTexture = loadImageTexture(gl, "https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/sdk/demos/webkit/resources/spirit.jpg");
        // Create some matrices to use later and save their locations in the shaders
        gl.mvMatrix = new J3DIMatrix4();
        gl.u_normalMatrixLoc = gl.getUniformLocation(gl.program, "u_normalMatrix");
        gl.normalMatrix = new J3DIMatrix4();
        gl.u_modelViewProjMatrixLoc = gl.getUniformLocation(gl.program, "u_modelViewProjMatrix");
        gl.mvpMatrix = new J3DIMatrix4();
        // Enable all of the vertex attribute arrays.
        gl.enableVertexAttribArray(0);
        gl.enableVertexAttribArray(1);
        //gl.enableVertexAttribArray(2);
        // Set up all the vertex attributes for vertices, normals and...