JSFiddle - React, Tailwind, and code Playground

by Michal Vodicka

HTML

<script src="http://windkiller.g6.cz/webgl-libs/MV.js"></script>
<script src="http://windkiller.g6.cz/webgl-libs/webgl-utils.js"></script>
<script src="http://windkiller.g6.cz/webgl-libs/initShaders.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
    varying vec4 pos;

    attribute vec4 vPosition;

    void main() {
        pos = vPosition;
        gl_Position = vPosition;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;

    varying vec4 pos;

    uniform vec2 middle;
    uniform float r;
    
    void main() {
        float inside = pow(pos.r - middle.r, 2.0) + pow(pos.g - middle.g, 2.0);
        if (inside < pow(r, 2.0)) {
            gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
        } else {
            gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
        }
    }
</script>
<canvas id="gl-canvas" width="512" height="512">Oops ... your browser doesn't support the HTML5 canvas element</canvas>

JavaScript

var gl;
var vertexPositions;


window.onload = function init() {
    var canvas = document.getElementById("gl-canvas");

    gl = WebGLUtils.setupWebGL(canvas);
    if (!gl) {
        alert("WebGL isn't available");
    }


    // The Vertices
    var DEG_TO_RAD = 0.0174532925;
    var TRI_HEIGHT_MOD = 2;
    var r = 0.3;
    var middle = vec2(0.0, 0.0);

    // build simple circle
    function buildCircle(center, r) {
        var points = [];

        points.push(vec2((r * TRI_HEIGHT_MOD * Math.cos(0 * DEG_TO_RAD)) + center[0], (r * TRI_HEIGHT_MOD * Math.sin(0 * DEG_TO_RAD)) + center[1]));
        points.push(vec2((r * TRI_HEIGHT_MOD * Math.cos(120 * DEG_TO_RAD)) + center[0], (r * TRI_HEIGHT_MOD * Math.sin(120 * DEG_TO_RAD) + center[1])));
        points.push(vec2((r * TRI_HEIGHT_MOD * Math.cos(240 * DEG_TO_RAD)) + center[0], (r * TRI_HEIGHT_MOD * Math.sin(240 * DEG_TO_RAD)) + center[1]));

        vertexPositions = points;
    }

    buildCircle(middle, r);

    //
    //  Configure WebGL
    //
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.3, 0.3, 0.3, 1.0);

    //  Load shaders and initialize attribute buffers

    var program = initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);

    // Load the data into the GPU

    var bufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexPositions), gl.STATIC_DRAW);

    // Associate out shader variables with our data buffer

    var vPosition = gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);

    program.middle = gl.getUniformLocation(program, "middle");
    gl.uniform2f(program.middle, middle[0], middle[1]);
    
    program.r = gl.getUniformLocation(program, "r");
    gl.uniform1f(program.r, r);
    
    render();
};


function render() {
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
           ...