JSFiddle - React, Tailwind, and code Playground

by PiereDome

HTML

<canvas id='canvas'></canvas>
<script id='shader-fs' type='x-shader/x-fragment'>
    precision mediump float;   
    
    void main(void){
        gl_FragColor = vec4(1.0,1.0,1.0,1.0);        
    }
</script>
<script id='shader-vs' type='x-shader/x-vertex'>
    attribute vec3 positionAttr;
    attribute vec4 colorAttr;
    
    void main(void){
        gl_Position = vec4(-0.8,0.8,0.0,1.0);
    }
</script>

JavaScript

function getShader(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.getShaderInfoLog(shader));
        return null;
    }
    return shader;
}

function initShaders(shaderArray) {
    program = gl.createProgram();
    while (shaderArray.length > 0) {
        var shader = getShader(shaderArray.pop());
        gl.attachShader(program, shader);
    }
    gl.linkProgram(program);

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

function setAttributes(program, attribArray, enableArray) {
    gl.useProgram(program);
    while (attribArray.length > 0) {
        attribute = attribArray.pop();
        enabled = enableArray.pop();
        program[attribute] = gl.getAttribLocation(program, attribute);
        if (enabled) {
            gl.enableVertexAttribArray(program[attribute]);
        }
    }
}

function initWebGL(canvasname) {
    var canvas = document.getElementById(canvasname);
    try {
        gl = canvas.getContext('experimental-webgl');
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    }
    catch (e) {
        if (!gl) {
            alert('Could not initialize WebGL');
        }
    }
    initShaders(['shader-fs', 'shader-vs']);
}

initWebGL('canvas');
setAttributes(program, ['positionAttr','colorAttr'],[true,true]);