JSFiddle - React, Tailwind, and code Playground

by Michal Vodicka

JavaScript

function Engine(canvas) {
    this.canvas = canvas;
    this.gl = null;
}

Engine.prototype.init = function () {
    this.initGL();
    this.initShaders(shaders);
    this.initProgram(programs);
    this.initWebGL();
}

Engine.prototype.initGL = function () {

    function fallback() {
        // todo
        // no webgl...
    }

    try {
        this.gl = this.canvas.getContext("webgl") || this.canvas.getContext("experimental-webgl");
    } catch (e) {
        fallback();
        return;
    }
    if (!this.gl) {
        fallback();
        return;
    }

    this.gl.canvas.width = this.canvas.width;
    this.gl.canvas.height = this.canvas.height;
    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
}

/**
 * shaders[] = {name, type, source}
 * this.shaders[] = {name, shader}
 */
Engine.prototype.initShaders = function (shaders) {
    function compileShader(type, source) {
        var shader = this.gl.createShader(type);
        this.gl.shaderSource(shader, source);
        this.gl.compileShader(shader);
        return shader;
    }

    this.shaders = [];

    for (var i = 0; i < shaders.length; i++) {
        if (shaders[i].type === "v") {
            var type = this.gl.VERTEX_SHADER;
        } else if (shaders[i].type === "f") {
            var type = this.gl.FRAGMENT_SHADER;
        }

        this.shaders[shaders[i].name] = compileShader.call(this, type, shaders[i].source);
    }
}

/**
 * programs[] = {name, shaders[name]}
 * this.programs = {name, program}
 */
Engine.prototype.initPrograms = function (programs) {
    this.programs = [];

    for (var i = 0; i < programs.length; i++) {
        var program = this.gl.createProgram();
        for (var j = 0; j < programs[i].shaders.length; j++) {
            this.gl.attachShader(program, this.shaders[programs[i].shaders[j]]);
        }
        this.gl.linkProgram(program);
        this.programs[programs.name] = program;
    }
}

Engine.prototype.initWebGL = function (program) {
   ...