JSFiddle - React, Tailwind, and code Playground

by Bartosz Zieliński

HTML

<canvas id="c3d" width="100" height="100"></canvas>

JavaScript

"use strict";
const PRECISION = "highp";
const SAMPLER_PRECISION = "mediump";
const COORD_PRECISION = "mediump";
const canvas = document.getElementById("c3d");
const gl = canvas.getContext("webgl");
if (!gl.getExtension("OES_texture_float")) {
    throw new Error("float textures not supported");
}
gl.getExtension("OES_texture_float_linear",false);

const program = gl.createProgram();
function addShader(type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    gl.attachShader(program, shader);
}
addShader(gl.VERTEX_SHADER, `
    attribute vec2 vertex;
attribute vec2 _texCoord;
varying ${COORD_PRECISION} vec2 texCoord;
varying vec2 localTexCoord;
uniform vec2 tileSize;
uniform vec2 offset;
uniform vec2 texSize;
void main() {
    localTexCoord = _texCoord;
    texCoord = (localTexCoord * tileSize + offset) / texSize;
    gl_Position = vec4(vertex * 2.0 - 1.0, 0.0, 1.0);
}
`);
addShader(gl.FRAGMENT_SHADER, `
    precision ${PRECISION} float;
uniform ${SAMPLER_PRECISION} sampler2D texture;
uniform float size;
uniform float amount;
varying ${COORD_PRECISION} vec2 texCoord;
uniform vec2 texSize;
varying vec2 localTexCoord;
void main() {
    vec4 color = vec4(1.0,0.0,0.0,1.0);
    float dist = distance(texCoord, vec2(0.5, 0.5));
    color.rgb *= smoothstep(0.8, size * 0.799, dist * (amount + size));
    gl_FragColor = color;
}
`);
gl.linkProgram(program);
gl.useProgram(program);

function createAttrib(name, data) {
    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
    const loc = gl.getAttribLocation(program, name);
    gl.enableVertexAttribArray(loc);
    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
}
createAttrib("vertex", new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));
createAttrib("_texCoord", new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]));

var uniformLocation17 =...