rgbd 0.0.12 → 0.0.14

package/dist/rgbd.js

@@ -1,4 +1,4 @@
-const b=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";let l,m,p;if(!b)l=class{},m=class{},p=class{};else{const A=`#version 300 es
+import*as A from"mp4box";var C=class{constructor(a,n){this.r=a,this.L=0,this.V=n}write(a){let n=new ArrayBuffer(a.byteLength);new Uint8Array(n).set(a),n.fileStart=this.L,this.L+=n.byteLength,this.r.appendBuffer(n)}close(){this.r.flush(),this.V()}},g=class{constructor(a,{onConfig:n,onChunk:m,onEndOfStream:l}){if(this.j=n,this.K=m,this.r=A.createFile(),this.r.onReady=this.q.bind(this),this.r.onSamples=this.Y.bind(this),a instanceof ArrayBuffer)a.fileStart=0,this.r.appendBuffer(a),this.r.flush(),l();else{let p=new C(this.r,l);fetch(a).then(E=>{E.body.pipeTo(new WritableStream(p,{highWaterMark:2}))})}}Z(a){let n=this.r.getTrackById(a.id);for(let m of n.mdia.minf.stbl.stsd.entries){let l=m.avcC||m.hvcC||m.vpcC||m.av1C;if(l){let p=new A.DataStream(void 0,0,A.DataStream.BIG_ENDIAN);return l.write(p),new Uint8Array(p.buffer,8)}}throw new Error("avcC, hvcC, vpcC, or av1C box not found")}q(a){let n=a.videoTracks[0];this.j({codec:n.codec.startsWith("vp08")?"vp8":n.codec,codedHeight:n.video.height,codedWidth:n.video.width,description:this.Z(n)}),this.r.setExtractionOptions(n.id),this.r.start()}Y(a,n,m){for(let l of m)this.K(new EncodedVideoChunk({type:l.is_sync?"key":"delta",timestamp:1e6*l.cts/l.timescale,duration:1e6*l.duration/l.timescale,data:l.data}))}};var w=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u",v,x,D;if(!w)v=class{},x=class{},D=class{};else{let M=`#version 300 es
 	
 	precision mediump float;
 	precision mediump int;
@@ -54,7 +54,7 @@ const b=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";let l,m,p
 		gl_Position = u_projMat * u_viewMat * vec4(pos.x, pos.y, z, 1.0);
 	}
 
-	`,E=`#version 300 es
+	`,a=`#version 300 es
 
 	precision mediump float;
 
@@ -79,9 +79,9 @@ const b=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";let l,m,p
 
 		fragColor = texture(u_colorImage, v_uv);
 	}
-	`;class g extends HTMLElement{constructor(){super(),this.s={GRID_SIZE:250,FOCAL_LENGTH:1200,DEPTH_MIN:.1,DEPTH_MAX:10,DISCARD_CUTOFF:0,CAM_RADIUS:1.5,CAM_MAX_THETA:Math.PI/40,CAM_MAX_PHI:Math.PI/64,CAM_FOV:Math.PI/4,CAM_SMOOTHNESS:.9,BOOMERANG_SPEED:0,BACKGROUND_COLOR:[0,0,0]},this.m=null,this.i=null,this.t=null,this.e=null,this.n=null,this.p=null,this.c={},this.r=null,this.a={x:0,y:0,hovered:!1},this.o={theta:Math.PI,phi:0,radius:this.s.CAM_RADIUS},this._=0,this.A=null,this.E=!1,this.D=null,this.C=null,this.g=null,this.v=null,this.M=null,this.T=null,this.m=this.attachShadow({mode:"open"});const t=document.createElement("div");t.style.position="relative",t.style.width="100%",t.style.height="100%",t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.style.background="black",this.m.appendChild(t);const e=document.createElement("style");e.textContent=`
+	`;class m extends HTMLElement{constructor(){super(),this.i={GRID_SIZE:250,FOCAL_LENGTH:1200,DEPTH_MIN:.1,DEPTH_MAX:10,DISCARD_CUTOFF:0,CAM_RADIUS:1.5,CAM_MAX_THETA:Math.PI/40,CAM_MAX_PHI:Math.PI/64,CAM_FOV:Math.PI/4,CAM_SMOOTHNESS:.9,BOOMERANG_SPEED:0,BACKGROUND_COLOR:[0,0,0]},this.E=null,this.e=null,this.t=null,this.h=null,this.a=null,this.v=null,this.f={},this.o=null,this.n={x:0,y:0,hovered:!1},this.s={theta:Math.PI,phi:0,radius:this.i.CAM_RADIUS},this.A=0,this.M=null,this.T=!1,this.F=null,this.G=null,this.C=null,this.D=null,this.S=null,this.b=null,this.E=this.attachShadow({mode:"open"});let t=document.createElement("div");t.style.position="relative",t.style.width="100%",t.style.height="100%",t.style.display="flex",t.style.alignItems="center",t.style.justifyContent="center",t.style.background="black",this.E.appendChild(t);let e=document.createElement("style");e.textContent=`
 				:host { display: inline-block; width: 300px; height: 200px; }
 				:host([fullbleed]) { display:block; width:100%; height:100%; }
 				canvas { touch-action: none; }
 				.cover-img, .cover-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
-			`,this.m.appendChild(e),this.i=document.createElement("canvas"),this.i.style.width="100%",this.i.style.height="100%",this.i.style.objectFit="contain",this.i.setAttribute("role","img"),this.i.setAttribute("aria-label","3D image"),t.appendChild(this.i),this.g=this.f.bind(this),this.v=this.w.bind(this),this.M=this.H.bind(this),this.T=this.F.bind(this)}connectedCallback(){this.I();let t;try{this.O(),t=!1}catch{t=!0}window.addEventListener("resize",this.g),window.addEventListener("mousemove",this.v),document.addEventListener("mouseleave",this.M),this.R(),t?this.b():(this.f(),this.E=!0,this._=performance.now(),this.A=requestAnimationFrame(this.T))}disconnectedCallback(){this.E=!1,cancelAnimationFrame(this.A),window.removeEventListener("resize",this.g),this.i.removeEventListener("pointermove",this.v),this.i.removeEventListener("pointerleave",this.M);try{if(this.n){const t=this.n;this.p&&t.deleteProgram(this.p);for(let e in this.c)t.deleteTexture(this.c[e])}}catch{}}setViewMatrix(t){this.D=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.C=t&&t.length===16?new Float32Array(t):null}get width(){return this.d(this.t)}get height(){return this.u(this.t)}O(){const t=this.i.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.n=t;const e=this.G(t,A,E);if(!e)return;this.p=e,t.useProgram(e);const s=this.L(t),i=this.L(t);this.c.color=s,this.c.depth=i,this.h("color",this.t),this.h("depth",this.e);const h=t.getUniformLocation(e,"u_colorImage"),r=t.getUniformLocation(e,"u_depthImage");t.uniform1i(h,0),t.uniform1i(r,1),this.r={uProjection:t.getUniformLocation(e,"u_projMat"),uView:t.getUniformLocation(e,"u_viewMat"),uImageSize:t.getUniformLocation(e,"u_imageSize"),uFocal:t.getUniformLocation(e,"u_focal"),uDepthMin:t.getUniformLocation(e,"u_depthMin"),uDepthMax:t.getUniformLocation(e,"u_depthMax"),uGridSegs:t.getUniformLocation(e,"u_grid"),uTargetRes:t.getUniformLocation(e,"u_targetRes"),uDiscardCutoff:t.getUniformLocation(e,"u_discardCutoff")}}F(t){if(!this.E||!this.n)return;const e=this.n,s=t-this._;this._=t,this.P(),e.clearColor(...this.s.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST),this.a.hovered||(this.a.x=Math.sin(t*this.s.BOOMERANG_SPEED),this.a.y=Math.sin(t*this.s.BOOMERANG_SPEED*.5+Math.PI));const i=this.a.x*this.s.CAM_MAX_THETA+Math.PI,h=-this.a.y*this.s.CAM_MAX_PHI,r=this.a.hovered?this.s.CAM_RADIUS*.8:this.s.CAM_RADIUS;this.o.theta=this.S(i,this.o.theta,s),this.o.phi=this.S(h,this.o.phi,s),this.o.radius=this.S(r,this.o.radius,s);const c=this.i.width/this.i.height,a=Math.max(1,Math.floor(this.s.GRID_SIZE)),d=Math.max(1,Math.round(a/c)),o=this.d(this.t),n=this.u(this.t);e.uniform2f(this.r.uImageSize,o,n),e.uniform1f(this.r.uFocal,this.s.FOCAL_LENGTH),e.uniform1f(this.r.uDepthMin,this.s.DEPTH_MIN),e.uniform1f(this.r.uDepthMax,this.s.DEPTH_MAX),e.uniform2i(this.r.uGridSegs,a,d),e.uniform2f(this.r.uTargetRes,this.i.width,this.i.height),e.uniform1f(this.r.uDiscardCutoff,this.s.DISCARD_CUTOFF);const u=[this.o.radius*Math.cos(this.o.phi)*Math.sin(this.o.theta),this.o.radius*Math.sin(this.o.phi),this.s.CAM_RADIUS+this.o.radius*Math.cos(this.o.phi)*Math.cos(this.o.theta)],f=[0,0,this.s.CAM_RADIUS],T=[0,-1,0],I=this.D||new Float32Array(this.N(u,f,T)),R=this.C||new Float32Array(this.B(this.s.CAM_FOV,c,.1,100));e.uniformMatrix4fv(this.r.uView,!1,I),e.uniformMatrix4fv(this.r.uProjection,!1,R),e.drawArrays(e.TRIANGLES,0,a*d*6),this.A=requestAnimationFrame(this.T)}w(t){const e=this.i.getBoundingClientRect();this.a.hovered=!0,this.a.x=(t.clientX-e.left)/e.width*2-1,this.a.y=(t.clientY-e.top)/e.height*2-1}H(){this.a.hovered=!1}f(){const t=window.devicePixelRatio||1,e=this.i.parentElement;if(!e)return;const s=e.clientWidth,i=e.clientHeight;let h=this.d(this.t)||1,r=this.u(this.t)||1;const c=h/r;let a=s,d=a/c;d>i&&(d=i,a=d*c);const o=Math.max(1,Math.floor(a*t)),n=Math.max(1,Math.floor(d*t));this.i.width=o,this.i.height=n,this.n&&this.n.viewport(0,0,o,n)}I(){const t=this.s;if(this.hasAttribute("grid-size")&&(t.GRID_SIZE=parseInt(this.getAttribute("grid-size"))??t.GRID_SIZE),this.hasAttribute("focal-length")&&(t.FOCAL_LENGTH=parseFloat(this.getAttribute("focal-length"))??t.FOCAL_LENGTH),this.hasAttribute("depth-min")&&(t.DEPTH_MIN=parseFloat(this.getAttribute("depth-min"))??t.DEPTH_MIN),this.hasAttribute("depth-max")&&(t.DEPTH_MAX=parseFloat(this.getAttribute("depth-max"))??t.DEPTH_MAX),this.hasAttribute("discard-cutoff")&&(t.DISCARD_CUTOFF=parseFloat(this.getAttribute("discard-cutoff"))??t.DISCARD_CUTOFF),this.hasAttribute("cam-radius")&&(t.CAM_RADIUS=parseFloat(this.getAttribute("cam-radius"))??t.CAM_RADIUS),this.hasAttribute("cam-max-theta")&&(t.CAM_MAX_THETA=parseFloat(this.getAttribute("cam-max-theta"))??t.CAM_MAX_THETA),this.hasAttribute("cam-max-phi")&&(t.CAM_MAX_PHI=parseFloat(this.getAttribute("cam-max-phi"))??t.CAM_MAX_PHI),this.hasAttribute("cam-fov")&&(t.CAM_FOV=parseFloat(this.getAttribute("cam-fov"))??t.CAM_FOV),this.hasAttribute("cam-smoothness")&&(t.CAM_SMOOTHNESS=parseFloat(this.getAttribute("cam-smoothness"))??t.CAM_SMOOTHNESS),this.hasAttribute("boomerang-speed")&&(t.BOOMERANG_SPEED=parseFloat(this.getAttribute("boomerang-speed"))??t.BOOMERANG_SPEED),this.hasAttribute("background-color"))try{const e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}}U(t,e,s){const i=t.createShader(e);return t.shaderSource(i,s),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(console.error(t.getShaderInfoLog(i)),t.deleteShader(i),null)}G(t,e,s){const i=this.U(t,t.VERTEX_SHADER,e),h=this.U(t,t.FRAGMENT_SHADER,s);if(!i||!h)return null;const r=t.createProgram();return t.attachShader(r,i),t.attachShader(r,h),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)?(t.deleteShader(i),t.deleteShader(h),r):(console.error(t.getProgramInfoLog(r)),t.deleteProgram(r),null)}L(t){const e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),e}h(t,e){if(!this.n)return;const s=this.n,i=this.c[t];if(s.activeTexture(t==="color"?s.TEXTURE0:s.TEXTURE1),s.bindTexture(s.TEXTURE_2D,i),!this.l(e)){s.texImage2D(s.TEXTURE_2D,0,s.RGBA,1,1,0,s.RGBA,s.UNSIGNED_BYTE,new Uint8Array([0,0,0,0]));return}try{s.pixelStorei(s.UNPACK_FLIP_Y_WEBGL,!1),s.texImage2D(s.TEXTURE_2D,0,s.RGBA,s.RGBA,s.UNSIGNED_BYTE,e)}catch{}}B(t,e,s,i){const h=1/Math.tan(t/2);return[h/e,0,0,0,0,h,0,0,0,0,(i+s)/(s-i),-1,0,0,2*i*s/(s-i),0]}N(t,e,s){function i(o){const n=Math.hypot(...o)||1;return o.map(u=>u/n)}function h(o,n){return[o[1]*n[2]-o[2]*n[1],o[2]*n[0]-o[0]*n[2],o[0]*n[1]-o[1]*n[0]]}function r(o,n){return o.map((u,f)=>u-n[f])}const c=i(r(t,e)),a=i(h(s,c)),d=h(c,a);return[a[0],d[0],c[0],0,a[1],d[1],c[1],0,a[2],d[2],c[2],0,-(a[0]*t[0]+a[1]*t[1]+a[2]*t[2]),-(d[0]*t[0]+d[1]*t[1]+d[2]*t[2]),-(c[0]*t[0]+c[1]*t[1]+c[2]*t[2]),1]}S(t,e,s){const i=(1-this.s.CAM_SMOOTHNESS)*s/16.67,h=Math.sign(t-e);return e+=(t-e)*i,Math.sign(t-e)!==h&&(e=t),e}R(){throw new Error("Must implement _loadSources")}b(){throw new Error("Must implement _createFallback")}P(){}l(t){throw new Error("Must implement _isSourceReady")}d(t){throw new Error("Must implement _getSourceWidth")}u(t){throw new Error("Must implement _getSourceHeight")}}l=g;class v extends l{static get observedAttributes(){return["color-src","depth-src","color-id","depth-id","grid-size","focal-length","depth-min","depth-max","discard-cutoff","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color"]}constructor(){super(),this.t=new Image,this.e=new Image,this.t.crossOrigin="anonymous",this.e.crossOrigin="anonymous"}attributeChangedCallback(t,e,s){if(e!==s)if(t==="color-src")this.t.src=s||"";else if(t==="depth-src")this.e.src=s||"";else if(t==="color-id"){const i=document.getElementById(s);i instanceof HTMLImageElement&&(this.t=i,i.complete?this.h("color",i):i.addEventListener("load",()=>this.h("color",i)))}else if(t==="depth-id"){const i=document.getElementById(s);i instanceof HTMLImageElement&&(this.e=i,i.complete?this.h("depth",i):i.addEventListener("load",()=>this.h("depth",i)))}else this.I()}R(){const t=this.getAttribute("color-id"),e=this.getAttribute("depth-id"),s=this.getAttribute("color-src"),i=this.getAttribute("depth-src");if(t){const h=document.getElementById(t);h instanceof HTMLImageElement&&h.complete?(this.t=h,this.h("color",this.t)):h&&(h.addEventListener("load",()=>this.h("color",h)),this.t=h)}else s&&(this.t.src=s,this.t.onload=()=>this.h("color",this.t));if(e){const h=document.getElementById(e);h instanceof HTMLImageElement&&h.complete?(this.e=h,this.h("depth",this.e)):h&&(h.addEventListener("load",()=>this.h("depth",h)),this.e=h)}else i&&(this.e.src=i,this.e.onload=()=>this.h("depth",this.e))}b(){this.getAttribute("color-id")&&(this.t=this.t.cloneNode(),this.t.id+="_threedad-img"),this.t.style.display="block",this.t.classList.add("cover-img"),this.i.parentElement.appendChild(this.t)}l(t){return t&&t.complete&&t.naturalWidth>0}d(t){return t?t.width:1}u(t){return t?t.height:1}}m=v;class M extends l{static get observedAttributes(){return["color-src","depth-src","color-id","depth-id","grid-size","focal-length","depth-min","depth-max","discard-cutoff","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color","autoplay","loop","muted"]}constructor(){super(),this.t=document.createElement("video"),this.e=document.createElement("video"),this.t.crossOrigin="anonymous",this.e.crossOrigin="anonymous",this.t.playsInline=!0,this.e.playsInline=!0,this.t.muted=!0,this.e.muted=!0}attributeChangedCallback(t,e,s){if(e!==s)if(t==="color-src")this.t.src=s||"";else if(t==="depth-src")this.e.src=s||"";else if(t==="color-id"){const i=document.getElementById(s);i instanceof HTMLVideoElement&&(this.t=i,i.readyState>=i.HAVE_CURRENT_DATA?this.h("color",i):i.addEventListener("loadeddata",()=>this.h("color",i)))}else if(t==="depth-id"){const i=document.getElementById(s);i instanceof HTMLVideoElement&&(this.e=i,i.readyState>=i.HAVE_CURRENT_DATA?this.h("depth",i):i.addEventListener("loadeddata",()=>this.h("depth",i)))}else t==="autoplay"?(this.t.autoplay=this.hasAttribute("autoplay"),this.e.autoplay=this.hasAttribute("autoplay")):t==="loop"?(this.t.loop=this.hasAttribute("loop"),this.e.loop=this.hasAttribute("loop")):t==="muted"?(this.t.muted=this.hasAttribute("muted"),this.e.muted=this.hasAttribute("muted")):this.I()}play(){return Promise.all([this.t?.play(),this.e?.play()])}pause(){this.t?.pause(),this.e?.pause()}get paused(){return this.t?this.t.paused:!0}get currentTime(){return this.t?this.t.currentTime:0}set currentTime(t){console.log(t),this.t&&(this.t.currentTime=t),this.e&&(this.e.currentTime=t)}R(){const t=this.getAttribute("color-id"),e=this.getAttribute("depth-id"),s=this.getAttribute("color-src"),i=this.getAttribute("depth-src");if(this.hasAttribute("autoplay")&&(this.t.autoplay=!0,this.e.autoplay=!0),this.hasAttribute("loop")&&(this.t.loop=!0,this.e.loop=!0),this.hasAttribute("muted")&&(this.t.muted=!0,this.e.muted=!0),t){const h=document.getElementById(t);h instanceof HTMLVideoElement&&(this.t=h)}else s&&(this.t.src=s);if(e){const h=document.getElementById(e);h instanceof HTMLVideoElement&&(this.e=h)}else i&&(this.e.src=i);this.hasAttribute("autoplay")?this.play().then(()=>{this.f()}):this.play().then(()=>{this.pause(),this.f()})}b(){this.getAttribute("color-id")&&(this.t=this.t.cloneNode(!0),this.t.id+="_threedad-video"),this.t.style.display="block",this.t.classList.add("cover-video"),this.t.controls=!0,this.i.parentElement.appendChild(this.t)}P(){this.l(this.t)&&this.h("color",this.t),this.l(this.e)&&this.h("depth",this.e),Math.abs(this.t.currentTime-this.e.currentTime)>.01&&(this.e.currentTime=this.t.currentTime,this.t.paused!==this.e.paused&&(this.t.paused?this.e.pause():this.e.play()))}l(t){return t&&t.readyState>=t.HAVE_CURRENT_DATA}d(t){return t?t.videoWidth:1}u(t){return t?t.videoHeight:1}}p=M,customElements.define("rgbd-img",m),customElements.define("rgbd-video",p)}
+			`,this.E.appendChild(e),this.e=document.createElement("canvas"),this.e.style.width="100%",this.e.style.height="100%",this.e.style.objectFit="contain",this.e.setAttribute("role","img"),this.e.setAttribute("aria-label","3D image"),t.appendChild(this.e),this.C=this.k.bind(this),this.D=this.J.bind(this),this.S=this.Q.bind(this),this.b=this.R.bind(this)}connectedCallback(){this.w();let t;try{this.$(),t=!1}catch{t=!0}window.addEventListener("resize",this.C),window.addEventListener("mousemove",this.D),document.addEventListener("mouseleave",this.S),t?this.I():(this.k(),this.T=!0,this.A=performance.now(),this.M=requestAnimationFrame(this.b))}disconnectedCallback(){this.T=!1,cancelAnimationFrame(this.M),window.removeEventListener("resize",this.C),this.e.removeEventListener("pointermove",this.D),this.e.removeEventListener("pointerleave",this.S);try{if(this.a){let t=this.a;this.v&&t.deleteProgram(this.v);for(let e in this.f)t.deleteTexture(this.f[e])}}catch{}}setViewMatrix(t){this.F=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.G=t&&t.length===16?new Float32Array(t):null}get width(){return this.m(this.t)}get height(){return this.p(this.t)}$(){let t=this.e.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.a=t;let e=this.tt(t,M,a);if(!e)return;this.v=e,t.useProgram(e);let i=this.H(t),s=this.H(t);this.f.color=i,this.f.depth=s,this.d("color",this.t),this.d("depth",this.h);let h=t.getUniformLocation(e,"u_colorImage"),r=t.getUniformLocation(e,"u_depthImage");t.uniform1i(h,0),t.uniform1i(r,1),this.o={uProjection:t.getUniformLocation(e,"u_projMat"),uView:t.getUniformLocation(e,"u_viewMat"),uImageSize:t.getUniformLocation(e,"u_imageSize"),uFocal:t.getUniformLocation(e,"u_focal"),uDepthMin:t.getUniformLocation(e,"u_depthMin"),uDepthMax:t.getUniformLocation(e,"u_depthMax"),uGridSegs:t.getUniformLocation(e,"u_grid"),uTargetRes:t.getUniformLocation(e,"u_targetRes"),uDiscardCutoff:t.getUniformLocation(e,"u_discardCutoff")}}R(t){if(!this.T||!this.a)return;let e=this.a,i=t-this.A;this.A=t,this.N(),e.clearColor(...this.i.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST),this.n.hovered||(this.n.x=Math.sin(t*this.i.BOOMERANG_SPEED),this.n.y=Math.sin(t*this.i.BOOMERANG_SPEED*.5+Math.PI));let s=this.n.x*this.i.CAM_MAX_THETA+Math.PI,h=-this.n.y*this.i.CAM_MAX_PHI,r=this.n.hovered?this.i.CAM_RADIUS*.8:this.i.CAM_RADIUS;this.s.theta=this.P(s,this.s.theta,i),this.s.phi=this.P(h,this.s.phi,i),this.s.radius=this.P(r,this.s.radius,i);let o=this.e.width/this.e.height,u=Math.max(1,Math.floor(this.i.GRID_SIZE)),f=Math.max(1,Math.round(u/o)),c=this.m(this.t),d=this.p(this.t);e.uniform2f(this.o.uImageSize,c,d),e.uniform1f(this.o.uFocal,this.i.FOCAL_LENGTH),e.uniform1f(this.o.uDepthMin,this.i.DEPTH_MIN),e.uniform1f(this.o.uDepthMax,this.i.DEPTH_MAX),e.uniform2i(this.o.uGridSegs,u,f),e.uniform2f(this.o.uTargetRes,this.e.width,this.e.height),e.uniform1f(this.o.uDiscardCutoff,this.i.DISCARD_CUTOFF);let _=[this.s.radius*Math.cos(this.s.phi)*Math.sin(this.s.theta),this.s.radius*Math.sin(this.s.phi),this.i.CAM_RADIUS+this.s.radius*Math.cos(this.s.phi)*Math.cos(this.s.theta)],T=[0,0,this.i.CAM_RADIUS],S=[0,-1,0],b=this.F||new Float32Array(this.et(_,T,S)),R=this.G||new Float32Array(this.it(this.i.CAM_FOV,o,.1,100));e.uniformMatrix4fv(this.o.uView,!1,b),e.uniformMatrix4fv(this.o.uProjection,!1,R),e.drawArrays(e.TRIANGLES,0,u*f*6),this.M=requestAnimationFrame(this.b)}J(t){let e=this.e.getBoundingClientRect();this.n.hovered=!0,this.n.x=(t.clientX-e.left)/e.width*2-1,this.n.y=(t.clientY-e.top)/e.height*2-1}Q(){this.n.hovered=!1}k(){let t=window.devicePixelRatio||1,e=this.e.parentElement;if(!e)return;let i=e.clientWidth,s=e.clientHeight,h=this.m(this.t)||1,r=this.p(this.t)||1,o=h/r,u=i,f=u/o;f>s&&(f=s,u=f*o);let c=Math.max(1,Math.floor(u*t)),d=Math.max(1,Math.floor(f*t));this.e.width=c,this.e.height=d,this.a&&this.a.viewport(0,0,c,d)}w(){let t=this.i;if(this.hasAttribute("grid-size")&&(t.GRID_SIZE=parseInt(this.getAttribute("grid-size"))??t.GRID_SIZE),this.hasAttribute("focal-length")&&(t.FOCAL_LENGTH=parseFloat(this.getAttribute("focal-length"))??t.FOCAL_LENGTH),this.hasAttribute("depth-min")&&(t.DEPTH_MIN=parseFloat(this.getAttribute("depth-min"))??t.DEPTH_MIN),this.hasAttribute("depth-max")&&(t.DEPTH_MAX=parseFloat(this.getAttribute("depth-max"))??t.DEPTH_MAX),this.hasAttribute("discard-cutoff")&&(t.DISCARD_CUTOFF=parseFloat(this.getAttribute("discard-cutoff"))??t.DISCARD_CUTOFF),this.hasAttribute("cam-radius")&&(t.CAM_RADIUS=parseFloat(this.getAttribute("cam-radius"))??t.CAM_RADIUS),this.hasAttribute("cam-max-theta")&&(t.CAM_MAX_THETA=parseFloat(this.getAttribute("cam-max-theta"))??t.CAM_MAX_THETA),this.hasAttribute("cam-max-phi")&&(t.CAM_MAX_PHI=parseFloat(this.getAttribute("cam-max-phi"))??t.CAM_MAX_PHI),this.hasAttribute("cam-fov")&&(t.CAM_FOV=parseFloat(this.getAttribute("cam-fov"))??t.CAM_FOV),this.hasAttribute("cam-smoothness")&&(t.CAM_SMOOTHNESS=parseFloat(this.getAttribute("cam-smoothness"))??t.CAM_SMOOTHNESS),this.hasAttribute("boomerang-speed")&&(t.BOOMERANG_SPEED=parseFloat(this.getAttribute("boomerang-speed"))??t.BOOMERANG_SPEED),this.hasAttribute("background-color"))try{let e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}}B(t,e,i){let s=t.createShader(e);return t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(console.error(t.getShaderInfoLog(s)),t.deleteShader(s),null)}tt(t,e,i){let s=this.B(t,t.VERTEX_SHADER,e),h=this.B(t,t.FRAGMENT_SHADER,i);if(!s||!h)return null;let r=t.createProgram();return t.attachShader(r,s),t.attachShader(r,h),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)?(t.deleteShader(s),t.deleteShader(h),r):(console.error(t.getProgramInfoLog(r)),t.deleteProgram(r),null)}H(t){let e=t.createTexture();return t.bindTexture(t.TEXTURE_2D,e),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.LINEAR),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.LINEAR),e}d(t,e){if(!this.a)return;let i=this.a,s=this.f[t];if(i.activeTexture(t==="color"?i.TEXTURE0:i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,s),!this.U(e)){i.texImage2D(i.TEXTURE_2D,0,i.RGBA,1,1,0,i.RGBA,i.UNSIGNED_BYTE,new Uint8Array([0,0,0,0]));return}try{i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,!1),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,e)}catch{}}it(t,e,i,s){let h=1/Math.tan(t/2);return[h/e,0,0,0,0,h,0,0,0,0,(s+i)/(i-s),-1,0,0,2*s*i/(i-s),0]}et(t,e,i){function s(c){let d=Math.hypot(...c)||1;return c.map(_=>_/d)}function h(c,d){return[c[1]*d[2]-c[2]*d[1],c[2]*d[0]-c[0]*d[2],c[0]*d[1]-c[1]*d[0]]}function r(c,d){return c.map((_,T)=>_-d[T])}let o=s(r(t,e)),u=s(h(i,o)),f=h(o,u);return[u[0],f[0],o[0],0,u[1],f[1],o[1],0,u[2],f[2],o[2],0,-(u[0]*t[0]+u[1]*t[1]+u[2]*t[2]),-(f[0]*t[0]+f[1]*t[1]+f[2]*t[2]),-(o[0]*t[0]+o[1]*t[1]+o[2]*t[2]),1]}P(t,e,i){let s=(1-this.i.CAM_SMOOTHNESS)*i/16.67,h=Math.sign(t-e);return e+=(t-e)*s,Math.sign(t-e)!==h&&(e=t),e}I(){throw new Error("Must implement _createFallback")}N(){}U(t){throw new Error("Must implement _isSourceReady")}m(t){throw new Error("Must implement _getSourceWidth")}p(t){throw new Error("Must implement _getSourceHeight")}}v=m;class l extends v{static get observedAttributes(){return["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","discard-cutoff","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color"]}constructor(){super(),this.t=new Image,this.h=new Image,this.t.crossOrigin="anonymous",this.h.crossOrigin="anonymous",this.t.onload=()=>this.d("color",this.t),this.h.onload=()=>this.d("depth",this.h)}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.t.src=i||"":t==="depth-src"?this.h.src=i||"":this.w())}I(){this.t.style.display="block",this.t.classList.add("cover-img"),this.e.parentElement.appendChild(this.t)}U(t){return t&&t.complete&&t.naturalWidth>0}m(t){return t?t.width:1}p(t){return t?t.height:1}}x=l;class p extends v{static get observedAttributes(){return["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","discard-cutoff","cam-radius","cam-max-theta","cam-max-phi","cam-fov","cam-smoothness","boomerang-speed","background-color","autoplay","loop","muted"]}constructor(){super(),this.c=[],this.u=[],this.l=!1,this.O=!1,this.X=!0,this._=0,this.ot=0}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?(this.st(),this.c=[this.g(i,0)]):t==="depth-src"?this.u=[this.g(i,0)]:t==="autoplay"?this.l=this.hasAttribute("autoplay"):t==="loop"?this.O=this.hasAttribute("loop"):t==="muted"?this.X=this.hasAttribute("muted"):this.w())}play(){this.l=!0}pause(){this.l=!1}enqueue(t,e,i){this.c.push(this.g(t,i)),this.u.push(this.g(e,i))}get paused(){return!this.l}get currentTime(){return this._/1e3}set currentTime(t){throw new Error("Seeking not yet implemented!")}g(t,e){let i={startTime:e*1e3,demuxer:null,decoder:null,chunks:[],frames:[],curChunk:0};return i.decoder=new VideoDecoder({output(s){i.frames.push(s)},error(s){console.error("VideoDecoder encountered an error while decoding: ",s)}}),i.demuxer=new g(t,{onConfig(s){i.config=s,i.decoder?.configure(s)},onChunk(s){i.chunks?.push(s)},onEndOfStream(){i.demuxer=null}}),i}rt(t){let e=t.chunks[t.chunks.length-1];if(!e)return null;let i={startTime:t.startTime+e.timestamp+e.duration,demuxer:null,decoder:null,config:t.config,chunks:t.chunks,frames:[],curChunk:0};return i.decoder=new VideoDecoder({output(s){i.frames.push(s)},error(s){console.error("VideoDecoder encountered an error while decoding: ",s)}}),i.decoder.configure(t.config),i}R(t){this.l&&(this._+=t-this.A);let e=(s,h)=>{let r=s[h];for(;r.curChunk<r.chunks.length;){let o=r.chunks[r.curChunk];if(r.startTime+o.timestamp>(this._+1e3)*1e3)break;r.decoder.decode(o),r.curChunk++}if(r.curChunk>=r.chunks.length&&!r.demuxer&&r.decoder){let o=r.decoder;o.flush().then(()=>{o.close(),r.done=!0}),r.decoder=null,this.O&&s.push(this.rt(r))}};for(let s=0;s<this.c.length;s++)e(this.c,s);for(let s=0;s<this.u.length;s++)e(this.u,s);let i=s=>s?!s.demuxer&&s.done&&s.frames.length==1:!1;i(this.c[0])&&i(this.u[0])&&(this.c.shift(),this.u.shift(),this.W=!0),super.R(t)}I(){this.t=document.createElement("video"),this.t.style.display="block",this.t.classList.add("cover-video"),this.t.muted=this.X,this.t.autoplay=this.l,this.t.loop=this.O,this.t.src=this.getAttribute("color-src"),this.e.parentElement.appendChild(this.t)}N(){let t=this.c[0],e=this.u[0];if(!t||!e)return;let i=this._*1e3,s=this.ht??Number.MAX_VALUE,h=-1;for(let r=0;r<Math.min(t.frames.length,e.frames.length);r++){let o=Math.abs(i-(t.frames[r].timestamp+t.startTime));if(o<s)s=o,h=r;else break}if(!(h<0)){this.W&&(this.t.close(),this.h.close(),this.W=!1),this.t=t.frames[h],this.h=e.frames[h],this.ht=this.t?.timestamp,this.t?.timestamp!==this.h?.timestamp&&console.error("Color and depth frames have mismatched PTS"),this.d("color",this.t),this.d("depth",this.h);for(let r=0;r<h;r++)t.frames.shift().close(),e.frames.shift().close()}}U(t){return t instanceof VideoFrame}m(t){return t?t.codedWidth:1}p(t){return t?t.codedHeight:1}z(t){t.decoder?.close(),t.decoder=null;for(let e=0;e<t.frames.length;e++)t.frames[e].close()}st(){for(let t=0;t<this.c.length;t++)this.z(this.c[t]);for(let t=0;t<this.u.length;t++)this.z(this.u[t]);this._=0}}D=p,customElements.define("rgbd-img",x),customElements.define("rgbd-video",D)}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rgbd",
-	"version": "0.0.12",
+	"version": "0.0.14",
 	"type": "module",
 	"main": "dist/rgbd.js",
 	"module": "dist/rgbd.js",
@@ -11,12 +11,15 @@
 		"dist"
 	],
 	"scripts": {
-		"build": "esbuild src/rgbd.js --minify --outfile=dist/rgbd.js --format=esm --mangle-props=^_",
-		"dev": "npx serve .",
+		"build": "esbuild src/rgbd.js --bundle --external:mp4box --minify --outfile=dist/rgbd.js --format=esm --mangle-props=^_",
+		"dev": "vite",
 		"prepare": "npm run build"
 	},
 	"devDependencies": {
 		"esbuild": "^0.27.0",
-		"serve": "^14.2.5"
+		"vite": "^7.2.4"
+	},
+	"dependencies": {
+		"mp4box": "^0.5.4"
 	}
 }