glre 0.3.1 → 0.4.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/events.ts +29 -29
- package/index.cjs.js +1 -1
- package/index.develop.js +1 -1
- package/index.js +1 -1
- package/index.ts +33 -10
- package/package.json +1 -1
- package/types.ts +3 -0
package/events.ts
CHANGED
|
@@ -7,47 +7,47 @@ export const glEvent = (self: GL) =>
|
|
|
7
7
|
// run if canvas is mounted
|
|
8
8
|
mount(e) {
|
|
9
9
|
// @ts-ignore
|
|
10
|
-
const el = (self.el = document.getElementById(self.id))
|
|
11
|
-
const gl = (self.gl = el?.getContext(
|
|
12
|
-
const frag = createShader(gl, self.frag, gl?.FRAGMENT_SHADER)
|
|
13
|
-
const vert = createShader(gl, self.vert, gl?.VERTEX_SHADER)
|
|
14
|
-
self.pg = createProgram(gl, vert, frag)
|
|
15
|
-
window.addEventListener(
|
|
16
|
-
window.addEventListener(
|
|
17
|
-
e(
|
|
18
|
-
self.frame()
|
|
10
|
+
const el = (self.el = document.getElementById(self.id)) // @ts-ignore
|
|
11
|
+
const gl = (self.gl = el?.getContext('webgl'))
|
|
12
|
+
const frag = createShader(gl, self.frag, gl?.FRAGMENT_SHADER)
|
|
13
|
+
const vert = createShader(gl, self.vert, gl?.VERTEX_SHADER)
|
|
14
|
+
self.pg = createProgram(gl, vert, frag) // !!!
|
|
15
|
+
window.addEventListener('resize', e.on('resize'))
|
|
16
|
+
window.addEventListener('mousemove', e.on('mousemove'))
|
|
17
|
+
e('resize')
|
|
18
|
+
self.frame()
|
|
19
19
|
},
|
|
20
20
|
// run if canvas is cleaned
|
|
21
21
|
clean(e) {
|
|
22
|
-
window.removeEventListener(
|
|
23
|
-
window.removeEventListener(
|
|
22
|
+
window.removeEventListener('resize', e.on('resize'))
|
|
23
|
+
window.removeEventListener('mousemove', e.on('mousemove'))
|
|
24
24
|
},
|
|
25
25
|
// user mousemove event
|
|
26
26
|
mousemove(_e, { clientX, clientY }, ...args) {
|
|
27
|
-
const [w, h] = self.size
|
|
28
|
-
self.mouse[0] = (clientX - w / 2) / (w / 2)
|
|
29
|
-
self.mouse[1] = -(clientY - h / 2) / (h / 2)
|
|
30
|
-
self.setUniform(
|
|
27
|
+
const [w, h] = self.size
|
|
28
|
+
self.mouse[0] = (clientX - w / 2) / (w / 2)
|
|
29
|
+
self.mouse[1] = -(clientY - h / 2) / (h / 2)
|
|
30
|
+
self.setUniform('mouse', self.mouse)
|
|
31
31
|
},
|
|
32
32
|
// user mousemove event
|
|
33
33
|
resize(_e, _resizeEvent, width = 0, height = 0) {
|
|
34
|
-
self.size[0] = self.el.width = width || window.innerWidth
|
|
35
|
-
self.size[1] = self.el.height = height || window.innerHeight
|
|
36
|
-
self.setUniform(
|
|
34
|
+
self.size[0] = self.el.width = width || window.innerWidth
|
|
35
|
+
self.size[1] = self.el.height = height || window.innerHeight
|
|
36
|
+
self.setUniform('resolution', self.size)
|
|
37
37
|
},
|
|
38
38
|
// load image event
|
|
39
39
|
load(_e, loadEvent) {
|
|
40
40
|
self.setFrame(() => {
|
|
41
|
-
const image = loadEvent.path[0]
|
|
42
|
-
const activeUnit = self.activeUnit(image.alt)
|
|
43
|
-
const location = self.location(image.alt)
|
|
44
|
-
const texture = createTexture(self.gl, image)
|
|
41
|
+
const image = loadEvent.path[0]
|
|
42
|
+
const activeUnit = self.activeUnit(image.alt)
|
|
43
|
+
const location = self.location(image.alt)
|
|
44
|
+
const texture = createTexture(self.gl, image)
|
|
45
45
|
self.setFrame(() => {
|
|
46
|
-
self.gl.uniform1i(location, activeUnit)
|
|
47
|
-
self.gl.activeTexture(self.gl[
|
|
48
|
-
self.gl.bindTexture(self.gl.TEXTURE_2D, texture)
|
|
49
|
-
return true
|
|
50
|
-
})
|
|
51
|
-
})
|
|
46
|
+
self.gl.uniform1i(location, activeUnit)
|
|
47
|
+
self.gl.activeTexture(self.gl['TEXTURE' + activeUnit])
|
|
48
|
+
self.gl.bindTexture(self.gl.TEXTURE_2D, texture)
|
|
49
|
+
return true
|
|
50
|
+
})
|
|
51
|
+
})
|
|
52
52
|
}
|
|
53
|
-
} as any)
|
|
53
|
+
} as any)
|
package/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("refr"),
|
|
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),o=e.gl=null==r?void 0:r.getContext("webgl"),i=t(o,e.frag,null==o?void 0:o.FRAGMENT_SHADER),a=t(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}))}))}})},o=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],i=function(t){var i=function e(n){return void 0===n&&(n=""),"function"==typeof n&&e.frame.mount(n),"string"!=typeof n||e.frag||(e.frag=n),"string"==typeof n&&e.frag&&(e.vert=n),e};i.id="myCanvas",i.frag="\n precision highp float;\n uniform vec2 resolution;\n void main() {\n gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n }\n",i.vert="\n attribute vec4 a_position;\n void main() {\n gl_Position = a_position;\n }\n",i.size=[0,0],i.mouse=[0,0],i.count=6;var a=i.event=r(i),u=i.frame=e.frame();return i.lastActiveUnit=0,i.activeUnit=n.nested((function(){return i.lastActiveUnit++})),i.stride=n.nested((function(e,n,t){var r=t?Math.max.apply(Math,t)+1:i.count;return n.length/r<<0})),i.uniformType=n.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"})),i.location=n.nested((function(e,n){var t,r;return void 0===n&&(n=!1),n?null==(t=i.gl)?void 0:t.getAttribLocation(i.pg,e):null==(r=i.gl)?void 0:r.getUniformLocation(i.pg,e)})),i.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))||i},i.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))||i},i.setFrame=function(e){return void u.mount(e)||i},i.setMount=function(e){return void a.mount({mount:e})||i},i.setClean=function(e){return void a.mount({clean:e})||i},i.setConfig=n.durable((function(e,n){i[e]=n}),i),i.setUniform=n.durable((function(e,n,t){void 0===t&&(t=!1);var r=i.uniformType(e,n,t);i.setFrame(t?function(){return i.gl[r](i.location(e),!1,n)}:function(){return i.gl[r](i.location(e),n)})}),i),i.setAttribute=n.durable((function(e,n,t){i.setFrame((function(){var r=i.gl,o=i.stride(e,n,t),a=i.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,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))}))}),i),i.setTexture=n.durable((function(e,n){var t=new Image;t.addEventListener("load",a.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),i),i.mount=function(){return a("mount")},i.clean=function(){return a("clean")},i.clear=function(e){return i.gl.clear(i.gl[e||"COLOR_BUFFER_BIT"])},i.viewport=function(e){var n;return(n=i.gl).viewport.apply(n,[0,0].concat(e||i.size))},i.drawArrays=function(e){return void 0===e&&(e="TRIANGLES"),i.gl.drawArrays(i.gl[e],0,i.count)},i.drawElements=function(e,n){return void 0===e&&(e="TRIANGLES"),void 0===n&&(n="UNSIGNED_SHORT"),i.gl.drawElements(i.gl[e],i.count,i.gl[n],0)},"string"==typeof t&&(t={id:t}),"object"==typeof t&&i.setConfig(t),6===i.count&&i.setAttribute({a_position:o}),i};i.default=null,exports.default=i,exports.gl=i;
|
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 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){
|
|
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=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],a=function(e){var r=function e(n){return void 0===n&&(n=""),"function"==typeof n&&e.frame.mount(n),"string"!=typeof n||e.frag||(e.frag=n),"string"==typeof n&&e.frag&&(e.vert=n),e};r.id="myCanvas",r.frag="\n precision highp float;\n uniform vec2 resolution;\n void main() {\n gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n }\n",r.vert="\n attribute vec4 a_position;\n void main() {\n gl_Position = a_position;\n }\n",r.size=[0,0],r.mouse=[0,0],r.count=6;var a=r.event=o(r),u=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 a.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 a.apply(void 0,["resize"].concat(n))||r},r.setFrame=function(e){return void u.mount(e)||r},r.setMount=function(e){return void a.mount({mount:e})||r},r.setClean=function(e){return void a.mount({clean:e})||r},r.setConfig=t.durable((function(e,n){r[e]=n}),r),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",a.on("load"),!1),Object.assign(t,{src:n,alt:e,crossOrigin:"anonymous"})}),r),r.mount=function(){return a("mount")},r.clean=function(){return a("clean")},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="TRIANGLES"),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)},"string"==typeof e&&(e={id:e}),"object"==typeof e&&r.setConfig(e),6===r.count&&r.setAttribute({a_position:i}),r};a.default=null,e.default=a,e.gl=a,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=function(n){var o=function e(n){
|
|
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=[-1,-1,1,-1,-1,1,-1,1,1,-1,1,1],u=function(n){var o=function e(n){return void 0===n&&(n=""),"function"==typeof n&&e.frame.mount(n),"string"!=typeof n||e.frag||(e.frag=n),"string"==typeof n&&e.frag&&(e.vert=n),e};o.id="myCanvas",o.frag="\n precision highp float;\n uniform vec2 resolution;\n void main() {\n gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);\n }\n",o.vert="\n attribute vec4 a_position;\n void main() {\n gl_Position = a_position;\n }\n",o.size=[0,0],o.mouse=[0,0],o.count=6;var 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=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 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}),o),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.mount=function(){return u("mount")},o.clean=function(){return u("clean")},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="TRIANGLES"),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)},"string"==typeof n&&(n={id:n}),"object"==typeof n&&o.setConfig(n),6===o.count&&o.setAttribute({a_position:a}),o};u.default=null;export{u as default,u as gl};
|
package/index.ts
CHANGED
|
@@ -4,15 +4,35 @@ import { durable, nested } from 'reev'
|
|
|
4
4
|
import { createVbo, createIbo } from './utils'
|
|
5
5
|
import type { GL, GLConfig } from './types'
|
|
6
6
|
|
|
7
|
+
const a_position = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
|
|
8
|
+
|
|
9
|
+
const _defaultVertexShader = `
|
|
10
|
+
attribute vec4 a_position;
|
|
11
|
+
void main() {
|
|
12
|
+
gl_Position = a_position;
|
|
13
|
+
}
|
|
14
|
+
`
|
|
15
|
+
|
|
16
|
+
const _defaultFragmentShader = `
|
|
17
|
+
precision highp float;
|
|
18
|
+
uniform vec2 resolution;
|
|
19
|
+
void main() {
|
|
20
|
+
gl_FragColor = vec4(fract(gl_FragCoord.xy / resolution), 0, 1);
|
|
21
|
+
}
|
|
22
|
+
`
|
|
23
|
+
|
|
7
24
|
export const gl = (config?: string | Partial<GLConfig>) => {
|
|
8
25
|
const self = ((arg = '') => {
|
|
9
|
-
|
|
26
|
+
if (typeof arg === 'function') self.frame.mount(arg)
|
|
27
|
+
if (typeof arg === 'string' && !self.frag) self.frag = arg
|
|
28
|
+
if (typeof arg === 'string' && self.frag) self.vert = arg
|
|
29
|
+
return self
|
|
10
30
|
}) as GL
|
|
11
31
|
|
|
12
32
|
// default state
|
|
13
33
|
self.id = 'myCanvas'
|
|
14
|
-
self.frag =
|
|
15
|
-
self.vert =
|
|
34
|
+
self.frag = _defaultFragmentShader;
|
|
35
|
+
self.vert = _defaultVertexShader;
|
|
16
36
|
self.size = [0, 0]
|
|
17
37
|
self.mouse = [0, 0]
|
|
18
38
|
self.count = 6
|
|
@@ -45,10 +65,6 @@ export const gl = (config?: string | Partial<GLConfig>) => {
|
|
|
45
65
|
self.setClean = (clean) => void ev.mount({ clean }) || self
|
|
46
66
|
self.setConfig = durable((key, value) => void (self[key] = value), self)
|
|
47
67
|
|
|
48
|
-
// init config
|
|
49
|
-
if (typeof config === "string") config = { id: config }
|
|
50
|
-
if (typeof config === "object") self.setConfig(config)
|
|
51
|
-
|
|
52
68
|
// uniform
|
|
53
69
|
self.setUniform = durable((key, value, isMatrix = false) => {
|
|
54
70
|
const type = self.uniformType(key, value, isMatrix)
|
|
@@ -79,16 +95,23 @@ export const gl = (config?: string | Partial<GLConfig>) => {
|
|
|
79
95
|
}, self)
|
|
80
96
|
|
|
81
97
|
// shorthands
|
|
98
|
+
self.mount = () => ev("mount")
|
|
99
|
+
self.clean = () => ev("clean")
|
|
82
100
|
self.clear = (key) => self.gl.clear(self.gl[key || "COLOR_BUFFER_BIT"])
|
|
83
101
|
self.viewport = (size) => self.gl.viewport(0, 0, ...(size || self.size))
|
|
84
|
-
self.drawArrays = (mode = '
|
|
102
|
+
self.drawArrays = (mode = 'TRIANGLES') =>
|
|
85
103
|
self.gl.drawArrays(self.gl[mode], 0, self.count)
|
|
86
104
|
self.drawElements = (mode = 'TRIANGLES', type = 'UNSIGNED_SHORT') =>
|
|
87
105
|
self.gl.drawElements(self.gl[mode], self.count, self.gl[type], 0)
|
|
88
106
|
|
|
107
|
+
// init config
|
|
108
|
+
if (typeof config === "string") config = { id: config }
|
|
109
|
+
if (typeof config === "object") self.setConfig(config)
|
|
110
|
+
if (self.count === 6) self.setAttribute({ a_position })
|
|
111
|
+
|
|
89
112
|
return self;
|
|
90
113
|
}
|
|
91
114
|
|
|
92
|
-
|
|
93
|
-
|
|
115
|
+
gl.default = null as unknown as GL
|
|
94
116
|
|
|
117
|
+
export default gl
|
package/package.json
CHANGED
package/types.ts
CHANGED
|
@@ -37,6 +37,7 @@ export interface GL {
|
|
|
37
37
|
location: Nested<any>
|
|
38
38
|
activeUnit: Nested<number>
|
|
39
39
|
uniformType: Nested<string>
|
|
40
|
+
default: GL
|
|
40
41
|
/**
|
|
41
42
|
* setter
|
|
42
43
|
*/
|
|
@@ -68,6 +69,8 @@ export interface GL {
|
|
|
68
69
|
// key: K,
|
|
69
70
|
// value: GLConfig[K]
|
|
70
71
|
// ) => GL>,
|
|
72
|
+
mount(): void
|
|
73
|
+
clean(): void
|
|
71
74
|
clear(key?: GLClearMode): void
|
|
72
75
|
viewport(size: [number, number]): void
|
|
73
76
|
drawArrays(key?: GLDrawMode): void
|