@mateuszjs/magic-render 0.0.1-next.1

package/README.md

@@ -0,0 +1,5 @@
+_Hello there!_
+
+```bash
+npm i @mateuszjs/magic-render
+```

package/dist/701.8865a3847df7a00b654f.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_mateuszjs_magic_render=self.webpackChunk_mateuszjs_magic_render||[]).push([[701],{701:(e,t,n)=>{n.a(e,(async(e,_)=>{try{n.r(t),n.d(t,{State:()=>i.Uw,__wbg_error_53abcd6a461f73d8:()=>i.$X,__wbg_new_034f913e7636e987:()=>i.x4,__wbg_new_e69b5f66fda8f13c:()=>i.YV,__wbg_set_20cbc34131e76824:()=>i.H0,__wbg_set_425e70f7c64ac962:()=>i.Ls,__wbg_set_wasm:()=>i.lI,__wbg_stringify_eead5648c09faaf8:()=>i.Yg,__wbindgen_init_externref_table:()=>i.bL,__wbindgen_is_undefined:()=>i.vU,__wbindgen_number_new:()=>i.QR,__wbindgen_string_get:()=>i.qN,__wbindgen_string_new:()=>i.yc,__wbindgen_throw:()=>i.Qn});var r=n(962),i=n(895),o=e([r]);r=(o.then?(await o)():o)[0],(0,i.lI)(r),r.__wbindgen_start(),_()}catch(e){_(e)}}))},895:(e,t,n)=>{let _;function r(e){_=e}n.d(t,{$X:()=>T,H0:()=>m,Ls:()=>I,QR:()=>x,Qn:()=>Q,Uw:()=>b,YV:()=>y,Yg:()=>h,bL:()=>U,lI:()=>r,qN:()=>L,vU:()=>l,x4:()=>v,yc:()=>p});let i=new("undefined"==typeof TextDecoder?(0,module.require)("util").TextDecoder:TextDecoder)("utf-8",{ignoreBOM:!0,fatal:!0});i.decode();let o=null;function c(){return null!==o&&0!==o.byteLength||(o=new Uint8Array(_.memory.buffer)),o}function s(e,t){return e>>>=0,i.decode(c().subarray(e,e+t))}let u=0,d=new("undefined"==typeof TextEncoder?(0,module.require)("util").TextEncoder:TextEncoder)("utf-8");const a="function"==typeof d.encodeInto?function(e,t){return d.encodeInto(e,t)}:function(e,t){const n=d.encode(e);return t.set(n),{read:e.length,written:n.length}};let f=null;function w(){return(null===f||!0===f.buffer.detached||void 0===f.buffer.detached&&f.buffer!==_.memory.buffer)&&(f=new DataView(_.memory.buffer)),f}const g="undefined"==typeof FinalizationRegistry?{register:()=>{},unregister:()=>{}}:new FinalizationRegistry((e=>_.__wbg_state_free(e>>>0,1)));class b{static __wrap(e){e>>>=0;const t=Object.create(b.prototype);return t.__wbg_ptr=e,g.register(t,t.__wbg_ptr,t),t}__destroy_into_raw(){const e=this.__wbg_ptr;return this.__wbg_ptr=0,g.unregister(this),e}free(){const e=this.__destroy_into_raw();_.__wbg_state_free(e,0)}static new(e,t){const n=_.state_new(e,t);return b.__wrap(n)}add_texture(e,t){_.state_add_texture(this.__wbg_ptr,e,t)}get_shader_input(e){return _.state_get_shader_input(this.__wbg_ptr,e)}update_points(e,t){_.state_update_points(this.__wbg_ptr,e,t)}}function l(e){return void 0===e}function h(){return function(e,t){try{return e.apply(this,t)}catch(e){const t=function(e){const t=_.__externref_table_alloc();return _.__wbindgen_export_2.set(t,e),t}(e);_.__wbindgen_exn_store(t)}}((function(e){return JSON.stringify(e)}),arguments)}function p(e,t){return s(e,t)}function y(){return new Object}function x(e){return e}function m(e,t,n){e[t]=n}function v(){return new Array}function I(e,t,n){e[t>>>0]=n}function L(e,t){const n="string"==typeof t?t:void 0;var r=null==n?0:function(e,t,n){if(void 0===n){const n=d.encode(e),_=t(n.length,1)>>>0;return c().subarray(_,_+n.length).set(n),u=n.length,_}let _=e.length,r=t(_,1)>>>0;const i=c();let o=0;for(;o<_;o++){const t=e.charCodeAt(o);if(t>127)break;i[r+o]=t}if(o!==_){0!==o&&(e=e.slice(o)),r=n(r,_,_=o+3*e.length,1)>>>0;const t=c().subarray(r+o,r+_);o+=a(e,t).written,r=n(r,_,o,1)>>>0}return u=o,r}(n,_.__wbindgen_malloc,_.__wbindgen_realloc),i=u;w().setInt32(e+4,i,!0),w().setInt32(e+0,r,!0)}function Q(e,t){throw new Error(s(e,t))}const T="function"==typeof console.error?console.error:()=>{throw new Error("console.error is not defined")};function U(){const e=_.__wbindgen_export_2,t=e.grow(4);e.set(0,void 0),e.set(t+0,void 0),e.set(t+1,null),e.set(t+2,!0),e.set(t+3,!1)}},962:(e,t,n)=>{var _=n(895);e.exports=n.v(t,e.id,"2e9c8dbbfc49aa9c830e",{"./index_bg.js":{__wbindgen_is_undefined:_.vU,__wbg_stringify_eead5648c09faaf8:_.Yg,__wbindgen_string_new:_.yc,__wbg_new_e69b5f66fda8f13c:_.YV,__wbindgen_number_new:_.QR,__wbg_set_20cbc34131e76824:_.H0,__wbg_new_034f913e7636e987:_.x4,__wbg_set_425e70f7c64ac962:_.Ls,__wbindgen_string_get:_.qN,__wbindgen_throw:_.Qn,__wbg_error_53abcd6a461f73d8:_.$X,__wbindgen_init_externref_table:_.bL}})}}]);

package/dist/index.091b35ccc88a5b66a13d.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_mateuszjs_magic_render=self.webpackChunk_mateuszjs_magic_render||[]).push([[57],{845:(e,s,a)=>{new Float32Array}},e=>{e(e.s=845)}]);

package/dist/index.html

@@ -0,0 +1,13 @@
+<!doctype html><head><base href="/"><meta charset="utf-8"/><title></title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"><style>html,
+    body,
+    canvas {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      display: grid;
+      grid-template-columns: 100px minmax(0, 1fr);
+    }</style><script defer="defer" src="test-runtime.b4b1366194213dd85a27.js"></script><script defer="defer" src="test.js"></script></head><body><aside><input type="file"/> <button id="img-position">Update image position</button></aside><canvas></canvas></body>

package/dist/runtime.b446baaefd034f2441f4.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e,r,t,a,n,o,i,s={},c={};function l(e){var r=c[e];if(void 0!==r)return r.exports;var t=c[e]={id:e,exports:{}};return s[e](t,t.exports,l),t.exports}l.m=s,e="function"==typeof Symbol?Symbol("webpack queues"):"__webpack_queues__",r="function"==typeof Symbol?Symbol("webpack exports"):"__webpack_exports__",t="function"==typeof Symbol?Symbol("webpack error"):"__webpack_error__",a=e=>{e&&e.d<1&&(e.d=1,e.forEach((e=>e.r--)),e.forEach((e=>e.r--?e.r++:e())))},l.a=(n,o,i)=>{var s;i&&((s=[]).d=-1);var c,l,u,p=new Set,f=n.exports,d=new Promise(((e,r)=>{u=r,l=e}));d[r]=f,d[e]=e=>(s&&e(s),p.forEach(e),d.catch((e=>{}))),n.exports=d,o((n=>{var o;c=(n=>n.map((n=>{if(null!==n&&"object"==typeof n){if(n[e])return n;if(n.then){var o=[];o.d=0,n.then((e=>{i[r]=e,a(o)}),(e=>{i[t]=e,a(o)}));var i={};return i[e]=e=>e(o),i}}var s={};return s[e]=e=>{},s[r]=n,s})))(n);var i=()=>c.map((e=>{if(e[t])throw e[t];return e[r]})),l=new Promise((r=>{(o=()=>r(i)).r=0;var t=e=>e!==s&&!p.has(e)&&(p.add(e),e&&!e.d&&(o.r++,e.push(o)));c.map((r=>r[e](t)))}));return o.r?l:i()}),(e=>(e?u(d[t]=e):l(f),a(s)))),s&&s.d<0&&(s.d=0)},n=[],l.O=(e,r,t,a)=>{if(!r){var o=1/0;for(u=0;u<n.length;u++){for(var[r,t,a]=n[u],i=!0,s=0;s<r.length;s++)(!1&a||o>=a)&&Object.keys(l.O).every((e=>l.O[e](r[s])))?r.splice(s--,1):(i=!1,a<o&&(o=a));if(i){n.splice(u--,1);var c=t();void 0!==c&&(e=c)}}return e}a=a||0;for(var u=n.length;u>0&&n[u-1][2]>a;u--)n[u]=n[u-1];n[u]=[r,t,a]},l.d=(e,r)=>{for(var t in r)l.o(r,t)&&!l.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},l.f={},l.e=e=>Promise.all(Object.keys(l.f).reduce(((r,t)=>(l.f[t](e,r),r)),[])),l.u=e=>e+".8865a3847df7a00b654f.js",l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o={},i="@mateuszjs/magic-render:",l.l=(e,r,t,a)=>{if(o[e])o[e].push(r);else{var n,s;if(void 0!==t)for(var c=document.getElementsByTagName("script"),u=0;u<c.length;u++){var p=c[u];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==i+t){n=p;break}}n||(s=!0,(n=document.createElement("script")).charset="utf-8",n.timeout=120,l.nc&&n.setAttribute("nonce",l.nc),n.setAttribute("data-webpack",i+t),n.src=e),o[e]=[r];var f=(r,t)=>{n.onerror=n.onload=null,clearTimeout(d);var a=o[e];if(delete o[e],n.parentNode&&n.parentNode.removeChild(n),a&&a.forEach((e=>e(t))),r)return r(t)},d=setTimeout(f.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=f.bind(null,n.onerror),n.onload=f.bind(null,n.onload),s&&document.head.appendChild(n)}},l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.v=(e,r,t,a)=>{var n=fetch(l.p+""+t+".module.wasm"),o=()=>n.then((e=>e.arrayBuffer())).then((e=>WebAssembly.instantiate(e,a))).then((r=>Object.assign(e,r.instance.exports)));return n.then((r=>"function"==typeof WebAssembly.instantiateStreaming?WebAssembly.instantiateStreaming(r,a).then((r=>Object.assign(e,r.instance.exports)),(e=>{if("application/wasm"!==r.headers.get("Content-Type"))return console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n",e),o();throw e})):o()))},(()=>{var e;l.g.importScripts&&(e=l.g.location+"");var r=l.g.document;if(!e&&r&&(r.currentScript&&"SCRIPT"===r.currentScript.tagName.toUpperCase()&&(e=r.currentScript.src),!e)){var t=r.getElementsByTagName("script");if(t.length)for(var a=t.length-1;a>-1&&(!e||!/^http(s?):/.test(e));)e=t[a--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),l.p=e})(),(()=>{var e={121:0};l.f.j=(r,t)=>{var a=l.o(e,r)?e[r]:void 0;if(0!==a)if(a)t.push(a[2]);else if(121!=r){var n=new Promise(((t,n)=>a=e[r]=[t,n]));t.push(a[2]=n);var o=l.p+l.u(r),i=new Error;l.l(o,(t=>{if(l.o(e,r)&&(0!==(a=e[r])&&(e[r]=void 0),a)){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+n+": "+o+")",i.name="ChunkLoadError",i.type=n,i.request=o,a[1](i)}}),"chunk-"+r,r)}else e[r]=0},l.O.j=r=>0===e[r];var r=(r,t)=>{var a,n,[o,i,s]=t,c=0;if(o.some((r=>0!==e[r]))){for(a in i)l.o(i,a)&&(l.m[a]=i[a]);if(s)var u=s(l)}for(r&&r(t);c<o.length;c++)n=o[c],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(u)},t=self.webpackChunk_mateuszjs_magic_render=self.webpackChunk_mateuszjs_magic_render||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();

package/dist/test-runtime.b4b1366194213dd85a27.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e,r,t,a,n,o,i,s={},c={};function l(e){var r=c[e];if(void 0!==r)return r.exports;var t=c[e]={id:e,exports:{}};return s[e](t,t.exports,l),t.exports}l.m=s,e="function"==typeof Symbol?Symbol("webpack queues"):"__webpack_queues__",r="function"==typeof Symbol?Symbol("webpack exports"):"__webpack_exports__",t="function"==typeof Symbol?Symbol("webpack error"):"__webpack_error__",a=e=>{e&&e.d<1&&(e.d=1,e.forEach((e=>e.r--)),e.forEach((e=>e.r--?e.r++:e())))},l.a=(n,o,i)=>{var s;i&&((s=[]).d=-1);var c,l,u,p=new Set,f=n.exports,d=new Promise(((e,r)=>{u=r,l=e}));d[r]=f,d[e]=e=>(s&&e(s),p.forEach(e),d.catch((e=>{}))),n.exports=d,o((n=>{var o;c=(n=>n.map((n=>{if(null!==n&&"object"==typeof n){if(n[e])return n;if(n.then){var o=[];o.d=0,n.then((e=>{i[r]=e,a(o)}),(e=>{i[t]=e,a(o)}));var i={};return i[e]=e=>e(o),i}}var s={};return s[e]=e=>{},s[r]=n,s})))(n);var i=()=>c.map((e=>{if(e[t])throw e[t];return e[r]})),l=new Promise((r=>{(o=()=>r(i)).r=0;var t=e=>e!==s&&!p.has(e)&&(p.add(e),e&&!e.d&&(o.r++,e.push(o)));c.map((r=>r[e](t)))}));return o.r?l:i()}),(e=>(e?u(d[t]=e):l(f),a(s)))),s&&s.d<0&&(s.d=0)},n=[],l.O=(e,r,t,a)=>{if(!r){var o=1/0;for(u=0;u<n.length;u++){for(var[r,t,a]=n[u],i=!0,s=0;s<r.length;s++)(!1&a||o>=a)&&Object.keys(l.O).every((e=>l.O[e](r[s])))?r.splice(s--,1):(i=!1,a<o&&(o=a));if(i){n.splice(u--,1);var c=t();void 0!==c&&(e=c)}}return e}a=a||0;for(var u=n.length;u>0&&n[u-1][2]>a;u--)n[u]=n[u-1];n[u]=[r,t,a]},l.d=(e,r)=>{for(var t in r)l.o(r,t)&&!l.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},l.f={},l.e=e=>Promise.all(Object.keys(l.f).reduce(((r,t)=>(l.f[t](e,r),r)),[])),l.u=e=>e+".8865a3847df7a00b654f.js",l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),o={},i="@mateuszjs/magic-render:",l.l=(e,r,t,a)=>{if(o[e])o[e].push(r);else{var n,s;if(void 0!==t)for(var c=document.getElementsByTagName("script"),u=0;u<c.length;u++){var p=c[u];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==i+t){n=p;break}}n||(s=!0,(n=document.createElement("script")).charset="utf-8",n.timeout=120,l.nc&&n.setAttribute("nonce",l.nc),n.setAttribute("data-webpack",i+t),n.src=e),o[e]=[r];var f=(r,t)=>{n.onerror=n.onload=null,clearTimeout(d);var a=o[e];if(delete o[e],n.parentNode&&n.parentNode.removeChild(n),a&&a.forEach((e=>e(t))),r)return r(t)},d=setTimeout(f.bind(null,void 0,{type:"timeout",target:n}),12e4);n.onerror=f.bind(null,n.onerror),n.onload=f.bind(null,n.onload),s&&document.head.appendChild(n)}},l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.v=(e,r,t,a)=>{var n=fetch(l.p+""+t+".module.wasm"),o=()=>n.then((e=>e.arrayBuffer())).then((e=>WebAssembly.instantiate(e,a))).then((r=>Object.assign(e,r.instance.exports)));return n.then((r=>"function"==typeof WebAssembly.instantiateStreaming?WebAssembly.instantiateStreaming(r,a).then((r=>Object.assign(e,r.instance.exports)),(e=>{if("application/wasm"!==r.headers.get("Content-Type"))return console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n",e),o();throw e})):o()))},(()=>{var e;l.g.importScripts&&(e=l.g.location+"");var r=l.g.document;if(!e&&r&&(r.currentScript&&"SCRIPT"===r.currentScript.tagName.toUpperCase()&&(e=r.currentScript.src),!e)){var t=r.getElementsByTagName("script");if(t.length)for(var a=t.length-1;a>-1&&(!e||!/^http(s?):/.test(e));)e=t[a--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),l.p=e})(),(()=>{var e={356:0};l.f.j=(r,t)=>{var a=l.o(e,r)?e[r]:void 0;if(0!==a)if(a)t.push(a[2]);else if(356!=r){var n=new Promise(((t,n)=>a=e[r]=[t,n]));t.push(a[2]=n);var o=l.p+l.u(r),i=new Error;l.l(o,(t=>{if(l.o(e,r)&&(0!==(a=e[r])&&(e[r]=void 0),a)){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;i.message="Loading chunk "+r+" failed.\n("+n+": "+o+")",i.name="ChunkLoadError",i.type=n,i.request=o,a[1](i)}}),"chunk-"+r,r)}else e[r]=0},l.O.j=r=>0===e[r];var r=(r,t)=>{var a,n,[o,i,s]=t,c=0;if(o.some((r=>0!==e[r]))){for(a in i)l.o(i,a)&&(l.m[a]=i[a]);if(s)var u=s(l)}for(r&&r(t);c<o.length;c++)n=o[c],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(u)},t=self.webpackChunk_mateuszjs_magic_render=self.webpackChunk_mateuszjs_magic_render||[];t.forEach(r.bind(null,0)),t.push=r.bind(null,t.push.bind(t))})()})();

package/dist/test.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_mateuszjs_magic_render=self.webpackChunk_mateuszjs_magic_render||[]).push([[57,423],{848:(e,t,r)=>{var n=r(845);!function(){var e,t,r,o;e=this,t=void 0,o=function*(){const e=document.querySelector("canvas"),t=yield(0,n.A)(e);document.querySelector("input").addEventListener("change",(e=>{const{files:r}=e.target;if(!r)return;const n=new Image;n.src=URL.createObjectURL(r[0]),n.onload=()=>{t.addImage(n)}}));let r=100;document.querySelector("#img-position").addEventListener("click",(()=>{t.updatePoints(0,[{x:r,y:r},{x:r+400,y:r},{x:r+400,y:r+400},{x:r,y:r+400}]),r+=10}))},new((r=void 0)||(r=Promise))((function(n,i){function a(e){try{s(o.next(e))}catch(e){i(e)}}function u(e){try{s(o.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,u)}s((o=o.apply(e,t||[])).next())}))}()},214:(e,t,r)=>{function n(e,t,r,n){e.width=Math.max(1,Math.min(t,n.limits.maxTextureDimension2D)),e.height=Math.max(1,Math.min(r,n.limits.maxTextureDimension2D))}function o(e,t,r){new ResizeObserver((e=>{for(const o of e)n(o.target,0|o.contentBoxSize[0].inlineSize,0|o.contentBoxSize[0].blockSize,t),r()})).observe(e),n(e,e.clientWidth,e.clientHeight,t)}r.d(t,{A:()=>o})},773:(e,t,r)=>{let n;function o(e,t){const r=e.getCurrentTexture();return function(e,t,r){n&&n.width===t&&n.height===r||(null==n||n.destroy(),n=e.createTexture({size:[t,r],format:"depth24plus",usage:GPUTextureUsage.RENDER_ATTACHMENT}))}(t,r.width,r.height),{label:"our render to canvas renderPass",colorAttachments:[{view:r.createView(),clearValue:[0,0,0,1],loadOp:"clear",storeOp:"store"}]}}r.d(t,{A:()=>o})},845:(e,t,r)=>{r.d(t,{A:()=>A});var n=r(214),o=function(e,t,r,n){return new(r||(r=Promise))((function(o,i){function a(e){try{s(n.next(e))}catch(e){i(e)}}function u(e){try{s(n.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,u)}s((n=n.apply(e,t||[])).next())}))};const i={fromMat4:(e,t=new Float32Array(12))=>(t[0]=e[0],t[1]=e[1],t[2]=e[2],t[4]=e[4],t[5]=e[5],t[6]=e[6],t[8]=e[8],t[9]=e[9],t[10]=e[10],t),projection:(e,t,r=new Float32Array(12))=>(r[0]=2/e,r[1]=0,r[2]=0,r[4]=0,r[5]=-2/t,r[6]=0,r[8]=-1,r[9]=1,r[10]=1,r),identity:(e=new Float32Array(12))=>(e[0]=1,e[1]=0,e[2]=0,e[4]=0,e[5]=1,e[6]=0,e[8]=0,e[9]=0,e[10]=1,e),multiply(e,t,r=new Float32Array(12)){r=r||new Float32Array(12);const n=e[0],o=e[1],i=e[2],a=e[4],u=e[5],s=e[6],l=e[8],f=e[9],c=e[10],d=t[0],p=t[1],g=t[2],m=t[4],h=t[5],v=t[6],b=t[8],x=t[9],y=t[10];return r[0]=d*n+p*a+g*l,r[1]=d*o+p*u+g*f,r[2]=d*i+p*s+g*c,r[4]=m*n+h*a+v*l,r[5]=m*o+h*u+v*f,r[6]=m*i+h*s+v*c,r[8]=b*n+x*a+y*l,r[9]=b*o+x*u+y*f,r[10]=b*i+x*s+y*c,r},translation:([e,t],r=new Float32Array(12))=>(r[0]=1,r[1]=0,r[2]=0,r[4]=0,r[5]=1,r[6]=0,r[8]=e,r[9]=t,r[10]=1,r),rotation(e,t=new Float32Array(12)){const r=Math.cos(e),n=Math.sin(e);return t[0]=r,t[1]=n,t[2]=0,t[4]=-n,t[5]=r,t[6]=0,t[8]=0,t[9]=0,t[10]=1,t},scaling:([e,t],r=new Float32Array(12))=>(r[0]=e,r[1]=0,r[2]=0,r[4]=0,r[5]=t,r[6]=0,r[8]=0,r[9]=0,r[10]=1,r),translate:(e,t,r=new Float32Array(12))=>i.multiply(e,i.translation(t),r),rotate:(e,t,r=new Float32Array(12))=>i.multiply(e,i.rotation(t),r),scale:(e,t,r=new Float32Array(12))=>i.multiply(e,i.scaling(t),r)},a=i,u="struct Uniforms {\n  color: vec4f,\n  matrix: mat3x3f,\n};\n\nstruct Vertex {\n  @location(0) position: vec2f,\n};\n\nstruct VSOutput {\n  @builtin(position) position: vec4f,\n};\n\n@group(0) @binding(0) var<uniform> uni: Uniforms;\n\n@vertex fn vs(vert: Vertex) -> VSOutput {\n  var vsOut: VSOutput;\n\n  let clipSpace = (uni.matrix * vec3f(vert.position, 1)).xy;\n  vsOut.position = vec4f(clipSpace, 0.0, 1.0);\n  return vsOut;\n}\n\n@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {\n  return uni.color;\n}\n",s="struct Uniforms {\n  matrix: mat4x4f,\n  zoom: f32,\n};\n\nstruct Vertex {\n  @location(0) t: f32,\n  @location(1) dir: f32,\n  @location(2) segmentIndex: u32,\n};\n\n@group(0) @binding(0) var<uniform> u: Uniforms;\n\n@group(0) @binding(1) var<storage> points: array<vec2f>;\n\nstruct VSOutput {\n  @builtin(position) position: vec4f,\n  @location(0) color: vec4f,\n};\n\n@vertex fn vs(vert: Vertex) -> VSOutput {\n  var vsOut: VSOutput;\n  \n  let p1 = points[vert.segmentIndex * 4 + 0];\n  let p2 = points[vert.segmentIndex * 4 + 1];\n  let p3 = points[vert.segmentIndex * 4 + 2];\n  let p4 = points[vert.segmentIndex * 4 + 3];\n\n  let t2 = vert.t * vert.t;\n  let one_minus_t = 1.0 - vert.t;\n  let one_minus_t2 = one_minus_t * one_minus_t;\n  let pos = p1 * one_minus_t2 * one_minus_t + p2 * 3.0 * vert.t * one_minus_t2 + p3 * 3.0 * t2 * one_minus_t + p4 * t2 * vert.t;\n\n  let angle = one_minus_t2 * (p2 - p1) + 2.0 * vert.t * one_minus_t * (p3 - p2) + t2 * (p4 - p3);\n  let angleNorm = normalize(angle) * 5 / u.zoom;\n  let transPos = vec2(pos.x - angleNorm.y * vert.dir, pos.y + angleNorm.x * vert.dir);\n  let clipSpace = (u.matrix * vec4f(transPos, 1, 1));\n  vsOut.position = clipSpace;\n  vsOut.color = vec4f(f32(vert.segmentIndex) % 3, (f32(vert.segmentIndex) + 1) % 3, (f32(vert.segmentIndex) + 2) % 3, 1);\n\n  return vsOut;\n}\n\n@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {\n    return vsOut.color;\n}\n",l="struct Uniforms {\n  matrix: mat4x4f,\n};\n\nstruct Vertex {\n  @location(0) position: vec4f,\n  @location(1) texcoord: vec2f,\n};\n\nstruct VSOutput {\n  @builtin(position) position: vec4f,\n  @location(0) texcoord: vec2f,\n};\n\n@group(0) @binding(0) var<uniform> uni: Uniforms;\n\n@vertex fn vs(vert: Vertex) -> VSOutput {\n  var vsOut: VSOutput;\n  vsOut.position = uni.matrix * vert.position;\n  vsOut.texcoord = vert.texcoord;\n  return vsOut;\n}\n\n@group(0) @binding(1) var ourSampler: sampler;\n@group(0) @binding(2) var ourTexture: texture_2d<f32>;\n\n@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {\n  return textureSample(ourTexture, ourSampler, vsOut.texcoord);\n}\n",f="struct Uniforms {\n  matrix: mat4x4f,\n};\n\nstruct Vertex {\n  @location(0) position: vec4f,\n};\n\nstruct VSOutput {\n  @builtin(position) position: vec4f,\n  @location(0) color: vec4f,\n};\n\n@group(0) @binding(0) var<uniform> uni: Uniforms;\n\n@vertex fn vs(\n  vert: Vertex,\n  @builtin(vertex_index) vertexIndex : u32,\n  // @builtin(instance_index) instanceIndex: u32\n  ) -> VSOutput {\n  var vsOut: VSOutput;\n  vsOut.position = uni.matrix * vert.position;\n  vsOut.color = vec4f(f32(vertexIndex) % 3, (f32(vertexIndex) + 1) % 3, (f32(vertexIndex) + 2) % 3, 1);\n  return vsOut;\n}\n\n\n@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {\n  return vsOut.color;\n}\n",c="struct Uniforms {\n  normalMatrix: mat3x3f,\n  worldViewProjection: mat4x4f,\n  lightColor: vec4f,\n  lightDirection: vec3f,\n};\n\nstruct Vertex {\n  @location(0) position: vec4f,\n  @location(1) normal: vec3f,\n};\n\nstruct VSOutput {\n  @builtin(position) position: vec4f,\n  @location(0) color: vec4f,\n  @location(1) normal: vec3f,\n};\n\n@group(0) @binding(0) var<uniform> uni: Uniforms;\n\n@vertex fn vs(\n  vert: Vertex,\n  @builtin(vertex_index) vertexIndex : u32,\n  // @builtin(instance_index) instanceIndex: u32\n  ) -> VSOutput {\n    var vsOut: VSOutput;\n    vsOut.position = uni.worldViewProjection * vert.position;\n    vsOut.normal = uni.normalMatrix * vert.normal;\n    vsOut.color = vec4f(f32(vertexIndex) % 3, (f32(vertexIndex) + 1) % 3, (f32(vertexIndex) + 2) % 3, 1);\n\n    return vsOut;\n}\n\n\n@fragment fn fs(vsOut: VSOutput) -> @location(0) vec4f {\n  // Because vsOut.normal is an inter-stage variable \n  // it's interpolated so it will not be a unit vector.\n  // Normalizing it will make it a unit vector again\n  let normal = normalize(vsOut.normal);\n  \n  // Compute the light by taking the dot product\n  // of the normal to the light's reverse direction\n  let light = dot(normal, -uni.lightDirection);\n  \n  // Lets multiply just the color portion (not the alpha)\n  // by the light\n  let color = vec3f(0.23) + uni.lightColor.rgb * light;\n  // let color = vsOut.color.rgb * 0.5 + uni.lightColor.rgb * light;\n  return vec4f(color, vsOut.color.a);\n}\n",d="struct Params {\n  filterDim : i32,\n  blockDim : u32,\n}\n\n@group(0) @binding(0) var samp : sampler;\n@group(0) @binding(1) var<uniform> params : Params;\n@group(1) @binding(1) var inputTex : texture_2d<f32>;\n@group(1) @binding(2) var outputTex : texture_storage_2d<rgba8unorm, write>;\n\nstruct Flip {\n  value : u32,\n}\n@group(1) @binding(3) var<uniform> flip : Flip;\n\n// This shader blurs the input texture in one direction, depending on whether\n// |flip.value| is 0 or 1.\n// It does so by running (128 / 4) threads per workgroup to load 128\n// texels into 4 rows of shared memory. Each thread loads a\n// 4 x 4 block of texels to take advantage of the texture sampling\n// hardware.\n// Then, each thread computes the blur result by averaging the adjacent texel values\n// in shared memory.\n// Because we're operating on a subset of the texture, we cannot compute all of the\n// results since not all of the neighbors are available in shared memory.\n// Specifically, with 128 x 128 tiles, we can only compute and write out\n// square blocks of size 128 - (filterSize - 1). We compute the number of blocks\n// needed in Javascript and dispatch that amount.\n\n// 128/4 = 32 -> number of threads per working group\n// does it in 4x4 block of texels(takes advantage of texture sampling hardware)\n// with this beign said, we don't have all the neighbours, only this block\n// That's why we can only compute & write out blocks of size 128 - (filterSize - 1)\nvar<workgroup> tile : array<array<vec3<f32>, 128>, 4>;\n\n@compute @workgroup_size(32, 1, 1)\nfn main(\n  @builtin(workgroup_id) WorkGroupID : vec3<u32>,\n  @builtin(local_invocation_id) LocalInvocationID : vec3<u32>\n) {\n  let filterOffset = (params.filterDim - 1) / 2;\n  let dims = vec2<i32>(textureDimensions(inputTex, 0));\n  let baseIndex = vec2<i32>(WorkGroupID.xy * vec2(params.blockDim, 4) + // it's just the index of the first texel in a group\n                            LocalInvocationID.xy * vec2(4, 1)) // <0, 128>\n                  - vec2(filterOffset, 0);\n  // baseIndex = xy of first texel of group\n  for (var r = 0; r < 4; r++) {\n    for (var c = 0; c < 4; c++) {\n      var loadIndex = baseIndex + vec2(c, r);\n      if (flip.value != 0) {\n        loadIndex = loadIndex.yx;\n      }\n\n      tile[r][4 * LocalInvocationID.x + u32(c)] = textureSampleLevel(\n        inputTex,\n        samp,\n        (vec2<f32>(loadIndex) + vec2<f32>(0.25, 0.25)) / vec2<f32>(dims),\n        0.0\n      ).rgb;\n    }\n  }\n\n  workgroupBarrier();\n  // helps coordinate access to read-write memory\n  // so all threads(32) will wait to hit this barrer, and then start form here together\n\n  for (var r = 0; r < 4; r++) {\n    for (var c = 0; c < 4; c++) {\n      var writeIndex = baseIndex + vec2(c, r);\n      if (flip.value != 0) {\n        writeIndex = writeIndex.yx;\n      }\n\n      let center = i32(4 * LocalInvocationID.x) + c;\n      if (center >= filterOffset &&\n          center < 128 - filterOffset &&\n          all(writeIndex < dims)) {\n        var acc = vec3(0.0, 0.0, 0.0);\n        for (var f = 0; f < params.filterDim; f++) {\n          var i = center + f - filterOffset;\n          acc = acc + (1.0 / f32(params.filterDim)) * tile[r][i];\n        }\n        textureStore(outputTex, writeIndex, vec4(acc, 1.0));\n      }\n    }\n  }\n}\n",p=128,g=[4,4],m="struct Vertex {\n  @location(0) position: vec4f,\n  @location(1) uv: vec2f,\n};\n\nstruct Uniforms {\n  worldViewProjection: mat4x4f,\n};\n\nstruct VertexOutput {\n  @builtin(position) position: vec4f,\n  @location(0) texCoord: vec2f,\n};\n\n@group(0) @binding(0) var<uniform> u: Uniforms;\n@group(0) @binding(1) var ourSampler: sampler;\n@group(0) @binding(2) var ourTexture: texture_2d<f32>;\n\n@vertex fn vs(vert: Vertex) -> VertexOutput {\n  var out: VertexOutput;\n  // maybe we should pass offsets from the position instead of... position?\n  out.position = u.worldViewProjection * vert.position;\n  out.texCoord = vert.uv;\n  \n  return out;\n}\n\n@fragment fn fs(in: VertexOutput) -> @location(0) vec4f {\n  let texel = textureSample(ourTexture, ourSampler, in.texCoord);\n  return texel;\n}\n",h=6;let v,b,x,y,w,B,U;var P=r(773);const O={cross(e,t,r=new Float32Array(3)){const n=e[1]*t[2]-e[2]*t[1],o=e[2]*t[0]-e[0]*t[2],i=e[0]*t[1]-e[1]*t[0];return r[0]=n,r[1]=o,r[2]=i,r},subtract:(e,t,r=new Float32Array(3))=>(r[0]=e[0]-t[0],r[1]=e[1]-t[1],r[2]=e[2]-t[2],r),normalize(e,t=new Float32Array(3)){const r=Math.sqrt(e[0]*e[0]+e[1]*e[1]+e[2]*e[2]);return r>1e-5?(t[0]=e[0]/r,t[1]=e[1]/r,t[2]=e[2]/r):(t[0]=0,t[1]=0,t[2]=0),t}},G={projection:(e,t,r,n)=>G.ortho(0,e,t,0,r,-r,n),perspective(e,t,r,n,o=new Float32Array(16)){const i=Math.tan(.5*Math.PI-.5*e),a=1/(r-n);return o[0]=i/t,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=i,o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=n*a,o[11]=-1,o[12]=0,o[13]=0,o[14]=r*n*a,o[15]=0,o},ortho:(e,t,r,n,o,i,a=new Float32Array(16))=>(a[0]=2/(t-e),a[1]=0,a[2]=0,a[3]=0,a[4]=0,a[5]=2/(n-r),a[6]=0,a[7]=0,a[8]=0,a[9]=0,a[10]=1/(o-i),a[11]=0,a[12]=(t+e)/(e-t),a[13]=(n+r)/(r-n),a[14]=o/(o-i),a[15]=1,a),identity:(e=new Float32Array(16))=>(e[0]=1,e[1]=0,e[2]=0,e[3]=0,e[4]=0,e[5]=1,e[6]=0,e[7]=0,e[8]=0,e[9]=0,e[10]=1,e[11]=0,e[12]=0,e[13]=0,e[14]=0,e[15]=1,e),multiply(e,t,r=new Float32Array(16)){const n=t[0],o=t[1],i=t[2],a=t[3],u=t[4],s=t[5],l=t[6],f=t[7],c=t[8],d=t[9],p=t[10],g=t[11],m=t[12],h=t[13],v=t[14],b=t[15],x=e[0],y=e[1],w=e[2],B=e[3],U=e[4],P=e[5],O=e[6],G=e[7],S=e[8],I=e[9],_=e[10],T=e[11],A=e[12],V=e[13],F=e[14],M=e[15];return r[0]=n*x+o*U+i*S+a*A,r[1]=n*y+o*P+i*I+a*V,r[2]=n*w+o*O+i*_+a*F,r[3]=n*B+o*G+i*T+a*M,r[4]=u*x+s*U+l*S+f*A,r[5]=u*y+s*P+l*I+f*V,r[6]=u*w+s*O+l*_+f*F,r[7]=u*B+s*G+l*T+f*M,r[8]=c*x+d*U+p*S+g*A,r[9]=c*y+d*P+p*I+g*V,r[10]=c*w+d*O+p*_+g*F,r[11]=c*B+d*G+p*T+g*M,r[12]=m*x+h*U+v*S+b*A,r[13]=m*y+h*P+v*I+b*V,r[14]=m*w+h*O+v*_+b*F,r[15]=m*B+h*G+v*T+b*M,r},cameraAim(e,t,r,n=new Float32Array(16)){const o=O.normalize(O.subtract(e,t)),i=O.normalize(O.cross(r,o)),a=O.normalize(O.cross(o,i));return n[0]=i[0],n[1]=i[1],n[2]=i[2],n[3]=0,n[4]=a[0],n[5]=a[1],n[6]=a[2],n[7]=0,n[8]=o[0],n[9]=o[1],n[10]=o[2],n[11]=0,n[12]=e[0],n[13]=e[1],n[14]=e[2],n[15]=1,n},inverse(e,t=new Float32Array(16)){const r=e[0],n=e[1],o=e[2],i=e[3],a=e[4],u=e[5],s=e[6],l=e[7],f=e[8],c=e[9],d=e[10],p=e[11],g=e[12],m=e[13],h=e[14],v=e[15],b=d*v,x=h*p,y=s*v,w=h*l,B=s*p,U=d*l,P=o*v,O=h*i,G=o*p,S=d*i,I=o*l,_=s*i,T=f*m,A=g*c,V=a*m,F=g*u,M=a*c,z=f*u,D=r*m,C=g*n,L=r*c,E=f*n,R=r*u,k=a*n,q=b*u+w*c+B*m-(x*u+y*c+U*m),N=x*n+P*c+S*m-(b*n+O*c+G*m),Y=y*n+O*u+I*m-(w*n+P*u+_*m),j=U*n+G*u+_*c-(B*n+S*u+I*c),W=1/(r*q+a*N+f*Y+g*j);return t[0]=W*q,t[1]=W*N,t[2]=W*Y,t[3]=W*j,t[4]=W*(x*a+y*f+U*g-(b*a+w*f+B*g)),t[5]=W*(b*r+O*f+G*g-(x*r+P*f+S*g)),t[6]=W*(w*r+P*a+_*g-(y*r+O*a+I*g)),t[7]=W*(B*r+S*a+I*f-(U*r+G*a+_*f)),t[8]=W*(T*l+F*p+M*v-(A*l+V*p+z*v)),t[9]=W*(A*i+D*p+E*v-(T*i+C*p+L*v)),t[10]=W*(V*i+C*l+R*v-(F*i+D*l+k*v)),t[11]=W*(z*i+L*l+k*p-(M*i+E*l+R*p)),t[12]=W*(V*d+z*h+A*s-(M*h+T*s+F*d)),t[13]=W*(L*h+T*o+C*d-(D*d+E*h+A*o)),t[14]=W*(D*s+k*h+F*o-(R*h+V*o+C*s)),t[15]=W*(R*d+M*o+E*s-(L*s+k*d+z*o)),t},transpose:(e,t=new Float32Array(16))=>(t[0]=e[0],t[1]=e[4],t[2]=e[8],t[3]=e[12],t[4]=e[1],t[5]=e[5],t[6]=e[9],t[7]=e[13],t[8]=e[2],t[9]=e[6],t[10]=e[10],t[11]=e[14],t[12]=e[3],t[13]=e[7],t[14]=e[11],t[15]=e[15],t),aim(e,t,r,n=new Float32Array(16)){const o=O.normalize(O.subtract(t,e)),i=O.normalize(O.cross(r,o)),a=O.normalize(O.cross(o,i));return n[0]=i[0],n[1]=i[1],n[2]=i[2],n[3]=0,n[4]=a[0],n[5]=a[1],n[6]=a[2],n[7]=0,n[8]=o[0],n[9]=o[1],n[10]=o[2],n[11]=0,n[12]=e[0],n[13]=e[1],n[14]=e[2],n[15]=1,n},lookAt:(e,t,r,n)=>G.inverse(G.cameraAim(e,t,r,n),n),translation:([e,t,r],n=new Float32Array(16))=>(n[0]=1,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=1,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=1,n[11]=0,n[12]=e,n[13]=t,n[14]=r,n[15]=1,n),rotationX(e,t=new Float32Array(16)){const r=Math.cos(e),n=Math.sin(e);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=r,t[6]=n,t[7]=0,t[8]=0,t[9]=-n,t[10]=r,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},rotationY(e,t=new Float32Array(16)){const r=Math.cos(e),n=Math.sin(e);return t[0]=r,t[1]=0,t[2]=-n,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=n,t[9]=0,t[10]=r,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},rotationZ(e,t=new Float32Array(16)){const r=Math.cos(e),n=Math.sin(e);return t[0]=r,t[1]=n,t[2]=0,t[3]=0,t[4]=-n,t[5]=r,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},scaling:([e,t,r],n=new Float32Array(16))=>(n[0]=e,n[1]=0,n[2]=0,n[3]=0,n[4]=0,n[5]=t,n[6]=0,n[7]=0,n[8]=0,n[9]=0,n[10]=r,n[11]=0,n[12]=0,n[13]=0,n[14]=0,n[15]=1,n),translate:(e,t,r)=>G.multiply(e,G.translation(t),r),rotateX:(e,t,r)=>G.multiply(e,G.rotationX(t),r),rotateY:(e,t,r)=>G.multiply(e,G.rotationY(t),r),rotateZ:(e,t,r)=>G.multiply(e,G.rotationZ(t),r),scale:(e,t,r)=>G.multiply(e,G.scaling(t),r)},S=G;new Float32Array;const I=(...e)=>{const t=Math.max(...e);return 1+Math.log2(t)|0};var _=r(253),T=function(e,t,r,n){return new(r||(r=Promise))((function(o,i){function a(e){try{s(n.next(e))}catch(e){i(e)}}function u(e){try{s(n.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,u)}s((n=n.apply(e,t||[])).next())}))};function A(e){return T(this,void 0,void 0,(function*(){const t=yield function(){return o(this,void 0,void 0,(function*(){if(!navigator.gpu)throw Error("this browser does not support WebGPU");const e=yield navigator.gpu.requestAdapter();if(!e)throw Error("this browser supports webgpu but it appears disabled");const t=yield e.requestDevice();return t.lost.then((e=>{console.error(`WebGPU device was lost: ${e.message}`),e.reason})),t}))}(),{State:i}=yield r.e(701).then(r.bind(r,701)),O=i.new(300,300),G=e.getContext("webgpu");if(!G)throw Error("WebGPU from canvas needs to be always provided");const T=navigator.gpu.getPreferredCanvasFormat();G.configure({device:t,format:T}),(0,n.A)(e,t,(()=>{})),function(e,t){v=function(e,t){const r=e.createShaderModule({label:"triangle shader module",code:u}),n=e.createRenderPipeline({label:"triangle pipline",layout:"auto",vertex:{module:r,entryPoint:"vs",buffers:[{arrayStride:8,attributes:[{shaderLocation:0,offset:0,format:"float32x2"}]}]},fragment:{module:r,entryPoint:"fs",targets:[{format:t}]},depthStencil:{depthWriteEnabled:!1,depthCompare:"always",format:"depth24plus"}});return function(t,r,o){const i=e.createBuffer({label:"uniforms",size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),u=new Float32Array(16),s=u.subarray(0,4),l=u.subarray(4,16);s.set([Math.random(),Math.random(),Math.random(),1]);const f=new Float32Array([500,100,800,400,200,400]),c=new Uint32Array([0,1,2]),d=e.createBuffer({label:"vertex buffer vertices",size:f.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(d,0,f);const p=e.createBuffer({label:"index buffer",size:c.byteLength,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(p,0,c);const g=e.createBindGroup({label:"bind group for object",layout:n.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:i}}]});t.setPipeline(n),t.setVertexBuffer(0,d),t.setIndexBuffer(p,"uint32"),l.set(r),a.translate(l,[o,0],l),e.queue.writeBuffer(i,0,u),t.setBindGroup(0,g),t.drawIndexed(3)}}(e,t),b=function(e,t){const r=e.createShaderModule({label:"bezier shader module",code:s}),n=e.createRenderPipeline({label:"bezier pipline",layout:"auto",primitive:{topology:"triangle-strip"},vertex:{module:r,entryPoint:"vs",buffers:[{arrayStride:4,attributes:[{shaderLocation:0,offset:0,format:"float32"}]},{arrayStride:4,attributes:[{shaderLocation:1,offset:0,format:"float32"}]},{arrayStride:4,attributes:[{shaderLocation:2,offset:0,format:"uint32"}]}]},fragment:{module:r,entryPoint:"fs",targets:[{format:t}]},depthStencil:{depthWriteEnabled:!1,depthCompare:"always",format:"depth24plus"}});return function(t,r,o,i,a,u,s){const l=4*o.length,f=e.createBuffer({label:"storage points",size:l,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),c=e.createBuffer({label:"uniforms",size:80,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),d=new Float32Array(20),p=d.subarray(0,16),g=d.subarray(16,17),m=e.createBindGroup({label:"bezier bind group for object",layout:n.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:c}},{binding:1,resource:{buffer:f}}]}),h=e.createBuffer({label:"bezier vertex buffer vertices",size:i.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(h,0,i);const v=e.createBuffer({label:"bezier vertex buffer vertices",size:a.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(v,0,a);const b=e.createBuffer({label:"bezier vertex buffer vertices",size:u.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(b,0,u),t.setPipeline(n),t.setVertexBuffer(0,h),t.setVertexBuffer(1,v),t.setVertexBuffer(2,b),p.set(r),g.set(new Float32Array([s])),e.queue.writeBuffer(c,0,d),e.queue.writeBuffer(f,0,o),t.setBindGroup(0,m),t.draw(i.length)}}(e,t),y=function(e,t){const r=e.createShaderModule({label:"3d model texture shader module",code:l}),n=e.createRenderPipeline({label:"3d model texture pipline",layout:"auto",vertex:{module:r,entryPoint:"vs",buffers:[{arrayStride:20,attributes:[{shaderLocation:0,offset:0,format:"float32x3"},{shaderLocation:1,offset:12,format:"float32x2"}]}]},fragment:{module:r,entryPoint:"fs",targets:[{format:t}]},depthStencil:{depthWriteEnabled:!1,depthCompare:"always",format:"depth24plus"}});return function(t,r,o,i,a){const u=e.createSampler({magFilter:"linear",minFilter:"linear"}),s=e.createBuffer({label:"uniforms",size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),l=new Float32Array(16),f=l.subarray(0,16),c=a.length,d=e.createBuffer({label:"3d model texture vertex buffer vertices",size:i.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(d,0,i);const p=e.createBuffer({label:"3d model texture index buffer",size:a.byteLength,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(p,0,a);const g=e.createBindGroup({label:"3d model texture bind group for object",layout:n.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:s}},{binding:1,resource:u},{binding:2,resource:o.createView()}]});t.setPipeline(n),t.setVertexBuffer(0,d),t.setIndexBuffer(p,"uint32"),f.set(r),e.queue.writeBuffer(s,0,l),t.setBindGroup(0,g),t.drawIndexed(c)}}(e,t),x=function(e,t){const r=e.createShaderModule({label:"3d model shader module",code:f}),n=e.createRenderPipeline({label:"3d model pipline",layout:"auto",vertex:{module:r,entryPoint:"vs",buffers:[{arrayStride:12,attributes:[{shaderLocation:0,offset:0,format:"float32x3"}]}]},fragment:{module:r,entryPoint:"fs",targets:[{format:t}]},primitive:{cullMode:"back"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}});return function(t,r,o,i){const a=e.createBuffer({label:"uniforms",size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),u=new Float32Array(16),s=u.subarray(0,16),l=i.length,f=e.createBuffer({label:"vertex buffer vertices",size:o.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(f,0,o);const c=e.createBuffer({label:"index buffer",size:i.byteLength,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(c,0,i);const d=e.createBindGroup({label:"bind group for object",layout:n.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:a}}]});t.setPipeline(n),t.setVertexBuffer(0,f),t.setIndexBuffer(c,"uint32"),s.set(r),e.queue.writeBuffer(a,0,u),t.setBindGroup(0,d),t.drawIndexed(l)}}(e,t),w=function(e,t){const r=e.createShaderModule({label:"3d model light shader module",code:c}),n=e.createRenderPipeline({label:"3d model light pipline",layout:"auto",vertex:{module:r,entryPoint:"vs",buffers:[{arrayStride:24,attributes:[{shaderLocation:0,offset:0,format:"float32x3"},{shaderLocation:1,offset:12,format:"float32x3"}]}]},fragment:{module:r,entryPoint:"fs",targets:[{format:t}]},primitive:{cullMode:"back"},depthStencil:{depthWriteEnabled:!0,depthCompare:"less",format:"depth24plus"}});return function(t,r,o,i){const{worldViewProjection:a,normalMatrix:u,lightColor:s,lightDirection:l}=r,f=e.createBuffer({label:"uniforms",size:144,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),c=new Float32Array(36),d=c.subarray(0,12),p=c.subarray(12,28),g=c.subarray(28,32),m=c.subarray(32,35),h=e.createBindGroup({label:"bind group for object",layout:n.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:f}}]}),v=i.length,b=e.createBuffer({label:"vertex buffer vertices",size:o.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(b,0,o);const x=e.createBuffer({label:"index buffer",size:i.byteLength,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(x,0,i),t.setPipeline(n),t.setVertexBuffer(0,b),t.setIndexBuffer(x,"uint32"),d.set(u),p.set(a),g.set(s),m.set(l),e.queue.writeBuffer(f,0,c),t.setBindGroup(0,h),t.drawIndexed(v)}}(e,t),B=function(e){const t=e.createShaderModule({label:"blur shader module",code:d}),r=e.createComputePipeline({layout:"auto",compute:{module:t,entryPoint:"main"}});return function(t,n){const o=[0,1].map((()=>e.createTexture({size:{width:t.width,height:t.height},format:"rgba8unorm",usage:GPUTextureUsage.COPY_DST|GPUTextureUsage.STORAGE_BINDING|GPUTextureUsage.TEXTURE_BINDING}))),i=(()=>{const t=e.createBuffer({size:4,mappedAtCreation:!0,usage:GPUBufferUsage.UNIFORM});return new Uint32Array(t.getMappedRange())[0]=0,t.unmap(),t})(),a=(()=>{const t=e.createBuffer({size:4,mappedAtCreation:!0,usage:GPUBufferUsage.UNIFORM});return new Uint32Array(t.getMappedRange())[0]=1,t.unmap(),t})(),u=e.createBuffer({size:8,usage:GPUBufferUsage.COPY_DST|GPUBufferUsage.UNIFORM}),s=e.createSampler({magFilter:"linear",minFilter:"linear"}),l=e.createBindGroup({layout:r.getBindGroupLayout(0),entries:[{binding:0,resource:s},{binding:1,resource:{buffer:u}}]}),f=e.createBindGroup({layout:r.getBindGroupLayout(1),entries:[{binding:1,resource:t.createView()},{binding:2,resource:o[0].createView()},{binding:3,resource:{buffer:i}}]}),c=e.createBindGroup({layout:r.getBindGroupLayout(1),entries:[{binding:1,resource:o[0].createView()},{binding:2,resource:o[1].createView()},{binding:3,resource:{buffer:a}}]}),d=e.createBindGroup({layout:r.getBindGroupLayout(1),entries:[{binding:1,resource:o[1].createView()},{binding:2,resource:o[0].createView()},{binding:3,resource:{buffer:i}}]}),m=p-14;e.queue.writeBuffer(u,0,new Uint32Array([15,m]));const h=n.beginComputePass();h.setPipeline(r),h.setBindGroup(0,l),h.setBindGroup(1,f),h.dispatchWorkgroups(Math.ceil(t.width/m),Math.ceil(t.height/g[1])),h.setBindGroup(1,c),h.dispatchWorkgroups(Math.ceil(t.height/m),Math.ceil(t.width/g[1]));for(let e=0;e<1;++e)h.setBindGroup(1,d),h.dispatchWorkgroups(Math.ceil(t.width/m),Math.ceil(t.height/g[1])),h.setBindGroup(1,c),h.dispatchWorkgroups(Math.ceil(t.height/m),Math.ceil(t.width/g[1]));return h.end(),o[1]}}(e),U=function(e,t){const r=e.createShaderModule({label:"texture module",code:m}),n=e.createSampler({minFilter:"linear",magFilter:"linear"}),o=e.createRenderPipeline({label:"texture pipeline",layout:"auto",vertex:{module:r,entryPoint:"vs",buffers:[{arrayStride:4*h,attributes:[{shaderLocation:0,offset:0,format:"float32x4"},{shaderLocation:1,offset:16,format:"float32x2"}]}]},fragment:{module:r,entryPoint:"fs",targets:[{format:t}]}}),i=e.createBuffer({label:"uniforms",size:64,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),a=new Float32Array(16),u=a.subarray(0,16);return function(t,r,s,l){const f=Math.round(s.length/h),c=e.createBuffer({label:"vertex buffer vertices",size:s.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});e.queue.writeBuffer(c,0,s);const d=e.createBindGroup({layout:o.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:i}},{binding:1,resource:n},{binding:2,resource:l.createView()}]});t.setPipeline(o),t.setVertexBuffer(0,c),u.set(r),e.queue.writeBuffer(i,0,a),t.setBindGroup(0,d),t.draw(f)}}(e,t)}(t,T);const A=[];return function(e,t,r,n,o,i){const a=function(e){return S.ortho(0,e.clientWidth,e.clientHeight,0,1,-1)}(t);requestAnimationFrame((function t(o){const u=n.createCommandEncoder(),s=(0,P.A)(r,n),l=u.beginRenderPass(s);let f=!1,c=0;for(;!f;){const{texture_id:t,vertex_data:r}=e.get_shader_input(c);c++,f=0===r.length,f||U(l,a,new Float32Array(r),i[t])}l.end();const d=u.finish();n.queue.submit([d]),requestAnimationFrame(t)}))}(O,e,G,t,0,A),{addImage:r=>{const n=A.length;A.push(function(e,t,r={}){const n=e.createTexture({format:"rgba8unorm",mipLevelCount:r.mips?I(t.width,t.height):1,size:[t.width,t.height],usage:GPUTextureUsage.TEXTURE_BINDING|GPUTextureUsage.COPY_DST|GPUTextureUsage.RENDER_ATTACHMENT});return function(e,t,r,{flipY:n,depthOrArrayLayers:o}={}){e.queue.copyExternalImageToTexture({source:r,flipY:n},{texture:t},{width:r.width,height:r.height,depthOrArrayLayers:o})}(e,n,t,r),n}(t,r)),console.log("env",r.width,e.width);const o=function(e,t){if(t.height-e.height<t.width-e.width)return(0,_.A)(e.height,.2*t.height,.8*t.height)/e.height;return(0,_.A)(e.width,.2*t.width,.8*t.width)/e.width}(r,e),i=r.width*o,a=r.height*o,u=.5*(e.width-i),s=.5*(e.height-a);O.add_texture([{x:u,y:s,u:0,v:0},{x:u+i,y:s,u:1,v:0},{x:u+i,y:s+a,u:1,v:1},{x:u,y:s+a,u:0,v:1}],n)},updatePoints:(e,t)=>{O.update_points(e,t)}}}))}},253:(e,t,r)=>{function n(e,t,r){return Math.min(r,Math.max(t,e))}r.d(t,{A:()=>n})}},e=>{e(e.s=848)}]);

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@mateuszjs/magic-render",
+  "description": "Initial version of visual editor",
+  "version": "0.0.1-next.1",
+  "author": "Mateusz Walendzik",
+  "engines": {
+    "node": ">=20.8.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "release": {
+    "branches": [
+      "main",
+      {
+        "name": "next",
+        "prerelease": true
+      }
+    ]
+  },
+  "scripts": {
+    "start": "export NODE_ENV=development && webpack serve --open",
+    "build": "export $(grep -v '^#' .env | xargs) && export NODE_ENV=production && webpack",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "test-e2e": "npx playwright test",
+    "format": "eslint --fix \"src/**/*.{ts,js}\" \"integration-tests/**/*.{ts,js}\""
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@playwright/test": "^1.50.1",
+    "@stylistic/eslint-plugin-js": "^4.2.0",
+    "@tsconfig/recommended": "^1.0.8",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.13.9",
+    "@webgpu/types": "^0.1.54",
+    "eslint": "^9.21.0",
+    "html-webpack-plugin": "^5.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "semantic-release": "^24.2.3",
+    "ts-jest": "^29.2.6",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.0",
+    "webpack": "^5.97.1",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
+  },
+  "dependencies": {
+    "@wasm-tool/wasm-pack-plugin": "^1.7.0"
+  },
+  "main": "webpack.config.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/mateuszJS/magic-render.git"
+  },
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mateuszJS/magic-render/issues"
+  },
+  "homepage": "https://github.com/mateuszJS/magic-render#readme",
+  "files": [
+    "dist"
+  ]
+}

package/webpack.config.js

@@ -0,0 +1,80 @@
+const path = require("path");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const isProd = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  experiments: {
+		asyncWebAssembly: true
+	},
+  mode: process.env.NODE_ENV,
+  entry: {
+    index: './src/index.ts',
+    integrationTest: {
+      runtime: 'test-runtime',
+      import: './integration-tests/index.ts',
+      filename: 'test.js'
+    }
+  },
+  devtool: isProd ? undefined : "eval-source-map",
+  watch: !isProd,
+  devServer: {
+    // static: "./dist", // do not use it. It's gonna serve last SSG pages while dev mode
+    historyApiFallback: true // fallback to index.html while 404
+  },
+  resolve: {
+    extensions: [".ts", ".js", '.wasm', '.wgsl', '.jpg', '.png'],
+    modules: [path.resolve(__dirname, "src"), "node_modules"],
+    /* useful with absolute imports, "src" dir now takes precedence over "node_modules",
+    otherwise you got an error:
+    Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
+    */
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.wgsl$/,
+        type: "asset/source",
+      },
+      {
+        test: /\.(png|jpg)$/,
+        type: "asset/resource",
+      },
+    ],
+  },
+  output: {
+    filename: '[name].[contenthash].js',
+    path: path.resolve(__dirname, "dist"),
+    clean: true,
+  },
+  optimization: {
+    // https://webpack.jakoblind.no/optimize/ suppose to give you suggestion how to improve build
+    runtimeChunk: "single", // split runtime code into a separate chunk using the
+    // looks like it's needed because each deployment, reach changes something
+    // so [contenthash] also gonna change each time
+    // it contains references to all modules, so changes in each deployment
+
+    moduleIds: 'deterministic', /* still some modules can change because order of improts has changed
+    so with deterministic module id, the order won't matter!! contenthash should stay the same*/
+  },
+  plugins: [
+    // isProd && !process.env.CI && new BundleAnalyzerPlugin({
+    //   analyzerMode: 'static' // 'server' had issue running along with PrerendererWebpackPlugin
+    // }),
+    new WasmPackPlugin({
+      crateDirectory: path.resolve(__dirname, "crate"),
+    }),
+    new HtmlWebpackPlugin({
+			template: path.resolve(__dirname, "integration-tests/template.html"),
+      inject: true,
+      chunks: ['integrationTest'],
+    }),
+  ],
+};