microgl.js

// Generated by CoffeeScript 2.4.1
(function() {
  var MicroGL, RC, TYPESIZE, TYPESUFFIX;

  RC = WebGLRenderingContext;

  // uniform type suffix
  TYPESUFFIX = {};

  TYPESUFFIX[RC.FLOAT] = '1f';

  TYPESUFFIX[RC.FLOAT_VEC2] = '2fv';

  TYPESUFFIX[RC.FLOAT_VEC3] = '3fv';

  TYPESUFFIX[RC.FLOAT_VEC4] = '4fv';

  TYPESUFFIX[RC.INT] = '1i';

  TYPESUFFIX[RC.INT_VEC2] = '2iv';

  TYPESUFFIX[RC.INT_VEC3] = '3iv';

  TYPESUFFIX[RC.INT_VEC4] = '4iv';

  TYPESUFFIX[RC.BOOL] = '1i';

  TYPESUFFIX[RC.BOOL_VEC2] = '2iv';

  TYPESUFFIX[RC.BOOL_VEC3] = '3iv';

  TYPESUFFIX[RC.BOOL_VEC4] = '4iv';

  TYPESUFFIX[RC.FLOAT_MAT2] = 'Matrix2fv';

  TYPESUFFIX[RC.FLOAT_MAT3] = 'Matrix3fv';

  TYPESUFFIX[RC.FLOAT_MAT4] = 'Matrix4fv';

  TYPESUFFIX[RC.SAMPLER_2D] = 'Sampler2D';

  TYPESUFFIX[RC.SAMPLER_CUBE] = 'SamplerCube';

  // attribute type sizes
  TYPESIZE = {};

  TYPESIZE[RC.FLOAT] = 1;

  TYPESIZE[RC.FLOAT_VEC2] = 2;

  TYPESIZE[RC.FLOAT_VEC3] = 3;

  TYPESIZE[RC.FLOAT_VEC4] = 4;

  TYPESIZE[RC.FLOAT_MAT2] = 4;

  TYPESIZE[RC.FLOAT_MAT3] = 9;

  TYPESIZE[RC.FLOAT_MAT4] = 16;

  MicroGL = class MicroGL {
    constructor(opt) {
      var c;
      c = document.createElement('canvas');
      this.gl = c.getContext('webgl', opt) || c.getContext('experimental-webgl', opt);
      this.enabled = !!this.gl;
      this.uniforms = {};
      this.attributes = {};
      this.textures = {};
      this.cache = {};
    }

    init(elem, width = 256, height = 256) {
      this.width = this.gl.canvas.width = width;
      this.height = this.gl.canvas.height = height;
      if (elem != null) {
        elem.appendChild(this.gl.canvas);
      }
      this.gl.viewport(0, 0, width, height);
      this.gl.clearColor(0, 0, 0, 1);
      this.gl.clearDepth(1);
      this.gl.enable(this.gl.DEPTH_TEST);
      this.gl.depthFunc(this.gl.LEQUAL);
      return this;
    }

    _initShader(type, source) {
      var shader;
      shader = this.gl.createShader(type);
      this.gl.shaderSource(shader, source);
      this.gl.compileShader(shader);
      if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
        return console.log(this.gl.getShaderInfoLog(shader));
      } else {
        return shader;
      }
    }

    makeProgram(vsSource, fsSource) {
      var fShader, program, vShader;
      program = this.gl.createProgram();
      vShader = this._initShader(this.gl.VERTEX_SHADER, vsSource);
      if (!vShader) {
        return;
      }
      fShader = this._initShader(this.gl.FRAGMENT_SHADER, fsSource);
      if (!fShader) {
        return;
      }
      this.gl.attachShader(program, vShader);
      this.gl.attachShader(program, fShader);
      this.gl.linkProgram(program);
      if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) {
        return console.log(this.gl.getProgramInfoLog(program));
      } else {
        return program;
      }
    }

    program(vsSource, fsSource) {
      var attribute, i, j, k, l, len, loc, name, program, ref, ref1, ref2, uniform;
      // param: (vsSource, fsSource) or (program)
      program = fsSource ? this.makeProgram(vsSource, fsSource) : vsSource;
      this.uniforms = {};
      ref = Object.keys(this.attributes);
      for (j = 0, len = ref.length; j < len; j++) {
        name = ref[j];
        this.gl.disableVertexAttribArray(this.attributes[name].location);
      }
      this.attributes = {};
      this._useElementArray = false;
      this.gl.useProgram(program);
      for (i = k = 0, ref1 = this.gl.getProgramParameter(program, this.gl.ACTIVE_UNIFORMS); k < ref1; i = k += 1) {
        uniform = this.gl.getActiveUniform(program, i);
        name = uniform.name;
        this.uniforms[name] = {
          location: this.gl.getUniformLocation(program, name),
          type: uniform.type,
          size: uniform.size, // array length
          name
        };
      }
      for (i = l = 0, ref2 = this.gl.getProgramParameter(program, this.gl.ACTIVE_ATTRIBUTES); l < ref2; i = l += 1) {
        attribute = this.gl.getActiveAttrib(program, i);
        name = attribute.name;
        loc = this.gl.getAttribLocation(program, name);
        this.gl.enableVertexAttribArray(loc);
        this.attributes[name] = {
          location: loc,
          type: attribute.type,
          size: attribute.size,
          name
        };
      }
      return this;
    }

    blend(sourceFactor, destFactor) {
      var dFactor, sFactor;
      sFactor = ('' + sourceFactor).toUpperCase();
      dFactor = ('' + destFactor).toUpperCase();
      if (destFactor) {
        this.gl.enable(this.gl.BLEND);
        this.gl.blendFunc(this.gl[sFactor], this.gl[dFactor]);
      } else {
        switch (sFactor) {
          case 'FALSE':
            this.gl.disable(this.gl.BLEND);
            break;
          case 'TRUE':
            this.gl.enable(this.gl.BLEND);
            break;
          // compositing
          case 'CLEAR':
            this.blend('ZERO', 'ZERO');
            break;
          case 'COPY':
            this.blend('ONE', 'ZERO');
            break;
          case 'DESTINATION':
            this.blend('ZERO', 'ONE');
            break;
          case 'SOURCE-OVER':
            this.blend('ONE', 'ONE_MINUS_SRC_ALPHA');
            break;
          case 'DESTINATION-OVER':
            this.blend('ONE_MINUS_DST_ALPHA', 'ONE');
            break;
          case 'SOURCE-IN':
            this.blend('DST_ALPHA', 'ZERO');
            break;
          case 'DESTINATION-IN':
            this.blend('ZERO', 'SRC_ALPHA');
            break;
          case 'SOURCE-OUT':
            this.blend('ONE_MINUS_DST_ALPHA', 'ZERO');
            break;
          case 'DESTINATION-OUT':
            this.blend('ZERO', 'ONE_MINUS_SRC_ALPHA');
            break;
          case 'SOURCE-ATOP':
            this.blend('DST_ALPHA', 'ONE_MINUS_SRC_ALPHA');
            break;
          case 'DESTINATION-ATOP':
            this.blend('ONE_MINUS_DST_ALPHA', 'SRC_ALPHA');
            break;
          case 'XOR':
            this.blend('ONE_MINUS_DST_ALPHA', 'ONE_MINUS_SRC_ALPHA');
            break;
          case 'LIGHTER':
            this.blend('ONE', 'ONE');
            break;
          // blend
          case 'MULTIPLY':
            this.blend('ZERO', 'SRC_COLOR');
            break;
          case 'SCREEN':
            this.blend('ONE_MINUS_DST_COLOR', 'ONE');
            break;
          case 'EXCLUSION':
            this.blend('ONE_MINUS_DST_COLOR', 'ONE_MINUS_SRC_COLOR');
            break;
          // other
          case 'ADD':
            this.blend('SRC_ALPHA', 'ONE');
            break;
          case 'DEFAULT':
            this.blend('SRC_ALPHA', 'ONE_MINUS_SRC_ALPHA');
            break;
          default:
            console.warn('unsupported blend mode: ' + sourceFactor);
        }
      }
      return this;
    }

    loadImages(paths, callback, failCallback) {
      var error, img, imgs, left, onerror, onload, path;
      if (typeof paths === 'string') {
        paths = [paths];
      }
      left = paths.length;
      error = 0;
      onload = function() {
        return --left || callback(...imgs);
      };
      onerror = function() {
        return error++ || (typeof failCallback === "function" ? failCallback() : void 0);
      };
      return imgs = (function() {
        var j, len, results;
        results = [];
        for (j = 0, len = paths.length; j < len; j++) {
          path = paths[j];
          img = document.createElement('img');
          img.onload = onload;
          img.onerror = onerror;
          img.src = path;
          results.push(img);
        }
        return results;
      })();
    }

    texParameter(tex, param = {}, cube) {
      var filter, ref, ref1, type, wrap;
      type = cube ? this.gl.TEXTURE_CUBE_MAP : this.gl.TEXTURE_2D;
      filter = this.gl[(ref = param.filter) != null ? ref : 'LINEAR'];
      wrap = this.gl[(ref1 = param.wrap) != null ? ref1 : 'CLAMP_TO_EDGE'];
      this.gl.bindTexture(type, tex);
      this.gl.texParameteri(type, this.gl.TEXTURE_MAG_FILTER, filter);
      this.gl.texParameteri(type, this.gl.TEXTURE_MIN_FILTER, filter);
      this.gl.texParameteri(type, this.gl.TEXTURE_WRAP_S, wrap);
      this.gl.texParameteri(type, this.gl.TEXTURE_WRAP_T, wrap);
      this.gl.bindTexture(type, null);
      return this;
    }

    texParameterCube(tex, param) {
      return this.texParameter(tex, param, true);
    }

    _setTexture(img, tex, empty) {
      this.gl.bindTexture(this.gl.TEXTURE_2D, tex);
      this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, true);
      if (empty) {
        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, img.width, img.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
      } else {
        this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, img);
      }
      this.gl.bindTexture(this.gl.TEXTURE_2D, null);
      return this.texParameter(tex);
    }

    _setTextureCube(imgs, tex, empty) {
      var i, img, j, k, len;
      this.gl.bindTexture(this.gl.TEXTURE_CUBE_MAP, tex);
      // POSITIVE_X 34069
      // NEGATIVE_X 34070
      // POSITIVE_Y 34071
      // NEGATIVE_Y 34072
      // POSITIVE_Z 34073
      // NEGATIVE_Z 34074
      if (empty) {
        for (i = j = 0; j < 6; i = ++j) {
          this.gl.texImage2D(this.gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, this.gl.RGBA, imgs.width, imgs.height, 0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
        }
      } else {
        for (i = k = 0, len = imgs.length; k < len; i = ++k) {
          img = imgs[i];
          this.gl.texImage2D(this.gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, img);
        }
      }
      this.gl.bindTexture(this.gl.TEXTURE_CUBE_MAP, null);
      return this.texParameterCube(tex);
    }

    texture(source, tex, callback) {
      if (source instanceof WebGLTexture) {
        return source;
      }
      tex || (tex = this.gl.createTexture());
      if (typeof source === 'string') {
        this.loadImages(source, (img) => {
          this._setTexture(img, tex);
          if (callback) {
            return callback(tex);
          } else if (this._drawArg) {
            this.gl.bindTexture(this.gl.TEXTURE_2D, tex);
            return this.draw(...this._drawArg);
          }
        });
      } else {
        // <img>, <video>, <canvas>, ImageData object, etc.
        this._setTexture(source, tex);
      }
      return tex;
    }

    textureCube(source, tex, callback) {
      if (source instanceof WebGLTexture) {
        return source;
      }
      tex || (tex = this.gl.createTexture());
      // source should be an array-like object
      if (typeof source[0] === 'string') {
        this.loadImages(source, (...imgs) => {
          this._setTextureCube(imgs, tex);
          if (callback) {
            return callback(tex);
          } else if (this._drawArg) {
            this.gl.bindTexture(this.gl.TEXTURE_CUBE_MAP, tex);
            return this.draw(...this._drawArg);
          }
        });
      } else {
        this._setTextureCube(source, tex);
      }
      return tex;
    }

    variable(param, useCache) {
      var base, buffer, j, len, name, obj, ref, uniform, value;
      obj = {};
      ref = Object.keys(param);
      for (j = 0, len = ref.length; j < len; j++) {
        name = ref[j];
        value = param[name];
        if (uniform = this.uniforms[name]) {
          switch (TYPESUFFIX[uniform.type]) {
            case 'Sampler2D':
              if (useCache) {
                value = this.cache[name] = this.texture(value, this.cache[name]);
              } else {
                value = this.texture(value);
              }
              break;
            case 'SamplerCube':
              if (useCache) {
                value = this.cache[name] = this.textureCube(value, this.cache[name]);
              } else {
                value = this.textureCube(value);
              }
          }
          obj[name] = value;
        } else if (this.attributes[name] || (name === 'INDEX')) {
          if (value == null) {
            obj[name] = null;
            continue;
          }
          if (useCache) {
            // useCache でかつ cache があるときは createBuffer しない
            buffer = (base = this.cache)[name] || (base[name] = this.gl.createBuffer());
          } else {
            buffer = this.gl.createBuffer();
          }
          if (name === 'INDEX') {
            this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, buffer);
            this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(value), this.gl.STATIC_DRAW);
          } else {
            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
            this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(value), this.gl.STATIC_DRAW);
          }
          buffer.length = value.length;
          obj[name] = buffer;
        }
      }
      return obj;
    }

    _bindUniform(uniform, value) {
      var suffix;
      suffix = TYPESUFFIX[uniform.type];
      if (~suffix.indexOf('Sampler')) {
        return this.textures[uniform.name] = value;
      } else if (~suffix.indexOf('Matrix')) {
        return this.gl["uniform" + suffix](uniform.location, false, new Float32Array(value));
      } else {
        return this.gl["uniform" + suffix](uniform.location, value);
      }
    }

    _rebindTexture() {
      var j, len, name, ref, texIndex, type, uniform;
      texIndex = 0;
      ref = Object.keys(this.uniforms);
      for (j = 0, len = ref.length; j < len; j++) {
        name = ref[j];
        uniform = this.uniforms[name];
        if (uniform.type === this.gl.SAMPLER_2D) {
          type = this.gl.TEXTURE_2D;
        } else if (uniform.type === this.gl.SAMPLER_CUBE) {
          type = this.gl.TEXTURE_CUBE_MAP;
        } else {
          continue;
        }
        this.gl.activeTexture(this.gl['TEXTURE' + texIndex]);
        this.gl.bindTexture(type, this.textures[name]);
        this.gl.uniform1i(uniform.location, texIndex);
        texIndex++;
      }
      return this;
    }

    _bindAttribute(attribute, value) {
      var size;
      size = TYPESIZE[attribute.type];
      this.gl.bindBuffer(this.gl.ARRAY_BUFFER, value);
      this.gl.vertexAttribPointer(attribute.location, size, this.gl.FLOAT, false, 0, 0);
      return this._numArrays = value.length / size;
    }

    bind(obj) {
      var attribute, j, len, name, ref, uniform, value;
      this._drawArg = void 0;
      ref = Object.keys(obj);
      for (j = 0, len = ref.length; j < len; j++) {
        name = ref[j];
        value = obj[name];
        if (name === 'INDEX') {
          this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, value);
          this._useElementArray = value != null;
          this._numElements = value != null ? value.length : void 0;
        } else if (uniform = this.uniforms[name]) {
          this._bindUniform(uniform, value);
        } else if (attribute = this.attributes[name]) {
          this._bindAttribute(attribute, value);
        }
      }
      return this;
    }

    bindVars(param) {
      return this.bind(this.variable(param, true));
    }

    frame(width = this.width, height = this.height, flags = {}) {
      var fb, rb, tex;
      // flags =
      //   color: true
      //   depth: true
      //   stencil: false
      //   cube: false
      fb = this.gl.createFramebuffer();
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, fb);
      tex = this.gl.createTexture();
      if (flags.cube) {
        this._setTextureCube({width, height}, tex, true);
      } else {
        this._setTexture({width, height}, tex, true);
        this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, tex, 0);
      }
      rb = this.gl.createRenderbuffer();
      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, rb);
      this.gl.renderbufferStorage(this.gl.RENDERBUFFER, this.gl.DEPTH_COMPONENT16, width, height);
      this.gl.framebufferRenderbuffer(this.gl.FRAMEBUFFER, this.gl.DEPTH_ATTACHMENT, this.gl.RENDERBUFFER, rb);
      this.gl.bindRenderbuffer(this.gl.RENDERBUFFER, null);
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
      fb.color = tex;
      return fb;
    }

    frameCube(size = this.width, flags = {}) {
      flags.cube = true;
      return this.frame(size, size, flags);
    }

    draw(type, num) {
      this._rebindTexture();
      if (this._useElementArray) {
        if (num == null) {
          num = this._numElements;
        }
        this.gl.drawElements(this.gl[type || 'TRIANGLES'], num, this.gl.UNSIGNED_SHORT, 0);
      } else {
        if (num == null) {
          num = this._numArrays;
        }
        this.gl.drawArrays(this.gl[type || 'TRIANGLE_STRIP'], 0, num);
      }
      this._drawArg = [type, num];
      return this;
    }

    drawFrame(fb, type, num) {
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, fb);
      this.draw(type, num);
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
      return this;
    }

    drawFrameCube(fb, idx, type, num) {
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, fb);
      this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_CUBE_MAP_POSITIVE_X + idx, fb.color, 0);
      this.draw(type, num);
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
      return this;
    }

    clear() {
      this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
      return this;
    }

    clearFrame(fb) {
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, fb);
      this.clear();
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
      return this;
    }

    clearFrameCube(fb, idx) {
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, fb);
      this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_CUBE_MAP_POSITIVE_X + idx, fb.color, 0);
      this.clear();
      this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
      return this;
    }

    read() {
      var array, canv, height, width;
      canv = this.gl.canvas;
      width = canv.width;
      height = canv.height;
      array = new Uint8Array(width * height * 4);
      this.gl.readPixels(0, 0, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, array);
      return array;
    }

  };

  if (typeof window !== "undefined" && window !== null) {
    window.MicroGL = MicroGL;
  }

}).call(this);