rgbd 1.0.11 → 1.0.12
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/index.js +4 -4
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var m,T=["color-src","depth-src","grid-size","focal-length","depth-min","depth-max","cam-max-theta-unfocused","cam-max-phi-unfocused","cam-max-theta-focused","cam-max-phi-focused","cam-radius","cam-smoothness","cam-zoom-amount","boomerang-speed","boomerang-shape","background-color","img-zoom-amount","xr-button","xr-recenter-yaw","xr-recenter-radius"],U=`#version 300 es
|
|
2
2
|
|
|
3
3
|
precision mediump float;
|
|
4
4
|
precision mediump int;
|
|
@@ -74,12 +74,12 @@ void main()
|
|
|
74
74
|
{
|
|
75
75
|
fragColor = texture(u_colorImage, v_uv);
|
|
76
76
|
}
|
|
77
|
-
`,R=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";R?
|
|
77
|
+
`,R=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";R?m=class extends HTMLElement{constructor(){super(),this.t={GRID_SIZE:250,FOCAL_LENGTH:1200,DEPTH_MIN:.1,DEPTH_MAX:10,CAM_RADIUS:1.5,CAM_MAX_THETA_UNFOCUSED:Math.PI/32,CAM_MAX_PHI_UNFOCUSED:Math.PI/32,CAM_MAX_THETA_FOCUSED:Math.PI/32,CAM_MAX_PHI_FOCUSED:Math.PI/32,CAM_SMOOTHNESS:.9,CAM_ZOOM_AMOUNT:.2,BOOMERANG_SPEED:.001,BOOMERANG_SHAPE:"z",BACKGROUND_COLOR:[0,0,0],IMG_ZOOM_AMOUNT:0,XR_RECENTER_RADIUS:.5,XR_RECENTER_YAW:45},this.j=null,this.e=null,this.i=null,this.p=null,this.o=null,this.F=null,this.k={},this.E=null,this.A={hovered:!1,x:0,y:0},this.n={active:!1,pointerId:null,originX:0,originY:0,dx:0,dy:0},this.c={theta:Math.PI,phi:0,radius:this.t.CAM_RADIUS},this.jt=null,this.I=null,this.Y=!1,this.rt=null,this.at=null,this.ut=this.S.bind(this),this.U=this.Z.bind(this),this.ct=this.Ot.bind(this),this.lt=this.Dt.bind(this),this.dt=this.Pt.bind(this),this.ft=this.It.bind(this),this.pt=!1,this.a=null,this.O=null,this.N=null,this.h=null,this.Ut=!1,this.b=null,this.j=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.j.appendChild(t);let e=document.createElement("style");e.textContent=`
|
|
78
78
|
:host { display: inline-block; width: 300px; height: 200px; }
|
|
79
79
|
:host([fullbleed]) { display:block; width:100%; height:100%; }
|
|
80
80
|
canvas { touch-action: none; }
|
|
81
81
|
.fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
|
|
82
|
-
`,this.V.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.M=document.createElement("button"),this.M.textContent="Enter VR",Object.assign(this.M.style,{position:"absolute",display:"none",top:"1%",right:"1%",color:"white",background:"rgba(0,0,0,0.4)",padding:"8px 8px",fontFamily:"monospace",fontSize:"20px",borderRadius:"8px",border:"1px solid white",backdropFilter:"blur(6px)",whiteSpace:"pre"}),t.appendChild(this.M),this.M.addEventListener("click",()=>{this.r?this.exitXR():this.enterXR()})}connectedCallback(){this.Z();let t;try{this.St(),t=!1}catch{t=!0}this.i.addEventListener("resize",this.at),this.i.addEventListener("pointermove",this.ut),this.i.addEventListener("pointerleave",this.ct),t?this.K():(this.R(),this.j=!0,this.dt=performance.now(),this.P=requestAnimationFrame(this.U)),this.ft()}disconnectedCallback(){this.j=!1,cancelAnimationFrame(this.P),this.i.removeEventListener("resize",this.at),this.i.removeEventListener("pointermove",this.ut),this.i.removeEventListener("pointerleave",this.ct);try{this.r&&(this.r.end(),this.r=null,this.wt=!1)}catch{}try{if(this.o){let t=this.o;this.F&&t.deleteProgram(this.F);for(let e in this.L)t.deleteTexture(this.L[e].tex)}}catch{}}setCamera(t){this.$=t}setViewMatrix(t){this.ht=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.rt=t&&t.length===16?new Float32Array(t):null}async enterXR(){if(!this.r)try{let t=await navigator.xr.requestSession("immersive-vr",{optionalFeatures:["local-floor","bounded-floor"]});this.o.makeXRCompatible&&await this.o.makeXRCompatible(),this.R();let e=new XRWebGLLayer(t,this.o);await t.updateRenderState({baseLayer:e});let i=await t.requestReferenceSpace("local");this.r=t,this.S=i,this.I=null,this.n={x:0,y:0,z:0,yaw:0},cancelAnimationFrame(this.P),t.addEventListener("end",()=>{this.exitXR()}),t.requestAnimationFrame(this.U)}catch(t){console.warn("Unable to start XR session",t)}}async exitXR(){if(this.r){try{await this.r.end()}catch{}this.r=null,this.S=null,this.I=null,this.R(),this.P=requestAnimationFrame(this.U)}}get width(){return this.b(this.e)}get height(){return this.T(this.e)}St(){let t=this.i.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.o=t;let e=this.mt(t,I,N);if(!e)return;this.F=e,t.useProgram(e);let i=this.pt(t),s=this.pt(t);this.L.color=i,this.L.depth=s,this.p("color",this.e),this.p("depth",this.f);let o=t.getUniformLocation(e,"u_colorImage"),n=t.getUniformLocation(e,"u_depthImage");t.uniform1i(o,0),t.uniform1i(n,1),this.g={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"),uXr:t.getUniformLocation(e,"u_xr")}}_t(t=null){if(!this.o)return;let e=this.o;e.bindFramebuffer(e.FRAMEBUFFER,t),e.clearColor(...this.t.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST)}X(t,e){if(!this.o)return;let i=this.o;i.useProgram(this.F);let s=this.b(this.e),o=this.T(this.e),n=s/o,h=Math.max(1,Math.floor(this.t.GRID_SIZE)),r=Math.max(1,Math.round(h/n));i.uniform2f(this.g.uImageSize,s,o),i.uniform1f(this.g.uFocal,this.t.FOCAL_LENGTH),i.uniform1f(this.g.uDepthMin,this.t.DEPTH_MIN),i.uniform1f(this.g.uDepthMax,this.t.DEPTH_MAX),i.uniform2i(this.g.uGridSegs,h,r),i.uniform1ui(this.g.uXr,this.r?1:0),i.uniformMatrix4fv(this.g.uView,!1,t),i.uniformMatrix4fv(this.g.uProjection,!1,e),i.drawArrays(i.TRIANGLES,0,h*r*6)}Y(t,e){if(!this.j)return;let i=t-this.dt;this.dt=t,this.gt();let s,o;this.E.hovered?(s=this.E.x*this.t.CAM_MAX_THETA_FOCUSED,o=-this.E.y*this.t.CAM_MAX_PHI_FOCUSED):this.t.BOOMERANG_SHAPE==="z"?(s=Math.sin(t*this.t.BOOMERANG_SPEED)*this.t.CAM_MAX_THETA_UNFOCUSED,o=Math.sin(t*this.t.BOOMERANG_SPEED*.5+Math.PI)*this.t.CAM_MAX_PHI_UNFOCUSED):(s=Math.sin(t*this.t.BOOMERANG_SPEED)*this.t.CAM_MAX_THETA_UNFOCUSED,o=Math.cos(t*this.t.BOOMERANG_SPEED)*this.t.CAM_MAX_PHI_UNFOCUSED);let n=this.t.CAM_RADIUS*(1-this.t.CAM_ZOOM_AMOUNT),h=this.E.hovered?n:this.t.CAM_RADIUS;if(s=(this.$?.theta??s)+Math.PI,o=this.$?.phi??o,h=this.$?.radius??h,this.a.theta=this.O(s,this.a.theta,i),this.a.phi=this.O(o,this.a.phi,i),this.a.radius=this.O(h,this.a.radius,i),this.r){let r=this.S.getOffsetReferenceSpace(new XRRigidTransform({x:this.n.x,y:this.n.y,z:this.n.z},{x:0,y:Math.sin(this.n.yaw*.5),z:0,w:Math.cos(this.n.yaw*.5)}));this.n.x=this.O(0,this.n.x,i),this.n.y=this.O(0,this.n.y,i),this.n.z=this.O(0,this.n.z,i),this.n.yaw=this.O(0,this.n.yaw,i);let a=e.getViewerPose(this.S).transform;this.I||(this.I=a);let u=this.I,c=a.position.x-u.position.x,f=a.position.y-u.position.y,l=a.position.z-u.position.z,d=this.xt(a.orientation);(Math.abs(d-this.xt(u.orientation))>this.t.XR_RECENTER_YAW*Math.PI/180||Math.hypot(c,f,l)>this.t.XR_RECENTER_RADIUS)&&(this.n.x=-a.position.x,this.n.y=-a.position.y,this.n.z=-a.position.z,this.n.yaw=-d,this.S=this.S.getOffsetReferenceSpace(new XRRigidTransform(a.position,{x:0,y:Math.sin(d*.5),z:0,w:Math.cos(d*.5)})),this.I=null);let x=e.session,S=e.getViewerPose(r);if(!S){x.requestAnimationFrame(this.U);return}let O=x.renderState.baseLayer;this._t(O.framebuffer);for(let C of S.views){let y=O.getViewport(C);this.o.viewport(y.x,y.y,y.width,y.height);let P=new Float32Array(C.transform.inverse.matrix),U=new Float32Array(C.projectionMatrix);this.X(P,U)}}else{let r=this.i.width/this.i.height,a=[this.a.radius*Math.cos(this.a.phi)*Math.sin(this.a.theta),this.a.radius*Math.sin(this.a.phi),this.t.CAM_RADIUS+this.a.radius*Math.cos(this.a.phi)*Math.cos(this.a.theta)],u=[0,0,this.t.CAM_RADIUS],c=[0,-1,0],f=this.height*(1-this.t.IMG_ZOOM_AMOUNT),l=2*Math.atan(f/(2*this.t.FOCAL_LENGTH)),d=this.ht||new Float32Array(this.Ot(a,u,c)),g=this.rt||new Float32Array(this.Dt(l,r,.1,100));this._t(),this.X(d,g)}this.r?this.P=e.session.requestAnimationFrame(this.U):this.P=requestAnimationFrame(this.U)}ft(){this.lt&&navigator.xr&&navigator.xr.isSessionSupported?navigator.xr.isSessionSupported("immersive-vr").then(t=>{this.M.style.display=t?"block":"none"}).catch(()=>{this.M.style.display="none"}):this.M.style.display="none"}Ct(t){if(t.pointerType!=="mouse")return;let e=this.i.getBoundingClientRect(),i=this.i.parentElement;if(!i)return;let s=i.clientWidth,o=i.clientHeight,n=this.b(this.e)||1,h=this.T(this.e)||1,r=n/h,a=s,u=a/r;u>o&&(u=o,a=u*r);let c=(s-a)/2,f=(o-u)/2,l=t.clientX-e.left-c,d=t.clientY-e.top-f;if(l<0||l>a||d<0||d>u){this.E.hovered=!1;return}this.E.hovered=!0,this.E.x=l/a*2-1,this.E.y=d/u*2-1}Rt(){this.E.hovered=!1}R(){let t=window.devicePixelRatio||1,e=this.i.parentElement;if(!e)return;let i=e.clientWidth,s=e.clientHeight,o=this.b(this.e)||1,n=this.T(this.e)||1,h=o/n,r=i,a=r/h;a>s&&(a=s,r=a*h);let u=Math.max(1,Math.floor((this.r?i:r)*t)),c=Math.max(1,Math.floor((this.r?s:a)*t));return this.i.width=u,this.i.height=c,this.o&&this.o.viewport(0,0,u,c),{displayW:i,displayH:s,fittedW:r,fittedH:a}}Z(){let t=this.t;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("cam-radius")&&(t.CAM_RADIUS=parseFloat(this.getAttribute("cam-radius"))??t.CAM_RADIUS),this.hasAttribute("cam-max-theta-unfocused")&&(t.CAM_MAX_THETA_UNFOCUSED=parseFloat(this.getAttribute("cam-max-theta-unfocused"))??t.CAM_MAX_THETA_UNFOCUSED),this.hasAttribute("cam-max-phi-unfocused")&&(t.CAM_MAX_PHI_UNFOCUSED=parseFloat(this.getAttribute("cam-max-phi-unfocused"))??t.CAM_MAX_PHI_UNFOCUSED),this.hasAttribute("cam-max-theta-focused")&&(t.CAM_MAX_THETA_FOCUSED=parseFloat(this.getAttribute("cam-max-theta-focused"))??t.CAM_MAX_THETA_FOCUSED),this.hasAttribute("cam-max-phi-focused")&&(t.CAM_MAX_PHI_FOCUSED=parseFloat(this.getAttribute("cam-max-phi-focused"))??t.CAM_MAX_PHI_FOCUSED),this.hasAttribute("cam-smoothness")&&(t.CAM_SMOOTHNESS=parseFloat(this.getAttribute("cam-smoothness"))??t.CAM_SMOOTHNESS),this.hasAttribute("cam-zoom-amount")&&(t.CAM_ZOOM_AMOUNT=parseFloat(this.getAttribute("cam-zoom-amount"))??t.CAM_ZOOM_AMOUNT),this.hasAttribute("boomerang-speed")&&(t.BOOMERANG_SPEED=parseFloat(this.getAttribute("boomerang-speed"))??t.BOOMERANG_SPEED),this.hasAttribute("boomerang-shape")&&(t.BOOMERANG_SHAPE=this.getAttribute("boomerang-shape")==="circle"?"circle":"z"),this.hasAttribute("background-color"))try{let e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}this.hasAttribute("img-zoom-amount")&&(t.IMG_ZOOM_AMOUNT=parseFloat(this.getAttribute("img-zoom-amount"))??t.IMG_ZOOM_AMOUNT),this.lt=this.hasAttribute("xr-button"),this.hasAttribute("xr-recenter-yaw")&&(t.XR_RECENTER_YAW=parseFloat(this.getAttribute("xr-recenter-yaw"))??t.XR_RECENTER_YAW),this.hasAttribute("xr-recenter-radius")&&(t.XR_RECENTER_RADIUS=parseFloat(this.getAttribute("xr-recenter-radius"))??t.XR_RECENTER_RADIUS),this.ft()}vt(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)}mt(t,e,i){let s=this.vt(t,t.VERTEX_SHADER,e),o=this.vt(t,t.FRAGMENT_SHADER,i);if(!s||!o)return null;let n=t.createProgram();return t.attachShader(n,s),t.attachShader(n,o),t.linkProgram(n),t.getProgramParameter(n,t.LINK_STATUS)?(t.deleteShader(s),t.deleteShader(o),n):(console.error(t.getProgramInfoLog(n)),t.deleteProgram(n),null)}pt(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.o)return;let i=this.o,s=this.L[t];if(i.activeTexture(t==="color"?i.TEXTURE0:i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,s.tex),!this.q(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.b(e)!=s.width||this.T(e)!=s.height)&&(this.R(),s.width=this.b(e),s.height=this.T(e))}catch{}}Dt(t,e,i,s){let o=1/Math.tan(t/2);return[o/e,0,0,0,0,o,0,0,0,0,(s+i)/(i-s),-1,0,0,2*s*i/(i-s),0]}Ot(t,e,i){function s(u){let c=Math.hypot(...u)||1;return u.map(f=>f/c)}function o(u,c){return[u[1]*c[2]-u[2]*c[1],u[2]*c[0]-u[0]*c[2],u[0]*c[1]-u[1]*c[0]]}function n(u,c){return u.map((f,l)=>f-c[l])}let h=s(n(t,e)),r=s(o(i,h)),a=o(h,r);return[r[0],a[0],h[0],0,r[1],a[1],h[1],0,r[2],a[2],h[2],0,-(r[0]*t[0]+r[1]*t[1]+r[2]*t[2]),-(a[0]*t[0]+a[1]*t[1]+a[2]*t[2]),-(h[0]*t[0]+h[1]*t[1]+h[2]*t[2]),1]}xt(t){return Math.atan2(2*(t.w*t.y+t.x*t.z),1-2*(t.y*t.y+t.x*t.x))}Pt(t){let e=-2*(t.x*t.z+t.w*t.y),i=-2*(t.y*t.z-t.w*t.x),s=2*(t.x*t.x+t.y*t.y)-1,o=Math.hypot(e,i,s)||1;return{x:e/o,y:i/o,z:s/o}}O(t,e,i){let s=(1-this.t.CAM_SMOOTHNESS)*i/16.67,o=Math.sign(t-e);return e+=(t-e)*s,Math.sign(t-e)!==o&&(e=t),e}K(){throw new Error("Must implement _createFallback")}gt(){}q(t){throw new Error("Must implement _isSourceReady")}b(t){throw new Error("Must implement _getSourceWidth")}T(t){throw new Error("Must implement _getSourceHeight")}}:p=class{};var v=class extends p{static get observedAttributes(){return T}constructor(){super(),this.e=new Image,this.f=new Image,this.e.crossOrigin="anonymous",this.f.crossOrigin="anonymous",this.e.onload=()=>this.p("color",this.e),this.f.onload=()=>this.p("depth",this.f),this.N=document.createElement("img"),Object.assign(this.N.style,{position:"absolute",inset:"0",width:"100%",height:"100%",objectFit:"contain",opacity:"0",pointerEvents:"auto",zIndex:"2"});let t=e=>{if(e.type==="contextmenu")return;let i=new e.constructor(e.type,e);this.i?.dispatchEvent(i)};["pointermove","pointerdown","pointerup","pointerleave","wheel"].forEach(e=>this.N.addEventListener(e,t))}connectedCallback(){super.connectedCallback();let t=this.i?.parentElement;t&&!this.N.isConnected&&t.appendChild(this.N)}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.e.src=i||"":t==="depth-src"?this.f.src=i||"":this.Z())}p(t,e){super.p(t,e),t==="color"&&e instanceof HTMLImageElement&&(this.N.src=e.src)}R(){if(!this.i.parentElement)return;let{displayW:t,displayH:e,fittedW:i,fittedH:s}=super.R(),o=(t-i)/2,n=(e-s)/2;Object.assign(this.N.style,{left:`${o}px`,top:`${n}px`,width:`${i}px`,height:`${s}px`})}K(){this.e.style.display="block",this.e.classList.add("fallback"),this.i.parentElement.appendChild(this.e)}q(t){return t&&t.complete&&t.naturalWidth>0}b(t){return t?t.width:1}T(t){return t?t.height: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(t={}){if(this.context)throw new Error("Audio manager already started!");this.audioEnabled=t.audioEnabled??!0,this.sampleRate=t.sampleRate??44100,this.numChannels=t.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 e=performance.now();!this.isPaused&&this.context.state==="suspended"&&(this.timeSuspended+=(e-this.lastTime)/1e3),this.lastTime=e},t.updateInterval??10),this.context.onstatechange=()=>{let e=performance.now();this.context?.state==="running"&&(this.timeSuspended+=(e-this.lastTime)/1e3),this.lastTime=e}}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(t){if(t+=this.getLatency(),this.sourceNodes!=null){for(let e of this.sourceNodes)try{e.stop()}catch{}this.sourceNodes.clear()}this.timeOffset=t-((this.context?.currentTime??0)+this.timeSuspended)}setVolume(t){this.volume=t,this.gainNode&&(this.gainNode.gain.value=t)}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(t,e){let i=t[0].length;if(i<=0)return;let s=this.context.createBuffer(this.numChannels,i,this.sampleRate);for(let o=0;o<this.numChannels;o++)s.copyToChannel(t[o],o);if(e-=this.timeSuspended+this.timeOffset,e>this.context.currentTime&&this.context.state!=="suspended"){let o=this.context.createBufferSource();o.buffer=s,o.connect(this.gainNode),this.sourceNodes.add(o),o.onended=()=>this.sourceNodes.delete(o),o.start(e)}this.playHead+=s.duration}};import*as A from"mp4box";var w=class{constructor(t,e){this.d=t,this.Et=0,this.Ut=e}write(t){let e=new ArrayBuffer(t.byteLength);new Uint8Array(e).set(t),e.fileStart=this.Et,this.Et+=e.byteLength,this.d.appendBuffer(e)}close(){this.d.flush(),this.Ut()}},M=class{constructor(t,e,{onConfig:i,onChunk:s,onEndOfStream:o}){if(this.J=e,this.At=i,this.It=s,this.d=A.createFile(),this.d.onReady=this.Nt.bind(this),this.d.onSamples=this.Ht.bind(this),this.done=!1,t instanceof ArrayBuffer)t.fileStart=0,this.d.appendBuffer(t),this.d.flush(),this.done=!0;else{let n=new w(this.d,()=>{this.done=!0});fetch(t).then(h=>{h.body.pipeTo(new WritableStream(n,{highWaterMark:2}))})}}Mt(t){let i=this.d.getTrackById(t.id).mdia.minf.stbl.stsd.entries[0];if(this.J)return i.esds.esd.descs[0].descs[0].data;{let s=i.avcC||i.hvcC||i.vpcC||i.av1C;if(!s)return null;let o=new A.DataStream(void 0,0,A.DataStream.BIG_ENDIAN);return s.write(o),new Uint8Array(o.buffer,8)}}Nt(t){if(this.J){let e=t.audioTracks[0];this.At(e?{codec:e.codec,sampleRate:e.audio.sample_rate,numberOfChannels:e.audio.channel_count,description:this.Mt(e)}:null),e&&this.d.setExtractionOptions(e.id)}else{let e=t.videoTracks[0];this.At({codec:e.codec.startsWith("vp08")?"vp8":e.codec,codedHeight:e.video.height,codedWidth:e.video.width,description:this.Mt(e)}),this.d.setExtractionOptions(e.id)}this.d.start()}Ht(t,e,i){for(let s of i){let o;this.J?o=EncodedAudioChunk:o=EncodedVideoChunk,this.It(new o({type:s.is_sync?"key":"delta",timestamp:1e6*s.cts/s.timescale,duration:1e6*s.duration/s.timescale,data:s.data}))}}};var H=1,m=.1,D=.9,L=`#version 300 es
|
|
82
|
+
`,this.j.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.b=document.createElement("button"),this.b.textContent="Enter VR",Object.assign(this.b.style,{position:"absolute",display:"none",top:"1%",right:"1%",color:"white",background:"rgba(0,0,0,0.4)",padding:"8px 8px",fontFamily:"monospace",fontSize:"20px",borderRadius:"8px",border:"1px solid white",backdropFilter:"blur(6px)",whiteSpace:"pre"}),t.appendChild(this.b),this.b.addEventListener("click",()=>{this.a?this.exitXR():this.enterXR()})}connectedCallback(){this.K();let t;try{this.Nt(),t=!1}catch{t=!0}this.e.addEventListener("resize",this.ut),this.e.addEventListener("pointerdown",this.ct),this.e.addEventListener("pointerup",this.lt),this.e.addEventListener("pointermove",this.dt),this.e.addEventListener("pointerleave",this.ft),t?this.$():(this.S(),this.Y=!0,this.mt=performance.now(),this.I=requestAnimationFrame(this.U)),this._t()}disconnectedCallback(){this.Y=!1,cancelAnimationFrame(this.I),this.e.removeEventListener("resize",this.ut),this.e.removeEventListener("pointerdown",this.ct),this.e.removeEventListener("pointerup",this.lt),this.e.removeEventListener("pointermove",this.dt),this.e.removeEventListener("pointerleave",this.ft);try{this.a&&(this.a.end(),this.a=null,this.Ut=!1)}catch{}try{if(this.o){let t=this.o;this.F&&t.deleteProgram(this.F);for(let e in this.k)t.deleteTexture(this.k[e].tex)}}catch{}}setCamera(t){this.q=t}setViewMatrix(t){this.rt=t&&t.length===16?new Float32Array(t):null}setProjectionMatrix(t){this.at=t&&t.length===16?new Float32Array(t):null}async enterXR(){if(!this.a)try{let t=await navigator.xr.requestSession("immersive-vr",{optionalFeatures:["local-floor","bounded-floor"]});this.o.makeXRCompatible&&await this.o.makeXRCompatible(),this.S();let e=new XRWebGLLayer(t,this.o);await t.updateRenderState({baseLayer:e});let i=await t.requestReferenceSpace("local");this.a=t,this.O=i,this.N=null,this.h={x:0,y:0,z:0,yaw:0},cancelAnimationFrame(this.I),t.addEventListener("end",()=>{this.exitXR()}),t.requestAnimationFrame(this.U)}catch(t){console.warn("Unable to start XR session",t)}}async exitXR(){if(this.a){try{await this.a.end()}catch{}this.a=null,this.O=null,this.N=null,this.S(),this.I=requestAnimationFrame(this.U)}}get width(){return this.T(this.i)}get height(){return this.C(this.i)}Nt(){let t=this.e.getContext("webgl2",{antialias:!0,alpha:!1});if(!t)throw new Error("WebGL not supported");this.o=t;let e=this.gt(t,U,N);if(!e)return;this.F=e,t.useProgram(e);let i=this.vt(t),s=this.vt(t);this.k.color=i,this.k.depth=s,this._("color",this.i),this._("depth",this.p);let n=t.getUniformLocation(e,"u_colorImage"),o=t.getUniformLocation(e,"u_depthImage");t.uniform1i(n,0),t.uniform1i(o,1),this.E={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"),uXr:t.getUniformLocation(e,"u_xr")}}xt(t=null){if(!this.o)return;let e=this.o;e.bindFramebuffer(e.FRAMEBUFFER,t),e.clearColor(...this.t.BACKGROUND_COLOR,1),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT),e.enable(e.DEPTH_TEST)}G(t,e){if(!this.o)return;let i=this.o;i.useProgram(this.F);let s=this.T(this.i),n=this.C(this.i),o=s/n,h=Math.max(1,Math.floor(this.t.GRID_SIZE)),r=Math.max(1,Math.round(h/o));i.uniform2f(this.E.uImageSize,s,n),i.uniform1f(this.E.uFocal,this.t.FOCAL_LENGTH),i.uniform1f(this.E.uDepthMin,this.t.DEPTH_MIN),i.uniform1f(this.E.uDepthMax,this.t.DEPTH_MAX),i.uniform2i(this.E.uGridSegs,h,r),i.uniform1ui(this.E.uXr,this.a?1:0),i.uniformMatrix4fv(this.E.uView,!1,t),i.uniformMatrix4fv(this.E.uProjection,!1,e),i.drawArrays(i.TRIANGLES,0,h*r*6)}Z(t,e){if(!this.Y)return;let i=t-this.mt;this.mt=t,this.Et();let s,n;if(this.n.active){let r=this.e.getBoundingClientRect(),a=Math.min(r.width,r.height)*.25,u=this.n.dx/a,c=this.n.dy/a;s=this.At(u*this.t.CAM_MAX_THETA_FOCUSED,this.t.CAM_MAX_THETA_FOCUSED),n=this.At(-c*this.t.CAM_MAX_PHI_FOCUSED,this.t.CAM_MAX_PHI_FOCUSED)}else this.A.hovered?(s=this.A.x*this.t.CAM_MAX_THETA_FOCUSED,n=-this.A.y*this.t.CAM_MAX_PHI_FOCUSED):this.t.BOOMERANG_SHAPE==="z"?(s=Math.sin(t*this.t.BOOMERANG_SPEED)*this.t.CAM_MAX_THETA_UNFOCUSED,n=Math.sin(t*this.t.BOOMERANG_SPEED*.5+Math.PI)*this.t.CAM_MAX_PHI_UNFOCUSED):(s=Math.sin(t*this.t.BOOMERANG_SPEED)*this.t.CAM_MAX_THETA_UNFOCUSED,n=Math.cos(t*this.t.BOOMERANG_SPEED)*this.t.CAM_MAX_PHI_UNFOCUSED);let o=this.t.CAM_RADIUS*(1-this.t.CAM_ZOOM_AMOUNT),h=this.A.hovered?o:this.t.CAM_RADIUS;if(s=(this.q?.theta??s)+Math.PI,n=this.q?.phi??n,h=this.q?.radius??h,this.c.theta=this.D(s,this.c.theta,i),this.c.phi=this.D(n,this.c.phi,i),this.c.radius=this.D(h,this.c.radius,i),this.a){let r=this.O.getOffsetReferenceSpace(new XRRigidTransform({x:this.h.x,y:this.h.y,z:this.h.z},{x:0,y:Math.sin(this.h.yaw*.5),z:0,w:Math.cos(this.h.yaw*.5)}));this.h.x=this.D(0,this.h.x,i),this.h.y=this.D(0,this.h.y,i),this.h.z=this.D(0,this.h.z,i),this.h.yaw=this.D(0,this.h.yaw,i);let a=e.getViewerPose(this.O).transform;this.N||(this.N=a);let u=this.N,c=a.position.x-u.position.x,f=a.position.y-u.position.y,l=a.position.z-u.position.z,d=this.Mt(a.orientation);(Math.abs(d-this.Mt(u.orientation))>this.t.XR_RECENTER_YAW*Math.PI/180||Math.hypot(c,f,l)>this.t.XR_RECENTER_RADIUS)&&(this.h.x=-a.position.x,this.h.y=-a.position.y,this.h.z=-a.position.z,this.h.yaw=-d,this.O=this.O.getOffsetReferenceSpace(new XRRigidTransform(a.position,{x:0,y:Math.sin(d*.5),z:0,w:Math.cos(d*.5)})),this.N=null);let v=e.session,S=e.getViewerPose(r);if(!S){v.requestAnimationFrame(this.U);return}let O=v.renderState.baseLayer;this.xt(O.framebuffer);for(let C of S.views){let y=O.getViewport(C);this.o.viewport(y.x,y.y,y.width,y.height);let P=new Float32Array(C.transform.inverse.matrix),I=new Float32Array(C.projectionMatrix);this.G(P,I)}}else{let r=this.e.width/this.e.height,a=[this.c.radius*Math.cos(this.c.phi)*Math.sin(this.c.theta),this.c.radius*Math.sin(this.c.phi),this.t.CAM_RADIUS+this.c.radius*Math.cos(this.c.phi)*Math.cos(this.c.theta)],u=[0,0,this.t.CAM_RADIUS],c=[0,-1,0],f=this.height*(1-this.t.IMG_ZOOM_AMOUNT),l=2*Math.atan(f/(2*this.t.FOCAL_LENGTH)),d=this.rt||new Float32Array(this.Ht(a,u,c)),g=this.at||new Float32Array(this.Lt(l,r,.1,100));this.xt(),this.G(d,g)}this.a?this.I=e.session.requestAnimationFrame(this.U):this.I=requestAnimationFrame(this.U)}_t(){this.pt&&navigator.xr&&navigator.xr.isSessionSupported?navigator.xr.isSessionSupported("immersive-vr").then(t=>{this.b.style.display=t?"block":"none"}).catch(()=>{this.b.style.display="none"}):this.b.style.display="none"}Ot(t){t.pointerType==="touch"&&(this.n.active=!0,this.n.pointerId=t.pointerId,this.n.originX=t.clientX,this.n.originY=t.clientY,this.n.dx=0,this.n.dy=0,this.e.setPointerCapture(t.pointerId))}Dt(t){if(t.pointerId===this.n.pointerId){this.n.active=!1,this.n.pointerId=null,this.n.dx=0,this.n.dy=0;try{this.e.releasePointerCapture(t.pointerId)}catch{}}}Pt(t){if(t.pointerType==="mouse"){let e=this.e.getBoundingClientRect(),i=this.e.parentElement;if(!i)return;let s=i.clientWidth,n=i.clientHeight,o=this.T(this.i)||1,h=this.C(this.i)||1,r=o/h,a=s,u=a/r;u>n&&(u=n,a=u*r);let c=(s-a)/2,f=(n-u)/2,l=t.clientX-e.left-c,d=t.clientY-e.top-f;if(l<0||l>a||d<0||d>u){this.A.hovered=!1;return}this.A.hovered=!0,this.A.x=l/a*2-1,this.A.y=d/u*2-1}else this.n.active&&t.pointerId===this.n.pointerId&&(this.n.dx=t.clientX-this.n.originX,this.n.dy=t.clientY-this.n.originY)}It(){this.A.hovered=!1}S(){let t=window.devicePixelRatio||1,e=this.e.parentElement;if(!e)return;let i=e.clientWidth,s=e.clientHeight,n=this.T(this.i)||1,o=this.C(this.i)||1,h=n/o,r=i,a=r/h;a>s&&(a=s,r=a*h);let u=Math.max(1,Math.floor((this.a?i:r)*t)),c=Math.max(1,Math.floor((this.a?s:a)*t));return this.e.width=u,this.e.height=c,this.o&&this.o.viewport(0,0,u,c),{displayW:i,displayH:s,fittedW:r,fittedH:a}}K(){let t=this.t;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("cam-radius")&&(t.CAM_RADIUS=parseFloat(this.getAttribute("cam-radius"))??t.CAM_RADIUS),this.hasAttribute("cam-max-theta-unfocused")&&(t.CAM_MAX_THETA_UNFOCUSED=parseFloat(this.getAttribute("cam-max-theta-unfocused"))??t.CAM_MAX_THETA_UNFOCUSED),this.hasAttribute("cam-max-phi-unfocused")&&(t.CAM_MAX_PHI_UNFOCUSED=parseFloat(this.getAttribute("cam-max-phi-unfocused"))??t.CAM_MAX_PHI_UNFOCUSED),this.hasAttribute("cam-max-theta-focused")&&(t.CAM_MAX_THETA_FOCUSED=parseFloat(this.getAttribute("cam-max-theta-focused"))??t.CAM_MAX_THETA_FOCUSED),this.hasAttribute("cam-max-phi-focused")&&(t.CAM_MAX_PHI_FOCUSED=parseFloat(this.getAttribute("cam-max-phi-focused"))??t.CAM_MAX_PHI_FOCUSED),this.hasAttribute("cam-smoothness")&&(t.CAM_SMOOTHNESS=parseFloat(this.getAttribute("cam-smoothness"))??t.CAM_SMOOTHNESS),this.hasAttribute("cam-zoom-amount")&&(t.CAM_ZOOM_AMOUNT=parseFloat(this.getAttribute("cam-zoom-amount"))??t.CAM_ZOOM_AMOUNT),this.hasAttribute("boomerang-speed")&&(t.BOOMERANG_SPEED=parseFloat(this.getAttribute("boomerang-speed"))??t.BOOMERANG_SPEED),this.hasAttribute("boomerang-shape")&&(t.BOOMERANG_SHAPE=this.getAttribute("boomerang-shape")==="circle"?"circle":"z"),this.hasAttribute("background-color"))try{let e=this.getAttribute("background-color").split(",").map(Number);e.length===3&&(t.BACKGROUND_COLOR=e)}catch{}this.hasAttribute("img-zoom-amount")&&(t.IMG_ZOOM_AMOUNT=parseFloat(this.getAttribute("img-zoom-amount"))??t.IMG_ZOOM_AMOUNT),this.pt=this.hasAttribute("xr-button"),this.hasAttribute("xr-recenter-yaw")&&(t.XR_RECENTER_YAW=parseFloat(this.getAttribute("xr-recenter-yaw"))??t.XR_RECENTER_YAW),this.hasAttribute("xr-recenter-radius")&&(t.XR_RECENTER_RADIUS=parseFloat(this.getAttribute("xr-recenter-radius"))??t.XR_RECENTER_RADIUS),this._t()}bt(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)}gt(t,e,i){let s=this.bt(t,t.VERTEX_SHADER,e),n=this.bt(t,t.FRAGMENT_SHADER,i);if(!s||!n)return null;let o=t.createProgram();return t.attachShader(o,s),t.attachShader(o,n),t.linkProgram(o),t.getProgramParameter(o,t.LINK_STATUS)?(t.deleteShader(s),t.deleteShader(n),o):(console.error(t.getProgramInfoLog(o)),t.deleteProgram(o),null)}vt(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}}_(t,e){if(!this.o)return;let i=this.o,s=this.k[t];if(i.activeTexture(t==="color"?i.TEXTURE0:i.TEXTURE1),i.bindTexture(i.TEXTURE_2D,s.tex),!this.J(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.T(e)!=s.width||this.C(e)!=s.height)&&(this.S(),s.width=this.T(e),s.height=this.C(e))}catch{}}Lt(t,e,i,s){let n=1/Math.tan(t/2);return[n/e,0,0,0,0,n,0,0,0,0,(s+i)/(i-s),-1,0,0,2*s*i/(i-s),0]}Ht(t,e,i){function s(u){let c=Math.hypot(...u)||1;return u.map(f=>f/c)}function n(u,c){return[u[1]*c[2]-u[2]*c[1],u[2]*c[0]-u[0]*c[2],u[0]*c[1]-u[1]*c[0]]}function o(u,c){return u.map((f,l)=>f-c[l])}let h=s(o(t,e)),r=s(n(i,h)),a=n(h,r);return[r[0],a[0],h[0],0,r[1],a[1],h[1],0,r[2],a[2],h[2],0,-(r[0]*t[0]+r[1]*t[1]+r[2]*t[2]),-(a[0]*t[0]+a[1]*t[1]+a[2]*t[2]),-(h[0]*t[0]+h[1]*t[1]+h[2]*t[2]),1]}Mt(t){return Math.atan2(2*(t.w*t.y+t.x*t.z),1-2*(t.y*t.y+t.x*t.x))}kt(t){let e=-2*(t.x*t.z+t.w*t.y),i=-2*(t.y*t.z-t.w*t.x),s=2*(t.x*t.x+t.y*t.y)-1,n=Math.hypot(e,i,s)||1;return{x:e/n,y:i/n,z:s/n}}D(t,e,i){let s=(1-this.t.CAM_SMOOTHNESS)*i/16.67,n=Math.sign(t-e);return e+=(t-e)*s,Math.sign(t-e)!==n&&(e=t),e}At(t,e){let i=Math.min(Math.max(Math.abs(t)/e,0),1),s=1-Math.exp(-i);return Math.sign(t)*s*e}$(){throw new Error("Must implement _createFallback")}Et(){}J(t){throw new Error("Must implement _isSourceReady")}T(t){throw new Error("Must implement _getSourceWidth")}C(t){throw new Error("Must implement _getSourceHeight")}}:m=class{};var x=class extends m{static get observedAttributes(){return T}constructor(){super(),this.i=new Image,this.p=new Image,this.i.crossOrigin="anonymous",this.p.crossOrigin="anonymous",this.i.onload=()=>this._("color",this.i),this.p.onload=()=>this._("depth",this.p),this.H=document.createElement("img"),Object.assign(this.H.style,{position:"absolute",inset:"0",width:"100%",height:"100%",objectFit:"contain",opacity:"0",pointerEvents:"auto",zIndex:"2"});let t=e=>{if(e.type==="contextmenu")return;let i=new e.constructor(e.type,e);this.e?.dispatchEvent(i)};["pointermove","pointerdown","pointerup","pointerleave"].forEach(e=>this.H.addEventListener(e,t))}connectedCallback(){super.connectedCallback();let t=this.e?.parentElement;t&&!this.H.isConnected&&t.appendChild(this.H)}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.i.src=i||"":t==="depth-src"?this.p.src=i||"":this.K())}_(t,e){super._(t,e),t==="color"&&e instanceof HTMLImageElement&&(this.H.src=e.src)}S(){if(!this.e.parentElement)return;let{displayW:t,displayH:e,fittedW:i,fittedH:s}=super.S(),n=(t-i)/2,o=(e-s)/2;Object.assign(this.H.style,{left:`${n}px`,top:`${o}px`,width:`${i}px`,height:`${s}px`})}$(){this.i.style.display="block",this.i.classList.add("fallback"),this.e.parentElement.appendChild(this.i)}J(t){return t&&t.complete&&t.naturalWidth>0}T(t){return t?t.width:1}C(t){return t?t.height: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(t={}){if(this.context)throw new Error("Audio manager already started!");this.audioEnabled=t.audioEnabled??!0,this.sampleRate=t.sampleRate??44100,this.numChannels=t.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 e=performance.now();!this.isPaused&&this.context.state==="suspended"&&(this.timeSuspended+=(e-this.lastTime)/1e3),this.lastTime=e},t.updateInterval??10),this.context.onstatechange=()=>{let e=performance.now();this.context?.state==="running"&&(this.timeSuspended+=(e-this.lastTime)/1e3),this.lastTime=e}}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(t){if(t+=this.getLatency(),this.sourceNodes!=null){for(let e of this.sourceNodes)try{e.stop()}catch{}this.sourceNodes.clear()}this.timeOffset=t-((this.context?.currentTime??0)+this.timeSuspended)}setVolume(t){this.volume=t,this.gainNode&&(this.gainNode.gain.value=t)}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(t,e){let i=t[0].length;if(i<=0)return;let s=this.context.createBuffer(this.numChannels,i,this.sampleRate);for(let n=0;n<this.numChannels;n++)s.copyToChannel(t[n],n);if(e-=this.timeSuspended+this.timeOffset,e>this.context.currentTime&&this.context.state!=="suspended"){let n=this.context.createBufferSource();n.buffer=s,n.connect(this.gainNode),this.sourceNodes.add(n),n.onended=()=>this.sourceNodes.delete(n),n.start(e)}this.playHead+=s.duration}};import*as A from"mp4box";var w=class{constructor(t,e){this.f=t,this.yt=0,this.Xt=e}write(t){let e=new ArrayBuffer(t.byteLength);new Uint8Array(e).set(t),e.fileStart=this.yt,this.yt+=e.byteLength,this.f.appendBuffer(e)}close(){this.f.flush(),this.Xt()}},M=class{constructor(t,e,{onConfig:i,onChunk:s,onEndOfStream:n}){if(this.Q=e,this.Tt=i,this.Ft=s,this.f=A.createFile(),this.f.onReady=this.Gt.bind(this),this.f.onSamples=this.zt.bind(this),this.done=!1,t instanceof ArrayBuffer)t.fileStart=0,this.f.appendBuffer(t),this.f.flush(),this.done=!0;else{let o=new w(this.f,()=>{this.done=!0});fetch(t).then(h=>{h.body.pipeTo(new WritableStream(o,{highWaterMark:2}))})}}Ct(t){let i=this.f.getTrackById(t.id).mdia.minf.stbl.stsd.entries[0];if(this.Q)return i.esds.esd.descs[0].descs[0].data;{let s=i.avcC||i.hvcC||i.vpcC||i.av1C;if(!s)return null;let n=new A.DataStream(void 0,0,A.DataStream.BIG_ENDIAN);return s.write(n),new Uint8Array(n.buffer,8)}}Gt(t){if(this.Q){let e=t.audioTracks[0];this.Tt(e?{codec:e.codec,sampleRate:e.audio.sample_rate,numberOfChannels:e.audio.channel_count,description:this.Ct(e)}:null),e&&this.f.setExtractionOptions(e.id)}else{let e=t.videoTracks[0];this.Tt({codec:e.codec.startsWith("vp08")?"vp8":e.codec,codedHeight:e.video.height,codedWidth:e.video.width,description:this.Ct(e)}),this.f.setExtractionOptions(e.id)}this.f.start()}zt(t,e,i){for(let s of i){let n;this.Q?n=EncodedAudioChunk:n=EncodedVideoChunk,this.Ft(new n({type:s.is_sync?"key":"delta",timestamp:1e6*s.cts/s.timescale,duration:1e6*s.duration/s.timescale,data:s.data}))}}};var H=1,p=.1,D=.9,L=`#version 300 es
|
|
83
83
|
|
|
84
84
|
precision mediump float;
|
|
85
85
|
precision mediump int;
|
|
@@ -213,4 +213,4 @@ void main()
|
|
|
213
213
|
|
|
214
214
|
fragColor = vec4(col, 1.0);
|
|
215
215
|
}
|
|
216
|
-
`,b=class extends
|
|
216
|
+
`,b=class extends m{static get observedAttributes(){return T.concat(["autoplay","loop","muted","controls"])}constructor(){super(),this.r=[],this.l=[],this.d=[],this.tt=!1,this.et=!1,this.X=!0,this.g=null,this.M=null,this.P=null,this.Rt=!1,this.s=new E,this.s.pause(),this.it=!1,this.R=document.createElement("div"),this.R.classList.add("rgbd-controls"),Object.assign(this.R.style,{position:"absolute",bottom:"1%",left:"50%",transform:"translateX(-50%)",display:"none",alignItems:"center",justifyContent:"center",gap:"8px",background:"rgba(0, 0, 0, 0.4)",padding:"8px 8px",borderRadius:"8px",backdropFilter:"blur(6px)",boxSizing:"border-box",width:"50%",flexWrap:"wrap"}),this.shadowRoot.appendChild(this.R),this.B=document.createElement("button"),Object.assign(this.B.style,{border:"none",background:"transparent",color:"white",fontSize:"24px",cursor:"pointer",padding:"4px",flexShrink:"0"}),this.R.appendChild(this.B),this.B.addEventListener("click",()=>{this.paused?this.play():this.pause()}),this.m=document.createElement("input"),this.m.type="range",this.m.min="0",this.m.max="1",this.m.value="0",this.m.step="any",Object.assign(this.m.style,{flex:"1 1 auto",minWidth:"120px",maxWidth:"100%",cursor:"pointer",accentColor:"#fff"}),this.R.appendChild(this.m),this.m.addEventListener("input",()=>{let t=this.r[0];if(!t||!t.duration)return;let e=t.startTime+this.m.value*t.duration;this.currentTime=e})}connectedCallback(){if(super.connectedCallback(),!this.o)return;let t=this.o;this.g=this.gt(t,L,k),this.M={uProjection:t.getUniformLocation(this.g,"u_projMat"),uView:t.getUniformLocation(this.g,"u_viewMat"),uDepth:t.getUniformLocation(this.g,"u_depth"),uHeight:t.getUniformLocation(this.g,"u_height"),uScrubberWidth:t.getUniformLocation(this.g,"u_scrubberWidth"),uProgress:t.getUniformLocation(this.g,"u_progress"),uPaused:t.getUniformLocation(this.g,"u_paused"),uHitPos:t.getUniformLocation(this.g,"u_hitPos")}}disconnectedCallback(){this.s.started()&&this.s.stop(),super.disconnectedCallback()}attributeChangedCallback(t,e,i){e!==i&&(t==="color-src"?this.clear().then(()=>{this.r=[this.L(i,0,!1)],this.d=[this.L(i,0,!0)],this.st=this.r[0],this.nt=this.d[0]}):t==="depth-src"?(this.l=[this.L(i,0,!1)],this.ot=this.l[0]):t==="autoplay"?(this.tt=this.hasAttribute("autoplay"),this.tt&&this.s.play()):t==="loop"?this.et=this.hasAttribute("loop"):t==="muted"?(this.X=this.hasAttribute("muted"),this.s.setVolume(this.X?0:1),!this.X&&this.s.started()&&this.s.resumeContext()):t==="controls"?(this.it=this.hasAttribute("controls"),this.R.style.display=this.it?"flex":"none"):this.K())}async play(){await this.s.play()}async pause(){await this.s.pause()}async clear(){for(this.i=null,this.p=null,this._("color",null),this._("depth",null),this.st=null,this.ot=null,this.nt=null;this.r.length>0;)this.W(this.r.shift());for(;this.l.length>0;)this.W(this.l.shift());for(;this.d.length>0;)this.W(this.d.shift());this.currentTime=0,this.s.started()&&await this.s.stop()}enqueue(t,e,i){this.r.push(this.L(t,i,!1)),this.l.push(this.L(e,i,!1)),this.d.push(this.L(t,i,!0))}get paused(){return this.s.isPaused}get currentTime(){return this.s.getVideoTime()}set currentTime(t){let e=i=>{if(i.length==0)return;this.W(i[0]),i[0]=this.V(i[0],i[0].startTime);let s=i[0];s.demuxer.done||console.error("Demuxing not yet finished!");let n=Number.MAX_VALUE,o=-1;for(let h=0;h<s.chunks.length;h++){if(s.chunks[h].type!=="key")continue;let r=Math.abs(t-(s.startTime+s.chunks[h].timestamp/1e6));r<n&&(n=r,o=h)}o<0||(s.curChunk=o)};this.s.setVideoTime(t),this.ht=null,e(this.r),e(this.l),e(this.d)}get volume(){return this.s.volume}set volume(t){this.s.setVolume(t)}Bt(t){if(this.s.started()){if(t==null)return;if(t.sampleRate!=this.s.sampleRate)throw new Error("Audio configs have mismatched sample rates!");if(t.numberOfChannels!=this.s.numChannels)throw new Error("Audio configs have mismatched channel counts!")}else this.s.start(t?{sampleRate:t.sampleRate,numChannels:t.numberOfChannels,volume:1}:{audioEnabled:!1}),this.X||this.s.resumeContext()}wt(t,e){let i=e+t.timestamp/1e6,s=[];for(let n=0;n<t.numberOfChannels;n++){let o=new Float32Array(t.numberOfFrames);t.copyTo(o,{planeIndex:n,format:"f32-planar"}),s.push(o)}this.s.scheduleChunk(s,i)}L(t,e,i){let s={startTime:e,isAudio:i,duration:0,demuxer:null,decoder:null,chunks:[],frames:[],curChunk:0},n;return i?n=AudioDecoder:n=VideoDecoder,s.decoder=new n({output:o=>{i?this.wt(o,s.startTime):s.frames.push(o)},error:o=>{console.error("Decoder encountered an error while decoding: ",o)}}),s.demuxer=new M(t,i,{onConfig:o=>{s.config=o,o?s.decoder?.configure(o):s.done=!0,i&&this.Bt(o)},onChunk:o=>{s.chunks?.push(o),s.duration=Math.max(s.duration,(o.timestamp+o.duration)/1e6)}}),s}V(t,e){let i={startTime:e,isAudio:t.isAudio,duration:t.duration,demuxer:{done:!0},decoder:null,config:t.config,chunks:t.chunks,frames:[],curChunk:0},s;return t.isAudio?s=AudioDecoder:s=VideoDecoder,i.decoder=new s({output:n=>{i.isAudio?this.wt(n,i.startTime):i.frames.push(n)},error:n=>{console.error("Decoder encountered an error while decoding: ",n)}}),t.config?i.decoder.configure(t.config):i.done=!0,i}Wt(){let t=!this.paused;this.B.textContent=t?"\u23F8\uFE0F":"\u25B6\uFE0F";let e=this.r[0];if(!e||!e.duration){this.m.value=0;return}let i=this.currentTime-e.startTime,s=Math.max(0,Math.min(1,i/e.duration));this.m.value=s}Vt(t){let e=this.r[0];if(!e)return;this.P=null;let i=!1;for(let s of t.session.inputSources){if(!s.targetRaySpace)continue;let n=t.getPose(s.targetRaySpace,this.O);if(!n)continue;let o=n.transform.position,h=this.kt(n.transform.orientation),r=(-this.t.DEPTH_MIN-o.z)/h.z;if(r<0)continue;let a=o.x+h.x*r,u=o.y+h.y*r,c=-.5*this.t.DEPTH_MIN,f=.5*this.t.DEPTH_MIN,l=(.5*p+.5+p/2)*-this.t.DEPTH_MIN,d=(-.5*p+.5+p/2)*-this.t.DEPTH_MIN;if(!(a<c||a>f||u<l||u>d)){if(this.P=this.P??{u:(a-c)/(f-c),v:(u-l)/(d-l)},s.gamepad?.buttons[0]?.pressed)i=!0;else continue;if(!this.Rt)if(this.P.u<p)this.paused?this.play():this.pause();else{let g=1-D,v=(this.P.u-p-g/2)/(1-p-g);this.currentTime=v*(e.duration??0),console.log(v)}}}this.Rt=i}G(t,e){if(super.G(t,e),!this.o)return;let i=this.o;if(this.a==null)return;let s=this.r[0];if(!s)return;let n;if(!s.duration)n=0;else{let o=this.currentTime-s.startTime;n=Math.max(0,Math.min(1,o/s.duration))}i.useProgram(this.g),i.uniformMatrix4fv(this.M.uView,!1,t),i.uniformMatrix4fv(this.M.uProjection,!1,e),i.uniform1f(this.M.uDepth,this.t.DEPTH_MIN),i.uniform1f(this.M.uHeight,p),i.uniform1f(this.M.uScrubberWidth,D),i.uniform1f(this.M.uProgress,n),i.uniform1ui(this.M.uPaused,this.s.isPaused?1:0),i.uniform2f(this.M.uHitPos,this.P?.u??-1,this.P?.v??-1),i.drawArrays(i.TRIANGLES,0,6)}Z(t,e){let i=(n,o)=>{let h=n[o];for(;h.curChunk<h.chunks.length;){let r=h.chunks[h.curChunk];if(h.startTime+r.timestamp/1e6>this.s.getVideoTime()+H)break;h.decoder.decode(r),h.curChunk++}if(h.curChunk>=h.chunks.length&&h.demuxer.done&&h.decoder){let r=h.decoder;r.flush().then(()=>{r.close(),h.done=!0}),h.decoder=null}};for(let n=0;n<this.r.length;n++)i(this.r,n);for(let n=0;n<this.l.length;n++)i(this.l,n);for(let n=0;n<this.d.length;n++)this.d[n].config!=null&&i(this.d,n);let s=n=>n?n.done&&n.frames.length==1:!1;s(this.r[0])&&s(this.l[0])&&(this.r.shift(),this.l.shift(),this.St=!0,this.onSegmentEnd?.(this.r.length==0)),this.d[0]?.done&&this.d.shift(),this.et&&this.r.length==0&&this.l.length==0&&this.d.length==0&&this.st!=null&&this.ot!=null&&(this.s.setVideoTime(0),this.r=[this.V(this.st,0)],this.l=[this.V(this.ot,0)],this.nt!=null&&(this.d=[this.V(this.nt,0)])),this.it&&this.Wt(),e!=null&&this.Vt(e),super.Z(t,e)}$(){this.i=document.createElement("video"),this.i.style.display="block",this.i.classList.add("fallback"),this.i.controls=this.R,this.i.muted=this.X,this.i.loop=this.et,this.i.autoplay=this.tt,this.i.src=this.getAttribute("color-src"),this.e.parentElement.appendChild(this.i),this.R.style.display="none"}Et(){let t=this.r[0],e=this.l[0];if(!t||!e)return;let i=this.s.getVideoTime(),s=this.ht!=null?Math.abs(i-this.ht):Number.MAX_VALUE,n=-1;for(let o=0;o<Math.min(t.frames.length,e.frames.length);o++){let h=Math.abs(i-(t.startTime+t.frames[o].timestamp/1e6));if(h<=s)s=h,n=o;else break}if(!(n<0)){this.St&&(this.i?.close(),this.p?.close(),this.St=!1),this.i=t.frames[n],this.p=e.frames[n],this.ht=t.startTime+this.i.timestamp/1e6,this.i?.timestamp!==this.p?.timestamp&&console.error("Color and depth frames have mismatched PTS"),this._("color",this.i),this._("depth",this.p);for(let o=0;o<n;o++)t.frames.shift().close(),e.frames.shift().close(),this.onFrameRendered?.()}}J(t){return t instanceof VideoFrame}T(t){return t?t.codedWidth:1}C(t){return t?t.codedHeight:1}W(t){t.decoder?.close(),t.decoder=null;for(let e=0;e<t.frames.length;e++)t.frames[e].close()}};R&&(customElements.define("rgbd-img",x),customElements.define("rgbd-video",b));
|