JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<canvas></canvas>
<script id="sv" type="x-shader/x-vertex">
    attribute vec4 vPosition;
    void main(void) {
        gl_Position = vPosition;
    }
</script>
<script id="sf" type="x-shader/x-fragment">
    precision mediump float;

    uniform float time;
    uniform vec2 resolution;

    void main(void) {
        vec2 q = gl_FragCoord.xy / resolution.xy;
        vec2 p = -1.0 + 2.0 * q;
        p.x *= resolution.x / resolution.y;

        float v = p.x + cos(time + p.y);
        vec3 col = vec3(0.1 * max(0.0, p.y), 0.1 * max(0.0, p.x), 0.2 * max(0.0, p.x)) / abs(v * 2.0);
        gl_FragColor = vec4(col, 1.0);
    }
</script>

JavaScript

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ut, st = Date.now();

function initShaders(gl, vertexShaderId, fragmentShaderId) {
    var vertexEl = document.querySelector(vertexShaderId);
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexEl.text);
    gl.compileShader(vertexShader);

    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        debugger
    }

    var fragmentEl = document.querySelector(fragmentShaderId);
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentEl.text);
    gl.compileShader(fragmentShader);

    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        debugger
    }

    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    gl.useProgram(program);

    return program;
}

function initGraphics() {
    gl = canvas.getContext('webgl');
    var width = canvas.width;
    var height = canvas.height;
    gl.viewport(0, 0, width, height);

    var program = initShaders(gl, '#sv', '#sf');
    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([-1, 1, -1, -1, 1, -1, 1, 1]),
    gl.STATIC_DRAW);

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

    ut = gl.getUniformLocation(program, 'time');
    var resolution = new Float32Array([canvas.width, canvas.height]);
    gl.uniform2fv(gl.getUniformLocation(program, 'resolution'), resolution);
}

function render() {
    gl.uniform1f(ut, (Date.now() - st) / 1000);
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    requestAnimationFrame(render);
}

initGraphics();
render();