JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<canvas id='webGL-canvas'></canvas>
<script id='shader-fs' type='x-shader/x-fragment'>
    precision mediump float;
    
    varying vec4 vColor;
    
    void main(void){
        gl_FragColor = vColor;
    }
</script>
<script id='shader-vs' type='x-shader/x-vertex'>
    attribute vec3 positionAttr;
    attribute vec4 colorAttr;
    
    uniform mat4 cameraMat;
    uniform mat4 projectionMat;
    varying vec4 vColor;
    
    void main(void){
        gl_Position =  projectionMat * cameraMat * vec4(positionAttr, 1.0);
        vColor = colorAttr;
    }
</script>

CSS

canvas{
 background: red;   
}

JavaScript

var gl, program, buffer;

function getShader(gl, id) {
    var script = document.getElementById(id);
    if (!script) {
        return null;
    }
    var shader;
    if (script.type == 'x-shader/x-fragment') {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (script.type == 'x-shader/x-vertex') {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }
    gl.shaderSource(shader, script.text);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.shaderInfoLog(shader));
        return null;
    }
    return shader;
}

function initShaders() {
    var fragmentShader = getShader(gl, 'shader-fs');
    var vertexShader = getShader(gl, 'shader-vs');

    program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        alert('Could not Intialize Shaders');
    }

    gl.useProgram(program);

    program.positionAttr = gl.getAttribLocation(program, 'positionAttr');
    gl.enableVertexAttribArray(program.positionAttr);
    program.colorAttr = gl.getAttribLocation(program, 'colorAttr');
    gl.enableVertexAttribArray(program.colorAttr);
}

function initGeometry() {
    var camera = {
        x: 0,
        y: 0,
        z: 2
    };
    var verticesData = [
        -1, -1, 1,
        1, -1, 1,
        1, 1, 1,
        -1, 1, 1,

        -1, -1, -1,
        1, -1, -1,
        1, 1, -1,
        -1, 1, -1,

        -1, 1, -1,
        -1, 1, 1,
        1, 1, 1,
        1, 1, -1,

        -1, -1, -1,
        -1, -1, 1,
        -1, 1, 1,
        -1, 1, -1,

        1, -1, -1,
        1, -1, 1,
        1, 1, 1,
        1, 1, -1,

        1, -1, -1,
        1, -1, 1,
        -1, -1, 1,
        -1, -1, -1
        ];
    var verticesIndex = [
        0, 1, 2, 0, 2, 3,
        4, 5, 6, 4, 6, 7,
        8, 9, 10, 8, 10, 11,
   ...