/* 
This is a modified version of code from webgl2fundamentals.org to test WebGL2 performance.
Read more here: https://demyanov.dev/past-and-future-html-canvas-brief-overview-2d-webgl-and-webgpu
*/

let then = 0;
let app;

const stats = new Stats();
stats.showPanel(1);
document.body.appendChild(stats.dom);

class App {
    gl = null;
    program = null;
    vao = null;
    matrixLocation = null;
    textureLocation = null;
    units = [];
    imagesCount = 12_000;

    constructor() {
        const canvas = document.querySelector("#canvas");
        const gl = canvas.getContext("webgl2");
        this.gl = gl;
        if (!gl) {
            return;
        }

        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
        gl.enable(gl.BLEND);

        const vertexShaderSource = this.getVertexShader();
        const fragmentShaderSource = this.getFragmentShader();

        // Use our boilerplate utils to compile the shaders and link into a program
        const program = webglUtils.createProgramFromSources(gl, [vertexShaderSource, fragmentShaderSource]);
        this.program = program;

        // look up where the vertex data needs to go.
        const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
        const texcoordAttributeLocation = gl.getAttribLocation(program, "a_texcoord");

        // lookup uniforms
        this.matrixLocation = gl.getUniformLocation(program, "u_matrix");
        this.textureLocation = gl.getUniformLocation(program, "u_texture");

        // Create a vertex array object (attribute state)
        this.vao = gl.createVertexArray();

        // and make it the one we're currently working with
        gl.bindVertexArray(this.vao);

        // create the position buffer, make it the current ARRAY_BUFFER
        // and copy in the color values
        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        // Put a unit quad in the buffer
        const positions = [
            0, 0,
            0, 1,
            1, 0,
            1, 0,
            0, 1,
            1, 1,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

        // create the texcoord buffer, make it the current ARRAY_BUFFER
        // and copy in the texcoord values
        const texcoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
        // Put texcoords in the buffer
        const texcoords = [
            0, 0,
            0, 1,
            1, 0,
            1, 0,
            0, 1,
            1, 1,
        ];
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW);

        gl.enableVertexAttribArray(texcoordAttributeLocation);
        gl.vertexAttribPointer(texcoordAttributeLocation, 2, gl.FLOAT, true, 0, 0);

        const textureInfos = [
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_01.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_02.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_03.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_04.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_05.png'),
            this.loadImageAndCreateTextureInfo('https://demyanov.dev/images/articles/tmnt_06.png'),
        ];

        for (let i = 0; i < this.imagesCount; i++) {
            const speedMin = 30;
            const speedMax = 200;
            const speed = Math.random() * (speedMax - speedMin) + speedMin;

            const drawInfo = {
                x: Math.random() * gl.canvas.width,
                y: Math.random() * gl.canvas.height,
                dx: Math.random() > 0.5 ? -1 : 1,
                dy: Math.random() > 0.5 ? -1 : 1,
                textureInfo: textureInfos[Math.random() * textureInfos.length | 0],
            };

            this.units.push(
                new Unit(speed, drawInfo)
            );
        }
    }

    loop(time) {
        const now = time * 0.001;
        const deltaTime = Math.min(0.1, now - then);
        then = now;

        stats.begin();

        const gl = app.gl;

        gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
        app.clearCanvas();

        app.units.forEach(function (unit) {
            unit.update(deltaTime, gl.canvas.width, gl.canvas.height);
            unit.draw(app);
        });


        stats.end();

        requestAnimationFrame(app.loop);
    }

    init() {
        requestAnimationFrame(this.loop);
    }

    clearCanvas() {
        this.gl.clearColor(0, 0, 0, 0);
        this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
    }

    loadImageAndCreateTextureInfo(url) {
        const gl = this.gl;

        const tex = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, tex);
        // Fill the texture with a 1x1 blue pixel.
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
            new Uint8Array([0, 0, 255, 255]));

        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);

        const textureInfo = {
            width: 1,   // we don't know the size until it loads
            height: 1,
            texture: tex,
        };
        const img = new Image();
        img.addEventListener('load', function () {
            textureInfo.width = img.width;
            textureInfo.height = img.height;

            gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture);
            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
            gl.generateMipmap(gl.TEXTURE_2D);
        });
        img.src = url;

        return textureInfo;
    }

    drawImage(tex, texWidth, texHeight, dstX, dstY) {
        const gl = this.gl;

        gl.useProgram(this.program);

        // Setup the attributes for the quad
        gl.bindVertexArray(this.vao);

        const textureUnit = 0;
        // The the shader we're putting the texture on texture unit 0
        gl.uniform1i(this.textureLocation, textureUnit);

        // Bind the texture to texture unit 0
        gl.activeTexture(gl.TEXTURE0 + textureUnit);
        gl.bindTexture(gl.TEXTURE_2D, tex);

        // this matrix will convert from pixels to clip space
        var matrix = m4.orthographic(0, gl.canvas.clientWidth, gl.canvas.clientHeight, 0, -1, 1);

        // translate our quad to dstX, dstY
        matrix = m4.translate(matrix, dstX, dstY, 0);

        // scale our 1 unit quad
        // from 1 unit to texWidth, texHeight units
        matrix = m4.scale(matrix, texWidth, texHeight, 1);

        // Set the matrix.
        gl.uniformMatrix4fv(this.matrixLocation, false, matrix);

        gl.drawArrays(gl.TRIANGLES, 0, 6);
    }

    getVertexShader() {
        return `#version 300 es
        in vec4 a_position;
        in vec2 a_texcoord;
        uniform mat4 u_matrix;
        out vec2 v_texcoord;
        
        void main() {
          gl_Position = u_matrix * a_position;
          v_texcoord = a_texcoord;
        }
        `;
    }

    getFragmentShader() {
        return `#version 300 es
        precision highp float;
        in vec2 v_texcoord;
        uniform sampler2D u_texture;
        out vec4 outColor;
        
        void main() {
           outColor = texture(u_texture, v_texcoord);
        }
        `;
    }
}

window.onload = function () {
    app = new App();
    app.init();
}

class Unit {
    speed = 0;
    drawInfo = null;

    constructor(speed, drawInfo) {
        this.speed = speed;
        this.drawInfo = drawInfo;
    }

    draw(app) {
        app.drawImage(
            this.drawInfo.textureInfo.texture,
            this.drawInfo.textureInfo.width,
            this.drawInfo.textureInfo.height,
            this.drawInfo.x,
            this.drawInfo.y,
        );
    }

    update(deltaTime, width, height) {
        this.drawInfo.x += this.drawInfo.dx * this.speed * deltaTime;
        this.drawInfo.y += this.drawInfo.dy * this.speed * deltaTime;
        if (this.drawInfo.x < 0) {
            this.drawInfo.dx = 1;
        }
        if (this.drawInfo.x >= width) {
            this.drawInfo.dx = -1;
        }
        if (this.drawInfo.y < 0) {
            this.drawInfo.dy = 1;
        }
        if (this.drawInfo.y >= height) {
            this.drawInfo.dy = -1;
        }
    }
}