glre 0.12.0 → 0.14.0

package/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("refr"),r=require("reev");function n(e,r){for(var n=e[0],t=0,o=r.length;t<o;t+=1)n+=r[t]+e[t+1];return n}function t(e){return Array.isArray(e)&&"string"==typeof e[0]}function o(e,r){return e=e.replace(/\s+/g,""),r=r.replace(/\s+/g,""),-1!==e.indexOf(r)}function i(e,r,n){return void 0===n&&(n=""),""!==n&&!o(e,n)||o(e,r)?e:r+e}function a(e,r){void 0===r&&(r=!1);var n="number"==typeof e?0:e.length;return n?r?["uniformMatrix"+(n=Math.sqrt(n)<<0)+"fv","mat"+n]:["uniform"+n+"fv","vec"+n]:["uniform1f","float"]}function u(e,r,n){var t=e.createShader(n);if(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS))return t;console.warn(e.getShaderInfoLog(t))}function f(e,r,n,t,o){e.bindBuffer(e.ARRAY_BUFFER,function(e,r){if(r){var n=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,n),e.bufferData(e.ARRAY_BUFFER,new Float32Array(r),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),n}}(e,t)),e.enableVertexAttribArray(n),e.vertexAttribPointer(n,r,e.FLOAT,!1,0,0),o&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,function(e,r){if(r){var n=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,n),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(r),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),n}}(e,o))}var l=function(e){return r.event({mount:function(r){e.int&&(e.frag=i(e.frag,"precision "+e.int+" int;")),e.float&&(e.frag=i(e.frag,"precision "+e.float+" float;")),e.sampler2D&&(e.frag=i(e.frag,"precision "+e.sampler2D+" sampler2D;")),e.samplerCube&&(e.frag=i(e.frag,"precision "+e.samplerCube+" samplerCube;"));var n=e.el=document.getElementById(e.id),t=e.gl=null==n?void 0:n.getContext("webgl"),o=u(t,e.frag,null==t?void 0:t.FRAGMENT_SHADER),a=u(t,e.vert,null==t?void 0:t.VERTEX_SHADER);e.pg=function(e,r,n){var t=e.createProgram();return e.attachShader(t,r),e.attachShader(t,n),e.linkProgram(t),e.getProgramParameter(t,e.LINK_STATUS)?(e.useProgram(t),t):(console.log(e.getProgramInfoLog(t)),null)}(t,a,o),window.addEventListener("resize",r.on("resize")),window.addEventListener("mousemove",r.on("mousemove")),r("resize");var f=performance.now(),l=0,c=0;e.setFrame((function(){return l=f,f=performance.now()/1e3,c=f-l,e.setUniform({iTime:f,iPrevTime:l,iDeltaTime:c}),!0})),e.frame()},clean:function(r){window.removeEventListener("resize",r.on("resize")),window.removeEventListener("mousemove",r.on("mousemove")),e.frame.cancel()},mousemove:function(r,n){var t=n.clientX,o=n.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(t-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("iMouse",e.mouse)},resize:function(r,n,t,o){void 0===t&&(t=0),void 0===o&&(o=0),e.size[0]=e.el.width=t||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("iResolution",e.size)},load:function(r,n,t){e.setFrame((function(){var r=e.activeUnit(t.alt),n=e.location(t.alt),o=function(e,r){var n=e.createTexture();return e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,r),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n}(e.gl,t);e.setFrame((function(){return e.gl.uniform1i(n,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,o),!0}))}))}})},c=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],s="\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",v="\n  uniform vec2 resolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n  }\n",m=function(o){var i=function e(r){for(var o=arguments.length,i=new Array(o>1?o-1:0),a=1;a<o;a++)i[a-1]=arguments[a];return t(r)&&(r=n(r,i)),"string"==typeof r&&(e.frag=r),"function"==typeof r&&e.frame.mount(r),e};i.id="myCanvas",i.frag=v,i.vert=s,i.size=[0,0],i.mouse=[0,0],i.count=6,i.uniformHeader=[],i.attributeHeader=[];var u=i.event=l(i),m=i.frame=e.frame();i.lastActiveUnit=0,i.activeUnit=r.nested((function(){return i.lastActiveUnit++})),i.vertexStride=r.nested((function(e,r,n){var t=n?Math.max.apply(Math,n)+1:i.count,o=r.length/t<<0;return i.attributeHeader.push([e,"vertex vec"+o+" "+e+";"]),o})),i.uniformType=r.nested((function(e,r,n){var t=a(r,n),o=t[0],u=t[1];return i.uniformHeader.push([e,"uniform "+u+" "+e+";"]),o})),i.location=r.nested((function(e,r){var n,t;return void 0===r&&(r=!1),r?null==(n=i.gl)?void 0:n.getAttribLocation(i.pg,e):null==(t=i.gl)?void 0:t.getUniformLocation(i.pg,e)})),i.setDpr=function(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return void u.apply(void 0,["resize",{}].concat(r))||i},i.setSize=function(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return void u.apply(void 0,["resize",{}].concat(r))||i},i.setFrame=function(e){return void m.mount(e)||i},i.setMount=function(e){return void u.mount({mount:e})||i},i.setClean=function(e){return void u.mount({clean:e})||i},i.setConfig=r.durable((function(e,r){i[e]=r}),i),i.setUniform=r.durable((function(e,r,n){void 0===n&&(n=!1);var t=i.uniformType(e,r,n);i.setFrame((function(){n?i.gl[t](i.location(e),!1,r):i.gl[t](i.location(e),r)}))}),i),i.setAttribute=r.durable((function(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];var o=i.vertexStride.apply(i,[e].concat(n));i.setFrame((function(){f.apply(void 0,[i.gl,o,i.location(e,!0)].concat(n))}))}),i),i.setTexture=r.durable((function(e,r){var n=new Image;n.addEventListener("load",(function(e){return u("load",e,n)}),!1),Object.assign(n,{src:r,alt:e,crossOrigin:"anonymous"})}),i),i.mount=u.on("mount"),i.clean=u.on("clean"),i.clear=function(e){return i.gl.clear(i.gl[e||"COLOR_BUFFER_BIT"])},i.viewport=function(e){var r;return(r=i.gl).viewport.apply(r,[0,0].concat(e||i.size))},i.drawArrays=function(e){return void 0===e&&(e="TRIANGLES"),i.gl.drawArrays(i.gl[e],0,i.count)},i.drawElements=function(e,r){return void 0===e&&(e="TRIANGLES"),void 0===r&&(r="UNSIGNED_SHORT"),i.gl.drawElements(i.gl[e],i.count,i.gl[r],0)};for(var d=arguments.length,g=new Array(d>1?d-1:0),E=1;E<d;E++)g[E-1]=arguments[E];return t(o)&&(o=n(o,g)),"string"==typeof o&&(i.frag=o),"object"==typeof o&&i.setConfig(o),6===i.count&&i.setAttribute({a_position:c}),i};m.default=null,exports.default=m,exports.gl=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("reev"),r=require("refr");function t(e,r,t){var n=e.createShader(t);if(e.shaderSource(n,r),e.compileShader(n),e.getShaderParameter(n,e.COMPILE_STATUS))return n;console.warn(e.getShaderInfoLog(n))}var n=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],i=performance.now(),o=0,a=0,u=e.event({vertex:"\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",fragment:"\n  precision mediump float;\n  uniform vec2 iResolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);\n  }\n",size:[0,0],mouse:[0,0],count:6,counter:0,init:function(i){var o=u.gl,a=u.vs||u.vert||u.vertex,f=u.fs||u.frag||u.fragment,c=t(o,a,o.VERTEX_SHADER),l=t(o,f,o.FRAGMENT_SHADER);6===u.count&&u.attribute({a_position:n}),r.frame((function(){return void u.render()||1})),u.pg=i?function(e,r,t,n){var i=e.createProgram();return e.attachShader(i,r),e.attachShader(i,t),e.transformFeedbackVaryings(i,n,e.SEPARATE_ATTRIBS),e.linkProgram(i),e.getProgramParameter(i,e.LINK_STATUS)?(e.useProgram(i),i):(console.warn(e.getProgramInfoLog(i)),null)}(o,c,l,i):function(e,r,t){var n=e.createProgram();return e.attachShader(n,r),e.attachShader(n,t),e.linkProgram(n),e.getProgramParameter(n,e.LINK_STATUS)?(e.useProgram(n),n):(console.log(e.getProgramInfoLog(n)),null)}(o,c,l),u.lastActiveUnit=0,u.activeUnit=e.nested((function(){return u.lastActiveUnit++})),u.location=e.nested((function(e,r){return void 0===r&&(r=!1),r?null==o?void 0:o.getAttribLocation(u.pg,e):null==o?void 0:o.getUniformLocation(u.pg,e)}))},render:function(){u.gl.useProgram(u.pg),u.frame.flush(),o=i,i=performance.now()/1e3,a=i-o,u.uniform({iTime:i,iPrevTime:o,iDeltaTime:a})},_uniform:function(e,r,t){void 0===r&&(r=0),void 0===t&&(t=!1);var n=function(e,r){void 0===r&&(r=!1);var t="number"==typeof e?0:null==e?void 0:e.length;return t?r?"uniformMatrix"+(t=Math.sqrt(t)<<0)+"fv":"uniform"+t+"fv":"uniform1f"}(r,t);u.frame((function(){var i=u.location(e);t?u.gl[n](i,!1,r):u.gl[n](i,r)}))},_attribute:function(e,r,t){u.frame((function(){var n=u.location(e,!0),i=function(e,r){if(r){var t=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,new Float32Array(r),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),t}}(u.gl,r),o=function(e,r){if(r){var t=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(r),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),t}}(u.gl,t),a=function(e,r,t){t&&(e=Math.max.apply(Math,t)+1);var n=r.length/e;return n!==n<<0&&console.warn("Vertex Stride Error: count "+e+" is mismatch"),n<<0}(u.count,r,t);!function(e,r,t,n,i){e.bindBuffer(e.ARRAY_BUFFER,n),e.enableVertexAttribArray(t),e.vertexAttribPointer(t,r,e.FLOAT,!1,0,0),i&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,i)}(u.gl,a,n,i,o)}))},_texture:function(e,r){if("undefined"!=typeof window){var t=new Image;t.addEventListener("load",(function(e){return u.load(e,t)}),!1),Object.assign(t,{src:r,alt:e,crossOrigin:"anonymous"})}},resize:function(e,r,t){void 0===r&&(r=window.innerWidth),void 0===t&&(t=window.innerHeight),u.size[0]=u.el.width=r,u.size[1]=u.el.height=t,u.uniform("iResolution",u.size)},mousemove:function(e,r,t){void 0===r&&(r=e.clientX),void 0===t&&(t=e.clientY);var n=u.size,i=n[0],o=n[1];u.mouse[0]=(r-i/2)/(i/2),u.mouse[1]=-(t-o/2)/(o/2),u.uniform("iMouse",u.mouse)},load:function(e,r){u.frame((function(){var e=u.location(r.alt),t=u.activeUnit(r.alt),n=function(e,r){var t=e.createTexture();return e.bindTexture(e.TEXTURE_2D,t),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,r),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),t}(u.gl,r);u.frame((function(){return function(e,r,t,n){e.uniform1i(r,t),e.activeTexture(e["TEXTURE"+t]),e.bindTexture(e.TEXTURE_2D,n)}(u.gl,e,t,n),!0}))}))},clear:function(e){void 0===e&&(e="COLOR_BUFFER_BIT"),u.gl.clear(u.gl[e])},viewport:function(e){var r;void 0===e&&(e=u.size),(r=u.gl).viewport.apply(r,[0,0].concat(e))},drawArrays:function(e){void 0===e&&(e="TRIANGLES"),u.gl.drawArrays(u.gl[e],0,u.count)},drawElements:function(e,r){void 0===e&&(e="TRIANGLES"),void 0===r&&(r="UNSIGNED_SHORT"),u.gl.drawElements(u.gl[e],u.count,u.gl[r],0)}});u.frame=r.queue(),u.texture=e.durable(u._texture),u.uniform=e.durable(u._uniform),u.attribute=e.durable(u._attribute),exports.default=u,exports.gl=u;

package/index.develop.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("refr"),require("reev")):"function"==typeof define&&define.amd?define(["exports","refr","reev"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self).index=e.index||{},e.index.ts={}),e.refr,e.reev)}(this,(function(e,n,r){"use strict";function t(e,n){for(var r=e[0],t=0,o=n.length;t<o;t+=1)r+=n[t]+e[t+1];return r}function o(e){return Array.isArray(e)&&"string"==typeof e[0]}function i(e,n){return e=e.replace(/\s+/g,""),n=n.replace(/\s+/g,""),-1!==e.indexOf(n)}function a(e,n,r){return void 0===r&&(r=""),""!==r&&!i(e,r)||i(e,n)?e:n+e}function u(e,n){void 0===n&&(n=!1);var r="number"==typeof e?0:e.length;return r?n?["uniformMatrix"+(r=Math.sqrt(r)<<0)+"fv","mat"+r]:["uniform"+r+"fv","vec"+r]:["uniform1f","float"]}function f(e,n,r){var t=e.createShader(r);if(e.shaderSource(t,n),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS))return t;console.warn(e.getShaderInfoLog(t))}function l(e,n,r,t,o){e.bindBuffer(e.ARRAY_BUFFER,function(e,n){if(n){var r=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,r),e.bufferData(e.ARRAY_BUFFER,new Float32Array(n),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),r}}(e,t)),e.enableVertexAttribArray(r),e.vertexAttribPointer(r,n,e.FLOAT,!1,0,0),o&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,function(e,n){if(n){var r=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,r),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(n),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),r}}(e,o))}var c=function(e){return r.event({mount:function(n){e.int&&(e.frag=a(e.frag,"precision "+e.int+" int;")),e.float&&(e.frag=a(e.frag,"precision "+e.float+" float;")),e.sampler2D&&(e.frag=a(e.frag,"precision "+e.sampler2D+" sampler2D;")),e.samplerCube&&(e.frag=a(e.frag,"precision "+e.samplerCube+" samplerCube;"));var r=e.el=document.getElementById(e.id),t=e.gl=null==r?void 0:r.getContext("webgl"),o=f(t,e.frag,null==t?void 0:t.FRAGMENT_SHADER),i=f(t,e.vert,null==t?void 0:t.VERTEX_SHADER);e.pg=function(e,n,r){var t=e.createProgram();return e.attachShader(t,n),e.attachShader(t,r),e.linkProgram(t),e.getProgramParameter(t,e.LINK_STATUS)?(e.useProgram(t),t):(console.log(e.getProgramInfoLog(t)),null)}(t,i,o),window.addEventListener("resize",n.on("resize")),window.addEventListener("mousemove",n.on("mousemove")),n("resize");var u=performance.now(),l=0,c=0;e.setFrame((function(){return l=u,u=performance.now()/1e3,c=u-l,e.setUniform({iTime:u,iPrevTime:l,iDeltaTime:c}),!0})),e.frame()},clean:function(n){window.removeEventListener("resize",n.on("resize")),window.removeEventListener("mousemove",n.on("mousemove")),e.frame.cancel()},mousemove:function(n,r){var t=r.clientX,o=r.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(t-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("iMouse",e.mouse)},resize:function(n,r,t,o){void 0===t&&(t=0),void 0===o&&(o=0),e.size[0]=e.el.width=t||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("iResolution",e.size)},load:function(n,r,t){e.setFrame((function(){var n=e.activeUnit(t.alt),r=e.location(t.alt),o=function(e,n){var r=e.createTexture();return e.bindTexture(e.TEXTURE_2D,r),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,n),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),r}(e.gl,t);e.setFrame((function(){return e.gl.uniform1i(r,n),e.gl.activeTexture(e.gl["TEXTURE"+n]),e.gl.bindTexture(e.gl.TEXTURE_2D,o),!0}))}))}})},s=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],d="\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",v="\n  uniform vec2 resolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n  }\n",m=function(e){var i=function e(n){for(var r=arguments.length,i=new Array(r>1?r-1:0),a=1;a<r;a++)i[a-1]=arguments[a];return o(n)&&(n=t(n,i)),"string"==typeof n&&(e.frag=n),"function"==typeof n&&e.frame.mount(n),e};i.id="myCanvas",i.frag=v,i.vert=d,i.size=[0,0],i.mouse=[0,0],i.count=6,i.uniformHeader=[],i.attributeHeader=[];var a=i.event=c(i),f=i.frame=n.frame();i.lastActiveUnit=0,i.activeUnit=r.nested((function(){return i.lastActiveUnit++})),i.vertexStride=r.nested((function(e,n,r){var t=r?Math.max.apply(Math,r)+1:i.count,o=n.length/t<<0;return i.attributeHeader.push([e,"vertex vec"+o+" "+e+";"]),o})),i.uniformType=r.nested((function(e,n,r){var t=u(n,r),o=t[0],a=t[1];return i.uniformHeader.push([e,"uniform "+a+" "+e+";"]),o})),i.location=r.nested((function(e,n){var r,t;return void 0===n&&(n=!1),n?null==(r=i.gl)?void 0:r.getAttribLocation(i.pg,e):null==(t=i.gl)?void 0:t.getUniformLocation(i.pg,e)})),i.setDpr=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return void a.apply(void 0,["resize",{}].concat(n))||i},i.setSize=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return void a.apply(void 0,["resize",{}].concat(n))||i},i.setFrame=function(e){return void f.mount(e)||i},i.setMount=function(e){return void a.mount({mount:e})||i},i.setClean=function(e){return void a.mount({clean:e})||i},i.setConfig=r.durable((function(e,n){i[e]=n}),i),i.setUniform=r.durable((function(e,n,r){void 0===r&&(r=!1);var t=i.uniformType(e,n,r);i.setFrame((function(){r?i.gl[t](i.location(e),!1,n):i.gl[t](i.location(e),n)}))}),i),i.setAttribute=r.durable((function(e){for(var n=arguments.length,r=new Array(n>1?n-1:0),t=1;t<n;t++)r[t-1]=arguments[t];var o=i.vertexStride.apply(i,[e].concat(r));i.setFrame((function(){l.apply(void 0,[i.gl,o,i.location(e,!0)].concat(r))}))}),i),i.setTexture=r.durable((function(e,n){var r=new Image;r.addEventListener("load",(function(e){return a("load",e,r)}),!1),Object.assign(r,{src:n,alt:e,crossOrigin:"anonymous"})}),i),i.mount=a.on("mount"),i.clean=a.on("clean"),i.clear=function(e){return i.gl.clear(i.gl[e||"COLOR_BUFFER_BIT"])},i.viewport=function(e){var n;return(n=i.gl).viewport.apply(n,[0,0].concat(e||i.size))},i.drawArrays=function(e){return void 0===e&&(e="TRIANGLES"),i.gl.drawArrays(i.gl[e],0,i.count)},i.drawElements=function(e,n){return void 0===e&&(e="TRIANGLES"),void 0===n&&(n="UNSIGNED_SHORT"),i.gl.drawElements(i.gl[e],i.count,i.gl[n],0)};for(var m=arguments.length,g=new Array(m>1?m-1:0),E=1;E<m;E++)g[E-1]=arguments[E];return o(e)&&(e=t(e,g)),"string"==typeof e&&(i.frag=e),"object"==typeof e&&i.setConfig(e),6===i.count&&i.setAttribute({a_position:s}),i};m.default=null,e.default=m,e.gl=m,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("reev"),require("refr")):"function"==typeof define&&define.amd?define(["exports","reev","refr"],r):r(((e="undefined"!=typeof globalThis?globalThis:e||self).index=e.index||{},e.index.ts={}),e.reev,e.refr)}(this,(function(e,r,n){"use strict";function t(e,r,n){var t=e.createShader(n);if(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS))return t;console.warn(e.getShaderInfoLog(t))}var i=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],o=performance.now(),a=0,u=0,f=r.event({vertex:"\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",fragment:"\n  precision mediump float;\n  uniform vec2 iResolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);\n  }\n",size:[0,0],mouse:[0,0],count:6,counter:0,init:function(e){var o=f.gl,a=f.vs||f.vert||f.vertex,u=f.fs||f.frag||f.fragment,l=t(o,a,o.VERTEX_SHADER),c=t(o,u,o.FRAGMENT_SHADER);6===f.count&&f.attribute({a_position:i}),n.frame((function(){return void f.render()||1})),f.pg=e?function(e,r,n,t){var i=e.createProgram();return e.attachShader(i,r),e.attachShader(i,n),e.transformFeedbackVaryings(i,t,e.SEPARATE_ATTRIBS),e.linkProgram(i),e.getProgramParameter(i,e.LINK_STATUS)?(e.useProgram(i),i):(console.warn(e.getProgramInfoLog(i)),null)}(o,l,c,e):function(e,r,n){var t=e.createProgram();return e.attachShader(t,r),e.attachShader(t,n),e.linkProgram(t),e.getProgramParameter(t,e.LINK_STATUS)?(e.useProgram(t),t):(console.log(e.getProgramInfoLog(t)),null)}(o,l,c),f.lastActiveUnit=0,f.activeUnit=r.nested((function(){return f.lastActiveUnit++})),f.location=r.nested((function(e,r){return void 0===r&&(r=!1),r?null==o?void 0:o.getAttribLocation(f.pg,e):null==o?void 0:o.getUniformLocation(f.pg,e)}))},render:function(){f.gl.useProgram(f.pg),f.frame.flush(),a=o,o=performance.now()/1e3,u=o-a,f.uniform({iTime:o,iPrevTime:a,iDeltaTime:u})},_uniform:function(e,r,n){void 0===r&&(r=0),void 0===n&&(n=!1);var t=function(e,r){void 0===r&&(r=!1);var n="number"==typeof e?0:null==e?void 0:e.length;return n?r?"uniformMatrix"+(n=Math.sqrt(n)<<0)+"fv":"uniform"+n+"fv":"uniform1f"}(r,n);f.frame((function(){var i=f.location(e);n?f.gl[t](i,!1,r):f.gl[t](i,r)}))},_attribute:function(e,r,n){f.frame((function(){var t=f.location(e,!0),i=function(e,r){if(r){var n=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,n),e.bufferData(e.ARRAY_BUFFER,new Float32Array(r),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),n}}(f.gl,r),o=function(e,r){if(r){var n=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,n),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(r),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),n}}(f.gl,n),a=function(e,r,n){n&&(e=Math.max.apply(Math,n)+1);var t=r.length/e;return t!==t<<0&&console.warn("Vertex Stride Error: count "+e+" is mismatch"),t<<0}(f.count,r,n);!function(e,r,n,t,i){e.bindBuffer(e.ARRAY_BUFFER,t),e.enableVertexAttribArray(n),e.vertexAttribPointer(n,r,e.FLOAT,!1,0,0),i&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,i)}(f.gl,a,t,i,o)}))},_texture:function(e,r){if("undefined"!=typeof window){var n=new Image;n.addEventListener("load",(function(e){return f.load(e,n)}),!1),Object.assign(n,{src:r,alt:e,crossOrigin:"anonymous"})}},resize:function(e,r,n){void 0===r&&(r=window.innerWidth),void 0===n&&(n=window.innerHeight),f.size[0]=f.el.width=r,f.size[1]=f.el.height=n,f.uniform("iResolution",f.size)},mousemove:function(e,r,n){void 0===r&&(r=e.clientX),void 0===n&&(n=e.clientY);var t=f.size,i=t[0],o=t[1];f.mouse[0]=(r-i/2)/(i/2),f.mouse[1]=-(n-o/2)/(o/2),f.uniform("iMouse",f.mouse)},load:function(e,r){f.frame((function(){var e=f.location(r.alt),n=f.activeUnit(r.alt),t=function(e,r){var n=e.createTexture();return e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,r),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n}(f.gl,r);f.frame((function(){return function(e,r,n,t){e.uniform1i(r,n),e.activeTexture(e["TEXTURE"+n]),e.bindTexture(e.TEXTURE_2D,t)}(f.gl,e,n,t),!0}))}))},clear:function(e){void 0===e&&(e="COLOR_BUFFER_BIT"),f.gl.clear(f.gl[e])},viewport:function(e){var r;void 0===e&&(e=f.size),(r=f.gl).viewport.apply(r,[0,0].concat(e))},drawArrays:function(e){void 0===e&&(e="TRIANGLES"),f.gl.drawArrays(f.gl[e],0,f.count)},drawElements:function(e,r){void 0===e&&(e="TRIANGLES"),void 0===r&&(r="UNSIGNED_SHORT"),f.gl.drawElements(f.gl[e],f.count,f.gl[r],0)}});f.frame=n.queue(),f.texture=r.durable(f._texture),f.uniform=r.durable(f._uniform),f.attribute=r.durable(f._attribute),e.default=f,e.gl=f,Object.defineProperty(e,"__esModule",{value:!0})}));

package/index.js

@@ -1 +1 @@
-import{frame as e}from"refr";import{event as r,nested as n,durable as t}from"reev";function o(e,r){for(var n=e[0],t=0,o=r.length;t<o;t+=1)n+=r[t]+e[t+1];return n}function i(e){return Array.isArray(e)&&"string"==typeof e[0]}function a(e,r){return e=e.replace(/\s+/g,""),r=r.replace(/\s+/g,""),-1!==e.indexOf(r)}function u(e,r,n){return void 0===n&&(n=""),""!==n&&!a(e,n)||a(e,r)?e:r+e}function f(e,r){void 0===r&&(r=!1);var n="number"==typeof e?0:e.length;return n?r?["uniformMatrix"+(n=Math.sqrt(n)<<0)+"fv","mat"+n]:["uniform"+n+"fv","vec"+n]:["uniform1f","float"]}function l(e,r,n){var t=e.createShader(n);if(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS))return t;console.warn(e.getShaderInfoLog(t))}function c(e,r,n,t,o){e.bindBuffer(e.ARRAY_BUFFER,function(e,r){if(r){var n=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,n),e.bufferData(e.ARRAY_BUFFER,new Float32Array(r),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),n}}(e,t)),e.enableVertexAttribArray(n),e.vertexAttribPointer(n,r,e.FLOAT,!1,0,0),o&&e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,function(e,r){if(r){var n=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,n),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(r),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),n}}(e,o))}var s=function(e){return r({mount:function(r){e.int&&(e.frag=u(e.frag,"precision "+e.int+" int;")),e.float&&(e.frag=u(e.frag,"precision "+e.float+" float;")),e.sampler2D&&(e.frag=u(e.frag,"precision "+e.sampler2D+" sampler2D;")),e.samplerCube&&(e.frag=u(e.frag,"precision "+e.samplerCube+" samplerCube;"));var n=e.el=document.getElementById(e.id),t=e.gl=null==n?void 0:n.getContext("webgl"),o=l(t,e.frag,null==t?void 0:t.FRAGMENT_SHADER),i=l(t,e.vert,null==t?void 0:t.VERTEX_SHADER);e.pg=function(e,r,n){var t=e.createProgram();return e.attachShader(t,r),e.attachShader(t,n),e.linkProgram(t),e.getProgramParameter(t,e.LINK_STATUS)?(e.useProgram(t),t):(console.log(e.getProgramInfoLog(t)),null)}(t,i,o),window.addEventListener("resize",r.on("resize")),window.addEventListener("mousemove",r.on("mousemove")),r("resize");var a=performance.now(),f=0,c=0;e.setFrame((function(){return f=a,a=performance.now()/1e3,c=a-f,e.setUniform({iTime:a,iPrevTime:f,iDeltaTime:c}),!0})),e.frame()},clean:function(r){window.removeEventListener("resize",r.on("resize")),window.removeEventListener("mousemove",r.on("mousemove")),e.frame.cancel()},mousemove:function(r,n){var t=n.clientX,o=n.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(t-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("iMouse",e.mouse)},resize:function(r,n,t,o){void 0===t&&(t=0),void 0===o&&(o=0),e.size[0]=e.el.width=t||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("iResolution",e.size)},load:function(r,n,t){e.setFrame((function(){var r=e.activeUnit(t.alt),n=e.location(t.alt),o=function(e,r){var n=e.createTexture();return e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,r),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n}(e.gl,t);e.setFrame((function(){return e.gl.uniform1i(n,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,o),!0}))}))}})},m=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],v="\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",g="\n  uniform vec2 resolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n  }\n",E=function(r){var a=function e(r){for(var n=arguments.length,t=new Array(n>1?n-1:0),a=1;a<n;a++)t[a-1]=arguments[a];return i(r)&&(r=o(r,t)),"string"==typeof r&&(e.frag=r),"function"==typeof r&&e.frame.mount(r),e};a.id="myCanvas",a.frag=g,a.vert=v,a.size=[0,0],a.mouse=[0,0],a.count=6,a.uniformHeader=[],a.attributeHeader=[];var u=a.event=s(a),l=a.frame=e();a.lastActiveUnit=0,a.activeUnit=n((function(){return a.lastActiveUnit++})),a.vertexStride=n((function(e,r,n){var t=n?Math.max.apply(Math,n)+1:a.count,o=r.length/t<<0;return a.attributeHeader.push([e,"vertex vec"+o+" "+e+";"]),o})),a.uniformType=n((function(e,r,n){var t=f(r,n),o=t[0],i=t[1];return a.uniformHeader.push([e,"uniform "+i+" "+e+";"]),o})),a.location=n((function(e,r){var n,t;return void 0===r&&(r=!1),r?null==(n=a.gl)?void 0:n.getAttribLocation(a.pg,e):null==(t=a.gl)?void 0:t.getUniformLocation(a.pg,e)})),a.setDpr=function(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return void u.apply(void 0,["resize",{}].concat(r))||a},a.setSize=function(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return void u.apply(void 0,["resize",{}].concat(r))||a},a.setFrame=function(e){return void l.mount(e)||a},a.setMount=function(e){return void u.mount({mount:e})||a},a.setClean=function(e){return void u.mount({clean:e})||a},a.setConfig=t((function(e,r){a[e]=r}),a),a.setUniform=t((function(e,r,n){void 0===n&&(n=!1);var t=a.uniformType(e,r,n);a.setFrame((function(){n?a.gl[t](a.location(e),!1,r):a.gl[t](a.location(e),r)}))}),a),a.setAttribute=t((function(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),t=1;t<r;t++)n[t-1]=arguments[t];var o=a.vertexStride.apply(a,[e].concat(n));a.setFrame((function(){c.apply(void 0,[a.gl,o,a.location(e,!0)].concat(n))}))}),a),a.setTexture=t((function(e,r){var n=new Image;n.addEventListener("load",(function(e){return u("load",e,n)}),!1),Object.assign(n,{src:r,alt:e,crossOrigin:"anonymous"})}),a),a.mount=u.on("mount"),a.clean=u.on("clean"),a.clear=function(e){return a.gl.clear(a.gl[e||"COLOR_BUFFER_BIT"])},a.viewport=function(e){var r;return(r=a.gl).viewport.apply(r,[0,0].concat(e||a.size))},a.drawArrays=function(e){return void 0===e&&(e="TRIANGLES"),a.gl.drawArrays(a.gl[e],0,a.count)},a.drawElements=function(e,r){return void 0===e&&(e="TRIANGLES"),void 0===r&&(r="UNSIGNED_SHORT"),a.gl.drawElements(a.gl[e],a.count,a.gl[r],0)};for(var E=arguments.length,d=new Array(E>1?E-1:0),T=1;T<E;T++)d[T-1]=arguments[T];return i(r)&&(r=o(r,d)),"string"==typeof r&&(a.frag=r),"object"==typeof r&&a.setConfig(r),6===a.count&&a.setAttribute({a_position:m}),a};E.default=null;export{E as default,E as gl};
+import{event as r,nested as e,durable as n}from"reev";import{frame as t,queue as i}from"refr";function o(r,e,n){var t=r.createShader(n);if(r.shaderSource(t,e),r.compileShader(t),r.getShaderParameter(t,r.COMPILE_STATUS))return t;console.warn(r.getShaderInfoLog(t))}var a=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],u=performance.now(),f=0,c=0,l=r({vertex:"\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",fragment:"\n  precision mediump float;\n  uniform vec2 iResolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);\n  }\n",size:[0,0],mouse:[0,0],count:6,counter:0,init:function(r){var n=l.gl,i=l.vs||l.vert||l.vertex,u=l.fs||l.frag||l.fragment,f=o(n,i,n.VERTEX_SHADER),c=o(n,u,n.FRAGMENT_SHADER);6===l.count&&l.attribute({a_position:a}),t((function(){return void l.render()||1})),l.pg=r?function(r,e,n,t){var i=r.createProgram();return r.attachShader(i,e),r.attachShader(i,n),r.transformFeedbackVaryings(i,t,r.SEPARATE_ATTRIBS),r.linkProgram(i),r.getProgramParameter(i,r.LINK_STATUS)?(r.useProgram(i),i):(console.warn(r.getProgramInfoLog(i)),null)}(n,f,c,r):function(r,e,n){var t=r.createProgram();return r.attachShader(t,e),r.attachShader(t,n),r.linkProgram(t),r.getProgramParameter(t,r.LINK_STATUS)?(r.useProgram(t),t):(console.log(r.getProgramInfoLog(t)),null)}(n,f,c),l.lastActiveUnit=0,l.activeUnit=e((function(){return l.lastActiveUnit++})),l.location=e((function(r,e){return void 0===e&&(e=!1),e?null==n?void 0:n.getAttribLocation(l.pg,r):null==n?void 0:n.getUniformLocation(l.pg,r)}))},render:function(){l.gl.useProgram(l.pg),l.frame.flush(),f=u,u=performance.now()/1e3,c=u-f,l.uniform({iTime:u,iPrevTime:f,iDeltaTime:c})},_uniform:function(r,e,n){void 0===e&&(e=0),void 0===n&&(n=!1);var t=function(r,e){void 0===e&&(e=!1);var n="number"==typeof r?0:null==r?void 0:r.length;return n?e?"uniformMatrix"+(n=Math.sqrt(n)<<0)+"fv":"uniform"+n+"fv":"uniform1f"}(e,n);l.frame((function(){var i=l.location(r);n?l.gl[t](i,!1,e):l.gl[t](i,e)}))},_attribute:function(r,e,n){l.frame((function(){var t=l.location(r,!0),i=function(r,e){if(e){var n=r.createBuffer();return r.bindBuffer(r.ARRAY_BUFFER,n),r.bufferData(r.ARRAY_BUFFER,new Float32Array(e),r.STATIC_DRAW),r.bindBuffer(r.ARRAY_BUFFER,null),n}}(l.gl,e),o=function(r,e){if(e){var n=r.createBuffer();return r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,n),r.bufferData(r.ELEMENT_ARRAY_BUFFER,new Int16Array(e),r.STATIC_DRAW),r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,null),n}}(l.gl,n),a=function(r,e,n){n&&(r=Math.max.apply(Math,n)+1);var t=e.length/r;return t!==t<<0&&console.warn("Vertex Stride Error: count "+r+" is mismatch"),t<<0}(l.count,e,n);!function(r,e,n,t,i){r.bindBuffer(r.ARRAY_BUFFER,t),r.enableVertexAttribArray(n),r.vertexAttribPointer(n,e,r.FLOAT,!1,0,0),i&&r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,i)}(l.gl,a,t,i,o)}))},_texture:function(r,e){if("undefined"!=typeof window){var n=new Image;n.addEventListener("load",(function(r){return l.load(r,n)}),!1),Object.assign(n,{src:e,alt:r,crossOrigin:"anonymous"})}},resize:function(r,e,n){void 0===e&&(e=window.innerWidth),void 0===n&&(n=window.innerHeight),l.size[0]=l.el.width=e,l.size[1]=l.el.height=n,l.uniform("iResolution",l.size)},mousemove:function(r,e,n){void 0===e&&(e=r.clientX),void 0===n&&(n=r.clientY);var t=l.size,i=t[0],o=t[1];l.mouse[0]=(e-i/2)/(i/2),l.mouse[1]=-(n-o/2)/(o/2),l.uniform("iMouse",l.mouse)},load:function(r,e){l.frame((function(){var r=l.location(e.alt),n=l.activeUnit(e.alt),t=function(r,e){var n=r.createTexture();return r.bindTexture(r.TEXTURE_2D,n),r.texImage2D(r.TEXTURE_2D,0,r.RGBA,r.RGBA,r.UNSIGNED_BYTE,e),r.generateMipmap(r.TEXTURE_2D),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MIN_FILTER,r.LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_MAG_FILTER,r.LINEAR),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_S,r.CLAMP_TO_EDGE),r.texParameteri(r.TEXTURE_2D,r.TEXTURE_WRAP_T,r.CLAMP_TO_EDGE),r.bindTexture(r.TEXTURE_2D,null),n}(l.gl,e);l.frame((function(){return function(r,e,n,t){r.uniform1i(e,n),r.activeTexture(r["TEXTURE"+n]),r.bindTexture(r.TEXTURE_2D,t)}(l.gl,r,n,t),!0}))}))},clear:function(r){void 0===r&&(r="COLOR_BUFFER_BIT"),l.gl.clear(l.gl[r])},viewport:function(r){var e;void 0===r&&(r=l.size),(e=l.gl).viewport.apply(e,[0,0].concat(r))},drawArrays:function(r){void 0===r&&(r="TRIANGLES"),l.gl.drawArrays(l.gl[r],0,l.count)},drawElements:function(r,e){void 0===r&&(r="TRIANGLES"),void 0===e&&(e="UNSIGNED_SHORT"),l.gl.drawElements(l.gl[r],l.count,l.gl[e],0)}});l.frame=i(),l.texture=n(l._texture),l.uniform=n(l._uniform),l.attribute=n(l._attribute);export{l as default,l as gl};

package/index.ts

@@ -1,120 +1,158 @@
-import { frame } from 'refr'
-import { glEvent } from './events'
-import { durable, nested } from 'reev'
-import { createAttribute, interleave, isTemplateLiteral, switchUniformType } from './utils'
+import { event, durable, nested } from 'reev'
+import { queue, frame } from 'refr'
+import {
+        uniformType,
+        vertexStride,
+        createProgram,
+        createTfProgram,
+        createShader,
+        createAttribute,
+        createTexture,
+        createVbo,
+        createIbo,
+        activeTexture,
+} from './utils'
 import type { GL } from './types'
 
-const a_position = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
+const a_position = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]
 
-const _defaultVertexShader = `
+const _defaultVertex = `
   attribute vec4 a_position;
   void main() {
     gl_Position = a_position;
   }
 `
 
-const _defaultFragmentShader = `
-  uniform vec2 resolution;
+const _defaultFragment = `
+  precision mediump float;
+  uniform vec2 iResolution;
   void main() {
-    gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);
+    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
   }
 `
 
-export const gl = (initArg?: Partial<GL>, ...initArgs: any[]) => {
-        const self = ((arg: any, ...args: any[]) => {
-                if (isTemplateLiteral(arg)) arg = interleave(arg, args)
-                if (typeof arg === 'string') self.frag = arg
-                if (typeof arg === 'function') self.frame.mount(arg)
-                return self
-        }) as GL
-
-        // default state
-        self.id = 'myCanvas' // @TODO feat: create hashid
-        self.frag = _defaultFragmentShader;
-        self.vert = _defaultVertexShader;
-        // self.float = "mediump" // @TODO check bugs
-        self.size = [0, 0]
-        self.mouse = [0, 0]
-        self.count = 6
-        self.uniformHeader = []
-        self.attributeHeader = []
-
-        // core state
-        const ev = (self.event = glEvent(self))
-        const fr = (self.frame = frame())
-        self.lastActiveUnit = 0
-        self.activeUnit = nested(() => self.lastActiveUnit++)
-        self.vertexStride = nested((key, value, iboValue) => {
-                const count = iboValue ? Math.max(...iboValue) + 1 : self.count;
-                const stride = (value.length / count) << 0
-                self.attributeHeader.push([key, `vertex vec${stride} ${key};`])
-                return stride
-        })
-
-        self.uniformType = nested((key, value, isMatrix) => {
-                const [type, code] = switchUniformType(value, isMatrix)
-                self.uniformHeader.push([key, `uniform ${code} ${key};`])
-                return type
-        })
-
-        self.location = nested((key, isAttribute = false) => {
-                return isAttribute
-                        ? self.gl?.getAttribLocation(self.pg, key)
-                        : self.gl?.getUniformLocation(self.pg, key)
-        })
-
-        // setter
-        self.setDpr = (...args) => void ev('resize', {}, ...args) || self
-        self.setSize = (...args) => void ev('resize', {}, ...args) || self
-        self.setFrame = (frame) => void fr.mount(frame) || self
-        self.setMount = (mount) => void ev.mount({ mount }) || self
-        self.setClean = (clean) => void ev.mount({ clean }) || self
-        self.setConfig = durable((key, value) => void (self[key] = value), self)
-
-        // uniform
-        self.setUniform = durable((key, value, isMatrix = false) => {
-                const type = self.uniformType(key, value, isMatrix)
-                self.setFrame(() => {
-                        if (isMatrix)
-                                self.gl[type](self.location(key), false, value)
-                        else self.gl[type](self.location(key), value)
+let iTime = performance.now(),
+        iPrevTime = 0,
+        iDeltaTime = 0
+
+const self = event<Partial<GL>>({
+        vertex: _defaultVertex,
+        fragment: _defaultFragment,
+        size: [0, 0],
+        mouse: [0, 0],
+        count: 6,
+        counter: 0,
+        init(varying?: string[]) {
+                const gl = self.gl
+                const _v = self.vs || self.vert || self.vertex
+                const _f = self.fs || self.frag || self.fragment
+                const vs = createShader(gl, _v, gl.VERTEX_SHADER)
+                const fs = createShader(gl, _f, gl.FRAGMENT_SHADER)
+                if (self.count === 6) self.attribute({ a_position })
+                frame(() => void self.render() || 1)
+                self.pg = varying
+                        ? createTfProgram(gl, vs, fs, varying)
+                        : createProgram(gl, vs, fs)
+                self.lastActiveUnit = 0
+                self.activeUnit = nested(() => self.lastActiveUnit++)
+                self.location = nested((key, isAttribute = false) => {
+                        return isAttribute
+                                ? gl?.getAttribLocation(self.pg, key)
+                                : gl?.getUniformLocation(self.pg, key)
                 })
-        }, self)
-
-        // attribute
-        self.setAttribute = durable((key, ...args) => {
-                const stride = self.vertexStride(key, ...args)
-                self.setFrame(() => {
-                        createAttribute(self.gl, stride, self.location(key, true), ...args)
+        },
+        render() {
+                self.gl.useProgram(self.pg)
+                self.frame.flush()
+                iPrevTime = iTime
+                iTime = performance.now() / 1000
+                iDeltaTime = iTime - iPrevTime
+                self.uniform({ iTime, iPrevTime, iDeltaTime })
+        },
+        _uniform(key: string, value = 0, isMatrix = false) {
+                const type = uniformType(value, isMatrix)
+                self.frame(() => {
+                        const loc = self.location(key)
+                        if (isMatrix) self.gl[type](loc, false, value)
+                        else self.gl[type](loc, value)
                 })
-        }, self)
-
-        // texture
-        self.setTexture = durable((key, src) => {
+        },
+        _attribute(key: string, value: number[], iboValue?: number[]) {
+                self.frame(() => {
+                        const loc = self.location(key, true)
+                        const vbo = createVbo(self.gl, value)
+                        const ibo = createIbo(self.gl, iboValue)
+                        const stride = vertexStride(self.count, value, iboValue)
+                        createAttribute(self.gl, stride, loc, vbo, ibo)
+                })
+        },
+        _texture(key: string, src: string) {
+                if (typeof window === 'undefined') return
                 const image = new Image()
-                image.addEventListener("load", (e) => ev("load", e, image), false)
-                Object.assign(image, { src, alt: key, crossOrigin: 'anonymous' })
-        }, self)
-
-        // shorthands
-        self.mount = ev.on("mount")
-        self.clean = ev.on("clean")
-        self.clear = (key) => self.gl.clear(self.gl[key || "COLOR_BUFFER_BIT"])
-        self.viewport = (size) => self.gl.viewport(0, 0, ...(size || self.size))
-        self.drawArrays = (mode = 'TRIANGLES') =>
+                image.addEventListener(
+                        'load',
+                        (_) => self.load(_, image),
+                        false
+                )
+                Object.assign(image, {
+                        src,
+                        alt: key,
+                        crossOrigin: 'anonymous',
+                })
+        },
+        resize(
+                _e: any,
+                width = window.innerWidth,
+                height = window.innerHeight
+        ) {
+                self.size[0] = self.el.width = width
+                self.size[1] = self.el.height = height
+                self.uniform('iResolution', self.size)
+        },
+        mousemove(_e: any, x = _e.clientX, y = _e.clientY) {
+                const [w, h] = self.size
+                self.mouse[0] = (x - w / 2) / (w / 2)
+                self.mouse[1] = -(y - h / 2) / (h / 2)
+                self.uniform('iMouse', self.mouse)
+        },
+        load(_: any, image: any) {
+                self.frame(() => {
+                        const loc = self.location(image.alt)
+                        const unit = self.activeUnit(image.alt)
+                        const texture = createTexture(self.gl, image)
+                        self.frame(() => {
+                                activeTexture(self.gl, loc, unit, texture)
+                                return true
+                        })
+                })
+        },
+        clear(key = 'COLOR_BUFFER_BIT') {
+                self.gl.clear(self.gl[key])
+        },
+        viewport(size: number[] = self.size) {
+                self.gl.viewport(0, 0, ...size)
+        },
+        drawArrays(mode = 'TRIANGLES') {
                 self.gl.drawArrays(self.gl[mode], 0, self.count)
-        self.drawElements = (mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') =>
-                self.gl.drawElements(self.gl[mode], self.count, self.gl[type], 0)
-
-        // init config
-        if (isTemplateLiteral(initArg)) initArg = interleave(initArg, initArgs)
-        if (typeof initArg === "string") self.frag = initArg
-        if (typeof initArg === "object") self.setConfig(initArg)
-        if (self.count === 6) self.setAttribute({ a_position })
-
-        return self;
-}
-
-gl.default = null as unknown as GL
-
-export default gl
+        },
+        drawElements(mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') {
+                self.gl.drawElements(
+                        self.gl[mode],
+                        self.count,
+                        self.gl[type],
+                        0
+                )
+        },
+}) as GL
+
+self.frame = queue()
+self.texture = durable(self._texture)
+self.uniform = durable(self._uniform)
+self.attribute = durable(self._attribute)
+
+// @TODO
+// export const clone = gl.clone()
+
+export { self as gl }
+
+export default self

package/native.ts

@@ -0,0 +1,64 @@
+import { useEffect, useMemo } from 'react'
+import { Dimensions } from 'react-native'
+import { useMutable } from 'reev/react'
+import { gl } from './index'
+import { frame } from 'refr'
+import type { GL } from './types'
+import type { Fun } from 'refr'
+
+export const useGLEvent = <T>(props: Partial<GL & T> = {}, self = gl) => {
+        const memo = useMutable(props) as Partial<GL>
+        return useMemo(() => self(memo), [])
+}
+
+export const useGL = (props: Partial<GL> = {}, self = gl) => {
+        const memo = useMutable(props) as Partial<GL>
+        return useGLEvent({
+                ref(gl: any) {
+                        self(memo)
+                        self.el = {}
+                        self.gl = gl
+                        self.mount()
+                },
+                mount() {
+                        const {
+                                drawingBufferWidth: width,
+                                drawingBufferHeight: height,
+                        } = self.gl
+                        self.size = [width, height]
+                        self.init()
+                        self.resize(void 0, width, height)
+                        Dimensions.addEventListener('change', self.change)
+                        frame.start()
+                },
+                clean() {
+                        frame.cancel()
+                },
+                change() {
+                        const {
+                                drawingBufferWidth: width,
+                                drawingBufferHeight: height,
+                        } = self.gl
+                        self.resize(void 0, width, height)
+                },
+        })
+}
+
+export function useTexture(props: any, self = gl) {
+        return self.texture(props)
+}
+
+export function useAttribute(props: any, self = gl) {
+        return self.attribute(props)
+}
+
+export function useUniform(props: any, self = gl) {
+        return self.uniform(props)
+}
+
+export function useFrame(fun: Fun, self = gl) {
+        const ref = useMutable(fun)
+        useEffect(() => self.frame(fun), [])
+        useEffect(() => () => self.frame(ref), [])
+        return self
+}

package/package.json

@@ -1,43 +1,67 @@
 {
-  "name": "glre",
-  "author": "tseijp",
-  "license": "MIT",
-  "version": "0.12.0",
-  "module": "index.js",
-  "types": "index.ts",
-  "main": "index.cjs.js",
-  "umd": "index.develop.js",
-  "private": false,
-  "sideEffect": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "reev": "0.3.0",
-    "refr": "0.2.0"
-  },
-  "keywords": [
-    "glsl",
-    "webgl",
-    "hooks",
-    "react",
-    "reactjs",
-    "reactive",
-    "solid",
-    "solidjs",
-    "typescript"
-  ],
-  "files": [
-    "index.js",
-    "index.cjs.js",
-    "index.develop.js",
-    "index.product.js",
-    "index.ts",
-    "events.ts",
-    "helpers.ts",
-    "react.ts",
-    "solid.ts",
-    "types.ts",
-    "utils.ts"
-  ]
+        "name": "glre",
+        "author": "tseijp",
+        "license": "MIT",
+        "version": "0.14.0",
+        "module": "index.js",
+        "types": "index.ts",
+        "main": "index.cjs.js",
+        "umd": "index.develop.js",
+        "private": false,
+        "sideEffect": false,
+        "publishConfig": {
+                "access": "public"
+        },
+        "dependencies": {
+                "reev": "0.10.0",
+                "refr": "0.3.0"
+        },
+        "keywords": [
+                "glsl",
+                "webgl",
+                "hooks",
+                "react",
+                "reactjs",
+                "reactive",
+                "solid",
+                "solidjs",
+                "typescript"
+        ],
+        "peerDependencies": {
+                "expo": "*",
+                "expo-gl": "*",
+                "react": ">=16.8",
+                "react-dom": ">=16.8",
+                "solid-js": "*"
+        },
+        "peerDependenciesMeta": {
+                "expo": {
+                        "optional": true
+                },
+                "expo-gl": {
+                        "optional": true
+                },
+                "react": {
+                        "optional": true
+                },
+                "react-dom": {
+                        "optional": true
+                },
+                "solid-js": {
+                        "optional": true
+                }
+        },
+        "files": [
+                "index.js",
+                "index.cjs.js",
+                "index.develop.js",
+                "index.product.js",
+                "index.ts",
+                "native.ts",
+                "qwik.ts",
+                "react.ts",
+                "solid.ts",
+                "types.ts",
+                "utils.ts"
+        ]
 }

package/qwik.ts

@@ -0,0 +1,42 @@
+import { useSignal, useVisibleTask$, $ } from '@builder.io/qwik'
+import { gl } from './index'
+import { frame } from 'refr'
+import type { GL } from './types'
+import type { Fun } from 'reev/types'
+
+export function useGL(props?: any, self = $(gl) as unknown as GL) {
+        const ref = useSignal<Element>()
+        useVisibleTask$(({ cleanup }) => {
+                self(props)
+                self.el = self.target = ref.value
+                self.gl = self.target.getContext('webgl2')
+                self.init()
+                self.resize()
+                frame.start()
+                window.addEventListener('resize', self.resize)
+                window.addEventListener('mousemove', self.mousemove)
+                cleanup(() => {
+                        self.clean()
+                        window.removeEventListener('resize', self.resize)
+                        window.removeEventListener('mousemove', self.mousemove)
+                })
+        })
+        return self
+}
+
+export function useTexture(props: any, self = gl) {
+        return self?.texture(props)
+}
+
+export function useAttribute(props: any, self = gl) {
+        return self.attribute(props)
+}
+
+export function useUniform(props: any, self = gl) {
+        return self.uniform(props)
+}
+
+export function useFrame(fun: Fun, self = gl) {
+        useTask$(() => self.frame(fun))
+        return self
+}

package/react.ts

@@ -1,40 +1,59 @@
+import { useState, useEffect, useMemo } from 'react'
 import { gl } from './index'
+import { frame } from 'refr'
+import { mutable } from 'reev'
 import type { GL } from './types'
-import { useRef, useMemo, useEffect, useCallback } from 'react'
+import type { Fun } from 'refr'
+import type { MutableArgs } from 'reev/types'
 
-export function useGL(config?: Partial<GL>, target?: GL) {
-        const self = useMemo(() => {
-                if (target) return target
-                return (gl.default = gl(target))
-        }, [target])
-        useEffect(() => void self.setConfig(config), [self, config])
-        useEffect(() => void self.event('mount'), [self])
-        useEffect(() => () => self.event('clean'), [self])
-        return self
+export const useMutable = <T extends object>(...args: MutableArgs<T>) => {
+        const [memo] = useState(() => mutable<T>())
+        return memo(...args)
 }
 
-export function useTexture(props, self?: GL) {
-        if (!self) self = gl.default
-        useEffect(() => self.setTexture(props), [props, self])
+export const useGL = (props: Partial<GL> = {}, self = gl) => {
+        const memo1 = useMutable(props) as Partial<GL>
+        const memo2 = useMutable({
+                ref(target: unknown) {
+                        if (target) {
+                                self.target = target
+                                self.mount()
+                        } else self.clean()
+                },
+                mount() {
+                        self.el = self.target
+                        self.gl = self.target.getContext('webgl2')
+                        self.init()
+                        self.resize()
+                        frame.start()
+                        window.addEventListener('resize', self.resize)
+                        window.addEventListener('mousemove', self.mousemove)
+                },
+                clean() {
+                        frame.cancel()
+                        window.removeEventListener('resize', self.resize)
+                        window.removeEventListener('mousemove', self.mousemove)
+                },
+        }) as Partial<GL>
+
+        return useMemo(() => self(memo2)(memo1), [self, memo1, memo2])
 }
 
-export function useAttribute(props, self?: GL) {
-        if (!self) self = gl.default
-        return self.setAttribute(props)
+export function useTexture(props: any, self = gl) {
+        return self.texture(props)
 }
 
-export function useUniform(props, self?: GL) {
-        if (!self) self = gl.default
-        return self.setUniform(props)
+export function useAttribute(props: any, self = gl) {
+        return self.attribute(props)
 }
 
-export function useFrame(fun, self?: GL) {
-        if (!self) self = gl.default
-        const ref = useMutable(fun)
-        useEffect(() => void self.setFrame(ref), [ref, self])
+export function useUniform(props: any, self = gl) {
+        return self.uniform(props)
 }
 
-export function useMutable(fun) {
-        const ref = useRef(fun)
-        return useCallback(() => ref.current(), [])
-}
+export function useFrame(fun: Fun, self = gl) {
+        const ref = useMutable(fun)
+        useEffect(() => self.frame(fun), [])
+        useEffect(() => () => self.frame(ref), [])
+        return self
+}

package/solid.ts

@@ -1,25 +1,45 @@
-import { gl } from './index'
-import type { GL } from './types'
 import { onMount, onCleanup } from 'solid-js'
+import { frame } from 'refr'
+import { gl } from './index'
+import type { Fun } from 'reev/types'
 
-export function createGL(config: Partial<GL>, _gl?: GL) {
-        const self = _gl || (gl.default = gl(config))
-        onMount(() => self.event('mount'))
-        onCleanup(() => self.event('clean'))
-        return self
+export function createGL(props?: any, self = gl) {
+        onCleanup(self.clean)
+
+        return self({
+                ref(target: unknown) {
+                        if (target) {
+                                self.target = target
+                                self.mount()
+                        }
+                },
+                mount() {
+                        self(props)
+                        self.el = self.target
+                        self.gl = self.target.getContext('webgl2')
+                        self.init()
+                        self.resize()
+                        frame.start()
+                        window.addEventListener('resize', self.resize)
+                        window.addEventListener('mousemove', self.mousemove)
+                },
+                clean() {
+                        self(props)
+                        frame.cancel()
+                        window.removeEventListener('resize', self.resize)
+                        window.removeEventListener('mousemove', self.mousemove)
+                },
+        })
 }
 
-export function onFrame(fun: any, self: GL) {
-        if (!self) self = gl.default
-        onMount(() => self.setFrame(fun))
+export function onFrame(fun: Fun, self = gl) {
+        onMount(() => self('render', fun))
 }
 
-export function setTexture(props, self?: GL) {
-        if (!self) self = gl.default
-        return self.setTexture(props)
+export function setTexture(props: any, self = gl) {
+        return self.texture(props)
 }
 
-export function setAttribute(props, self?: GL) {
-        if (!self) self = gl.default
-        return self.setAttribute(props)
-}
+export function setAttribute(props: any, self = gl) {
+        return self.attribute(props)
+}

package/types.ts

@@ -1,8 +1,5 @@
-/**
- * ref: https://stackoverflow.com/questions/52489261/typescript-can-i-define-an-n-length-tuple-type
- */
-import type { Frame, Fun } from 'refr'
-import type { Nested, Event } from 'reev'
+import type { Queue } from 'refr/types'
+import type { Nested, EventState } from 'reev/types'
 
 export type Uniform = number | number[]
 
@@ -12,10 +9,7 @@ export type Attributes = Record<string, Attribute>
 
 export type Uniforms = Record<string, Uniform>
 
-export interface GL {
-        (fun: Fun): GL
-        (shader: string): GL
-        (strings: TemplateStringsArray, ...args: any[]): GL
+export type GL = EventState<{
         /**
          * initial value
          */
@@ -23,71 +17,69 @@ export interface GL {
         size: [number, number]
         mouse: [number, number]
         count: number
-        frag: string
+        vs: string
+        fs: string
         vert: string
+        frag: string
+        vertex: string
+        fragment: string
         int: PrecisionMode
         float: PrecisionMode
         sampler2D: PrecisionMode
         samplerCube: PrecisionMode
         lastActiveUnit: number
-        uniformHeader: [string, string][]
-        attributeHeader: [string, string][]
+
         /**
          * core state
          */
         gl: any
         pg: any
         el: any
-        event: Event
-        frame: Frame
-        stride: Nested<number> // @TODO Nested<(key: string, value: number: number[], ibo: number[]) => number>
+        frame: Queue
+        target: any
+        stride: Nested<number>
+        // @TODO Nested<(key: string, value: number: number[], ibo: number[]) => number>
         location: Nested<any>
         activeUnit: Nested<number>
-        uniformType: Nested<string>
-        default: GL
+        default: any
+
         /**
-         * setter
+         * events
          */
-        setDpr(...args: any[]): GL
-        setSize(...args: any[]): GL
-        setFrame(frame: Fun): GL
-        setMount(frame: Fun): GL
-        setClean(frame: Fun): GL
-        setUniform(key: string, value: Uniform): GL
-        setTexture(key: string, value: string): GL
-        setAttribute(key: string, value: Attribute, iboValue?: Attribute): GL
-        setConfig<K extends keyof Partial<GL>>(key: K, value: GLConfig[K]): GL
-//         setUniform: Durable<(
-//                 key: string,
-//                 value: Uniform,
-//                 isMatrix: boolean
-//         ) => GL>,
-//         setTexture: Durable<(
-//                 key: string,
-//                 value: string,
-//                 activeUnit: number
-//         ) => GL>,
-//         setAttribute: Durable<(
-//                 key: string,
-//                 value: Attribute,
-//                 iboValue: Attribute
-//         ) => GL>,
-//         setConfig: Durable<<K extends keyof GLConfig>(
-//                 key: K,
-//                 value: GLConfig[K]
-//         ) => GL>,
+        ref?: any
+        init(varying?: string[]): void
         mount(): void
         clean(): void
+        render(): void
+        mousemove(e: Event): void
+        resize(e?: Event, width?: number, height?: number): void
+        load(e?: Event, image?: HTMLImageElement): void
+
+        /**
+         * setter
+         */
+        _uniform(key: string, value: Uniform): GL
+        uniform(key: string, value: Uniform): GL
+        uniform(target: { [key: string]: Uniform }): GL
+        _texture(key: string, value: string): GL
+        texture(key: string, value: string): GL
+        texture(target: { [key: string]: string }): GL
+        _attribute(key: string, value: Attribute, iboValue?: Attribute): GL
+        attribute(key: string, value: Attribute, iboValue?: Attribute): GL
+        attribute(target: { [key: string]: Attribute }): GL
+        // config(key?: keyof GL, value?: GL[keyof GL]): GL
+        // config(target?: Partial<GL>): GL
+
+        /**
+         * short hands
+         */
         clear(key?: GLClearMode): void
         viewport(size?: [number, number]): void
         drawArrays(key?: GLDrawMode): void
         drawElements(key?: GLDrawMode): void
-}
+}>
 
-export type PrecisionMode =
-        | 'highp'
-        | 'mediump'
-        | 'lowp'
+export type PrecisionMode = 'highp' | 'mediump' | 'lowp'
 
 export type GLClearMode =
         | 'COLOR_BUFFER_BIT'
@@ -103,7 +95,4 @@ export type GLDrawMode =
         | 'TRIANGLE_FAN'
         | 'TRIANGLES'
 
-export type GLDrawType =
-        | 'UNSIGNED_BYTE'
-        | 'UNSIGNED_SHORT'
-        | 'UNSIGNED_INT'
+export type GLDrawType = 'UNSIGNED_BYTE' | 'UNSIGNED_SHORT' | 'UNSIGNED_INT'

package/utils.ts

@@ -1,42 +1,30 @@
 /**
  * utils
  */
-export function interleave(strings: readonly string[], args: any[]) {
-        let result = strings[0]
-        for (let i = 0, len = args.length; i < len; i += 1)
-                result += args[i] + strings[i + 1]
-        return result
+export function uniformType(value: number | number[], isMatrix = false) {
+        let length = typeof value === 'number' ? 0 : value?.length
+        if (!length) return `uniform1f`
+        if (!isMatrix) return `uniform${length}fv`
+        length = Math.sqrt(length) << 0
+        return `uniformMatrix${length}fv`
 }
 
-export function isTemplateLiteral(strings: unknown): strings is string[] {
-        return Array.isArray(strings) && typeof strings[0] === "string"
-}
-
-export function include(source: string, target: string) {
-        source = source.replace(/\s+/g, '')
-        target = target.replace(/\s+/g, '')
-        return source.indexOf(target) !== -1
-}
-
-export function concat(source: string, target: string, key = "") {
-        if (key === "" || include(source, key))
-                if (!include(source, target))
-                        return target + source
-        return source
-}
-
-export function switchUniformType(value: unknown, isMatrix = false) {
-        let length = typeof value === "number" ? 0 : (value as any[]).length
-        if (!length)  return [`uniform1f`, `float`]
-        if (!isMatrix)  return [`uniform${length}fv`, `vec${length}`]
-        length = Math.sqrt(length) << 0;
-        return [`uniformMatrix${length}fv`, `mat${length}`]
+export function vertexStride(
+        count: number,
+        value: number[],
+        iboValue?: number[]
+) {
+        if (iboValue) count = Math.max(...iboValue) + 1
+        const stride = value.length / count
+        if (stride !== stride << 0)
+                console.warn(`Vertex Stride Error: count ${count} is mismatch`)
+        return stride << 0
 }
 
 /**
  * graphics
  */
-export function createShader(gl, source, type) {
+export function createShader(gl: any, source: string, type: unknown) {
         const shader = gl.createShader(type)
         gl.shaderSource(shader, source)
         gl.compileShader(shader)
@@ -45,7 +33,7 @@ export function createShader(gl, source, type) {
         } else console.warn(gl.getShaderInfoLog(shader))
 }
 
-export function createProgram(gl, vs, fs) {
+export function createProgram(gl: any, vs: any, fs: any) {
         const program = gl.createProgram()
         gl.attachShader(program, vs)
         gl.attachShader(program, fs)
@@ -59,7 +47,22 @@ export function createProgram(gl, vs, fs) {
         }
 }
 
-export function createVbo(gl, data) {
+export function createTfProgram(gl: any, vs: any, fs: any, varyings?: any) {
+        const pg = gl.createProgram()
+        gl.attachShader(pg, vs)
+        gl.attachShader(pg, fs)
+        gl.transformFeedbackVaryings(pg, varyings, gl.SEPARATE_ATTRIBS)
+        gl.linkProgram(pg)
+        if (gl.getProgramParameter(pg, gl.LINK_STATUS)) {
+                gl.useProgram(pg)
+                return pg
+        } else {
+                console.warn(gl.getProgramInfoLog(pg))
+                return null
+        }
+}
+
+export function createVbo(gl: any, data: number[]) {
         if (!data) return
         const vbo = gl.createBuffer()
         gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
@@ -68,62 +71,121 @@ export function createVbo(gl, data) {
         return vbo
 }
 
-export function createIbo(gl, data) {
+export function createIbo(gl: any, data?: number[]) {
         if (!data) return
         const ibo = gl.createBuffer()
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo)
-        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Int16Array(data), gl.STATIC_DRAW)
+        gl.bufferData(
+                gl.ELEMENT_ARRAY_BUFFER,
+                new Int16Array(data),
+                gl.STATIC_DRAW
+        )
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null)
         return ibo
 }
 
-export function createAttribute(gl, stride, location, value, iboValue) {
-        gl.bindBuffer(gl.ARRAY_BUFFER, createVbo(gl, value))
+export function createAttribute(
+        gl: any,
+        stride: number,
+        location: any,
+        vbo: any,
+        ibo: any
+) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
         gl.enableVertexAttribArray(location)
         gl.vertexAttribPointer(location, stride, gl.FLOAT, false, 0, 0)
-        if (iboValue)
-                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, createIbo(gl, iboValue))
+        if (ibo) gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo)
 }
 
-export function createFramebuffer(gl, width, height) {
+export function createFramebuffer(gl: any, width: number, height: number) {
         const frameBuffer = gl.createFramebuffer()
         gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
         const renderBuffer = gl.createRenderbuffer()
         gl.bindRenderbuffer(gl.RENDERBUFFER, renderBuffer)
-        gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height)
-        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderBuffer)
+        gl.renderbufferStorage(
+                gl.RENDERBUFFER,
+                gl.DEPTH_COMPONENT16,
+                width,
+                height
+        )
+        gl.framebufferRenderbuffer(
+                gl.FRAMEBUFFER,
+                gl.DEPTH_ATTACHMENT,
+                gl.RENDERBUFFER,
+                renderBuffer
+        )
         const texture = gl.createTexture()
         gl.bindTexture(gl.TEXTURE_2D, texture)
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+        gl.texImage2D(
+                gl.TEXTURE_2D,
+                0,
+                gl.RGBA,
+                width,
+                height,
+                0,
+                gl.RGBA,
+                gl.UNSIGNED_BYTE,
+                null
+        )
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
+        gl.framebufferTexture2D(
+                gl.FRAMEBUFFER,
+                gl.COLOR_ATTACHMENT0,
+                gl.TEXTURE_2D,
+                texture,
+                0
+        )
         gl.bindTexture(gl.TEXTURE_2D, null)
         gl.bindRenderbuffer(gl.RENDERBUFFER, null)
         gl.bindFramebuffer(gl.FRAMEBUFFER, null)
         return { frameBuffer, renderBuffer, texture }
 }
 
-export function createFramebufferFloat(gl, ext, width, height) {
-        const flg = (ext.textureFloat != null) ? gl.FLOAT : ext.textureHalfFloat.HALF_FLOAT_OES
+export function createFramebufferFloat(
+        gl: any,
+        ext: any,
+        width: number,
+        height: number
+) {
+        const flg =
+                ext.textureFloat != null
+                        ? gl.FLOAT
+                        : ext.textureHalfFloat.HALF_FLOAT_OES
         const frameBuffer = gl.createFramebuffer()
         const texture = gl.createTexture()
         gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
         gl.bindTexture(gl.TEXTURE_2D, texture)
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, flg, null)
+        gl.texImage2D(
+                gl.TEXTURE_2D,
+                0,
+                gl.RGBA,
+                width,
+                height,
+                0,
+                gl.RGBA,
+                flg,
+                null
+        )
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0)
+        gl.framebufferTexture2D(
+                gl.FRAMEBUFFER,
+                gl.COLOR_ATTACHMENT0,
+                gl.TEXTURE_2D,
+                texture,
+                0
+        )
         gl.bindTexture(gl.TEXTURE_2D, null)
         gl.bindFramebuffer(gl.FRAMEBUFFER, null)
         return { frameBuffer, texture }
 }
 
-export function createTexture(gl, img) {
+export function createTexture(gl: any, img: any) {
         const texture = gl.createTexture()
         gl.bindTexture(gl.TEXTURE_2D, texture)
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
@@ -134,4 +196,15 @@ export function createTexture(gl, img) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
         gl.bindTexture(gl.TEXTURE_2D, null)
         return texture
-}
+}
+
+export function activeTexture(
+        gl: any,
+        location: any,
+        activeUnit: any,
+        texture: any
+) {
+        gl.uniform1i(location, activeUnit)
+        gl.activeTexture(gl['TEXTURE' + activeUnit])
+        gl.bindTexture(gl.TEXTURE_2D, texture)
+}

package/events.ts

@@ -1,68 +0,0 @@
-import { event } from 'reev'
-import { createProgram, createShader, createTexture, concat } from './utils'
-import type { GL } from './types'
-
-export const glEvent = (self: GL) =>
-    event({
-            // run if canvas is mounted
-            mount(e) {
-                    // @TODO abbreviate to import uniform
-                    // self.uniformHeader.map(([key, header]) => self.frag = concat(self.frag, header, key))
-                    // self.uniformHeader.map(([key, header]) => self.frag = concat(self.vert, header, key))
-                    // self.attributeHeader.map(([key, header]) => self.vert = concat(self.vert, header, key))
-                    if (self.int) self.frag = concat(self.frag, `precision ${self.int} int;`)
-                    if (self.float) self.frag = concat(self.frag, `precision ${self.float} float;`)
-                    if (self.sampler2D) self.frag = concat(self.frag, `precision ${self.sampler2D} sampler2D;`)
-                    if (self.samplerCube) self.frag = concat(self.frag, `precision ${self.samplerCube} samplerCube;`)
-                    const el = (self.el = document.getElementById(self.id)) // @ts-ignore
-                    const gl = (self.gl = el?.getContext('webgl'))
-                    const frag = createShader(gl, self.frag, gl?.FRAGMENT_SHADER)
-                    const vert = createShader(gl, self.vert, gl?.VERTEX_SHADER)
-                    self.pg = createProgram(gl, vert, frag) // !!!
-                    window.addEventListener('resize', e.on('resize'))
-                    window.addEventListener('mousemove', e.on('mousemove'))
-                    e('resize')
-                    let iTime = performance.now(), iPrevTime = 0, iDeltaTime = 0;
-                    self.setFrame(() => {
-                            iPrevTime = iTime
-                            iTime = performance.now() / 1000
-                            iDeltaTime = iTime - iPrevTime
-                            self.setUniform({ iTime, iPrevTime, iDeltaTime })
-                            return true;
-                    })
-                    self.frame()
-            },
-            // run if canvas is cleaned
-            clean(e) {
-                    window.removeEventListener('resize', e.on('resize'))
-                    window.removeEventListener('mousemove', e.on('mousemove'))
-                    self.frame.cancel()
-            },
-            // user mousemove event
-            mousemove(_e, { clientX, clientY }) {
-                    const [w, h] = self.size
-                    self.mouse[0] = (clientX - w / 2) / (w / 2)
-                    self.mouse[1] = -(clientY - h / 2) / (h / 2)
-                    self.setUniform('iMouse', self.mouse)
-            },
-            // user mousemove event
-            resize(_e, _resizeEvent, width = 0, height = 0) {
-                    self.size[0] = self.el.width = width || window.innerWidth
-                    self.size[1] = self.el.height = height || window.innerHeight
-                    self.setUniform('iResolution', self.size)
-            },
-            // load image event
-            load(_e, _loadEvent, image) {
-                    self.setFrame(() => {
-                            const activeUnit = self.activeUnit(image.alt)
-                            const location = self.location(image.alt)
-                            const texture = createTexture(self.gl, image)
-                            self.setFrame(() => {
-                                    self.gl.uniform1i(location, activeUnit)
-                                    self.gl.activeTexture(self.gl['TEXTURE' + activeUnit])
-                                    self.gl.bindTexture(self.gl.TEXTURE_2D, texture)
-                                    return true
-                            })
-                    })
-            }
-    } as any)