glre 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("refr"),t=require("reev");function n(e,t,n){var r=e.createShader(n);if(e.shaderSource(r,t),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))return r;console.warn(e.getShaderInfoLog(r))}var r=function(e){return t.event({mount:function(t){var r=e.el=document.getElementById(e.id),o=e.gl=null==r?void 0:r.getContext("webgl"),i=n(o,e.frag,null==o?void 0:o.FRAGMENT_SHADER),u=n(o,e.vert,null==o?void 0:o.VERTEX_SHADER);e.pg=function(e,t,n){var r=e.createProgram();return e.attachShader(r,t),e.attachShader(r,n),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?(e.useProgram(r),r):(console.log(e.getProgramInfoLog(r)),null)}(o,u,i),window.addEventListener("resize",t.on("resize")),window.addEventListener("mousemove",t.on("mousemove")),t("resize"),e.frame()},clean:function(e){window.removeEventListener("resize",e.on("resize")),window.removeEventListener("mousemove",e.on("mousemove"))},mousemove:function(t,n){var r=n.clientX,o=n.clientY,i=e.size,u=i[0],a=i[1];e.mouse[0]=(r-u/2)/(u/2),e.mouse[1]=-(o-a/2)/(a/2),e.setUniform("mouse",e.mouse)},resize:function(t,n,r,o){void 0===r&&(r=0),void 0===o&&(o=0),e.size[0]=e.el.width=r||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("resolution",e.size)},load:function(t,n){e.setFrame((function(){var t=n.path[0],r=e.activeUnit(t.alt),o=e.location(t.alt),i=function(e,t){var n=e.createTexture();return e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n}(e.gl,t);e.setFrame((function(){return e.gl.uniform1i(o,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},o={id:"myCanvas",frag:"",vert:"",size:[0,0],mouse:[0,0],count:1e3},i=function(n){var i=function e(t){if(void 0===t&&(t=""),"function"==typeof t)return e.frame.mount(t)},u=i.event=r(i),a=i.frame=e.frame();return i.lastActiveUnit=0,i.activeUnit=t.nested((function(){return i.lastActiveUnit++})),i.stride=t.nested((function(e,t,n){var r=(null==n?void 0:n.length)||i.count;return t.length/r<<0})),i.uniformType=t.nested((function(e,t,n){return void 0===n&&(n=!1),"number"==typeof t?"uniform1f":n?"uniformMatrix"+(Math.sqrt(t.length)<<0)+"fv":"uniform"+t.length+"fv"})),i.location=t.nested((function(e,t){var n,r;return void 0===t&&(t=!1),t?null==(n=i.gl)?void 0:n.getAttribLocation(i.pg,e):null==(r=i.gl)?void 0:r.getUniformLocation(i.pg,e)})),i.setDpr=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return void u.apply(void 0,["resize"].concat(t))||i},i.setSize=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return void u.apply(void 0,["resize"].concat(t))||i},i.setFrame=function(e){return void a.mount(e)||i},i.setMount=function(e){return void u.mount({mount:e})||i},i.setClean=function(e){return void u.mount({clean:e})||i},i.setConfig=t.durable((function(e,t){i[e]=t||o[e]}),i),"string"==typeof n&&(n={id:n}),"object"==typeof n&&i.setConfig(n),i.setUniform=t.durable((function(e,t,n){void 0===n&&(n=!1);var r=i.uniformType(e,t,n);i.setFrame(n?function(){return i.gl[r](i.location(e),!1,t)}:function(){return i.gl[r](i.location(e),t)})}),i),i.setAttribute=t.durable((function(e,t,n){i.setFrame((function(){var r=i.gl,o=i.stride(e,t,n),u=i.location(e,!0);r.bindBuffer(r.ARRAY_BUFFER,function(e,t){if(t){var n=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,n),e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),n}}(r,t)),r.enableVertexAttribArray(u),r.vertexAttribPointer(u,o,r.FLOAT,!1,0,0),n&&r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,function(e,t){if(t){var n=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,n),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(t),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),n}}(r,n))}))}),i),i.setTexture=t.durable((function(e,t){var n=new Image;n.addEventListener("load",u.on("load"),!1),Object.assign(n,{src:t,alt:e,crossOrigin:"anonymous"})}),i),i};exports.default=i,exports.defaultConfig=o,exports.gl=i;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("refr"),t=require("reev");function n(e,t,n){var r=e.createShader(n);if(e.shaderSource(r,t),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))return r;console.warn(e.getShaderInfoLog(r))}var r=function(e){return t.event({mount:function(t){var r=e.el=document.getElementById(e.id),o=e.gl=null==r?void 0:r.getContext("webgl"),i=n(o,e.frag,null==o?void 0:o.FRAGMENT_SHADER),a=n(o,e.vert,null==o?void 0:o.VERTEX_SHADER);e.pg=function(e,t,n){var r=e.createProgram();return e.attachShader(r,t),e.attachShader(r,n),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?(e.useProgram(r),r):(console.log(e.getProgramInfoLog(r)),null)}(o,a,i),window.addEventListener("resize",t.on("resize")),window.addEventListener("mousemove",t.on("mousemove")),t("resize"),e.frame()},clean:function(e){window.removeEventListener("resize",e.on("resize")),window.removeEventListener("mousemove",e.on("mousemove"))},mousemove:function(t,n){var r=n.clientX,o=n.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(r-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("mouse",e.mouse)},resize:function(t,n,r,o){void 0===r&&(r=0),void 0===o&&(o=0),e.size[0]=e.el.width=r||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("resolution",e.size)},load:function(t,n){e.setFrame((function(){var t=n.path[0],r=e.activeUnit(t.alt),o=e.location(t.alt),i=function(e,t){var n=e.createTexture();return e.bindTexture(e.TEXTURE_2D,n),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),n}(e.gl,t);e.setFrame((function(){return e.gl.uniform1i(o,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},o=function(n){var o=function e(t){if(void 0===t&&(t=""),"function"==typeof t)return e.frame.mount(t)};o.id="myCanvas",o.frag="",o.vert="",o.size=[0,0],o.mouse=[0,0],o.count=6;var i=o.event=r(o),a=o.frame=e.frame();return o.lastActiveUnit=0,o.activeUnit=t.nested((function(){return o.lastActiveUnit++})),o.stride=t.nested((function(e,t,n){var r=n?Math.max.apply(Math,n)+1:o.count;return t.length/r<<0})),o.uniformType=t.nested((function(e,t,n){return void 0===n&&(n=!1),"number"==typeof t?"uniform1f":n?"uniformMatrix"+(Math.sqrt(t.length)<<0)+"fv":"uniform"+t.length+"fv"})),o.location=t.nested((function(e,t){var n,r;return void 0===t&&(t=!1),t?null==(n=o.gl)?void 0:n.getAttribLocation(o.pg,e):null==(r=o.gl)?void 0:r.getUniformLocation(o.pg,e)})),o.setDpr=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return void i.apply(void 0,["resize"].concat(t))||o},o.setSize=function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return void i.apply(void 0,["resize"].concat(t))||o},o.setFrame=function(e){return void a.mount(e)||o},o.setMount=function(e){return void i.mount({mount:e})||o},o.setClean=function(e){return void i.mount({clean:e})||o},o.setConfig=t.durable((function(e,t){o[e]=t}),o),o.setConfig(defaultConfig),"string"==typeof n&&(n={id:n}),"object"==typeof n&&o.setConfig(n),o.setUniform=t.durable((function(e,t,n){void 0===n&&(n=!1);var r=o.uniformType(e,t,n);o.setFrame(n?function(){return o.gl[r](o.location(e),!1,t)}:function(){return o.gl[r](o.location(e),t)})}),o),o.setAttribute=t.durable((function(e,t,n){o.setFrame((function(){var r=o.gl,i=o.stride(e,t,n),a=o.location(e,!0);r.bindBuffer(r.ARRAY_BUFFER,function(e,t){if(t){var n=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,n),e.bufferData(e.ARRAY_BUFFER,new Float32Array(t),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),n}}(r,t)),r.enableVertexAttribArray(a),r.vertexAttribPointer(a,i,r.FLOAT,!1,0,0),n&&r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,function(e,t){if(t){var n=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,n),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(t),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),n}}(r,n))}))}),o),o.setTexture=t.durable((function(e,t){var n=new Image;n.addEventListener("load",i.on("load"),!1),Object.assign(n,{src:t,alt:e,crossOrigin:"anonymous"})}),o),o.clear=function(e){return o.gl.clear(o.gl[e||"COLOR_BUFFER_BIT"])},o.viewport=function(e){var t;return(t=o.gl).viewport.apply(t,[0,0].concat(e||o.size))},o.drawArrays=function(e){return void 0===e&&(e="POINTS"),o.gl.drawArrays(o.gl[e],0,o.count)},o.drawElements=function(e,t){return void 0===e&&(e="TRIANGLES"),void 0===t&&(t="UNSIGNED_SHORT"),o.gl.drawElements(o.gl[e],o.count,o.gl[t],0)},o};exports.default=o,exports.gl=o;
package/index.develop.js CHANGED
@@ -1 +1 @@
1
- !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("refr"),require("reev")):"function"==typeof define&&define.amd?define(["exports","refr","reev"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self).index=e.index||{},e.index.ts={}),e.refr,e.reev)}(this,(function(e,n,t){"use strict";function r(e,n,t){var r=e.createShader(t);if(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))return r;console.warn(e.getShaderInfoLog(r))}var i=function(e){return t.event({mount:function(n){var t=e.el=document.getElementById(e.id),i=e.gl=null==t?void 0:t.getContext("webgl"),o=r(i,e.frag,null==i?void 0:i.FRAGMENT_SHADER),u=r(i,e.vert,null==i?void 0:i.VERTEX_SHADER);e.pg=function(e,n,t){var r=e.createProgram();return e.attachShader(r,n),e.attachShader(r,t),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?(e.useProgram(r),r):(console.log(e.getProgramInfoLog(r)),null)}(i,u,o),window.addEventListener("resize",n.on("resize")),window.addEventListener("mousemove",n.on("mousemove")),n("resize"),e.frame()},clean:function(e){window.removeEventListener("resize",e.on("resize")),window.removeEventListener("mousemove",e.on("mousemove"))},mousemove:function(n,t){var r=t.clientX,i=t.clientY,o=e.size,u=o[0],a=o[1];e.mouse[0]=(r-u/2)/(u/2),e.mouse[1]=-(i-a/2)/(a/2),e.setUniform("mouse",e.mouse)},resize:function(n,t,r,i){void 0===r&&(r=0),void 0===i&&(i=0),e.size[0]=e.el.width=r||window.innerWidth,e.size[1]=e.el.height=i||window.innerHeight,e.setUniform("resolution",e.size)},load:function(n,t){e.setFrame((function(){var n=t.path[0],r=e.activeUnit(n.alt),i=e.location(n.alt),o=function(e,n){var t=e.createTexture();return e.bindTexture(e.TEXTURE_2D,t),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,n),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),t}(e.gl,n);e.setFrame((function(){return e.gl.uniform1i(i,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,o),!0}))}))}})},o={id:"myCanvas",frag:"",vert:"",size:[0,0],mouse:[0,0],count:1e3},u=function(e){var r=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)},u=r.event=i(r),a=r.frame=n.frame();return r.lastActiveUnit=0,r.activeUnit=t.nested((function(){return r.lastActiveUnit++})),r.stride=t.nested((function(e,n,t){var i=(null==t?void 0:t.length)||r.count;return n.length/i<<0})),r.uniformType=t.nested((function(e,n,t){return void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),r.location=t.nested((function(e,n){var t,i;return void 0===n&&(n=!1),n?null==(t=r.gl)?void 0:t.getAttribLocation(r.pg,e):null==(i=r.gl)?void 0:i.getUniformLocation(r.pg,e)})),r.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void u.apply(void 0,["resize"].concat(n))||r},r.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void u.apply(void 0,["resize"].concat(n))||r},r.setFrame=function(e){return void a.mount(e)||r},r.setMount=function(e){return void u.mount({mount:e})||r},r.setClean=function(e){return void u.mount({clean:e})||r},r.setConfig=t.durable((function(e,n){r[e]=n||o[e]}),r),"string"==typeof e&&(e={id:e}),"object"==typeof e&&r.setConfig(e),r.setUniform=t.durable((function(e,n,t){void 0===t&&(t=!1);var i=r.uniformType(e,n,t);r.setFrame(t?function(){return r.gl[i](r.location(e),!1,n)}:function(){return r.gl[i](r.location(e),n)})}),r),r.setAttribute=t.durable((function(e,n,t){r.setFrame((function(){var i=r.gl,o=r.stride(e,n,t),u=r.location(e,!0);i.bindBuffer(i.ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,new Float32Array(n),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),t}}(i,n)),i.enableVertexAttribArray(u),i.vertexAttribPointer(u,o,i.FLOAT,!1,0,0),t&&i.bindBuffer(i.ELEMENT_ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(n),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),t}}(i,t))}))}),r),r.setTexture=t.durable((function(e,n){var t=new Image;t.addEventListener("load",u.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),r),r};e.default=u,e.defaultConfig=o,e.gl=u,Object.defineProperty(e,"__esModule",{value:!0})}));
1
+ !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("refr"),require("reev")):"function"==typeof define&&define.amd?define(["exports","refr","reev"],n):n(((e="undefined"!=typeof globalThis?globalThis:e||self).index=e.index||{},e.index.ts={}),e.refr,e.reev)}(this,(function(e,n,t){"use strict";function r(e,n,t){var r=e.createShader(t);if(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))return r;console.warn(e.getShaderInfoLog(r))}var o=function(e){return t.event({mount:function(n){var t=e.el=document.getElementById(e.id),o=e.gl=null==t?void 0:t.getContext("webgl"),i=r(o,e.frag,null==o?void 0:o.FRAGMENT_SHADER),a=r(o,e.vert,null==o?void 0:o.VERTEX_SHADER);e.pg=function(e,n,t){var r=e.createProgram();return e.attachShader(r,n),e.attachShader(r,t),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?(e.useProgram(r),r):(console.log(e.getProgramInfoLog(r)),null)}(o,a,i),window.addEventListener("resize",n.on("resize")),window.addEventListener("mousemove",n.on("mousemove")),n("resize"),e.frame()},clean:function(e){window.removeEventListener("resize",e.on("resize")),window.removeEventListener("mousemove",e.on("mousemove"))},mousemove:function(n,t){var r=t.clientX,o=t.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(r-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("mouse",e.mouse)},resize:function(n,t,r,o){void 0===r&&(r=0),void 0===o&&(o=0),e.size[0]=e.el.width=r||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("resolution",e.size)},load:function(n,t){e.setFrame((function(){var n=t.path[0],r=e.activeUnit(n.alt),o=e.location(n.alt),i=function(e,n){var t=e.createTexture();return e.bindTexture(e.TEXTURE_2D,t),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,n),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),t}(e.gl,n);e.setFrame((function(){return e.gl.uniform1i(o,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},i=function(e){var r=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)};r.id="myCanvas",r.frag="",r.vert="",r.size=[0,0],r.mouse=[0,0],r.count=6;var i=r.event=o(r),a=r.frame=n.frame();return r.lastActiveUnit=0,r.activeUnit=t.nested((function(){return r.lastActiveUnit++})),r.stride=t.nested((function(e,n,t){var o=t?Math.max.apply(Math,t)+1:r.count;return n.length/o<<0})),r.uniformType=t.nested((function(e,n,t){return void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),r.location=t.nested((function(e,n){var t,o;return void 0===n&&(n=!1),n?null==(t=r.gl)?void 0:t.getAttribLocation(r.pg,e):null==(o=r.gl)?void 0:o.getUniformLocation(r.pg,e)})),r.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void i.apply(void 0,["resize"].concat(n))||r},r.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void i.apply(void 0,["resize"].concat(n))||r},r.setFrame=function(e){return void a.mount(e)||r},r.setMount=function(e){return void i.mount({mount:e})||r},r.setClean=function(e){return void i.mount({clean:e})||r},r.setConfig=t.durable((function(e,n){r[e]=n}),r),r.setConfig(defaultConfig),"string"==typeof e&&(e={id:e}),"object"==typeof e&&r.setConfig(e),r.setUniform=t.durable((function(e,n,t){void 0===t&&(t=!1);var o=r.uniformType(e,n,t);r.setFrame(t?function(){return r.gl[o](r.location(e),!1,n)}:function(){return r.gl[o](r.location(e),n)})}),r),r.setAttribute=t.durable((function(e,n,t){r.setFrame((function(){var o=r.gl,i=r.stride(e,n,t),a=r.location(e,!0);o.bindBuffer(o.ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,new Float32Array(n),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),t}}(o,n)),o.enableVertexAttribArray(a),o.vertexAttribPointer(a,i,o.FLOAT,!1,0,0),t&&o.bindBuffer(o.ELEMENT_ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(n),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),t}}(o,t))}))}),r),r.setTexture=t.durable((function(e,n){var t=new Image;t.addEventListener("load",i.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),r),r.clear=function(e){return r.gl.clear(r.gl[e||"COLOR_BUFFER_BIT"])},r.viewport=function(e){var n;return(n=r.gl).viewport.apply(n,[0,0].concat(e||r.size))},r.drawArrays=function(e){return void 0===e&&(e="POINTS"),r.gl.drawArrays(r.gl[e],0,r.count)},r.drawElements=function(e,n){return void 0===e&&(e="TRIANGLES"),void 0===n&&(n="UNSIGNED_SHORT"),r.gl.drawElements(r.gl[e],r.count,r.gl[n],0)},r};e.default=i,e.gl=i,Object.defineProperty(e,"__esModule",{value:!0})}));
package/index.js CHANGED
@@ -1 +1 @@
1
- import{frame as e}from"refr";import{event as n,nested as t,durable as r}from"reev";function o(e,n,t){var r=e.createShader(t);if(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))return r;console.warn(e.getShaderInfoLog(r))}var i=function(e){return n({mount:function(n){var t=e.el=document.getElementById(e.id),r=e.gl=null==t?void 0:t.getContext("webgl"),i=o(r,e.frag,null==r?void 0:r.FRAGMENT_SHADER),a=o(r,e.vert,null==r?void 0:r.VERTEX_SHADER);e.pg=function(e,n,t){var r=e.createProgram();return e.attachShader(r,n),e.attachShader(r,t),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?(e.useProgram(r),r):(console.log(e.getProgramInfoLog(r)),null)}(r,a,i),window.addEventListener("resize",n.on("resize")),window.addEventListener("mousemove",n.on("mousemove")),n("resize"),e.frame()},clean:function(e){window.removeEventListener("resize",e.on("resize")),window.removeEventListener("mousemove",e.on("mousemove"))},mousemove:function(n,t){var r=t.clientX,o=t.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(r-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("mouse",e.mouse)},resize:function(n,t,r,o){void 0===r&&(r=0),void 0===o&&(o=0),e.size[0]=e.el.width=r||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("resolution",e.size)},load:function(n,t){e.setFrame((function(){var n=t.path[0],r=e.activeUnit(n.alt),o=e.location(n.alt),i=function(e,n){var t=e.createTexture();return e.bindTexture(e.TEXTURE_2D,t),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,n),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),t}(e.gl,n);e.setFrame((function(){return e.gl.uniform1i(o,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},a={id:"myCanvas",frag:"",vert:"",size:[0,0],mouse:[0,0],count:1e3},u=function(n){var o=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)},u=o.event=i(o),f=o.frame=e();return o.lastActiveUnit=0,o.activeUnit=t((function(){return o.lastActiveUnit++})),o.stride=t((function(e,n,t){var r=(null==t?void 0:t.length)||o.count;return n.length/r<<0})),o.uniformType=t((function(e,n,t){return void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),o.location=t((function(e,n){var t,r;return void 0===n&&(n=!1),n?null==(t=o.gl)?void 0:t.getAttribLocation(o.pg,e):null==(r=o.gl)?void 0:r.getUniformLocation(o.pg,e)})),o.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void u.apply(void 0,["resize"].concat(n))||o},o.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void u.apply(void 0,["resize"].concat(n))||o},o.setFrame=function(e){return void f.mount(e)||o},o.setMount=function(e){return void u.mount({mount:e})||o},o.setClean=function(e){return void u.mount({clean:e})||o},o.setConfig=r((function(e,n){o[e]=n||a[e]}),o),"string"==typeof n&&(n={id:n}),"object"==typeof n&&o.setConfig(n),o.setUniform=r((function(e,n,t){void 0===t&&(t=!1);var r=o.uniformType(e,n,t);o.setFrame(t?function(){return o.gl[r](o.location(e),!1,n)}:function(){return o.gl[r](o.location(e),n)})}),o),o.setAttribute=r((function(e,n,t){o.setFrame((function(){var r=o.gl,i=o.stride(e,n,t),a=o.location(e,!0);r.bindBuffer(r.ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,new Float32Array(n),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),t}}(r,n)),r.enableVertexAttribArray(a),r.vertexAttribPointer(a,i,r.FLOAT,!1,0,0),t&&r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(n),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),t}}(r,t))}))}),o),o.setTexture=r((function(e,n){var t=new Image;t.addEventListener("load",u.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),o),o};export{u as default,a as defaultConfig,u as gl};
1
+ import{frame as e}from"refr";import{event as n,nested as t,durable as r}from"reev";function o(e,n,t){var r=e.createShader(t);if(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS))return r;console.warn(e.getShaderInfoLog(r))}var i=function(e){return n({mount:function(n){var t=e.el=document.getElementById(e.id),r=e.gl=null==t?void 0:t.getContext("webgl"),i=o(r,e.frag,null==r?void 0:r.FRAGMENT_SHADER),a=o(r,e.vert,null==r?void 0:r.VERTEX_SHADER);e.pg=function(e,n,t){var r=e.createProgram();return e.attachShader(r,n),e.attachShader(r,t),e.linkProgram(r),e.getProgramParameter(r,e.LINK_STATUS)?(e.useProgram(r),r):(console.log(e.getProgramInfoLog(r)),null)}(r,a,i),window.addEventListener("resize",n.on("resize")),window.addEventListener("mousemove",n.on("mousemove")),n("resize"),e.frame()},clean:function(e){window.removeEventListener("resize",e.on("resize")),window.removeEventListener("mousemove",e.on("mousemove"))},mousemove:function(n,t){var r=t.clientX,o=t.clientY,i=e.size,a=i[0],u=i[1];e.mouse[0]=(r-a/2)/(a/2),e.mouse[1]=-(o-u/2)/(u/2),e.setUniform("mouse",e.mouse)},resize:function(n,t,r,o){void 0===r&&(r=0),void 0===o&&(o=0),e.size[0]=e.el.width=r||window.innerWidth,e.size[1]=e.el.height=o||window.innerHeight,e.setUniform("resolution",e.size)},load:function(n,t){e.setFrame((function(){var n=t.path[0],r=e.activeUnit(n.alt),o=e.location(n.alt),i=function(e,n){var t=e.createTexture();return e.bindTexture(e.TEXTURE_2D,t),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,n),e.generateMipmap(e.TEXTURE_2D),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null),t}(e.gl,n);e.setFrame((function(){return e.gl.uniform1i(o,r),e.gl.activeTexture(e.gl["TEXTURE"+r]),e.gl.bindTexture(e.gl.TEXTURE_2D,i),!0}))}))}})},a=function(n){var o=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)};o.id="myCanvas",o.frag="",o.vert="",o.size=[0,0],o.mouse=[0,0],o.count=6;var a=o.event=i(o),u=o.frame=e();return o.lastActiveUnit=0,o.activeUnit=t((function(){return o.lastActiveUnit++})),o.stride=t((function(e,n,t){var r=t?Math.max.apply(Math,t)+1:o.count;return n.length/r<<0})),o.uniformType=t((function(e,n,t){return void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),o.location=t((function(e,n){var t,r;return void 0===n&&(n=!1),n?null==(t=o.gl)?void 0:t.getAttribLocation(o.pg,e):null==(r=o.gl)?void 0:r.getUniformLocation(o.pg,e)})),o.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void a.apply(void 0,["resize"].concat(n))||o},o.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void a.apply(void 0,["resize"].concat(n))||o},o.setFrame=function(e){return void u.mount(e)||o},o.setMount=function(e){return void a.mount({mount:e})||o},o.setClean=function(e){return void a.mount({clean:e})||o},o.setConfig=r((function(e,n){o[e]=n}),o),o.setConfig(defaultConfig),"string"==typeof n&&(n={id:n}),"object"==typeof n&&o.setConfig(n),o.setUniform=r((function(e,n,t){void 0===t&&(t=!1);var r=o.uniformType(e,n,t);o.setFrame(t?function(){return o.gl[r](o.location(e),!1,n)}:function(){return o.gl[r](o.location(e),n)})}),o),o.setAttribute=r((function(e,n,t){o.setFrame((function(){var r=o.gl,i=o.stride(e,n,t),a=o.location(e,!0);r.bindBuffer(r.ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ARRAY_BUFFER,t),e.bufferData(e.ARRAY_BUFFER,new Float32Array(n),e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,null),t}}(r,n)),r.enableVertexAttribArray(a),r.vertexAttribPointer(a,i,r.FLOAT,!1,0,0),t&&r.bindBuffer(r.ELEMENT_ARRAY_BUFFER,function(e,n){if(n){var t=e.createBuffer();return e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t),e.bufferData(e.ELEMENT_ARRAY_BUFFER,new Int16Array(n),e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),t}}(r,t))}))}),o),o.setTexture=r((function(e,n){var t=new Image;t.addEventListener("load",a.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),o),o.clear=function(e){return o.gl.clear(o.gl[e||"COLOR_BUFFER_BIT"])},o.viewport=function(e){var n;return(n=o.gl).viewport.apply(n,[0,0].concat(e||o.size))},o.drawArrays=function(e){return void 0===e&&(e="POINTS"),o.gl.drawArrays(o.gl[e],0,o.count)},o.drawElements=function(e,n){return void 0===e&&(e="TRIANGLES"),void 0===n&&(n="UNSIGNED_SHORT"),o.gl.drawElements(o.gl[e],o.count,o.gl[n],0)},o};export{a as default,a as gl};
package/index.ts CHANGED
@@ -4,28 +4,27 @@ import { durable, nested } from 'reev'
4
4
  import { createVbo, createIbo } from './utils'
5
5
  import type { GL, GLConfig } from './types'
6
6
 
7
- export const defaultConfig: GLConfig = {
8
- id: 'myCanvas',
9
- frag: '', // @TODO feat: add default fragment shader
10
- vert: '', // @TODO feat: add default vertex shader
11
- size: [0, 0],
12
- mouse: [0, 0],
13
- count: 1000,
14
- }
15
-
16
7
  export const gl = (config?: string | Partial<GLConfig>) => {
17
8
  const self = ((arg = '') => {
18
- if (typeof arg === 'function') return self.frame.mount(arg)
9
+ if (typeof arg === 'function') return self.frame.mount(arg)
19
10
  }) as GL
20
11
 
12
+ // default state
13
+ self.id = 'myCanvas'
14
+ self.frag = ''; // @TODO feat: add default fragment shader
15
+ self.vert = ''; // @TODO feat: add default vertex shader
16
+ self.size = [0, 0]
17
+ self.mouse = [0, 0]
18
+ self.count = 6
19
+
21
20
  // core state
22
21
  const ev = (self.event = glEvent(self))
23
22
  const fr = (self.frame = frame())
24
23
  self.lastActiveUnit = 0
25
24
  self.activeUnit = nested(() => self.lastActiveUnit++)
26
25
  self.stride = nested((_key, value, iboValue) => {
27
- const count = iboValue?.length || self.count
28
- return (value.length / count) << 0
26
+ const count = iboValue ? Math.max(...iboValue) + 1 : self.count;
27
+ return (value.length / count) << 0;
29
28
  })
30
29
  self.uniformType = nested((_key, value, isMatrix = false) => {
31
30
  if (typeof value === 'number') return `uniform1f`
@@ -44,12 +43,10 @@ export const gl = (config?: string | Partial<GLConfig>) => {
44
43
  self.setFrame = (frame) => void fr.mount(frame) || self
45
44
  self.setMount = (mount) => void ev.mount({ mount }) || self
46
45
  self.setClean = (clean) => void ev.mount({ clean }) || self
46
+ self.setConfig = durable((key, value) => void (self[key] = value), self)
47
47
 
48
- // config
49
- self.setConfig = durable((key, value) => {
50
- self[key] = value || defaultConfig[key]
51
- }, self)
52
-
48
+ // init config
49
+ self.setConfig(defaultConfig)
53
50
  if (typeof config === "string") config = { id: config }
54
51
  if (typeof config === "object") self.setConfig(config)
55
52
 
@@ -82,7 +79,15 @@ export const gl = (config?: string | Partial<GLConfig>) => {
82
79
  Object.assign(image, { src, alt: key, crossOrigin: 'anonymous' })
83
80
  }, self)
84
81
 
85
- return self
82
+ // shorthands
83
+ self.clear = (key) => self.gl.clear(self.gl[key || "COLOR_BUFFER_BIT"])
84
+ self.viewport = (size) => self.gl.viewport(0, 0, ...(size || self.size))
85
+ self.drawArrays = (mode = 'POINTS') =>
86
+ self.gl.drawArrays(self.gl[mode], 0, self.count)
87
+ self.drawElements = (mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') =>
88
+ self.gl.drawElements(self.gl[mode], self.count, self.gl[type], 0)
89
+
90
+ return self;
86
91
  }
87
92
 
88
93
  export default gl
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "glre",
3
3
  "author": "tseijp",
4
4
  "license": "MIT",
5
- "version": "0.2.0",
5
+ "version": "0.3.0",
6
6
  "module": "index.js",
7
7
  "types": "index.ts",
8
8
  "main": "index.cjs.js",
package/types.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { GL } from './types';
1
2
  /**
2
3
  * ref: https://stackoverflow.com/questions/52489261/typescript-can-i-define-an-n-length-tuple-type
3
4
  */
@@ -67,6 +68,10 @@ export interface GL {
67
68
  // key: K,
68
69
  // value: GLConfig[K]
69
70
  // ) => GL>,
71
+ clear(key?: GLClearMode): void
72
+ viewport(size: [number, number]): void
73
+ drawArrays(key?: GLDrawMode): void
74
+ drawElements(key?: GLDrawMode): void
70
75
  }
71
76
 
72
77
  export interface GLConfig {
@@ -76,4 +81,23 @@ export interface GLConfig {
76
81
  size: [number, number]
77
82
  mouse: [number, number]
78
83
  count: number
79
- }
84
+ }
85
+
86
+ export type GLClearMode =
87
+ | 'COLOR_BUFFER_BIT'
88
+ | 'DEPTH_BUFFER_BIT'
89
+ | 'STENCIL_BUFFER_BIT'
90
+
91
+ export type GLDrawMode =
92
+ | 'POINTS'
93
+ | 'LINE_STRIP'
94
+ | 'LINE_LOOP'
95
+ | 'LINES'
96
+ | 'TRIANGLE_STRIP'
97
+ | 'TRIANGLE_FAN'
98
+ | 'TRIANGLES'
99
+
100
+ export type GLDrawType =
101
+ | 'UNSIGNED_BYTE'
102
+ | 'UNSIGNED_SHORT'
103
+ | 'UNSIGNED_INT'