glre 0.1.0

package/events.ts

@@ -0,0 +1,53 @@
+import { event } from 'reev'
+import { createProgram, createShader, createTexture } from './utils'
+import type { GL } from './types'
+
+export const glEvent = (self: GL) =>
+    event({
+            // run if canvas is mounted
+            mount(e) {
+                    // @ts-ignore
+                    const el = (self.el = document.getElementById(self.id)); // @ts-ignore
+                    const gl = (self.gl = el?.getContext("webgl"));
+                    const frag = createShader(gl, self.frag, gl?.FRAGMENT_SHADER);
+                    const vert = createShader(gl, self.vert, gl?.VERTEX_SHADER);
+                    self.pg = createProgram(gl, vert, frag); // !!!
+                    window.addEventListener("resize", e.on("resize"));
+                    window.addEventListener("mousemove", e.on("mousemove"));
+                    e("resize");
+                    self.frame();
+            },
+            // run if canvas is cleaned
+            clean(e) {
+                    window.removeEventListener("resize", e.on("resize"));
+                    window.removeEventListener("mousemove", e.on("mousemove"));
+            },
+            // user mousemove event
+            mousemove(_e, { clientX, clientY }, ...args) {
+                    const [w, h] = self.size;
+                    self.mouse[0] = (clientX - w / 2) / (w / 2);
+                    self.mouse[1] = -(clientY - h / 2) / (h / 2);
+                    self.setUniform("mouse", self.mouse);
+            },
+            // user mousemove event
+            resize(_e, _resizeEvent, width = 0, height = 0) {
+                    self.size[0] = self.el.width = width || window.innerWidth;
+                    self.size[1] = self.el.height = height || window.innerHeight;
+                    self.setUniform("resolution", self.size);
+            },
+            // load image event
+            load(_e, loadEvent) {
+                    self.setFrame(() => {
+                            const image = loadEvent.path[0];
+                            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;
+                            });
+                    });
+            }
+    });

package/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("refr"),n=require("reev");function t(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 r=function(e){return n.event({mount:function(n){var r=e.el=document.getElementById(e.id),i=e.gl=null==r?void 0:r.getContext("webgl"),o=t(i,e.frag,null==i?void 0:i.FRAGMENT_SHADER),u=t(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}))}))}})};function i(t){var i,o,u,a,l,f,c,s,v;void 0===t&&(t={});var d=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)};return d.id=null!=(i=t.id)?i:"myCanvas",d.size=null!=(o=t.size)?o:[0,0],d.mouse=null!=(u=t.mouse)?u:[0,0],d.count=null!=(a=t.count)?a:1e3,d.frag=null!=(l=null!=(f=t.frag)?f:t.fragShader)?l:"",d.vert=null!=(c=null!=(s=t.vert)?s:t.vertShader)?c:"",d.lastActiveUnit=null!=(v=t.lastActiveUnit)?v:0,d.event=r(d),d.frame=e.frame(),d.stride=n.nested((function(e,n){return void 0===n&&(n=[]),n.length/d.count<<0})),d.activeUnit=n.nested((function(){return d.lastActiveUnit++})),d.uniformType=n.nested((function(e,n,t){return void 0===n&&(n=[]),void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),d.location=n.nested((function(e,n){var t,r;return void 0===n&&(n=!1),n?null==(t=d.gl)?void 0:t.getAttribLocation(d.pg,e):null==(r=d.gl)?void 0:r.getUniformLocation(d.pg,e)})),d.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void d.event.apply(d,["resize"].concat(n))||d},d.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void d.event.apply(d,["resize"].concat(n))||d},d.setFrame=function(e){return void d.frame.mount(e)||d},d.setMount=function(e){return void d.event.mount({mount:e})||d},d.setClean=function(e){return void d.event.mount({clean:e})||d},d.setUniform=n.durable((function(e,n,t){void 0===t&&(t=!1);var r=d.uniformType(e,n,t);d.setFrame(t?function(){return d.gl[r](d.location(e),!1,n)}:function(){return d.gl[r](d.location(e),n)})}),d),d.setAttribute=n.durable((function(e,n,t){d.setFrame((function(){var r=d.gl,i=d.stride(e,n),o=d.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(o),r.vertexAttribPointer(o,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))}))}),d),d.setTexture=n.durable((function(e,n){var t=new Image;t.addEventListener("load",d.event.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),d),d}exports.default=i,exports.gl=i;

package/index.develop.js

@@ -0,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 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}))}))}})};function o(e){var r,o,u,a,f,l,d,s,c;void 0===e&&(e={});var v=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)};return v.id=null!=(r=e.id)?r:"myCanvas",v.size=null!=(o=e.size)?o:[0,0],v.mouse=null!=(u=e.mouse)?u:[0,0],v.count=null!=(a=e.count)?a:1e3,v.frag=null!=(f=null!=(l=e.frag)?l:e.fragShader)?f:"",v.vert=null!=(d=null!=(s=e.vert)?s:e.vertShader)?d:"",v.lastActiveUnit=null!=(c=e.lastActiveUnit)?c:0,v.event=i(v),v.frame=n.frame(),v.stride=t.nested((function(e,n){return void 0===n&&(n=[]),n.length/v.count<<0})),v.activeUnit=t.nested((function(){return v.lastActiveUnit++})),v.uniformType=t.nested((function(e,n,t){return void 0===n&&(n=[]),void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),v.location=t.nested((function(e,n){var t,r;return void 0===n&&(n=!1),n?null==(t=v.gl)?void 0:t.getAttribLocation(v.pg,e):null==(r=v.gl)?void 0:r.getUniformLocation(v.pg,e)})),v.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void v.event.apply(v,["resize"].concat(n))||v},v.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void v.event.apply(v,["resize"].concat(n))||v},v.setFrame=function(e){return void v.frame.mount(e)||v},v.setMount=function(e){return void v.event.mount({mount:e})||v},v.setClean=function(e){return void v.event.mount({clean:e})||v},v.setUniform=t.durable((function(e,n,t){void 0===t&&(t=!1);var r=v.uniformType(e,n,t);v.setFrame(t?function(){return v.gl[r](v.location(e),!1,n)}:function(){return v.gl[r](v.location(e),n)})}),v),v.setAttribute=t.durable((function(e,n,t){v.setFrame((function(){var r=v.gl,i=v.stride(e,n),o=v.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(o),r.vertexAttribPointer(o,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))}))}),v),v.setTexture=t.durable((function(e,n){var t=new Image;t.addEventListener("load",v.event.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),v),v}e.default=o,e.gl=o,Object.defineProperty(e,"__esModule",{value:!0})}));

package/index.js

@@ -0,0 +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),u=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,u,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,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(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}))}))}})};function u(n){var o,u,a,l,f,c,E,v,m;void 0===n&&(n={});var s=function e(n){if(void 0===n&&(n=""),"function"==typeof n)return e.frame.mount(n)};return s.id=null!=(o=n.id)?o:"myCanvas",s.size=null!=(u=n.size)?u:[0,0],s.mouse=null!=(a=n.mouse)?a:[0,0],s.count=null!=(l=n.count)?l:1e3,s.frag=null!=(f=null!=(c=n.frag)?c:n.fragShader)?f:"",s.vert=null!=(E=null!=(v=n.vert)?v:n.vertShader)?E:"",s.lastActiveUnit=null!=(m=n.lastActiveUnit)?m:0,s.event=i(s),s.frame=e(),s.stride=t((function(e,n){return void 0===n&&(n=[]),n.length/s.count<<0})),s.activeUnit=t((function(){return s.lastActiveUnit++})),s.uniformType=t((function(e,n,t){return void 0===n&&(n=[]),void 0===t&&(t=!1),"number"==typeof n?"uniform1f":t?"uniformMatrix"+(Math.sqrt(n.length)<<0)+"fv":"uniform"+n.length+"fv"})),s.location=t((function(e,n){var t,r;return void 0===n&&(n=!1),n?null==(t=s.gl)?void 0:t.getAttribLocation(s.pg,e):null==(r=s.gl)?void 0:r.getUniformLocation(s.pg,e)})),s.setDpr=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void s.event.apply(s,["resize"].concat(n))||s},s.setSize=function(){for(var e=arguments.length,n=new Array(e),t=0;t<e;t++)n[t]=arguments[t];return void s.event.apply(s,["resize"].concat(n))||s},s.setFrame=function(e){return void s.frame.mount(e)||s},s.setMount=function(e){return void s.event.mount({mount:e})||s},s.setClean=function(e){return void s.event.mount({clean:e})||s},s.setUniform=r((function(e,n,t){void 0===t&&(t=!1);var r=s.uniformType(e,n,t);s.setFrame(t?function(){return s.gl[r](s.location(e),!1,n)}:function(){return s.gl[r](s.location(e),n)})}),s),s.setAttribute=r((function(e,n,t){s.setFrame((function(){var r=s.gl,o=s.stride(e,n),i=s.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(i),r.vertexAttribPointer(i,o,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))}))}),s),s.setTexture=r((function(e,n){var t=new Image;t.addEventListener("load",s.event.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),s),s}export{u as default,u as gl};

package/index.ts

@@ -0,0 +1,78 @@
+import { frame } from 'refr'
+import { nested, durable } from 'reev'
+import { glEvent } from './events'
+import { createVbo, createIbo } from './utils'
+import type { GL, GLConfig } from './types'
+
+export * from './types'
+
+export default gl
+
+export function gl(config: GLConfig = {}) {
+        const self = ((arg = '') => {
+                if (typeof arg === 'function') return self.frame.mount(arg)
+        }) as GL
+
+        // initial value
+        self.id = config.id ?? 'myCanvas'
+        self.size = config.size ?? [0, 0]
+        self.mouse = config.mouse ?? [0, 0]
+        self.count = config.count ?? 1000
+        self.frag = config.frag ?? config.fragShader ?? ''
+        self.vert = config.vert ?? config.vertShader ?? ''
+        self.lastActiveUnit = config.lastActiveUnit ?? 0
+
+        // core state
+        self.event = glEvent(self)
+        self.frame = frame()
+        self.stride = nested((_key, value: any = []) => (value.length / self.count) << 0)
+        self.activeUnit = nested(() => self.lastActiveUnit++)
+        self.uniformType = nested((_key, value: any = [], isMatrix = false) => {
+                if (typeof value === 'number') return `uniform1f`
+                if (!isMatrix) return `uniform${value.length}fv`
+                else return `uniformMatrix${Math.sqrt(value.length) << 0}fv`
+        })
+        self.location = nested((key, isAttribute = false) => {
+                return isAttribute
+                        ? self.gl?.getAttribLocation(self.pg, key)
+                        : self.gl?.getUniformLocation(self.pg, key)
+        })
+
+        // setter
+        self.setDpr = (...args) => void self.event('resize', ...args) || self
+        self.setSize = (...args) => void self.event('resize', ...args) || self
+        self.setFrame = (frame) => void self.frame.mount(frame) || self
+        self.setMount = (mount) => void self.event.mount({ mount }) || self
+        self.setClean = (clean) => void self.event.mount({ clean }) || self
+
+        // uniform
+        self.setUniform = durable((key, value, isMatrix = false) => {
+                const type = self.uniformType(key, value, isMatrix)
+                if (isMatrix)
+                        self.setFrame(() => self.gl[type](self.location(key), false, value))
+                else self.setFrame(() => self.gl[type](self.location(key), value))
+        }, self)
+
+        // attribute
+        self.setAttribute = durable((key, value, iboValue) => {
+                self.setFrame(() => {
+                        const { gl } = self
+                        const stride = self.stride(key, value)
+                        const location = self.location(key, true)
+                        gl.bindBuffer(gl.ARRAY_BUFFER, createVbo(gl, value))
+                        gl.enableVertexAttribArray(location)
+                        gl.vertexAttribPointer(location, stride, gl.FLOAT, false, 0, 0)
+                        if (iboValue)
+                                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, createIbo(gl, iboValue))
+                })
+        }, self)
+
+        // texture
+        self.setTexture = durable((key, src) => {
+                const image = new Image()
+                image.addEventListener('load', self.event.on('load'), false)
+                Object.assign(image, { src, alt: key, crossOrigin: 'anonymous' })
+        }, self)
+
+        return self
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "glre",
+  "author": "tseijp",
+  "license": "MIT",
+  "version": "0.1.0",
+  "module": "index.js",
+  "types": "index.ts",
+  "main": "index.cjs.js",
+  "umd": "index.develop.js",
+  "private": false,
+  "sideEffect": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "reev": "0.3.0",
+    "refr": "0.2.0"
+  },
+  "keywords": [
+    "glsl",
+    "webgl",
+    "hooks",
+    "react",
+    "reactjs",
+    "reactive",
+    "solid",
+    "typescript"
+  ],
+  "files": [
+    "index.js",
+    "index.cjs.js",
+    "index.develop.js",
+    "index.product.js",
+    "index.ts",
+    "events.ts",
+    "helpers.ts",
+    "utils.ts",
+    "types.ts"
+  ]
+}

package/types.ts

@@ -0,0 +1,62 @@
+/**
+ * ref: https://stackoverflow.com/questions/52489261/typescript-can-i-define-an-n-length-tuple-type
+ */
+import type { Frame, Fun } from 'refr'
+import type { Nested, Event } from 'reev'
+
+export type Uniform = number | number[]
+
+export type Attribute = number[]
+
+export type Attributes = Record<string, Attribute>
+
+export type Uniforms = Record<string, Uniform>
+
+export interface GL {
+        (shader: string): GL
+        /**
+         * initial value
+         */
+        id: string
+        size: [number, number]
+        mouse: [number, number]
+        count: number
+        frag: string
+        vert: string
+        lastActiveUnit: number
+        /**
+         * core state
+         */
+        gl: any
+        pg: any
+        el: any
+        event: Event
+        frame: Frame
+        stride: Nested<number>
+        location: Nested<any>
+        activeUnit: Nested<number>
+        uniformType: Nested<string>
+        /**
+         * setter
+         */
+        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
+        setAttribute(key: string, value: Attribute, iboValue?: Attribute): GL
+        setTexture(key: string, value: string): GL
+}
+
+export interface GLConfig {
+        id?: string
+        size?: [number, number]
+        mouse?: [number, number]
+        count?: number
+        frag?: string
+        vert?: string
+        fragShader?: string
+        vertShader?: string
+        lastActiveUnit?: number
+}

package/utils.ts

@@ -0,0 +1,148 @@
+export function createShader(gl, source, type) {
+        const shader = gl.createShader(type)
+        gl.shaderSource(shader, source)
+        gl.compileShader(shader)
+        if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                return shader
+        } else console.warn(gl.getShaderInfoLog(shader))
+}
+
+export function createProgram(gl, vs, fs) {
+        const program = gl.createProgram()
+        gl.attachShader(program, vs)
+        gl.attachShader(program, fs)
+        gl.linkProgram(program)
+        if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
+                gl.useProgram(program)
+                return program
+        } else {
+                console.log(gl.getProgramInfoLog(program))
+                return null
+        }
+}
+
+export function createVbo(gl, data) {
+        if (!data) return
+        const vbo = gl.createBuffer()
+        gl.bindBuffer(gl.ARRAY_BUFFER, vbo)
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, null)
+        return vbo
+}
+
+export function createIbo(gl, data) {
+        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.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null)
+        return ibo
+}
+
+export function createFramebuffer(gl, width, height) {
+        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)
+        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.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.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
+        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.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.bindTexture(gl.TEXTURE_2D, null)
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null)
+        return { frameBuffer, texture }
+}
+
+export function createTexture(gl, img) {
+        const texture = gl.createTexture()
+        gl.bindTexture(gl.TEXTURE_2D, texture)
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img)
+        gl.generateMipmap(gl.TEXTURE_2D)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_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.bindTexture(gl.TEXTURE_2D, null)
+        return texture
+}
+
+export function lookAt(eye = [0, 0, 3], center = [0, 0, 0], up = [0, 1, 0]) {
+        const ret = new Float32Array(16)
+        const [ex, ey, ez] = eye
+        const [cx, cy, cz] = center
+        const [ux, uy, uz] = up
+        let [z0, z1, z2] = [ex - cx, ey - cy, ez - cz]
+        let lz = 1 / Math.sqrt(z0 ** 2 + z1 ** 2 + z2 ** 2)
+        ;[z0, z1, z2] = !lz ? [0, 0, 0] : [z0 * lz, z1 * lz, z2 * lz]
+        let [x0, x1, x2] = [uy * z2 - uz * z1, uz * z0 - ux * z2, ux * z1 - uy * z0]
+        let lx = 1 / Math.sqrt(x0 ** 2 + x1 ** 2 + x2 ** 2)
+        ;[x0, x1, x2] = !lx ? [0, 0, 0] : [x0 * lx, x1 * lx, x2 * lx]
+        let [y0, y1, y2] = [z1 * x2 - z2 * x1, z2 * x0 - z0 * x2, z0 * x1 - z1 * x0]
+        let ly = 1 / Math.sqrt(y0 ** 2 + y1 ** 2 + y2 ** 2)
+        ;[y0, y1, y2] = !ly ? [0, 0, 0] : [y0 * ly, y1 * ly, y2 * ly]
+        ret[0] = x0
+        ret[1] = y0
+        ret[2] = z0
+        ret[3] = 0
+        ret[4] = x1
+        ret[5] = y1
+        ret[6] = z1
+        ret[7] = 0
+        ret[8] = x2
+        ret[9] = y2
+        ret[10] = z2
+        ret[11] = 0
+        ret[12] = -(x0 * ex + x1 * ey + x2 * ez)
+        ret[13] = -(y0 * ex + y1 * ey + y2 * ez)
+        ret[14] = -(z0 * ex + z1 * ey + z2 * ez)
+        ret[15] = 1
+        return ret
+}
+
+export function perspective(fovy = 60, aspect = 1, near = 0.1, far = 10) {
+        const ret = new Float32Array(16)
+        const r = 1 / Math.tan((fovy * Math.PI) / 360)
+        const d = far - near
+        ret[0] = r / aspect
+        ret[1] = ret[2] = ret[3] = ret[4] = 0
+        ret[6] = ret[7] = ret[8] = ret[9] = 0
+        ret[12] = ret[13] = ret[15] = 0
+        ret[5] = r
+        ret[10] = -(far + near) / d
+        ret[11] = -1
+        ret[14] = -(far * near * 2) / d
+        return ret
+}
+
+export function identity() {
+        const ret = new Float32Array(16)
+        ret[1] = ret[2] = ret[3] = ret[4] = 0
+        ret[6] = ret[7] = ret[8] = ret[9] = 0
+        ret[11] = ret[12] = ret[13] = ret[14] = 0
+        ret[0] = ret[5] = ret[10] = ret[15] = 1
+        return ret
+}