gl-transition-utils/lib/createWebGLCompiler.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _glShader = require("gl-shader");

var _glShader2 = _interopRequireDefault(_glShader);

var _performanceNow = require("performance-now");

var _performanceNow2 = _interopRequireDefault(_performanceNow);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function colorMatches(actual, expected) {
  var dr = actual[0] - expected[0];
  var dg = actual[1] - expected[1];
  var db = actual[2] - expected[2];
  var da = actual[3] - expected[3];
  // we need to be fuzzy because implementation precision can differ
  return dr * dr + dg * dg + db * db + da * da < 10; // euclidian distance < sqrt(10)
}

var VERTEX_SHADER = "attribute vec2 _p;\nvarying vec2 uv;\nvoid main() {\ngl_Position = vec4(_p,0.0,1.0);\nuv = vec2(0.5, 0.5) * (_p+vec2(1.0, 1.0));\n}";

exports.default = function (gl) {
  var w = gl.drawingBufferWidth,
      h = gl.drawingBufferHeight;

  var pixels = new Uint8Array(w * h * 4);

  function colorAt(x, y) {
    var i = (x + y * w) * 4;
    var r = pixels[i + 0];
    var g = pixels[i + 1];
    var b = pixels[i + 2];
    var a = pixels[i + 3];
    return [r, g, b, a];
  }

  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 4, 4, -1]), // see a-big-triangle
  gl.STATIC_DRAW);
  gl.viewport(0, 0, w, h);

  return function (glsl) {
    var data = {
      compileTime: 0,
      drawTime: 0
    };
    var errors = [];
    var shader = void 0;
    try {
      var beforeCompilation = (0, _performanceNow2.default)();
      shader = (0, _glShader2.default)(gl, VERTEX_SHADER, "precision highp float;varying vec2 uv;uniform float progress, ratio;vec4 getFromColor (vec2 uv) { return vec4(uv, 0.0, 1.0); } vec4 getToColor (vec2 uv) { return vec4(uv, 1.0, 1.0); } " + glsl + "\n  void main () {\n    gl_FragColor = transition(uv);\n  }");
      gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // this is just to force trigger a flush
      var afterCompilation = (0, _performanceNow2.default)();
      data.compileTime = afterCompilation - beforeCompilation;

      // We now will check the transition is correctly rendering the {from, to} images in progress={0, 1}
      // leaving all transition params to default zero value should not affect a transition to "work"

      shader.bind();
      shader.attributes._p.pointer();
      shader.uniforms.ratio = w / h;

      gl.readPixels(0, 0, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // this is just to force trigger a flush
      var beforeDraw1 = (0, _performanceNow2.default)();
      shader.uniforms.progress = 0;
      gl.drawArrays(gl.TRIANGLES, 0, 3);
      gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels); // we need to put this in the scope because impl like Chrome are lazy and this really trigger the work.
      var afterDraw1 = (0, _performanceNow2.default)();
      var draw1matches = [colorMatches(colorAt(0, 0), [0, 0, 0, 255]), colorMatches(colorAt(w - 1, 0), [255, 0, 0, 255]), colorMatches(colorAt(0, h - 1), [0, 255, 0, 255]), colorMatches(colorAt(w - 1, h - 1), [255, 255, 0, 255])];

      var beforeDraw2 = (0, _performanceNow2.default)();
      shader.uniforms.progress = 1;
      gl.drawArrays(gl.TRIANGLES, 0, 3);
      gl.readPixels(0, 0, w, h, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
      var afterDraw2 = (0, _performanceNow2.default)();
      var draw2matches = [colorMatches(colorAt(0, 0), [0, 0, 255, 255]), colorMatches(colorAt(w - 1, 0), [255, 0, 255, 255]), colorMatches(colorAt(0, h - 1), [0, 255, 255, 255]), colorMatches(colorAt(w - 1, h - 1), [255, 255, 255, 255])];

      var drawErrorMessages = [];
      if (draw1matches.some(function (t) {
        return !t;
      })) {
        drawErrorMessages.push("render getFromColor(uv) when progress=0.0");
      }
      if (draw2matches.some(function (t) {
        return !t;
      })) {
        drawErrorMessages.push("render getToColor(uv) when progress=1.0");
      }
      if (drawErrorMessages.length > 0) {
        errors.push({
          code: "Transition_draw_invalid",
          type: "error",
          message: "invalid transition, it must: " + drawErrorMessages.join(", ")
        });
      }

      var drawTime1 = afterDraw1 - beforeDraw1;
      var drawTime2 = afterDraw2 - beforeDraw2;
      // average of the 2 draws for even better precision
      data.drawTime = (drawTime1 + drawTime2) / 2;
    } catch (e) {
      var error = void 0;
      var lines = e.message.split("\n");
      for (var _i = 0, _len = lines.length; _i < _len; _i++) {
        var i = lines[_i];
        if (i.substr(0, 5) === "ERROR") {
          error = i;
        }
      }
      if (!error) {
        errors.push({
          line: 0,
          code: "WebGL_unknown_error",
          type: "error",
          message: "Unknown error: " + e.message
        });
      } else {
        var details = error.split(":");
        if (details.length < 4) {
          errors.push({
            line: 0,
            code: "WebGL_error",
            type: "error",
            message: error
          });
        } else {
          var lineStr = details[2];
          var _line = parseInt(lineStr, 10);
          if (isNaN(_line)) _line = 0;
          var _message = details.splice(3).join(":");
          errors.push({
            line: _line,
            code: "WebGL_error",
            type: "error",
            message: _message
          });
        }
      }
    } finally {
      if (shader) shader.dispose();
    }
    return {
      data: data,
      errors: errors
    };
  };
};