JSFiddle - React, Tailwind, and code Playground

by headchem

HTML

<script id="2d-vertex-shader" type="x-shader/x-vertex">
    attribute vec2 aVertexPosition;

    void main() {
        gl_Position = vec4(aVertexPosition, 0.0, 1.0);
    }
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
    #ifdef GL_ES
    precision highp float;
    #endif

    uniform vec4 uColor;

    void main() {
        gl_FragColor = uColor;
    }
</script>
<canvas id="mycanvas" width="500" height="400"></canvas>

JavaScript

var canvas;
var gl;
var triangleProgram;

window.onload = function () {

    canvas = document.getElementById('mycanvas');

    gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

    //gl.enable(gl.DEPTH_TEST); // to do proper z-index, set this

    // these are the settings for basic overlay transparency
    gl.disable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    // load, compile and attach shaders to triangleProgram
    var vertexShaderHandle = gl.createShader(gl.VERTEX_SHADER);
    var fragmentShaderHandle = gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertexShaderHandle, document.getElementById('2d-vertex-shader').text);
    gl.shaderSource(fragmentShaderHandle, document.getElementById('2d-fragment-shader').text);

    gl.compileShader(vertexShaderHandle);
    gl.compileShader(fragmentShaderHandle);

    triangleProgram = gl.createProgram();
    gl.attachShader(triangleProgram, vertexShaderHandle);
    gl.attachShader(triangleProgram, fragmentShaderHandle);
    gl.linkProgram(triangleProgram);

    gl.useProgram(triangleProgram);

    // set reference to uColor var in triangleProgram
    triangleProgram.uColor = gl.getUniformLocation(triangleProgram, 'uColor');

    // in practice, this would be called 60 fps
    drawFrame();
};

function drawFrame() {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0, 0.0, 0, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);

    // draw these triangles in the correct z-index (so have them sorted by z-index before this point)
    // in practice, there would be hundreds of differently shaped and colored triangles drawn each frame
    drawTriangle([50, 0], [100, 310], [250, 150], getColor('rgba(0,255,0,0.7)'));
    drawTriangle([100, 0], [100, 220], [350, 150], getColor('rgba(0,0,255,0.7)'));
    drawTriangle([0, 0], [50, 180], [300, 50], getColor('rgba(255,0,0,0.7)'));
}

// draws a triangle, where p1,p2,p3 are arrays of...