From e66a53884e0d5c9cceeb3cf58dbe5f076e6ecedb Mon Sep 17 00:00:00 2001
From: Jay Weeks <jay.patrick.weeks@gmail.com>
Date: Wed, 4 Oct 2017 11:56:13 -0700
Subject: [PATCH] Update builds

---
 dist/index.js        |  56 +-----
 dist/index.min.js    |   2 +-
 dist/index.module.js | 407 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 416 insertions(+), 49 deletions(-)
 create mode 100644 dist/index.module.js

diff --git a/dist/index.js b/dist/index.js
index 8c6fbe2..9b11c2f 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1,12 +1,10 @@
-(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-'use strict';
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('gl-mat4/identity')) :
+	typeof define === 'function' && define.amd ? define(['exports', 'gl-mat4/identity'], factory) :
+	(factory((global.REGL = {}),global.identity));
+}(this, (function (exports,identity) { 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var identity = _interopDefault(require('gl-mat4/identity'));
-var glslify = _interopDefault(require('glslify'));
+identity = identity && identity.hasOwnProperty('default') ? identity['default'] : identity;
 
 function ctor(Ctor) {
   return function () {
@@ -415,44 +413,6 @@ inherit(null, LineBuilder, {
 exports.LineBuilder = LineBuilder;
 exports.line = line;
 
-},{"gl-mat4/identity":2,"glslify":3}],2:[function(require,module,exports){
-module.exports = identity;
-
-/**
- * Set a mat4 to the identity matrix
- *
- * @param {mat4} out the receiving matrix
- * @returns {mat4} out
- */
-function identity(out) {
-    out[0] = 1;
-    out[1] = 0;
-    out[2] = 0;
-    out[3] = 0;
-    out[4] = 0;
-    out[5] = 1;
-    out[6] = 0;
-    out[7] = 0;
-    out[8] = 0;
-    out[9] = 0;
-    out[10] = 1;
-    out[11] = 0;
-    out[12] = 0;
-    out[13] = 0;
-    out[14] = 0;
-    out[15] = 1;
-    return out;
-};
-},{}],3:[function(require,module,exports){
-module.exports = function(strings) {
-  if (typeof strings === 'string') strings = [strings]
-  var exprs = [].slice.call(arguments,1)
-  var parts = []
-  for (var i = 0; i < strings.length-1; i++) {
-    parts.push(strings[i], exprs[i] || '')
-  }
-  parts.push(strings[i])
-  return parts.join('')
-}
+Object.defineProperty(exports, '__esModule', { value: true });
 
-},{}]},{},[1]);
+})));
diff --git a/dist/index.min.js b/dist/index.min.js
index 49492a5..3df7222 100644
--- a/dist/index.min.js
+++ b/dist/index.min.js
@@ -1 +1 @@
-!function e(t,r,n){function i(s,c){if(!r[s]){if(!t[s]){var a="function"==typeof require&&require;if(!c&&a)return a(s,!0);if(o)return o(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var f=r[s]={exports:{}};t[s][0].call(f.exports,function(e){var r=t[s][1][e];return i(r||e)},f,f.exports,e,t,r,n)}return r[s].exports}for(var o="function"==typeof require&&require,s=0;s<n.length;s++)i(n[s]);return i}({1:[function(e,t,r){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e.default:e}function i(e){return function(){var t=Object.create(e.prototype);return e.apply(t,arguments),t}}function o(e,t){this.context=this.createContext(e),this.state=this.createState(t),this.resources=this.createResources(),this.attributes=this.createAttributes(),this.draw=this.createDrawCommand()}Object.defineProperty(r,"__esModule",{value:!0});var s=n(e("gl-mat4/identity")),c=(n(e("glslify")),{frag:"precision highp float;\n#define GLSLIFY 1\nuniform vec3 color;\n\nvoid main() {\n  gl_FragColor = vec4(color, 1.0);\n}\n",vert:"// Based on WebGL lines demo\n// (c) 2015 Matt DesLauriers. MIT License\n// https://github.com/mattdesl/webgl-lines/\n\nprecision highp float;\n#define GLSLIFY 1\n\nuniform mat4 projection;\nuniform mat4 model;\nuniform mat4 view;\nuniform float aspect;\n\nuniform float thickness;\nuniform float miterLimit;\n\n// TODO: Enable compiling for 2 or 3 dimensional lines\nattribute vec2 prevPosition;\nattribute vec2 currPosition;\nattribute vec2 nextPosition;\n// attribute vec3 prevPosition;\n// attribute vec3 currPosition;\n// attribute vec3 nextPosition;\n\nattribute float offset;\n// attribute vec3 uv;\n\n// varying vec3 vUV;\n\nvoid main() {\n  vec2 aspectVec = vec2(aspect, 1.0);\n  mat4 projViewModel = projection * view * model;\n\n  // TODO: Refactor to import/export as standalone function\n  vec4 prevProjected = projViewModel * vec4(prevPosition, 0.0, 1.0);\n  vec4 currProjected = projViewModel * vec4(currPosition, 0.0, 1.0);\n  vec4 nextProjected = projViewModel * vec4(nextPosition, 0.0, 1.0);\n\n  // get 2D screen space with W divide and aspect correction\n  vec2 prevScreen = prevProjected.xy / prevProjected.w * aspectVec;\n  vec2 currScreen = currProjected.xy / currProjected.w * aspectVec;\n  vec2 nextScreen = nextProjected.xy / nextProjected.w * aspectVec;\n\n  vec2 dir = vec2(0.0);\n  float len = thickness;\n\n  // starting point uses (next - current)\n  if (currScreen == prevScreen) {\n    dir = normalize(nextScreen - currScreen);\n  }\n  // ending point uses (current - previous)\n  else if (currScreen == nextScreen) {\n    dir = normalize(currScreen - prevScreen);\n  }\n  // somewhere in middle, needs a join\n  else {\n    // get directions from (C - B) and (B - A)\n    vec2 dirA = normalize((currScreen - prevScreen));\n    if (int(miterLimit) == 0) {\n      dir = dirA;\n    } else {\n      vec2 dirB = normalize((nextScreen - currScreen));\n      // now compute the miter join normal and length\n      vec2 tangent = normalize(dirA + dirB);\n      vec2 perp = vec2(-dirA.y, dirA.x);\n      vec2 miter = vec2(-tangent.y, tangent.x);\n      dir = tangent;\n      len /= dot(miter, perp);\n    }\n  }\n\n  vec2 normal = vec2(-dir.y, dir.x) *\n    clamp(len, 0.0, max(thickness, miterLimit)) / aspectVec;\n\n  // vUV = uv;\n  gl_Position = currProjected + vec4(normal * offset, 0.0, 1.0);\n}\n"}),a=Float32Array.BYTES_PER_ELEMENT,u=Uint16Array.BYTES_PER_ELEMENT,f=["beginPath","moveTo","lineTo","arc","closePath","stroke"],v=["lineWidth"];!function(e,t,r){t.create=i(t),e&&(t.prototype=Object.create(e.prototype)),t.prototype.constructor=t,Object.assign(t.prototype,r)}(null,o,{createContext:function(e){return{regl:e}},createState:function(e){return{cursor:{vertex:0,element:0,quad:0,stride:e.stride,max:e.maxSize},sync:{vertex:0},style:{lineWidth:1},activePath:null,paths:[]}},createResources:function(){var e=this.context.regl,t=this.state.cursor,r=new Float32Array(t.max*t.stride*2),n=new Float32Array(2*t.max),i=new Uint16Array(4*t.max);return{position:{view:r,buffer:e.buffer({usage:"dynamic",type:"float",length:r.length*a})},offset:{view:n,buffer:e.buffer({usage:"dynamic",type:"float",length:n.length*a})},elements:{view:i,buffer:e.elements({usage:"dynamic",type:"uint16",primitive:"triangles",length:i.length*u})}}},createAttributes:function(){var e=this.state.cursor.stride,t=this.resources.position,r=this.resources.offset;return{prevPosition:{buffer:t.buffer,offset:0,stride:a*e},currPosition:{buffer:t.buffer,offset:a*e*2,stride:a*e},nextPosition:{buffer:t.buffer,offset:a*e*4,stride:a*e},offset:r.buffer}},createDrawCommand:function(){var e=this.attributes,t=this.context.regl,r=this.resources,n=this.state,i={model:s([]),aspect:function(e){return e.viewportWidth/e.viewportHeight},color:t.prop("color"),thickness:t.prop("thickness"),miterLimit:t.prop("miterLimit")},o=t({vert:c.vert,frag:c.frag,uniforms:i,attributes:e,elements:r.elements.buffer,count:function(){return 6*n.cursor.quad},depth:{enable:!1}});return function(e){return n.sync.vertex<n.cursor.vertex&&(this.syncResourceBuffers(),n.sync.vertex=n.cursor.vertex),o(e)}.bind(this)},syncResourceBuffers:function(){var e=this.resources.position,t=this.resources.offset,r=this.resources.elements;e.buffer.subdata(e.view,0),t.buffer.subdata(t.view,0),r.buffer.subdata(r.view,0)},getContext:function(){var e=this,t=this.state,r={};return f.forEach(function(t){r[t]=e[t].bind(e)}),v.forEach(function(n){var i=e[n];Object.defineProperty(r,n,i(t))}),r},resize:function(e){this.state.cursor.max=e},reset:function(){var e=this.state;e.cursor.quad=0,e.cursor.element=0,e.cursor.vertex=0,e.sync.vertex=0,e.style.lineWidth=1,e.activePath=null,e.paths=[]},beginPath:function(){var e=this.state,t=e.activePath,r={offset:t?t.offset+t.count:0,count:0,isClosed:!1};e.activePath=r,e.paths.push(r)},moveTo:function(e,t){var r=this.state,n=r.activePath,i=r.cursor,o=i.stride,s=.5*r.style.lineWidth,c=this.resources,a=c.position.view,u=c.offset.view,f=i.vertex*o*2,v=f+1,l=(i.vertex+1)*o*2,d=l+1;a[f]=a[f+o]=e,a[v]=a[v+o]=t,a[l]=a[l+o]=e,a[d]=a[d+o]=t;var h=2*i.vertex,p=2*(i.vertex+1);u[h+0]=s,u[h+1]=-s,u[p+0]=s,u[p+1]=-s,n.count+=1,i.vertex+=2},lineTo:function(e,t){var r=this.state,n=r.activePath,i=r.cursor,o=i.stride,s=.5*r.style.lineWidth,c=this.resources,a=c.position.view,u=c.offset.view,f=c.elements.view,v=i.vertex*o*2,l=v+1;a[v]=a[v+o]=e,a[l]=a[l+o]=t;var d=2*i.vertex;u[d]=s,u[d+1]=-s;var h=6*i.quad,p=i.element,m=p+1,x=p+2,y=p+3;f[h+0]=p,f[h+1]=m,f[h+2]=x,f[h+3]=x,f[h+4]=m,f[h+5]=y,n.count+=1,i.quad+=1,i.element+=2,i.vertex+=1},arc:function(e,t,r,n,i,o){for(var s=i-n,c=!0===o?-1:1,a=Math.ceil(s/(Math.PI/10)),u=0;u<a;u++){var f=n+u/(a-1)*s*c,v=e+Math.cos(f)*r,l=t+Math.sin(f)*r;0===u?this.moveTo(v,l):this.lineTo(v,l)}},closePath:function(){var e=this.state,t=e.activePath,r=e.cursor,n=r.stride,i=this.resources.position.view,o=(r.vertex-t.count)*n*2,s=o+1,c=i[o],a=i[s];this.lineTo(c,a),t.isClosed=!0},copyPosition:function(e,t){var r=this.state.cursor.stride,n=this.resources.position.view,i=e*r*2,o=i+1,s=t*r*2,c=s+1;n[i]=n[i+r]=n[s],n[o]=n[o+r]=n[c]},stroke:function(){var e=this.state,t=e.activePath,r=e.cursor,n=r.stride,i=this.resources,o=i.position.view,s=i.offset.view,c=r.vertex-t.count,a=r.vertex-1,u=r.vertex,f=a*n*2,v=f+1,l=u*n*2,d=l+1,h=2*a,p=2*u;o[l]=o[l+n]=o[f],o[d]=o[d+n]=o[v],s[p]=s[h],s[p+1]=s[h+1],r.element+=6,r.vertex+=1,t.isClosed&&(this.copyPosition(c-1,a-1),this.copyPosition(u,c+1))},lineWidth:function(e){return{get:function(){return e.style.lineWidth},set:function(t){return e.style.lineWidth=t,t}}}}),r.LineBuilder=o,r.line=c},{"gl-mat4/identity":2,glslify:3}],2:[function(e,t,r){t.exports=function(e){return e[0]=1,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=1,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=1,e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e}},{}],3:[function(e,t,r){t.exports=function(e){"string"==typeof e&&(e=[e]);for(var t=[].slice.call(arguments,1),r=[],n=0;n<e.length-1;n++)r.push(e[n],t[n]||"");return r.push(e[n]),r.join("")}},{}]},{},[1]);
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("gl-mat4/identity")):"function"==typeof define&&define.amd?define(["exports","gl-mat4/identity"],t):t(e.REGL={},e.identity)}(this,function(e,t){"use strict";function r(e){return function(){var t=Object.create(e.prototype);return e.apply(t,arguments),t}}function n(e,t){this.context=this.createContext(e),this.state=this.createState(t),this.resources=this.createResources(),this.attributes=this.createAttributes(),this.draw=this.createDrawCommand()}t=t&&t.hasOwnProperty("default")?t.default:t;var i={frag:"precision highp float;\n#define GLSLIFY 1\nuniform vec3 color;\n\nvoid main() {\n  gl_FragColor = vec4(color, 1.0);\n}\n",vert:"// Based on WebGL lines demo\n// (c) 2015 Matt DesLauriers. MIT License\n// https://github.com/mattdesl/webgl-lines/\n\nprecision highp float;\n#define GLSLIFY 1\n\nuniform mat4 projection;\nuniform mat4 model;\nuniform mat4 view;\nuniform float aspect;\n\nuniform float thickness;\nuniform float miterLimit;\n\n// TODO: Enable compiling for 2 or 3 dimensional lines\nattribute vec2 prevPosition;\nattribute vec2 currPosition;\nattribute vec2 nextPosition;\n// attribute vec3 prevPosition;\n// attribute vec3 currPosition;\n// attribute vec3 nextPosition;\n\nattribute float offset;\n// attribute vec3 uv;\n\n// varying vec3 vUV;\n\nvoid main() {\n  vec2 aspectVec = vec2(aspect, 1.0);\n  mat4 projViewModel = projection * view * model;\n\n  // TODO: Refactor to import/export as standalone function\n  vec4 prevProjected = projViewModel * vec4(prevPosition, 0.0, 1.0);\n  vec4 currProjected = projViewModel * vec4(currPosition, 0.0, 1.0);\n  vec4 nextProjected = projViewModel * vec4(nextPosition, 0.0, 1.0);\n\n  // get 2D screen space with W divide and aspect correction\n  vec2 prevScreen = prevProjected.xy / prevProjected.w * aspectVec;\n  vec2 currScreen = currProjected.xy / currProjected.w * aspectVec;\n  vec2 nextScreen = nextProjected.xy / nextProjected.w * aspectVec;\n\n  vec2 dir = vec2(0.0);\n  float len = thickness;\n\n  // starting point uses (next - current)\n  if (currScreen == prevScreen) {\n    dir = normalize(nextScreen - currScreen);\n  }\n  // ending point uses (current - previous)\n  else if (currScreen == nextScreen) {\n    dir = normalize(currScreen - prevScreen);\n  }\n  // somewhere in middle, needs a join\n  else {\n    // get directions from (C - B) and (B - A)\n    vec2 dirA = normalize((currScreen - prevScreen));\n    if (int(miterLimit) == 0) {\n      dir = dirA;\n    } else {\n      vec2 dirB = normalize((nextScreen - currScreen));\n      // now compute the miter join normal and length\n      vec2 tangent = normalize(dirA + dirB);\n      vec2 perp = vec2(-dirA.y, dirA.x);\n      vec2 miter = vec2(-tangent.y, tangent.x);\n      dir = tangent;\n      len /= dot(miter, perp);\n    }\n  }\n\n  vec2 normal = vec2(-dir.y, dir.x) *\n    clamp(len, 0.0, max(thickness, miterLimit)) / aspectVec;\n\n  // vUV = uv;\n  gl_Position = currProjected + vec4(normal * offset, 0.0, 1.0);\n}\n"},o=Float32Array.BYTES_PER_ELEMENT,s=Uint16Array.BYTES_PER_ELEMENT,c=["beginPath","moveTo","lineTo","arc","closePath","stroke"],a=["lineWidth"];!function(e,t,n){t.create=r(t),e&&(t.prototype=Object.create(e.prototype)),t.prototype.constructor=t,Object.assign(t.prototype,n)}(null,n,{createContext:function(e){return{regl:e}},createState:function(e){return{cursor:{vertex:0,element:0,quad:0,stride:e.stride,max:e.maxSize},sync:{vertex:0},style:{lineWidth:1},activePath:null,paths:[]}},createResources:function(){var e=this.context.regl,t=this.state.cursor,r=new Float32Array(t.max*t.stride*2),n=new Float32Array(2*t.max),i=new Uint16Array(4*t.max);return{position:{view:r,buffer:e.buffer({usage:"dynamic",type:"float",length:r.length*o})},offset:{view:n,buffer:e.buffer({usage:"dynamic",type:"float",length:n.length*o})},elements:{view:i,buffer:e.elements({usage:"dynamic",type:"uint16",primitive:"triangles",length:i.length*s})}}},createAttributes:function(){var e=this.state.cursor.stride,t=this.resources.position,r=this.resources.offset;return{prevPosition:{buffer:t.buffer,offset:0,stride:o*e},currPosition:{buffer:t.buffer,offset:o*e*2,stride:o*e},nextPosition:{buffer:t.buffer,offset:o*e*4,stride:o*e},offset:r.buffer}},createDrawCommand:function(){var e=this.attributes,r=this.context.regl,n=this.resources,o=this.state,s={model:t([]),aspect:function(e){return e.viewportWidth/e.viewportHeight},color:r.prop("color"),thickness:r.prop("thickness"),miterLimit:r.prop("miterLimit")},c=r({vert:i.vert,frag:i.frag,uniforms:s,attributes:e,elements:n.elements.buffer,count:function(){return 6*o.cursor.quad},depth:{enable:!1}});return function(e){return o.sync.vertex<o.cursor.vertex&&(this.syncResourceBuffers(),o.sync.vertex=o.cursor.vertex),c(e)}.bind(this)},syncResourceBuffers:function(){var e=this.resources.position,t=this.resources.offset,r=this.resources.elements;e.buffer.subdata(e.view,0),t.buffer.subdata(t.view,0),r.buffer.subdata(r.view,0)},getContext:function(){var e=this,t=this.state,r={};return c.forEach(function(t){r[t]=e[t].bind(e)}),a.forEach(function(n){var i=e[n];Object.defineProperty(r,n,i(t))}),r},resize:function(e){this.state.cursor.max=e},reset:function(){var e=this.state;e.cursor.quad=0,e.cursor.element=0,e.cursor.vertex=0,e.sync.vertex=0,e.style.lineWidth=1,e.activePath=null,e.paths=[]},beginPath:function(){var e=this.state,t=e.activePath,r={offset:t?t.offset+t.count:0,count:0,isClosed:!1};e.activePath=r,e.paths.push(r)},moveTo:function(e,t){var r=this.state,n=r.activePath,i=r.cursor,o=i.stride,s=.5*r.style.lineWidth,c=this.resources,a=c.position.view,u=c.offset.view,f=i.vertex*o*2,v=f+1,l=(i.vertex+1)*o*2,d=l+1;a[f]=a[f+o]=e,a[v]=a[v+o]=t,a[l]=a[l+o]=e,a[d]=a[d+o]=t;var h=2*i.vertex,p=2*(i.vertex+1);u[h+0]=s,u[h+1]=-s,u[p+0]=s,u[p+1]=-s,n.count+=1,i.vertex+=2},lineTo:function(e,t){var r=this.state,n=r.activePath,i=r.cursor,o=i.stride,s=.5*r.style.lineWidth,c=this.resources,a=c.position.view,u=c.offset.view,f=c.elements.view,v=i.vertex*o*2,l=v+1;a[v]=a[v+o]=e,a[l]=a[l+o]=t;var d=2*i.vertex;u[d]=s,u[d+1]=-s;var h=6*i.quad,p=i.element,m=p+1,x=p+2,y=p+3;f[h+0]=p,f[h+1]=m,f[h+2]=x,f[h+3]=x,f[h+4]=m,f[h+5]=y,n.count+=1,i.quad+=1,i.element+=2,i.vertex+=1},arc:function(e,t,r,n,i,o){for(var s=i-n,c=!0===o?-1:1,a=Math.ceil(s/(Math.PI/10)),u=0;u<a;u++){var f=n+u/(a-1)*s*c,v=e+Math.cos(f)*r,l=t+Math.sin(f)*r;0===u?this.moveTo(v,l):this.lineTo(v,l)}},closePath:function(){var e=this.state,t=e.activePath,r=e.cursor,n=r.stride,i=this.resources.position.view,o=(r.vertex-t.count)*n*2,s=o+1,c=i[o],a=i[s];this.lineTo(c,a),t.isClosed=!0},copyPosition:function(e,t){var r=this.state.cursor.stride,n=this.resources.position.view,i=e*r*2,o=i+1,s=t*r*2,c=s+1;n[i]=n[i+r]=n[s],n[o]=n[o+r]=n[c]},stroke:function(){var e=this.state,t=e.activePath,r=e.cursor,n=r.stride,i=this.resources,o=i.position.view,s=i.offset.view,c=r.vertex-t.count,a=r.vertex-1,u=r.vertex,f=a*n*2,v=f+1,l=u*n*2,d=l+1,h=2*a,p=2*u;o[l]=o[l+n]=o[f],o[d]=o[d+n]=o[v],s[p]=s[h],s[p+1]=s[h+1],r.element+=6,r.vertex+=1,t.isClosed&&(this.copyPosition(c-1,a-1),this.copyPosition(u,c+1))},lineWidth:function(e){return{get:function(){return e.style.lineWidth},set:function(t){return e.style.lineWidth=t,t}}}}),e.LineBuilder=n,e.line=i,Object.defineProperty(e,"__esModule",{value:!0})});
diff --git a/dist/index.module.js b/dist/index.module.js
new file mode 100644
index 0000000..d0e95b4
--- /dev/null
+++ b/dist/index.module.js
@@ -0,0 +1,407 @@
+import identity from 'gl-mat4/identity';
+
+function ctor(Ctor) {
+  return function () {
+    var instance = Object.create(Ctor.prototype);
+    Ctor.apply(instance, arguments);
+    return instance;
+  };
+}
+
+function inherit(ParentCtor, Ctor, proto) {
+  Ctor.create = ctor(Ctor);
+  if (ParentCtor) Ctor.prototype = Object.create(ParentCtor.prototype);
+  Ctor.prototype.constructor = Ctor;
+  Object.assign(Ctor.prototype, proto);
+}
+
+var line = {
+  frag: 'precision highp float;\n#define GLSLIFY 1\nuniform vec3 color;\n\nvoid main() {\n  gl_FragColor = vec4(color, 1.0);\n}\n',
+  vert: '// Based on WebGL lines demo\n// (c) 2015 Matt DesLauriers. MIT License\n// https://github.com/mattdesl/webgl-lines/\n\nprecision highp float;\n#define GLSLIFY 1\n\nuniform mat4 projection;\nuniform mat4 model;\nuniform mat4 view;\nuniform float aspect;\n\nuniform float thickness;\nuniform float miterLimit;\n\n// TODO: Enable compiling for 2 or 3 dimensional lines\nattribute vec2 prevPosition;\nattribute vec2 currPosition;\nattribute vec2 nextPosition;\n// attribute vec3 prevPosition;\n// attribute vec3 currPosition;\n// attribute vec3 nextPosition;\n\nattribute float offset;\n// attribute vec3 uv;\n\n// varying vec3 vUV;\n\nvoid main() {\n  vec2 aspectVec = vec2(aspect, 1.0);\n  mat4 projViewModel = projection * view * model;\n\n  // TODO: Refactor to import/export as standalone function\n  vec4 prevProjected = projViewModel * vec4(prevPosition, 0.0, 1.0);\n  vec4 currProjected = projViewModel * vec4(currPosition, 0.0, 1.0);\n  vec4 nextProjected = projViewModel * vec4(nextPosition, 0.0, 1.0);\n\n  // get 2D screen space with W divide and aspect correction\n  vec2 prevScreen = prevProjected.xy / prevProjected.w * aspectVec;\n  vec2 currScreen = currProjected.xy / currProjected.w * aspectVec;\n  vec2 nextScreen = nextProjected.xy / nextProjected.w * aspectVec;\n\n  vec2 dir = vec2(0.0);\n  float len = thickness;\n\n  // starting point uses (next - current)\n  if (currScreen == prevScreen) {\n    dir = normalize(nextScreen - currScreen);\n  }\n  // ending point uses (current - previous)\n  else if (currScreen == nextScreen) {\n    dir = normalize(currScreen - prevScreen);\n  }\n  // somewhere in middle, needs a join\n  else {\n    // get directions from (C - B) and (B - A)\n    vec2 dirA = normalize((currScreen - prevScreen));\n    if (int(miterLimit) == 0) {\n      dir = dirA;\n    } else {\n      vec2 dirB = normalize((nextScreen - currScreen));\n      // now compute the miter join normal and length\n      vec2 tangent = normalize(dirA + dirB);\n      vec2 perp = vec2(-dirA.y, dirA.x);\n      vec2 miter = vec2(-tangent.y, tangent.x);\n      dir = tangent;\n      len /= dot(miter, perp);\n    }\n  }\n\n  vec2 normal = vec2(-dir.y, dir.x) *\n    clamp(len, 0.0, max(thickness, miterLimit)) / aspectVec;\n\n  // vUV = uv;\n  gl_Position = currProjected + vec4(normal * offset, 0.0, 1.0);\n}\n'
+};
+
+var FLOAT_BYTES = Float32Array.BYTES_PER_ELEMENT;
+var INT_BYTES = Uint16Array.BYTES_PER_ELEMENT;
+var CONTEXT_METHODS = ['beginPath', 'moveTo', 'lineTo', 'arc', 'closePath', 'stroke'];
+var CONTEXT_ACCESSORS = ['lineWidth'];
+
+function LineBuilder(regl, opts) {
+  this.context = this.createContext(regl);
+  this.state = this.createState(opts);
+  this.resources = this.createResources();
+  this.attributes = this.createAttributes();
+  this.draw = this.createDrawCommand();
+}
+
+inherit(null, LineBuilder, {
+  createContext: function createContext(regl) {
+    return {
+      regl: regl
+    };
+  },
+
+  createState: function createState(opts) {
+    var cursor = {
+      vertex: 0,
+      element: 0,
+      quad: 0,
+      stride: opts.stride,
+      max: opts.maxSize
+    };
+    var sync = {
+      vertex: 0
+    };
+    var style = {
+      lineWidth: 1
+    };
+    return {
+      cursor: cursor,
+      sync: sync,
+      style: style,
+      activePath: null,
+      paths: []
+    };
+  },
+
+  createResources: function createResources() {
+    var regl = this.context.regl;
+    var cursor = this.state.cursor;
+
+    var positionView = new Float32Array(cursor.max * cursor.stride * 2);
+    var offsetView = new Float32Array(cursor.max * 2);
+    // var uvs = new Float32Array(cursor.max * 2 * 3)
+    var elementsView = new Uint16Array(cursor.max * 4);
+
+    var positionBuffer = regl.buffer({
+      usage: 'dynamic',
+      type: 'float',
+      length: positionView.length * FLOAT_BYTES
+    });
+    var offsetBuffer = regl.buffer({
+      usage: 'dynamic',
+      type: 'float',
+      length: offsetView.length * FLOAT_BYTES
+    });
+    var elementsBuffer = regl.elements({
+      usage: 'dynamic',
+      type: 'uint16',
+      primitive: 'triangles',
+      length: elementsView.length * INT_BYTES
+    });
+
+    return {
+      position: {
+        view: positionView,
+        buffer: positionBuffer
+      },
+      offset: {
+        view: offsetView,
+        buffer: offsetBuffer
+      },
+      elements: {
+        view: elementsView,
+        buffer: elementsBuffer
+      }
+    };
+  },
+
+  createAttributes: function createAttributes() {
+    var stride = this.state.cursor.stride;
+    var position = this.resources.position;
+    var offset = this.resources.offset;
+
+    return {
+      prevPosition: {
+        buffer: position.buffer,
+        offset: 0,
+        stride: FLOAT_BYTES * stride
+      },
+      currPosition: {
+        buffer: position.buffer,
+        offset: FLOAT_BYTES * stride * 2,
+        stride: FLOAT_BYTES * stride
+      },
+      nextPosition: {
+        buffer: position.buffer,
+        offset: FLOAT_BYTES * stride * 4,
+        stride: FLOAT_BYTES * stride
+      },
+      offset: offset.buffer
+    };
+  },
+
+  createDrawCommand: function createDrawCommand() {
+    var attributes = this.attributes;
+    var regl = this.context.regl;
+    var resources = this.resources;
+    var state = this.state;
+
+    var uniforms = {
+      model: identity([]),
+      aspect: function aspect(params) {
+        return params.viewportWidth / params.viewportHeight;
+      },
+      color: regl.prop('color'),
+      thickness: regl.prop('thickness'),
+      miterLimit: regl.prop('miterLimit')
+    };
+    var count = function count() {
+      return state.cursor.quad * 6;
+    };
+    // TODO: Share base regl command between multiple LineBuilder instances
+    var drawCommand = regl({
+      vert: line.vert,
+      frag: line.frag,
+      uniforms: uniforms,
+      attributes: attributes,
+      elements: resources.elements.buffer,
+      count: count,
+      depth: { enable: false }
+    });
+
+    return function (params) {
+      if (state.sync.vertex < state.cursor.vertex) {
+        this.syncResourceBuffers();
+        state.sync.vertex = state.cursor.vertex;
+      }
+      return drawCommand(params);
+    }.bind(this);
+  },
+
+  syncResourceBuffers: function syncResourceBuffers() {
+    var position = this.resources.position;
+    var offset = this.resources.offset;
+    var elements = this.resources.elements;
+    position.buffer.subdata(position.view, 0);
+    offset.buffer.subdata(offset.view, 0);
+    elements.buffer.subdata(elements.view, 0);
+  },
+
+  getContext: function getContext() {
+    var that = this;
+    var state = this.state;
+    var map = {};
+    CONTEXT_METHODS.forEach(function (key) {
+      map[key] = that[key].bind(that);
+    });
+    CONTEXT_ACCESSORS.forEach(function (key) {
+      var accessor = that[key];
+      Object.defineProperty(map, key, accessor(state));
+    });
+    return map;
+  },
+
+  // TODO: Resize resource buffers
+  resize: function resize(count) {
+    var cursor = this.state.cursor;
+    cursor.max = count;
+  },
+
+  reset: function reset() {
+    var state = this.state;
+    state.cursor.quad = 0;
+    state.cursor.element = 0;
+    state.cursor.vertex = 0;
+    state.sync.vertex = 0;
+    state.style.lineWidth = 1;
+    state.activePath = null;
+    state.paths = [];
+  },
+
+  // Geometry Creation
+  // -----------------
+  //
+  // - duplicate verts are expanded to line widths in shader
+  // - doubly duplicated verts mark path start / end
+  //
+
+  beginPath: function beginPath() {
+    var state = this.state;
+    var activePath = state.activePath;
+    var offset = !activePath ? 0 : activePath.offset + activePath.count;
+
+    var nextPath = {
+      offset: offset,
+      count: 0,
+      isClosed: false
+    };
+
+    state.activePath = nextPath;
+    state.paths.push(nextPath);
+  },
+
+  moveTo: function moveTo(x, y) {
+    var state = this.state;
+    var activePath = state.activePath;
+
+    var cursor = state.cursor;
+    var stride = cursor.stride;
+    var lineWidth = state.style.lineWidth * 0.5;
+
+    var resources = this.resources;
+    var positionView = resources.position.view;
+    var offsetView = resources.offset.view;
+
+    var aix = cursor.vertex * stride * 2;
+    var aiy = aix + 1;
+    var bix = (cursor.vertex + 1) * stride * 2;
+    var biy = bix + 1;
+    positionView[aix] = positionView[aix + stride] = x;
+    positionView[aiy] = positionView[aiy + stride] = y;
+    positionView[bix] = positionView[bix + stride] = x;
+    positionView[biy] = positionView[biy + stride] = y;
+
+    var ais = cursor.vertex * 2;
+    var bis = (cursor.vertex + 1) * 2;
+    offsetView[ais + 0] = lineWidth;
+    offsetView[ais + 1] = -lineWidth;
+    offsetView[bis + 0] = lineWidth;
+    offsetView[bis + 1] = -lineWidth;
+
+    activePath.count += 1;
+    cursor.vertex += 2;
+  },
+
+  lineTo: function lineTo(x, y) {
+    var state = this.state;
+    var activePath = state.activePath;
+
+    var cursor = state.cursor;
+    var stride = cursor.stride;
+    var lineWidth = state.style.lineWidth * 0.5;
+
+    var resources = this.resources;
+    var positionView = resources.position.view;
+    var offsetView = resources.offset.view;
+    var elementsView = resources.elements.view;
+
+    var aix = cursor.vertex * stride * 2;
+    var aiy = aix + 1;
+    positionView[aix] = positionView[aix + stride] = x;
+    positionView[aiy] = positionView[aiy + stride] = y;
+
+    // FIXME: Implement correct intermediate lineWidth changes
+    var ais = cursor.vertex * 2;
+    offsetView[ais] = lineWidth;
+    offsetView[ais + 1] = -lineWidth;
+
+    var evi = cursor.quad * 6;
+    var aio = cursor.element;
+    var bio = aio + 1;
+    var cio = aio + 2;
+    var dio = aio + 3;
+    elementsView[evi + 0] = aio;
+    elementsView[evi + 1] = bio;
+    elementsView[evi + 2] = cio;
+    elementsView[evi + 3] = cio;
+    elementsView[evi + 4] = bio;
+    elementsView[evi + 5] = dio;
+
+    activePath.count += 1;
+    cursor.quad += 1;
+    cursor.element += 2;
+    cursor.vertex += 1;
+  },
+
+  // TODO: Enable configuring segment precision
+  arc: function arc(x, y, radius, startAngle, endAngle, anticlockwise) {
+    var delta = endAngle - startAngle;
+    var dir = anticlockwise === true ? -1 : 1;
+    var count = Math.ceil(delta / (Math.PI / 10));
+
+    for (var i = 0; i < count; i++) {
+      var t = i / (count - 1);
+      var angle = startAngle + t * delta * dir;
+      var ax = x + Math.cos(angle) * radius;
+      var ay = y + Math.sin(angle) * radius;
+
+      if (i === 0) this.moveTo(ax, ay);else this.lineTo(ax, ay);
+    }
+  },
+
+  closePath: function closePath() {
+    var state = this.state;
+    var activePath = state.activePath;
+    var cursor = state.cursor;
+    var stride = cursor.stride;
+
+    var resources = this.resources;
+    var positionView = resources.position.view;
+
+    var bi = cursor.vertex - activePath.count;
+    var bix = bi * stride * 2;
+    var biy = bix + 1;
+
+    var x = positionView[bix];
+    var y = positionView[biy];
+
+    this.lineTo(x, y);
+    activePath.isClosed = true;
+  },
+
+  copyPosition: function copyPosition(ai, bi) {
+    var state = this.state;
+    var cursor = state.cursor;
+    var stride = cursor.stride;
+
+    var resources = this.resources;
+    var positionView = resources.position.view;
+
+    var aix = ai * stride * 2;
+    var aiy = aix + 1;
+    var bix = bi * stride * 2;
+    var biy = bix + 1;
+
+    positionView[aix] = positionView[aix + stride] = positionView[bix];
+    positionView[aiy] = positionView[aiy + stride] = positionView[biy];
+  },
+
+  stroke: function stroke() {
+    var state = this.state;
+    var activePath = state.activePath;
+    var cursor = state.cursor;
+    var stride = cursor.stride;
+
+    var resources = this.resources;
+    var positionView = resources.position.view;
+    var offsetView = resources.offset.view;
+
+    var si = cursor.vertex - activePath.count;
+    var bi = cursor.vertex - 1;
+    var ai = cursor.vertex;
+
+    var bix = bi * stride * 2;
+    var biy = bix + 1;
+    var aix = ai * stride * 2;
+    var aiy = aix + 1;
+    var bis = bi * 2;
+    var ais = ai * 2;
+
+    positionView[aix] = positionView[aix + stride] = positionView[bix];
+    positionView[aiy] = positionView[aiy + stride] = positionView[biy];
+    offsetView[ais] = offsetView[bis];
+    offsetView[ais + 1] = offsetView[bis + 1];
+
+    cursor.element += 6;
+    cursor.vertex += 1;
+
+    if (activePath.isClosed) {
+      this.copyPosition(si - 1, bi - 1);
+      this.copyPosition(ai, si + 1);
+    }
+  },
+
+  lineWidth: function lineWidth(state) {
+    return {
+      get: function get() {
+        return state.style.lineWidth;
+      },
+      set: function set(v) {
+        state.style.lineWidth = v;
+        return v;
+      }
+    };
+  }
+});
+
+export { LineBuilder, line };