rgbd 0.0.15 → 0.0.17
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/dist/rgbd.js +4 -4
- package/package.json +1 -1
package/dist/rgbd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
var x=class{constructor(){this.context=null,this.sourceNodes=null,this.gainNode=null,this.volume=1,this.sampleRate=0,this.numChannels=0,this.timeSuspended=0,this.timeOffset=0,this.lastTime=0,this.context=null,this.isPaused=!1,this.loopHandle=null}start(n={}){if(this.context)throw new Error("Audio manager already started!");this.audioEnabled=n.audioEnabled??!0,this.sampleRate=n.sampleRate??44100,this.numChannels=n.numChannels??2,this.context=new AudioContext({sampleRate:this.sampleRate}),this.isPaused&&this.context.suspend(),this.sourceNodes=new Set,this.gainNode=this.context.createGain(),this.gainNode.gain.value=this.volume,this.gainNode.connect(this.context.destination),this.timeSuspended=0,this.timeOffset=0,this.lastTime=performance.now(),this.loopHandle=setInterval(()=>{let o=performance.now();!this.isPaused&&this.context.state==="suspended"&&(this.timeSuspended+=(o-this.lastTime)/1e3),this.lastTime=o},n.updateInterval??10),this.context.onstatechange=()=>{let o=performance.now();this.context?.state==="running"&&(this.timeSuspended+=(o-this.lastTime)/1e3),this.lastTime=o}}async stop(){if(!this.context)throw new Error("Audio manager not started!");clearInterval(this.loopHandle),this.loopHandle=null,await this.context.suspend(),this.context=null}started(){return this.context!=null}getTime(){return(this.context?.currentTime??0)+this.timeSuspended+this.timeOffset}getLatency(){return this.context?(this.context.outputLatency??0)+this.context.baseLatency:0}getVideoTime(){return this.getTime()-this.getLatency()}setVideoTime(n){if(n+=this.getLatency(),this.sourceNodes!=null){for(let o of this.sourceNodes)try{o.stop()}catch{}this.sourceNodes.clear()}this.timeOffset=n-((this.context?.currentTime??0)+this.timeSuspended)}setVolume(n){this.volume=n,this.gainNode&&(this.gainNode.gain.value=n)}async resumeContext(){if(!this.context)throw new Error("Audio manager not started!");this.context.state==="suspended"&&!this.isPaused&&await this.context.resume()}async pause(){this.isPaused||(this.context&&await this.context.suspend(),this.isPaused=!0)}async play(){this.isPaused&&(this.context&&await this.context.resume(),this.isPaused=!1)}scheduleChunk(n,o){let m=n[0].length;if(m<=0)return;let c=this.context.createBuffer(this.numChannels,m,this.sampleRate);for(let a=0;a<this.numChannels;a++)c.copyToChannel(n[a],a);if(o-=this.timeSuspended+this.timeOffset,o>this.context.currentTime&&this.context.state!=="suspended"){let a=this.context.createBufferSource();a.buffer=c,a.connect(this.gainNode),this.sourceNodes.add(a),a.onended=()=>this.sourceNodes.delete(a),a.start(o)}this.playHead+=c.duration}};import*as g from"mp4box";var C=class{constructor(n,o){this.r=n,this.B=0,this.et=o}write(n){let o=new ArrayBuffer(n.byteLength);new Uint8Array(o).set(n),o.fileStart=this.B,this.B+=o.byteLength,this.r.appendBuffer(o)}close(){this.r.flush(),this.et()}},A=class{constructor(n,o,{onConfig:m,onChunk:c,onEndOfStream:a}){if(this.v=o,this.X=m,this.it=c,this.r=g.createFile(),this.r.onReady=this.st.bind(this),this.r.onSamples=this.ht.bind(this),n instanceof ArrayBuffer)n.fileStart=0,this.r.appendBuffer(n),this.r.flush(),a();else{let E=new C(this.r,a);fetch(n).then(t=>{t.body.pipeTo(new WritableStream(E,{highWaterMark:2}))})}}V(n){let m=this.r.getTrackById(n.id).mdia.minf.stbl.stsd.entries[0];if(this.v)return m.esds.esd.descs[0].descs[0].data;{let c=m.avcC||m.hvcC||m.vpcC||m.av1C;if(!c)return null;let a=new g.DataStream(void 0,0,g.DataStream.BIG_ENDIAN);return c.write(a),new Uint8Array(a.buffer,8)}}st(n){if(this.v){let o=n.audioTracks[0];this.X(o?{codec:o.codec,sampleRate:o.audio.sample_rate,numberOfChannels:o.audio.channel_count,description:this.V(o)}:null),o&&this.r.setExtractionOptions(o.id)}else{let o=n.videoTracks[0];this.X({codec:o.codec.startsWith("vp08")?"vp8":o.codec,codedHeight:o.video.height,codedWidth:o.video.width,description:this.V(o)}),this.r.setExtractionOptions(o.id)}this.r.start()}ht(n,o,m){for(let c of m){let a;this.v?a=EncodedAudioChunk:a=EncodedVideoChunk,this.it(new a({type:c.is_sync?"key":"delta",timestamp:1e6*c.cts/c.timescale,duration:1e6*c.duration/c.timescale,data:c.data}))}}};var D=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u",T,w,b;if(!D)T=class{},w=class{},b=class{};else{let v=`#version 300 es
|
|
2
2
|
|
|
3
3
|
precision mediump float;
|
|
4
4
|
precision mediump int;
|
|
@@ -54,7 +54,7 @@ import*as A from"mp4box";var C=class{constructor(a,n){this.h=a,this.F=0,this.V=n
|
|
|
54
54
|
gl_Position = u_projMat * u_viewMat * vec4(pos.x, pos.y, z, 1.0);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
`,
|
|
57
|
+
`,n=`#version 300 es
|
|
58
58
|
|
|
59
59
|
precision mediump float;
|
|
60
60
|
|
|
@@ -79,9 +79,9 @@ import*as A from"mp4box";var C=class{constructor(a,n){this.h=a,this.F=0,this.V=n
|
|
|
79
79
|
|
|
80
80
|
fragColor = texture(u_colorImage, v_uv);
|
|
81
81
|
}
|
|
82
|
-
`;class m extends HTMLElement{constructor(){super(),this.
|
|
82
|
+
`;class m 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.E=null,this.i=null,this.t=null,this.u=null,this.l=null,this.T=null,this.g={},this.c=null,this.d={x:0,y:0,hovered:!1},this.h={theta:Math.PI,phi:0,radius:this.s.CAM_RADIUS},this.M=0,this.C=null,this.w=!1,this.W=null,this.z=null,this.b=null,this.R=null,this.S=null,this.D=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=`
|
|
83
83
|
:host { display: inline-block; width: 300px; height: 200px; }
|
|
84
84
|
:host([fullbleed]) { display:block; width:100%; height:100%; }
|
|
85
85
|
canvas { touch-action: none; }
|
|
86
86
|
.cover-img, .cover-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
|
|
87
|
-
`,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.R.bind(this),this.D=this.J.bind(this),this.S=this.Q.bind(this),this.b=this.w.bind(this)}connectedCallback(){this.I();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.P():(this.R(),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.p)t.deleteTexture(this.p[e].tex)}}catch{}}setViewMatrix(t){this.G=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.k=t&&t.length===16?new Float32Array(t):null}get width(){return this.d(this.t)}get height(){return this.l(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.p.color=i,this.p.depth=s,this.f("color",this.t),this.f("depth",this.r);let r=t.getUniformLocation(e,"u_colorImage"),h=t.getUniformLocation(e,"u_depthImage");t.uniform1i(r,0),t.uniform1i(h,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")}}w(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,r=-this.n.y*this.i.CAM_MAX_PHI,h=this.n.hovered?this.i.CAM_RADIUS*.8:this.i.CAM_RADIUS;this.s.theta=this.U(s,this.s.theta,i),this.s.phi=this.U(r,this.s.phi,i),this.s.radius=this.U(h,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.d(this.t),d=this.l(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.G||new Float32Array(this.et(_,T,S)),R=this.k||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}R(){let t=window.devicePixelRatio||1,e=this.e.parentElement;if(!e)return;let i=e.clientWidth,s=e.clientHeight,r=this.d(this.t)||1,h=this.l(this.t)||1,o=r/h,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)}I(){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),r=this.B(t,t.FRAGMENT_SHADER,i);if(!s||!r)return null;let h=t.createProgram();return t.attachShader(h,s),t.attachShader(h,r),t.linkProgram(h),t.getProgramParameter(h,t.LINK_STATUS)?(t.deleteShader(s),t.deleteShader(r),h):(console.error(t.getProgramInfoLog(h)),t.deleteProgram(h),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),{tex:e,width:0,height:0}}f(t,e){if(!this.a)return;let i=this.a,s=this.p[t];if(i.activeTexture(t==="color"?i.TEXTURE0:i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,s.tex),!this.O(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),(this.d(e)!=s.width||this.l(e)!=s.height)&&(this.R(),s.width=this.d(e),s.height=this.l(e))}catch{}}it(t,e,i,s){let r=1/Math.tan(t/2);return[r/e,0,0,0,0,r,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 r(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 h(c,d){return c.map((_,T)=>_-d[T])}let o=s(h(t,e)),u=s(r(i,o)),f=r(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]}U(t,e,i){let s=(1-this.i.CAM_SMOOTHNESS)*i/16.67,r=Math.sign(t-e);return e+=(t-e)*s,Math.sign(t-e)!==r&&(e=t),e}P(){throw new Error("Must implement _createFallback")}N(){}O(t){throw new Error("Must implement _isSourceReady")}d(t){throw new Error("Must implement _getSourceWidth")}l(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.r=new Image,this.t.crossOrigin="anonymous",this.r.crossOrigin="anonymous",this.t.onload=()=>this.f("color",this.t),this.r.onload=()=>this.f("depth",this.r)}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.t.src=i||"":t==="depth-src"?this.r.src=i||"":this.I())}P(){this.t.style.display="block",this.t.classList.add("cover-img"),this.e.parentElement.appendChild(this.t)}O(t){return t&&t.complete&&t.naturalWidth>0}d(t){return t?t.width:1}l(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.m=!1,this.L=!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.m=this.hasAttribute("autoplay"):t==="loop"?this.L=this.hasAttribute("loop"):t==="muted"?this.X=this.hasAttribute("muted"):this.I())}play(){this.m=!0}pause(){this.m=!1}enqueue(t,e,i){this.c.push(this.g(t,i)),this.u.push(this.g(e,i))}get paused(){return!this.m}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}ht(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}w(t){this.m&&(this._+=t-this.A);let e=(s,r)=>{let h=s[r];for(;h.curChunk<h.chunks.length;){let o=h.chunks[h.curChunk];if(h.startTime+o.timestamp>(this._+1e3)*1e3)break;h.decoder.decode(o),h.curChunk++}if(h.curChunk>=h.chunks.length&&!h.demuxer&&h.decoder){let o=h.decoder;o.flush().then(()=>{o.close(),h.done=!0}),h.decoder=null,this.L&&s.push(this.ht(h))}};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.w(t)}P(){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.m,this.t.loop=this.L,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.rt??Number.MAX_VALUE,r=-1;for(let h=0;h<Math.min(t.frames.length,e.frames.length);h++){let o=Math.abs(i-(t.frames[h].timestamp+t.startTime));if(o<s)s=o,r=h;else break}if(!(r<0)){this.W&&(this.t.close(),this.r.close(),this.W=!1),this.t=t.frames[r],this.r=e.frames[r],this.rt=this.t?.timestamp,this.t?.timestamp!==this.r?.timestamp&&console.error("Color and depth frames have mismatched PTS"),this.f("color",this.t),this.f("depth",this.r);for(let h=0;h<r;h++)t.frames.shift().close(),e.frames.shift().close()}}O(t){return t instanceof VideoFrame}d(t){return t?t.codedWidth:1}l(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)}
|
|
87
|
+
`,this.E.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.b=this.I.bind(this),this.R=this.rt.bind(this),this.S=this.ot.bind(this),this.D=this.P.bind(this)}connectedCallback(){this.O();let t;try{this.nt(),t=!1}catch{t=!0}window.addEventListener("resize",this.b),window.addEventListener("mousemove",this.R),document.addEventListener("mouseleave",this.S),t?this.L():(this.I(),this.w=!0,this.M=performance.now(),this.C=requestAnimationFrame(this.D))}disconnectedCallback(){this.w=!1,cancelAnimationFrame(this.C),window.removeEventListener("resize",this.b),this.i.removeEventListener("pointermove",this.R),this.i.removeEventListener("pointerleave",this.S);try{if(this.l){let t=this.l;this.T&&t.deleteProgram(this.T);for(let e in this.g)t.deleteTexture(this.g[e].tex)}}catch{}}setViewMatrix(t){this.W=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.z=t&&t.length===16?new Float32Array(t):null}get width(){return this.f(this.t)}get height(){return this.m(this.t)}nt(){let t=this.i.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.l=t;let e=this.at(t,v,n);if(!e)return;this.T=e,t.useProgram(e);let i=this.j(t),s=this.j(t);this.g.color=i,this.g.depth=s,this.p("color",this.t),this.p("depth",this.u);let r=t.getUniformLocation(e,"u_colorImage"),h=t.getUniformLocation(e,"u_depthImage");t.uniform1i(r,0),t.uniform1i(h,1),this.c={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")}}P(t){if(!this.w||!this.l)return;let e=this.l,i=t-this.M;this.M=t,this.K(),e.clearColor(...this.s.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST),this.d.hovered||(this.d.x=Math.sin(t*this.s.BOOMERANG_SPEED),this.d.y=Math.sin(t*this.s.BOOMERANG_SPEED*.5+Math.PI));let s=this.d.x*this.s.CAM_MAX_THETA+Math.PI,r=-this.d.y*this.s.CAM_MAX_PHI,h=this.d.hovered?this.s.CAM_RADIUS*.8:this.s.CAM_RADIUS;this.h.theta=this.U(s,this.h.theta,i),this.h.phi=this.U(r,this.h.phi,i),this.h.radius=this.U(h,this.h.radius,i);let u=this.i.width/this.i.height,l=Math.max(1,Math.floor(this.s.GRID_SIZE)),p=Math.max(1,Math.round(l/u)),d=this.f(this.t),f=this.m(this.t);e.uniform2f(this.c.uImageSize,d,f),e.uniform1f(this.c.uFocal,this.s.FOCAL_LENGTH),e.uniform1f(this.c.uDepthMin,this.s.DEPTH_MIN),e.uniform1f(this.c.uDepthMax,this.s.DEPTH_MAX),e.uniform2i(this.c.uGridSegs,l,p),e.uniform2f(this.c.uTargetRes,this.i.width,this.i.height),e.uniform1f(this.c.uDiscardCutoff,this.s.DISCARD_CUTOFF);let _=[this.h.radius*Math.cos(this.h.phi)*Math.sin(this.h.theta),this.h.radius*Math.sin(this.h.phi),this.s.CAM_RADIUS+this.h.radius*Math.cos(this.h.phi)*Math.cos(this.h.theta)],M=[0,0,this.s.CAM_RADIUS],R=[0,-1,0],S=this.W||new Float32Array(this.ut(_,M,R)),y=this.z||new Float32Array(this.ct(this.s.CAM_FOV,u,.1,100));e.uniformMatrix4fv(this.c.uView,!1,S),e.uniformMatrix4fv(this.c.uProjection,!1,y),e.drawArrays(e.TRIANGLES,0,l*p*6),this.C=requestAnimationFrame(this.D)}rt(t){let e=this.i.getBoundingClientRect();this.d.hovered=!0,this.d.x=(t.clientX-e.left)/e.width*2-1,this.d.y=(t.clientY-e.top)/e.height*2-1}ot(){this.d.hovered=!1}I(){let t=window.devicePixelRatio||1,e=this.i.parentElement;if(!e)return;let i=e.clientWidth,s=e.clientHeight,r=this.f(this.t)||1,h=this.m(this.t)||1,u=r/h,l=i,p=l/u;p>s&&(p=s,l=p*u);let d=Math.max(1,Math.floor(l*t)),f=Math.max(1,Math.floor(p*t));this.i.width=d,this.i.height=f,this.l&&this.l.viewport(0,0,d,f)}O(){let 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{let e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}}q(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)}at(t,e,i){let s=this.q(t,t.VERTEX_SHADER,e),r=this.q(t,t.FRAGMENT_SHADER,i);if(!s||!r)return null;let h=t.createProgram();return t.attachShader(h,s),t.attachShader(h,r),t.linkProgram(h),t.getProgramParameter(h,t.LINK_STATUS)?(t.deleteShader(s),t.deleteShader(r),h):(console.error(t.getProgramInfoLog(h)),t.deleteProgram(h),null)}j(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),{tex:e,width:0,height:0}}p(t,e){if(!this.l)return;let i=this.l,s=this.g[t];if(i.activeTexture(t==="color"?i.TEXTURE0:i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,s.tex),!this.N(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),(this.f(e)!=s.width||this.m(e)!=s.height)&&(this.I(),s.width=this.f(e),s.height=this.m(e))}catch{}}ct(t,e,i,s){let r=1/Math.tan(t/2);return[r/e,0,0,0,0,r,0,0,0,0,(s+i)/(i-s),-1,0,0,2*s*i/(i-s),0]}ut(t,e,i){function s(d){let f=Math.hypot(...d)||1;return d.map(_=>_/f)}function r(d,f){return[d[1]*f[2]-d[2]*f[1],d[2]*f[0]-d[0]*f[2],d[0]*f[1]-d[1]*f[0]]}function h(d,f){return d.map((_,M)=>_-f[M])}let u=s(h(t,e)),l=s(r(i,u)),p=r(u,l);return[l[0],p[0],u[0],0,l[1],p[1],u[1],0,l[2],p[2],u[2],0,-(l[0]*t[0]+l[1]*t[1]+l[2]*t[2]),-(p[0]*t[0]+p[1]*t[1]+p[2]*t[2]),-(u[0]*t[0]+u[1]*t[1]+u[2]*t[2]),1]}U(t,e,i){let s=(1-this.s.CAM_SMOOTHNESS)*i/16.67,r=Math.sign(t-e);return e+=(t-e)*s,Math.sign(t-e)!==r&&(e=t),e}L(){throw new Error("Must implement _createFallback")}K(){}N(t){throw new Error("Must implement _isSourceReady")}f(t){throw new Error("Must implement _getSourceWidth")}m(t){throw new Error("Must implement _getSourceHeight")}}T=m;class c extends T{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.u=new Image,this.t.crossOrigin="anonymous",this.u.crossOrigin="anonymous",this.t.onload=()=>this.p("color",this.t),this.u.onload=()=>this.p("depth",this.u)}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.t.src=i||"":t==="depth-src"?this.u.src=i||"":this.O())}L(){this.t.style.display="block",this.t.classList.add("cover-img"),this.i.parentElement.appendChild(this.t)}N(t){return t&&t.complete&&t.naturalWidth>0}f(t){return t?t.width:1}m(t){return t?t.height:1}}w=c;class a extends T{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.o=[],this.n=[],this.a=[],this.F=!1,this.H=!1,this.A=!0,this.e=new x,this.e.pause()}disconnectedCallback(){this.e.started()&&this.e.stop(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?(this.dt(),this.o=[this._(i,0,!1)],this.a=[this._(i,0,!0)],this.Y=this.o[0],this.Z=this.a[0]):t==="depth-src"?(this.n=[this._(i,0,!1)],this.J=this.n[0]):t==="autoplay"?(this.F=this.hasAttribute("autoplay"),this.F&&this.e.play()):t==="loop"?this.H=this.hasAttribute("loop"):t==="muted"?(this.A=this.hasAttribute("muted"),this.e.setVolume(this.A?0:1),!this.A&&this.e.started()&&this.e.resumeContext()):this.O())}async play(){await this.e.play()}async pause(){await this.e.pause()}enqueue(t,e,i){this.o.push(this._(t,i,!1)),this.n.push(this._(e,i,!1)),this.a.push(this._(t,i,!0))}get paused(){return this.e.isPaused}get currentTime(){return this.e.getVideoTime()}set currentTime(t){throw new Error("Seeking not yet implemented!")}get volume(){return this.e.volume}set volume(t){this.e.setVolume(t)}lt(t){if(this.e.started()){if(t.sampleRate!=this.e.sampleRate)throw new Error("Audio configs have mismatched sample rates!");if(t.numChannels!=this.e.numChannels)throw new Error("Audio configs have mismatched channel counts!")}else this.e.start(t?{sampleRate:t.sampleRate,numChannels:t.numChannels,volume:1}:{audioEnabled:!1}),this.A||this.e.resumeContext()}Q(t,e){let i=e+t.timestamp/1e6,s=[];for(let r=0;r<t.numberOfChannels;r++){let h=new Float32Array(t.numberOfFrames);t.copyTo(h,{planeIndex:r,format:"f32-planar"}),s.push(h)}this.e.scheduleChunk(s,i)}_(t,e,i){let s={startTime:e,isAudio:i,demuxer:null,decoder:null,chunks:[],frames:[],curChunk:0},r;return i?r=AudioDecoder:r=VideoDecoder,s.decoder=new r({output:h=>{i?this.Q(h,s.startTime):s.frames.push(h)},error:h=>{console.error("Decoder encountered an error while decoding: ",h)}}),s.demuxer=new A(t,i,{onConfig:h=>{s.config=h,h?s.decoder?.configure(h):s.done=!0,i&&this.lt(h)},onChunk:h=>{s.chunks?.push(h)},onEndOfStream:()=>{s.demuxer=null}}),s}k(t,e){let i={startTime:e,isAudio:t.isAudio,demuxer:null,decoder:null,config:t.config,chunks:t.chunks,frames:[],curChunk:0},s;return t.isAudio?s=AudioDecoder:s=VideoDecoder,i.decoder=new s({output:r=>{i.isAudio?this.Q(r,i.startTime):i.frames.push(r)},error:r=>{console.error("Decoder encountered an error while decoding: ",r)}}),t.config?i.decoder.configure(t.config):i.done=!0,i}P(t){let e=(s,r)=>{let h=s[r];for(;h.curChunk<h.chunks.length;){let u=h.chunks[h.curChunk];if(h.startTime+u.timestamp/1e6>this.e.getVideoTime()+1)break;h.decoder.decode(u),h.curChunk++}if(h.curChunk>=h.chunks.length&&!h.demuxer&&h.decoder){let u=h.decoder;u.flush().then(()=>{u.close(),h.done=!0}),h.decoder=null}};for(let s=0;s<this.o.length;s++)e(this.o,s);for(let s=0;s<this.n.length;s++)e(this.n,s);for(let s=0;s<this.a.length;s++)this.a[s].config!=null&&e(this.a,s);let i=s=>s?s.done&&s.frames.length==1:!1;i(this.o[0])&&i(this.n[0])&&(this.o.shift(),this.n.shift(),this.$=!0),this.a[0]?.done&&this.a.shift(),this.H&&this.o.length==0&&this.n.length==0&&this.a.length==0&&this.Y!=null&&this.J!=null&&this.Z!=null&&(this.e.setVideoTime(0),this.o=[this.k(this.Y,0)],this.n=[this.k(this.J,0)],this.a=[this.k(this.Z,0)]),super.P(t)}L(){this.t=document.createElement("video"),this.t.style.display="block",this.t.classList.add("cover-video"),this.t.muted=this.A,this.t.autoplay=this.F,this.t.loop=this.H,this.t.src=this.getAttribute("color-src"),this.i.parentElement.appendChild(this.t)}K(){let t=this.o[0],e=this.n[0];if(!t||!e)return;let i=this.e.getVideoTime(),s=this.tt!=null?Math.abs(i-this.tt):Number.MAX_VALUE,r=-1;for(let h=0;h<Math.min(t.frames.length,e.frames.length);h++){let u=Math.abs(i-(t.startTime+t.frames[h].timestamp/1e6));if(u<=s)s=u,r=h;else break}if(!(r<0)){this.$&&(this.t.close(),this.u.close(),this.$=!1),this.t=t.frames[r],this.u=e.frames[r],this.tt=t.startTime+this.t.timestamp/1e6,this.t?.timestamp!==this.u?.timestamp&&console.error("Color and depth frames have mismatched PTS"),this.p("color",this.t),this.p("depth",this.u);for(let h=0;h<r;h++)t.frames.shift().close(),e.frames.shift().close()}}N(t){return t instanceof VideoFrame}f(t){return t?t.codedWidth:1}m(t){return t?t.codedHeight:1}G(t){t.decoder?.close(),t.decoder=null;for(let e=0;e<t.frames.length;e++)t.frames[e].close()}async dt(){for(let t=0;t<this.o.length;t++)this.G(this.o[t]);for(let t=0;t<this.n.length;t++)this.G(this.n[t]);for(let t=0;t<this.a.length;t++)this.G(this.a[t]);this.e.setVideoTime(0),this.e.started()&&await this.e.stop()}}b=a,customElements.define("rgbd-img",w),customElements.define("rgbd-video",b)}
|