Pasted

'use strict';
window.addEventListener("load",()=>{
    const canvas = document.getElementById('canvas');
    let gl = null;
    try {
        gl = canvas.getContext("webgl");
    }catch(e){}
        
    if(!gl)try {
        gl = canvas.getContext("experimental-webgl");
    }catch(e){}
    
    if(!gl)try {
        gl = canvas.getContext("moz-webgl");
    }catch(e){}
    
    if(!gl)try {
        gl = canvas.getContext("webkit-3d");
    }catch(e){}
    
    if(!gl) {
        throw new Error("Unable to initialize WebGL. Your browser may not support it.");
    }
    
    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, document.getElementById("vertex").text);
    gl.compileShader(vertexShader);
    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
        throw new Error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(vertexShader));
    }
    
    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, document.getElementById("fragment").text);
    gl.compileShader(fragmentShader);
    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
        throw new Error("An error occurred compiling the shaders: " + gl.getShaderInfoLog(fragmentShader));
    }
    
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        throw new Error("Unable to initialize the shader program.");
    }
    gl.useProgram(shaderProgram);
    
    const aVertex = gl.getAttribLocation(shaderProgram, "aVertex");
    gl.enableVertexAttribArray(aVertex);
    
    const aUVCoords = gl.getAttribLocation(shaderProgram, "aUVCoords");
    gl.enableVertexAttribArray(aUVCoords);
    
    const uSampler = gl.getUniformLocation(shaderProgram, "uSampler");
    const uRotate = gl.getUniformLocation(shaderProgram, "uRotate");
    
    const vertexBuffer = gl.createBuffer();
    const vertexData = new Float32Array([
         0.5,  0.5,
        -0.5,  0.5,
         0.5, -0.5,
        -0.5, -0.5
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
    gl.vertexAttribPointer(aVertex, 2, gl.FLOAT, false, 0, 0);
    
    const uvBuffer = gl.createBuffer();
    const uvData = new Float32Array([
        1.0,  0.0,
        0.0,  0.0,
        1.0,  1.0,
        0.0,  1.0
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, uvData, gl.STATIC_DRAW);
    gl.vertexAttribPointer(aUVCoords, 2, gl.FLOAT, false, 0, 0);
                    
    const image = document.getElementById("image");
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.generateMipmap(gl.TEXTURE_2D);
    gl.bindTexture(gl.TEXTURE_2D, null);
    
    gl.uniform1i(uSampler, 0);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
                    
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    
    const repaint = ()=>{
        const t = Date.now() * 0.001;
        gl.clearColor(Math.cos(t), Math.cos(t * 1.1), Math.cos(t * 1.2), 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.uniform2f(uRotate, Math.cos(t), Math.sin(t));
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
        requestAnimationFrame(repaint);
    };
    requestAnimationFrame(repaint);
});