JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

JavaScript

const PRECISION = "highp";
const SAMPLER_PRECISION = "mediump";
const COORD_PRECISION = "mediump";


var canvas5 = document.createElement("canvas");
canvas5.width = 256;
canvas5.height = 256;
document.body.appendChild(canvas5);
var context5 = canvas5.getContext("webgl",{"premultipliedAlpha":false});
context5.getExtension("OES_texture_float",false);
context5.getExtension("OES_texture_float_linear",false);
context5.getExtension("OES_texture_half_float",false);
context5.getExtension("OES_texture_half_float_linear",false);

const TEX_FORMAT = 0x8D61;//context5.FLOAT;//0x8D61;

function compile(vertexSrc, fragmentSrc) {
    var program0 = context5.createProgram();
    var shader1 = context5.createShader(context5.VERTEX_SHADER);
    context5.shaderSource(shader1,vertexSrc);
    context5.compileShader(shader1);
    context5.getShaderParameter(shader1,context5.COMPILE_STATUS);
    context5.attachShader(program0,shader1);
    var shader2 = context5.createShader(context5.FRAGMENT_SHADER);
    context5.shaderSource(shader2,fragmentSrc);
    context5.compileShader(shader2);
    context5.getShaderParameter(shader2,context5.COMPILE_STATUS);
    context5.attachShader(program0,shader2);
    context5.linkProgram(program0);
    context5.getProgramParameter(program0,context5.LINK_STATUS);
    return program0;
}

function tex() {
    var texture = context5.createTexture();
    context5.bindTexture(context5.TEXTURE_2D,texture);
    context5.texParameteri(context5.TEXTURE_2D,context5.TEXTURE_MAG_FILTER,context5.LINEAR);
    context5.texParameteri(context5.TEXTURE_2D,context5.TEXTURE_MIN_FILTER,context5.LINEAR);
    context5.texParameteri(context5.TEXTURE_2D,context5.TEXTURE_WRAP_S,context5.CLAMP_TO_EDGE);
    context5.texParameteri(context5.TEXTURE_2D,context5.TEXTURE_WRAP_T,context5.CLAMP_TO_EDGE);
    return texture;
}

function attr(program, name, arr) {
    var webGLBuffer13 =...