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 vec4 colorAttr;
    attribute vec3 positionAttr;
    
    uniform mat4 uPMatrix;
    uniform mat4 uMVMatrix;
    uniform mat4 uRMatrix;
    
    varying vec4 vColor;
    
    void main (void){
        gl_Position = uPMatrix * uMVMatrix * uRMatrix * vec4(positionAttr, 1.0);
        vColor = colorAttr;
    }
</script>

JavaScript

var gl, angle;

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;
}

var program;

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);
    program.perspectiveMatrix = gl.getUniformLocation(program, 'uPMatrix');
    program.modelMatrix = gl.getUniformLocation(program, 'uMVMatrix');
    program.rotateMatrix = gl.getUniformLocation(program, 'uRMatrix');
}

var buffer;

function initGeometry() {
    var vertexData = [
        -0.8, -0.8, 1.0,
         0.8, -0.8, 1.0,
         0.8, 0.8, 1.0,
        -0.8, 0.8, 1.0,

        -0.8, -0.8, -1.0,
         0.8, -0.8, -1.0,
         0.8, 0.8, -1.0,
        -0.8, 0.8, -1.0,

        -0.8, -0.8, 1.0,
        -0.8, -0.8, -1.0,
        -0.8, 0.8, -1.0,
        -0.8, 0.8, 1.0,

        0.8, -0.8, 1.0,
        0.8, -0.8, -1.0,
        0.8, 0.8, -1.0,
        0.8, 0.8, 1.0,

   ...