stripe-gradient-animation/src/MiniGL.js

import Attribute from './Attribute.js';
import Material from './Material.js';
import Mesh from './Mesh.js';
import PlaneGeometry from './PlaneGeometry.js';
import Uniform from './Uniform.js';

export default class MiniGL {

    /**
     * Class reference.
     *
     * @type {MiniGL}
     */
    _class = MiniGL;

    /**
     * @type {HTMLCanvasElement}
     * @private
     */
    _canvas;

    /**
     * @type {WebGLRenderingContext}
     * @private
     */
    _context;

    /**
     * @type {object}
     */
    commonUniforms = {};

    /**
     * @type {array}
     */
    meshes = [];

    /**
     * @param {HTMLCanvasElement} canvas
     * @param {null|Number} width
     * @param {null|Number} height
     */
    constructor(canvas, width, height) {
        this.setCanvas(canvas);

        const matrix = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];

        this.commonUniforms = {
            projectionMatrix: new Uniform(this, 'mat4', matrix),
            modelViewMatrix: new Uniform(this, 'mat4', matrix),
            resolution: new Uniform(this, 'vec2', [1, 1]),
            aspectRatio: new Uniform(this, 'float', 1)
        };

        this.setSize(width, height);
    }

    /**
     * Sets the `_canvas` and `_context` properties.
     *
     * @param {HTMLCanvasElement} canvas
     */
    setCanvas(canvas) {
        this._canvas = canvas;
        this._context = canvas.getContext('webgl', {
            antialias: true
        });
    }

    /**
     * @return {HTMLCanvasElement}
     */
    getCanvas() {
        return this._canvas;
    }

    /**
     * @return {WebGLRenderingContext}
     */
    getContext() {
        return this._context;
    }

    /**
     * Set the canvas and viewport size.
     *
     * @param {Number} width
     * @param {Number} height
     */
    setSize(width = 640, height = 480) {
        this.getCanvas().width = width;
        this.getCanvas().height = height;
        this.getContext().viewport(0, 0, width, height);
        this.commonUniforms.resolution.value = [width, height];
        this.commonUniforms.aspectRatio.value = width / height;
    }

    setOrthographicCamera(left = 0, right = 0, top = 0, bottom = -2000, distance = 2000) {
        this.commonUniforms.projectionMatrix.value = [
            2 / this.getCanvas().width,
            0, 0, 0, 0,
            2 / this.getCanvas().height,
            0, 0, 0, 0,
            2 / (bottom - distance),
            0, left, right, top, 1
        ];
    }

    render() {
        this.getContext().clearColor(0, 0, 0, 0);
        this.getContext().clearDepth(1);
        this.meshes.forEach(mesh => {
            mesh.draw();
        });
    }

}