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