glre 0.15.0 → 0.16.0

package/index.cjs.js

@@ -1 +1 @@
-"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;
+"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;throw"Could not compile glsl\n\n"+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=function(u){var f=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(){f(u);var i=f.gl,o=f.vs||f.vert||f.vertex,a=f.fs||f.frag||f.fragment,l=t(i,o,i.VERTEX_SHADER),c=t(i,a,i.FRAGMENT_SHADER);6===f.count&&f.attribute({a_position:n}),r.frame((function(){return void f.render()||1})),f.pg=f.varying?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)}(i,l,c,f.varying):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)}(i,l,c),f.lastActiveUnit=0,f.activeUnit=e.nested((function(){return f.lastActiveUnit++})),f.location=e.nested((function(e,r){return void 0===r&&(r=!1),r?null==i?void 0:i.getAttribLocation(f.pg,e):null==i?void 0:i.getUniformLocation(f.pg,e)}))},render:function(){f.gl.useProgram(f.pg),f.frame.flush(),o=i,i=performance.now()/1e3,a=i-o,f.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);f.frame((function(){var i=f.location(e);t?f.gl[n](i,!1,r):f.gl[n](i,r)}))},_attribute:function(e,r,t){f.frame((function(){var n=f.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}}(f.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}}(f.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}(f.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)}(f.gl,a,n,i,o)}))},_texture:function(e,r,t){if(void 0===t&&(t="anonymous"),"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:t})}},resize:function(e,r,t){void 0===r&&(r=f.width||window.innerWidth),void 0===t&&(t=f.height||window.innerHeight),f.size[0]=f.el.width=r,f.size[1]=f.el.height=t,f.uniform("iResolution",f.size)},mousemove:function(e,r,t){void 0===r&&(r=e.clientX),void 0===t&&(t=e.clientY);var n=f.size,i=n[0],o=n[1],a=f.el.getBoundingClientRect(),u=a.top,l=a.left;f.mouse[0]=(r-u-i/2)/(i/2),f.mouse[1]=-(t-l-o/2)/(o/2),f.uniform("iMouse",f.mouse)},load:function(e,r){f.frame((function(){var e=f.location(r.alt),t=f.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}(f.gl,r);f.frame((function(){return function(e,r,t,n){e.uniform1i(r,t),e.activeTexture(e["TEXTURE"+t]),e.bindTexture(e.TEXTURE_2D,n)}(f.gl,e,t,n),!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"),e=f.gl[e],r=f.gl[r],f.gl.drawElements(e,f.count,r,0)}});return f.frame=r.queue(),f.texture=e.durable(f._texture),f.uniform=e.durable(f._uniform),f.attribute=e.durable(f._attribute),f},f=u(),l=self;exports.createGL=u,exports.createTF=function(e,r){void 0===r&&(r=f);var t=u();return t({mount:function(){t(e),t.el=r.el,t.gl=r.gl,t.frame=r.frame,t.init(),r({resize:t.resize,mousemove:t.mousemove})},clean:function(){t(e),r({resize:t.resize,mousemove:t.mousemove})}}),t},exports.default=l,exports.gl=f;

package/index.develop.js

@@ -1 +1 @@
-!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})}));
+!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;throw"Could not compile glsl\n\n"+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=function(e){var 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(){f(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=f.varying?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,f.varying):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,n){if(void 0===n&&(n="anonymous"),"undefined"!=typeof window){var t=new Image;t.addEventListener("load",(function(e){return f.load(e,t)}),!1),Object.assign(t,{src:r,alt:e,crossOrigin:n})}},resize:function(e,r,n){void 0===r&&(r=f.width||window.innerWidth),void 0===n&&(n=f.height||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],a=f.el.getBoundingClientRect(),u=a.top,l=a.left;f.mouse[0]=(r-u-i/2)/(i/2),f.mouse[1]=-(n-l-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"),e=f.gl[e],r=f.gl[r],f.gl.drawElements(e,f.count,r,0)}});return f.frame=n.queue(),f.texture=r.durable(f._texture),f.uniform=r.durable(f._uniform),f.attribute=r.durable(f._attribute),f},l=f(),c=self;e.createGL=f,e.createTF=function(e,r){void 0===r&&(r=l);var n=f();return n({mount:function(){n(e),n.el=r.el,n.gl=r.gl,n.frame=r.frame,n.init(),r({resize:n.resize,mousemove:n.mousemove})},clean:function(){n(e),r({resize:n.resize,mousemove:n.mousemove})}}),n},e.default=c,e.gl=l,Object.defineProperty(e,"__esModule",{value:!0})}));

package/index.js

@@ -1 +1 @@
-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};
+import{event as e,nested as r,durable as n}from"reev";import{frame as t,queue as i}from"refr";function o(e,r,n){var t=e.createShader(n);if(e.shaderSource(t,r),e.compileShader(t),e.getShaderParameter(t,e.COMPILE_STATUS))return t;throw"Could not compile glsl\n\n"+e.getShaderInfoLog(t)}var a=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],u=performance.now(),f=0,l=0,c=function(c){var m=e({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(){m(c);var e=m.gl,n=m.vs||m.vert||m.vertex,i=m.fs||m.frag||m.fragment,u=o(e,n,e.VERTEX_SHADER),f=o(e,i,e.FRAGMENT_SHADER);6===m.count&&m.attribute({a_position:a}),t((function(){return void m.render()||1})),m.pg=m.varying?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)}(e,u,f,m.varying):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)}(e,u,f),m.lastActiveUnit=0,m.activeUnit=r((function(){return m.lastActiveUnit++})),m.location=r((function(r,n){return void 0===n&&(n=!1),n?null==e?void 0:e.getAttribLocation(m.pg,r):null==e?void 0:e.getUniformLocation(m.pg,r)}))},render:function(){m.gl.useProgram(m.pg),m.frame.flush(),f=u,u=performance.now()/1e3,l=u-f,m.uniform({iTime:u,iPrevTime:f,iDeltaTime:l})},_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);m.frame((function(){var i=m.location(e);n?m.gl[t](i,!1,r):m.gl[t](i,r)}))},_attribute:function(e,r,n){m.frame((function(){var t=m.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}}(m.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}}(m.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}(m.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)}(m.gl,a,t,i,o)}))},_texture:function(e,r,n){if(void 0===n&&(n="anonymous"),"undefined"!=typeof window){var t=new Image;t.addEventListener("load",(function(e){return m.load(e,t)}),!1),Object.assign(t,{src:r,alt:e,crossOrigin:n})}},resize:function(e,r,n){void 0===r&&(r=m.width||window.innerWidth),void 0===n&&(n=m.height||window.innerHeight),m.size[0]=m.el.width=r,m.size[1]=m.el.height=n,m.uniform("iResolution",m.size)},mousemove:function(e,r,n){void 0===r&&(r=e.clientX),void 0===n&&(n=e.clientY);var t=m.size,i=t[0],o=t[1],a=m.el.getBoundingClientRect(),u=a.top,f=a.left;m.mouse[0]=(r-u-i/2)/(i/2),m.mouse[1]=-(n-f-o/2)/(o/2),m.uniform("iMouse",m.mouse)},load:function(e,r){m.frame((function(){var e=m.location(r.alt),n=m.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}(m.gl,r);m.frame((function(){return function(e,r,n,t){e.uniform1i(r,n),e.activeTexture(e["TEXTURE"+n]),e.bindTexture(e.TEXTURE_2D,t)}(m.gl,e,n,t),!0}))}))},clear:function(e){void 0===e&&(e="COLOR_BUFFER_BIT"),m.gl.clear(m.gl[e])},viewport:function(e){var r;void 0===e&&(e=m.size),(r=m.gl).viewport.apply(r,[0,0].concat(e))},drawArrays:function(e){void 0===e&&(e="TRIANGLES"),m.gl.drawArrays(m.gl[e],0,m.count)},drawElements:function(e,r){void 0===e&&(e="TRIANGLES"),void 0===r&&(r="UNSIGNED_SHORT"),e=m.gl[e],r=m.gl[r],m.gl.drawElements(e,m.count,r,0)}});return m.frame=i(),m.texture=n(m._texture),m.uniform=n(m._uniform),m.attribute=n(m._attribute),m},m=c(),E=function(e,r){void 0===r&&(r=m);var n=c();return n({mount:function(){n(e),n.el=r.el,n.gl=r.gl,n.frame=r.frame,n.init(),r({resize:n.resize,mousemove:n.mousemove})},clean:function(){n(e),r({resize:n.resize,mousemove:n.mousemove})}}),n},g=self;export{c as createGL,E as createTF,g as default,m as gl};

package/index.ts

@@ -1,158 +1,171 @@
-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 _defaultVertex = `
-  attribute vec4 a_position;
-  void main() {
-    gl_Position = a_position;
-  }
-`
-
-const _defaultFragment = `
-  precision mediump float;
-  uniform vec2 iResolution;
-  void main() {
-    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
-  }
-`
-
-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)
-                })
-        },
-        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)
-                })
-        },
-        _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',
-                        (_) => 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)
-        },
-        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
+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 _defaultVertex = `
+  attribute vec4 a_position;
+  void main() {
+    gl_Position = a_position;
+  }
+`
+
+const _defaultFragment = `
+  precision mediump float;
+  uniform vec2 iResolution;
+  void main() {
+    gl_FragColor = vec4(fract(gl_FragCoord.xy / iResolution), 0, 1);
+  }
+`
+
+let iTime = performance.now(),
+        iPrevTime = 0,
+        iDeltaTime = 0
+
+export const createGL = (props?: Partial<GL>) => {
+        const self = event<Partial<GL>>({
+                vertex: _defaultVertex,
+                fragment: _defaultFragment,
+                size: [0, 0],
+                mouse: [0, 0],
+                count: 6,
+                counter: 0,
+                init() {
+                        self(props)
+                        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 = self.varying
+                                ? createTfProgram(gl, vs, fs, self.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)
+                        })
+                },
+                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)
+                        })
+                },
+                _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 n = self.count
+                                const stride = vertexStride(n, value, iboValue)
+                                createAttribute(self.gl, stride, loc, vbo, ibo)
+                        })
+                },
+                _texture(alt: string, src: string, crossOrigin = 'anonymous') {
+                        if (typeof window === 'undefined') return
+                        const image = new Image()
+                        const callback = (_: any) => self.load(_, image)
+                        image.addEventListener('load', callback, false)
+                        Object.assign(image, { src, alt, crossOrigin })
+                },
+                resize(
+                        _e: any,
+                        width = self.width || window.innerWidth,
+                        height = self.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
+                        const { top, left } = self.el.getBoundingClientRect()
+                        self.mouse[0] = (x - top - w / 2) / (w / 2)
+                        self.mouse[1] = -(y - left - 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 tex = createTexture(self.gl, image)
+                                self.frame(() => {
+                                        activeTexture(self.gl, loc, unit, tex)
+                                        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)
+                },
+                drawElements(mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') {
+                        mode = self.gl[mode]
+                        type = self.gl[type]
+                        self.gl.drawElements(mode, self.count, type, 0)
+                },
+        }) as GL
+
+        self.frame = queue()
+        self.texture = durable(self._texture)
+        self.uniform = durable(self._uniform)
+        self.attribute = durable(self._attribute)
+
+        return self
+}
+
+export const gl = createGL()
+
+export const createTF = (props?: Partial<GL>, self = gl) => {
+        const tf = createGL()
+        tf({
+                mount() {
+                        tf(props)
+                        tf.el = self.el
+                        tf.gl = self.gl
+                        tf.frame = self.frame
+                        tf.init()
+                        self({ resize: tf.resize, mousemove: tf.mousemove })
+                },
+                clean() {
+                        tf(props)
+                        self({ resize: tf.resize, mousemove: tf.mousemove })
+                },
+        })
+        return tf
+}
+
+export default self

package/native.ts

@@ -1,58 +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 useGL = (props: Partial<GL> = {}, self = gl) => {
-        const change = () => {
-                self.resize(
-                        void 0,
-                        self.gl.drawingBufferWidth,
-                        self.gl.drawingBufferHeight
-                )
-        }
-        const memo1 = useMutable(props) as Partial<GL>
-        const memo2 = useMutable({
-                ref(gl: any) {
-                        self.el = {}
-                        self.gl = gl
-                        self.mount()
-                },
-                mount() {
-                        self.init()
-                        change()
-                        frame.start()
-                        Dimensions.addEventListener('change', change)
-                },
-                clean() {
-                        self(memo2)(memo1)
-                        frame.cancel()
-                },
-        }) as Partial<GL>
-
-        useEffect(() => self.clean, [self])
-
-        return useMemo(() => self(memo2)(memo1), [self, memo2, memo1])
-}
-
-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
-}
+import { useEffect, useMemo } from 'react'
+import { Dimensions } from 'react-native'
+import { useMutable } from 'reev/react'
+import { gl, createTF } from './index'
+import { frame } from 'refr'
+import type { GL } from './types'
+import type { Fun } from 'refr'
+
+export const useGL = (props: Partial<GL> = {}, self = gl) => {
+        const change = () => {
+                self.resize(
+                        void 0,
+                        self.gl.drawingBufferWidth,
+                        self.gl.drawingBufferHeight
+                )
+        }
+        const memo1 = useMutable(props) as Partial<GL>
+        const memo2 = useMutable({
+                ref(gl: any) {
+                        self.el = {}
+                        self.gl = gl
+                        self.mount()
+                },
+                mount() {
+                        self.init()
+                        change()
+                        frame.start()
+                        Dimensions.addEventListener('change', change)
+                },
+                clean() {
+                        self(memo2)(memo1)
+                        frame.cancel()
+                },
+        }) as Partial<GL>
+
+        useEffect(() => self.clean, [self])
+
+        return useMemo(() => self(memo2)(memo1), [self, memo2, memo1])
+}
+export const useTF = (props: Partial<GL>, self = gl) => {
+        const memo = useMutable(props) as Partial<GL>
+        const tf = useMemo(() => createTF(memo, self), [memo, self])
+        useEffect(() => void tf.mount() || tf.clean, [self])
+        return tf
+}
+
+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
+}