glre 0.13.1 → 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,i=r.length;t<i;t+=1)n+=r[t]+e[t+1];return n}function t(e){return Array.isArray(e)&&"string"==typeof e[0]}function i(e,r,n){return void 0===n&&(n=""),""!==n&&!e.includes(n)||function(e,r){return e=e.replace(/\s+/g,""),r=r.replace(/\s+/g,""),e.includes(r)}(e,r)?e:r+e}function o(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 a(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 u(e,r,n,t,i){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),i&&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,i))}var f=function(e){var n=r.event();return n({mount:function(){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 r=e.el=document.getElementById(e.id),t=e.gl=null==r?void 0:r.getContext("webgl"),o=a(t,e.frag,t.FRAGMENT_SHADER),u=a(t,e.vert,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,u,o),window.addEventListener("resize",n.resize),window.addEventListener("mousemove",n.mousemove),n.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(){window.removeEventListener("resize",n.resize),window.removeEventListener("mousemove",n.mousemove),e.frame.cancel()},mousemove:function(r){var n=r.clientX,t=r.clientY,i=e.size,o=i[0],a=i[1];e.mouse[0]=(n-o/2)/(o/2),e.mouse[1]=-(t-a/2)/(a/2),e.setUniform("iMouse",e.mouse)},resize:function(r,n,t){void 0===n&&(n=window.innerWidth),void 0===t&&(t=window.innerHeight),e.size[0]=e.el.width=n,e.size[1]=e.el.height=t,e.setUniform("iResolution",e.size)},load:function(r,n){e.setFrame((function(){var r=e.activeUnit(n.alt),t=e.location(n.alt),i=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,n);e.setFrame((function(){return e.gl.uniform1i(t,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},l=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],c="\n  attribute vec4 a_position;\n  void main() {\n    gl_Position = a_position;\n  }\n",s="\n  uniform vec2 resolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n  }\n",m=function(i){var a=function e(r){for(var i=arguments.length,o=new Array(i>1?i-1:0),a=1;a<i;a++)o[a-1]=arguments[a];return t(r)&&(r=n(r,o)),"string"==typeof r&&(e.frag=r),"function"==typeof r&&e.frame.mount(r),e};a.id="myCanvas",a.frag=s,a.vert=c,a.size=[0,0],a.mouse=[0,0],a.count=6,a.uniformHeader=[],a.attributeHeader=[];var m=a.event=f(a),v=a.frame=e.frame();a.lastActiveUnit=0,a.activeUnit=r.nested((function(){return a.lastActiveUnit++})),a.vertexStride=r.nested((function(e,r,n){var t=n?Math.max.apply(Math,n)+1:a.count,i=r.length/t<<0;return a.attributeHeader.push([e,"vertex vec"+i+" "+e+";"]),i})),a.uniformType=r.nested((function(e,r,n){var t=o(r,n),i=t[0],u=t[1];return a.uniformHeader.push([e,"uniform "+u+" "+e+";"]),i})),a.location=r.nested((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(){return void m.resize()||a},a.setSize=function(){return void m.resize()||a},a.setFrame=function(e){return void v.mount(e)||a},a.setMount=function(e){return void m({mount:e})||a},a.setClean=function(e){return void m({clean:e})||a},a.setConfig=r.durable((function(e,r){a[e]=r}),a),a.setUniform=r.durable((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=r.durable((function(e,r,n){var t=a.vertexStride(e,r,n);a.setFrame((function(){u(a.gl,t,a.location(e,!0),r,n)}))}),a),a.setTexture=r.durable((function(e,r){var n=new Image;n.addEventListener("load",(function(e){return m.load(e,n)}),!1),Object.assign(n,{src:r,alt:e,crossOrigin:"anonymous"})}),a),a.mount=function(){return m.mount.apply(m,arguments)},a.clean=function(){return m.clean.apply(m,arguments)},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 d=arguments.length,g=new Array(d>1?d-1:0),E=1;E<d;E++)g[E-1]=arguments[E];return t(i)&&(i=n(i,g)),"string"==typeof i&&(a.frag=i),"object"==typeof i&&a.setConfig(i),6===a.count&&a.setAttribute({a_position:l}),a};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,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("refr"),require("reev")):"function"==typeof define&&define.amd?define(["exports","refr","reev"],r):r(((e="undefined"!=typeof globalThis?globalThis:e||self).index=e.index||{},e.index.ts={}),e.refr,e.reev)}(this,(function(e,r,n){"use strict";function t(e,r){for(var n=e[0],t=0,i=r.length;t<i;t+=1)n+=r[t]+e[t+1];return n}function i(e){return Array.isArray(e)&&"string"==typeof e[0]}function o(e,r,n){return void 0===n&&(n=""),""!==n&&!e.includes(n)||function(e,r){return e=e.replace(/\s+/g,""),r=r.replace(/\s+/g,""),e.includes(r)}(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,i){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),i&&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,i))}var l=function(e){var r=n.event();return r({mount:function(){e.int&&(e.frag=o(e.frag,"precision "+e.int+" int;")),e.float&&(e.frag=o(e.frag,"precision "+e.float+" float;")),e.sampler2D&&(e.frag=o(e.frag,"precision "+e.sampler2D+" sampler2D;")),e.samplerCube&&(e.frag=o(e.frag,"precision "+e.samplerCube+" samplerCube;"));var n=e.el=document.getElementById(e.id),t=e.gl=null==n?void 0:n.getContext("webgl"),i=u(t,e.frag,t.FRAGMENT_SHADER),a=u(t,e.vert,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,i),window.addEventListener("resize",r.resize),window.addEventListener("mousemove",r.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(){window.removeEventListener("resize",r.resize),window.removeEventListener("mousemove",r.mousemove),e.frame.cancel()},mousemove:function(r){var n=r.clientX,t=r.clientY,i=e.size,o=i[0],a=i[1];e.mouse[0]=(n-o/2)/(o/2),e.mouse[1]=-(t-a/2)/(a/2),e.setUniform("iMouse",e.mouse)},resize:function(r,n,t){void 0===n&&(n=window.innerWidth),void 0===t&&(t=window.innerHeight),e.size[0]=e.el.width=n,e.size[1]=e.el.height=t,e.setUniform("iResolution",e.size)},load:function(r,n){e.setFrame((function(){var r=e.activeUnit(n.alt),t=e.location(n.alt),i=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,n);e.setFrame((function(){return e.gl.uniform1i(t,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!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",d="\n  uniform vec2 resolution;\n  void main() {\n    gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n  }\n",m=function(e){var o=function e(r){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];return i(r)&&(r=t(r,o)),"string"==typeof r&&(e.frag=r),"function"==typeof r&&e.frame.mount(r),e};o.id="myCanvas",o.frag=d,o.vert=s,o.size=[0,0],o.mouse=[0,0],o.count=6,o.uniformHeader=[],o.attributeHeader=[];var u=o.event=l(o),m=o.frame=r.frame();o.lastActiveUnit=0,o.activeUnit=n.nested((function(){return o.lastActiveUnit++})),o.vertexStride=n.nested((function(e,r,n){var t=n?Math.max.apply(Math,n)+1:o.count,i=r.length/t<<0;return o.attributeHeader.push([e,"vertex vec"+i+" "+e+";"]),i})),o.uniformType=n.nested((function(e,r,n){var t=a(r,n),i=t[0],u=t[1];return o.uniformHeader.push([e,"uniform "+u+" "+e+";"]),i})),o.location=n.nested((function(e,r){var n,t;return void 0===r&&(r=!1),r?null==(n=o.gl)?void 0:n.getAttribLocation(o.pg,e):null==(t=o.gl)?void 0:t.getUniformLocation(o.pg,e)})),o.setDpr=function(){return void u.resize()||o},o.setSize=function(){return void u.resize()||o},o.setFrame=function(e){return void m.mount(e)||o},o.setMount=function(e){return void u({mount:e})||o},o.setClean=function(e){return void u({clean:e})||o},o.setConfig=n.durable((function(e,r){o[e]=r}),o),o.setUniform=n.durable((function(e,r,n){void 0===n&&(n=!1);var t=o.uniformType(e,r,n);o.setFrame((function(){n?o.gl[t](o.location(e),!1,r):o.gl[t](o.location(e),r)}))}),o),o.setAttribute=n.durable((function(e,r,n){var t=o.vertexStride(e,r,n);o.setFrame((function(){f(o.gl,t,o.location(e,!0),r,n)}))}),o),o.setTexture=n.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"})}),o),o.mount=function(){return u.mount.apply(u,arguments)},o.clean=function(){return u.clean.apply(u,arguments)},o.clear=function(e){return o.gl.clear(o.gl[e||"COLOR_BUFFER_BIT"])},o.viewport=function(e){var r;return(r=o.gl).viewport.apply(r,[0,0].concat(e||o.size))},o.drawArrays=function(e){return void 0===e&&(e="TRIANGLES"),o.gl.drawArrays(o.gl[e],0,o.count)},o.drawElements=function(e,r){return void 0===e&&(e="TRIANGLES"),void 0===r&&(r="UNSIGNED_SHORT"),o.gl.drawElements(o.gl[e],o.count,o.gl[r],0)};for(var v=arguments.length,g=new Array(v>1?v-1:0),E=1;E<v;E++)g[E-1]=arguments[E];return i(e)&&(e=t(e,g)),"string"==typeof e&&(o.frag=e),"object"==typeof e&&o.setConfig(e),6===o.count&&o.setAttribute({a_position:c}),o};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 i(e,r){for(var n=e[0],t=0,i=r.length;t<i;t+=1)n+=r[t]+e[t+1];return n}function o(e){return Array.isArray(e)&&"string"==typeof e[0]}function a(e,r,n){return void 0===n&&(n=""),""!==n&&!e.includes(n)||function(e,r){return e=e.replace(/\s+/g,""),r=r.replace(/\s+/g,""),e.includes(r)}(e,r)?e:r+e}function u(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 f(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,i){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),i&&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,i))}var l=function(e){var n=r();return n({mount:function(){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"),i=f(t,e.frag,t.FRAGMENT_SHADER),o=f(t,e.vert,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,o,i),window.addEventListener("resize",n.resize),window.addEventListener("mousemove",n.mousemove),n.resize();var u=performance.now(),c=0,l=0;e.setFrame((function(){return c=u,u=performance.now()/1e3,l=u-c,e.setUniform({iTime:u,iPrevTime:c,iDeltaTime:l}),!0})),e.frame()},clean:function(){window.removeEventListener("resize",n.resize),window.removeEventListener("mousemove",n.mousemove),e.frame.cancel()},mousemove:function(r){var n=r.clientX,t=r.clientY,i=e.size,o=i[0],a=i[1];e.mouse[0]=(n-o/2)/(o/2),e.mouse[1]=-(t-a/2)/(a/2),e.setUniform("iMouse",e.mouse)},resize:function(r,n,t){void 0===n&&(n=window.innerWidth),void 0===t&&(t=window.innerHeight),e.size[0]=e.el.width=n,e.size[1]=e.el.height=t,e.setUniform("iResolution",e.size)},load:function(r,n){e.setFrame((function(){var r=e.activeUnit(n.alt),t=e.location(n.alt),i=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,n);e.setFrame((function(){return e.gl.uniform1i(t,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},s=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],m="\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",g=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 o(r)&&(r=i(r,t)),"string"==typeof r&&(e.frag=r),"function"==typeof r&&e.frame.mount(r),e};a.id="myCanvas",a.frag=v,a.vert=m,a.size=[0,0],a.mouse=[0,0],a.count=6,a.uniformHeader=[],a.attributeHeader=[];var f=a.event=l(a),g=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,i=r.length/t<<0;return a.attributeHeader.push([e,"vertex vec"+i+" "+e+";"]),i})),a.uniformType=n((function(e,r,n){var t=u(r,n),i=t[0],o=t[1];return a.uniformHeader.push([e,"uniform "+o+" "+e+";"]),i})),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(){return void f.resize()||a},a.setSize=function(){return void f.resize()||a},a.setFrame=function(e){return void g.mount(e)||a},a.setMount=function(e){return void f({mount:e})||a},a.setClean=function(e){return void f({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,r,n){var t=a.vertexStride(e,r,n);a.setFrame((function(){c(a.gl,t,a.location(e,!0),r,n)}))}),a),a.setTexture=t((function(e,r){var n=new Image;n.addEventListener("load",(function(e){return f.load(e,n)}),!1),Object.assign(n,{src:r,alt:e,crossOrigin:"anonymous"})}),a),a.mount=function(){return f.mount.apply(f,arguments)},a.clean=function(){return f.clean.apply(f,arguments)},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 o(r)&&(r=i(r,d)),"string"==typeof r&&(a.frag=r),"object"==typeof r&&a.setConfig(r),6===a.count&&a.setAttribute({a_position:s}),a};g.default=null;export{g as default,g 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,136 +1,158 @@
-import { frame } from 'refr'
-import { glEvent } from './events'
-import { durable, nested } from 'reev'
+import { event, durable, nested } from 'reev'
+import { queue, frame } from 'refr'
 import {
+        uniformType,
+        vertexStride,
+        createProgram,
+        createTfProgram,
+        createShader,
         createAttribute,
-        interleave,
-        isTemplateLiteral,
-        switchUniformType,
+        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 _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?: string | 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
+let iTime = performance.now(),
+        iPrevTime = 0,
+        iDeltaTime = 0
 
-        // 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 e = (self.event = glEvent(self))
-        const f = (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 = () => void e.resize() || self
-        self.setSize = () => void e.resize() || self
-        self.setFrame = (frame) => void f.mount(frame) || self
-        self.setMount = (mount) => void e({ mount }) || self
-        self.setClean = (clean) => void e({ clean }) || self
-        self.setConfig = durable((key, value) => void (self[key] = value), self)
-        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)
+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)
-        self.setAttribute = durable((key, value, iboValue) => {
-                const stride = self.vertexStride(key, value, iboValue)
-                self.setFrame(() => {
-                        createAttribute(
-                                self.gl,
-                                stride,
-                                self.location(key, true),
-                                value,
-                                iboValue
-                        )
+        },
+        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.load(_, image), false)
+                image.addEventListener(
+                        'load',
+                        (_) => self.load(_, image),
+                        false
+                )
                 Object.assign(image, {
                         src,
                         alt: key,
                         crossOrigin: 'anonymous',
                 })
-        }, self)
-
-        // shorthands
-        self.mount = (...args) => e.mount(...args)
-        self.clean = (...args) => e.clean(...args)
-        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') =>
+        },
+        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') =>
+        },
+        drawElements(mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') {
                 self.gl.drawElements(
                         self.gl[mode],
                         self.count,
                         self.gl[type],
                         0
                 )
+        },
+}) as GL
 
-        // 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 })
+self.frame = queue()
+self.texture = durable(self._texture)
+self.uniform = durable(self._uniform)
+self.attribute = durable(self._attribute)
 
-        return self
-}
+// @TODO
+// export const clone = gl.clone()
 
-gl.default = null as unknown as GL
+export { self as gl }
 
-export default 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.13.1",
-  "module": "index.js",
-  "types": "index.ts",
-  "main": "index.cjs.js",
-  "umd": "index.develop.js",
-  "private": false,
-  "sideEffect": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "reev": "0.9.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(() => void 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(props?: any, self = gl) {
+        onCleanup(self.clean)
 
-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
+        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,7 +1,4 @@
-/**
- * ref: https://stackoverflow.com/questions/52489261/typescript-can-i-define-an-n-length-tuple-type
- */
-import type { Frame, Fun } from 'refr'
+import type { Queue } from 'refr/types'
 import type { Nested, EventState } from 'reev/types'
 
 export type Uniform = number | number[]
@@ -12,18 +9,7 @@ export type Attributes = Record<string, Attribute>
 
 export type Uniforms = Record<string, Uniform>
 
-export interface GLEvent {
-        mount(): void
-        clean(): void
-        mousemove(e: Event): void
-        resize(e?: Event): void
-        load(e?: Event, image?: HTMLImageElement): void
-}
-
-export interface GL {
-        (fun: Fun): GL
-        (shader: string): GL
-        (strings: TemplateStringsArray, ...args: any[]): GL
+export type GL = EventState<{
         /**
          * initial value
          */
@@ -31,52 +17,67 @@ 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: EventState<GLEvent>
-        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>
-        vertexStride: Nested<number>
-        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
-        setUniform(target: { [key: string]: Uniform }): GL
-        setTexture(key: string, value: string): GL
-        setTexture(target: { [key: string]: string }): GL
-        setAttribute(key: string, value: Attribute, iboValue?: Attribute): GL
-        setAttribute(target: { [key: string]: Attribute }): GL
-        setConfig(key?: keyof GL, value?: GL[keyof GL]): GL
-        setConfig(target?: Partial<GL>): 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'
 

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 includes(source: string, target: string) {
-        source = source.replace(/\s+/g, '')
-        target = target.replace(/\s+/g, '')
-        return source.includes(target)
-}
-
-export function concat(source: string, target: string, key = "") {
-        if (key === "" || source.includes(key))
-                if (!includes(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,105 +0,0 @@
-import { event } from 'reev'
-import { createProgram, createShader, createTexture, concat } from './utils'
-import type { GL, GLEvent } from './types'
-
-export const glEvent = (self: GL) => {
-        const e = event<GLEvent>()
-        return e({
-                // run if canvas is mounted
-                mount() {
-                        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))
-                        const gl = (self.gl = (el as any)?.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.resize)
-                        window.addEventListener('mousemove', e.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() {
-                        window.removeEventListener('resize', e.resize)
-                        window.removeEventListener('mousemove', e.mousemove)
-                        self.frame.cancel()
-                },
-                // user mousemove event
-                mousemove({ 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(
-                        _resizeEvent,
-                        width = window.innerWidth,
-                        height = window.innerHeight
-                ) {
-                        self.size[0] = self.el.width = width
-                        self.size[1] = self.el.height = height
-                        self.setUniform('iResolution', self.size)
-                },
-                // load image event
-                load(_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)
-}