dgs-js 1.1.6 → 1.1.8

package/dist/index.js

@@ -13,11 +13,11 @@ return ret;
 `,Q+=s[n].argPackAdvance;var u=g===1?"new func":"func.call";B+=`  var rv = ${u}(${a.join(", ")});
 `,r.isVoid||(I.push("emval_returnValue"),E.push(Te),B+=`  return emval_returnValue(retType, destructorsRef, rv);
 `),B+=`};
-`;var w=new Function(...I,B)(...E),x=`methodCaller<(${s.map(P=>P.name).join(", ")}) => ${r.name}>`;return Ug(zA(x,w))},Jg=(A,e)=>(A=k.toValue(A),e=k.toValue(e),k.toHandle(A[e])),Tg=A=>{A>9&&(CA[A+1]+=1)},_g=A=>k.toHandle(Ae(A)),Lg=()=>k.toHandle({}),Pg=A=>{var e=k.toValue(A);kA(e),qA(A)},Hg=(A,e,g)=>{A=k.toValue(A),e=k.toValue(e),g=k.toValue(g),A[e]=g},Wg=(A,e)=>{A=$A(A,"_emval_take_value");var g=A.readValueFromPointer(e);return k.toHandle(g)},pA={},Le=A=>{if(A instanceof ne||A=="unwind")return M;d(1,A)},Pe=()=>ZA||Je>0,He=A=>{M=A,Pe()||(i.onExit?.(A),X=!0),d(A,new ne(A))},Zg=(A,e)=>{M=A,He(A)},Og=Zg,Kg=()=>{if(!Pe())try{Og(M)}catch(A){Le(A)}},Xg=A=>{if(!X)try{A(),Kg()}catch(e){Le(e)}},Vg=()=>performance.now(),zg=(A,e)=>{if(pA[A]&&(clearTimeout(pA[A].id),delete pA[A]),!e)return 0;var g=setTimeout(()=>{delete pA[A],Xg(()=>Ze(A,Vg()))},e);return pA[A]={id:g,timeout_ms:e},0},jg=()=>2147483648,qg=(A,e)=>Math.ceil(A/e)*e,$g=A=>{var e=j.buffer,g=(A-e.byteLength+65535)/65536|0;try{return j.grow(g),Ee(),1}catch{}},Ai=A=>{var e=v.length;A>>>=0;var g=jg();if(A>g)return!1;for(var s=1;s<=4;s*=2){var r=e*(1+.2/s);r=Math.min(r,A+100663296);var B=Math.min(g,qg(Math.max(A,r),65536)),Q=$g(B);if(Q)return!0}return!1},ei=[null,[],[]],ti=(A,e)=>{var g=ei[A];e===0||e===10?((A===1?J:_)(be(g)),g.length=0):g.push(e)},gi=(A,e,g,s)=>{for(var r=0,B=0;B<g;B++){var Q=F[e>>2],a=F[e+4>>2];e+=8;for(var I=0;I<a;I++)ti(A,v[Q+I]);r+=a}return F[s>>2]=r,0},gA=new Uint8Array(123),BA=25;BA>=0;--BA)gA[48+BA]=52+BA,gA[65+BA]=BA,gA[97+BA]=26+BA;gA[43]=62,gA[47]=63,_t(),$t(),i.noExitRuntime&&(ZA=i.noExitRuntime),i.print&&(J=i.print),i.printErr&&(_=i.printErr),i.wasmBinary&&(W=i.wasmBinary),i.arguments&&(h=i.arguments),i.thisProgram&&(D=i.thisProgram);var We,ee,iA,Ze,L,Oe,Ke,Xe,Ve,ze,je,qe;function ii(A){We=A.da,ee=A.ea,iA=A.fa,Ze=A.ha,L=A.ia,Oe=A.ja,Ke=A.ka,Xe=A.la,Ve=A.ma,ze=A.na,je=A.oa,qe=A.pa}var si={m:yt,w:mt,a:Gt,f:Ft,B:Nt,o:vt,h:kt,H:Rt,W:St,t:Ut,N:bt,aa:eg,Z:gg,d:ig,L:rg,s:ag,u:Ig,i:og,c:Cg,$:Eg,M:ug,n:mg,Y:Gg,X:Fg,O:Ng,F:vg,S:kg,q:Rg,R:Sg,_:qA,V:Mg,p:xg,U:Jg,K:Tg,T:_g,Q:Lg,v:Pg,P:Hg,j:Wg,G:zg,I:Ai,J:gi,z:ni,A:Ei,y:hi,x:li,g:ri,e:Qi,r:Ci,k:Ii,b:ai,C:oi,l:ci,D:Bi,E:He},hA=await ft();function ri(A,e){var g=K();try{return Z(A)(e)}catch(s){if(O(g),s!==s+0)throw s;L(1,0)}}function Bi(A,e,g,s,r,B,Q,a,I,E,n){var u=K();try{Z(A)(e,g,s,r,B,Q,a,I,E,n)}catch(w){if(O(u),w!==w+0)throw w;L(1,0)}}function ai(A,e){var g=K();try{Z(A)(e)}catch(s){if(O(g),s!==s+0)throw s;L(1,0)}}function Qi(A,e,g){var s=K();try{return Z(A)(e,g)}catch(r){if(O(s),r!==r+0)throw r;L(1,0)}}function Ii(A){var e=K();try{Z(A)()}catch(g){if(O(e),g!==g+0)throw g;L(1,0)}}function oi(A,e,g){var s=K();try{Z(A)(e,g)}catch(r){if(O(s),r!==r+0)throw r;L(1,0)}}function Ci(A,e,g,s){var r=K();try{return Z(A)(e,g,s)}catch(B){if(O(r),B!==B+0)throw B;L(1,0)}}function Ei(A,e,g,s,r){var B=K();try{return Z(A)(e,g,s,r)}catch(Q){if(O(B),Q!==Q+0)throw Q;L(1,0)}}function ni(A,e,g,s){var r=K();try{return Z(A)(e,g,s)}catch(B){if(O(r),B!==B+0)throw B;L(1,0)}}function hi(A,e,g,s,r,B){var Q=K();try{return Z(A)(e,g,s,r,B)}catch(a){if(O(Q),a!==a+0)throw a;L(1,0)}}function ci(A,e,g,s){var r=K();try{Z(A)(e,g,s)}catch(B){if(O(r),B!==B+0)throw B;L(1,0)}}function li(A){var e=K();try{return Z(A)()}catch(g){if(O(e),g!==g+0)throw g;L(1,0)}}function te(){if(IA>0){lA=te;return}if(Qt(),IA>0){lA=te;return}function A(){i.calledRun=!0,!X&&(It(),V?.(i),i.onRuntimeInitialized?.(),ot())}i.setStatus?(i.setStatus("Running..."),setTimeout(()=>{setTimeout(()=>i.setStatus(""),1),A()},1)):A()}function ui(){if(i.preInit)for(typeof i.preInit=="function"&&(i.preInit=[i.preInit]);i.preInit.length>0;)i.preInit.shift()()}return ui(),te(),Ce?t=i:t=new Promise((A,e)=>{V=A,z=e}),t}),tt=di;var TA=tt(),_A=navigator.gpu?.requestAdapter({powerPreference:"high-performance"}),ie=_A?.then(async R=>{if(!R)return null;let t=R.limits,i=R.features,C=await R.requestDevice({requiredFeatures:i.has("timestamp-query")?["timestamp-query"]:[],requiredLimits:{maxBufferSize:t.maxBufferSize,maxStorageBufferBindingSize:t.maxStorageBufferBindingSize,maxStorageBuffersPerShaderStage:t.maxStorageBuffersPerShaderStage}});return C.lost.then(o=>{if(o.reason!=="destroyed")throw new Error(`WebGPU device was lost with info: ${o.message}`)}),C});if(!navigator.gpu)console.warn("WebGPU not supported, you will be unable to create <dgs-player>");else if(!_A||!ie)throw new Error("WebGPU supported, but failed to create adapter or device!");import{mat4 as Bt,vec3 as se}from"gl-matrix";var yA=class{constructor(t,i){let C=t.means.byteLength+t.velocities.byteLength+t.length*Uint32Array.BYTES_PER_ELEMENT,o;try{o=new SharedArrayBuffer(C)}catch{throw new Error(`SharedArrayBuffer is not available in this environment.
+`;var w=new Function(...I,B)(...E),x=`methodCaller<(${s.map(P=>P.name).join(", ")}) => ${r.name}>`;return Ug(zA(x,w))},Jg=(A,e)=>(A=k.toValue(A),e=k.toValue(e),k.toHandle(A[e])),Tg=A=>{A>9&&(CA[A+1]+=1)},_g=A=>k.toHandle(Ae(A)),Lg=()=>k.toHandle({}),Pg=A=>{var e=k.toValue(A);kA(e),qA(A)},Hg=(A,e,g)=>{A=k.toValue(A),e=k.toValue(e),g=k.toValue(g),A[e]=g},Wg=(A,e)=>{A=$A(A,"_emval_take_value");var g=A.readValueFromPointer(e);return k.toHandle(g)},pA={},Le=A=>{if(A instanceof ne||A=="unwind")return M;d(1,A)},Pe=()=>ZA||Je>0,He=A=>{M=A,Pe()||(i.onExit?.(A),X=!0),d(A,new ne(A))},Zg=(A,e)=>{M=A,He(A)},Og=Zg,Kg=()=>{if(!Pe())try{Og(M)}catch(A){Le(A)}},Xg=A=>{if(!X)try{A(),Kg()}catch(e){Le(e)}},Vg=()=>performance.now(),zg=(A,e)=>{if(pA[A]&&(clearTimeout(pA[A].id),delete pA[A]),!e)return 0;var g=setTimeout(()=>{delete pA[A],Xg(()=>Ze(A,Vg()))},e);return pA[A]={id:g,timeout_ms:e},0},jg=()=>2147483648,qg=(A,e)=>Math.ceil(A/e)*e,$g=A=>{var e=j.buffer,g=(A-e.byteLength+65535)/65536|0;try{return j.grow(g),Ee(),1}catch{}},Ai=A=>{var e=v.length;A>>>=0;var g=jg();if(A>g)return!1;for(var s=1;s<=4;s*=2){var r=e*(1+.2/s);r=Math.min(r,A+100663296);var B=Math.min(g,qg(Math.max(A,r),65536)),Q=$g(B);if(Q)return!0}return!1},ei=[null,[],[]],ti=(A,e)=>{var g=ei[A];e===0||e===10?((A===1?J:_)(be(g)),g.length=0):g.push(e)},gi=(A,e,g,s)=>{for(var r=0,B=0;B<g;B++){var Q=F[e>>2],a=F[e+4>>2];e+=8;for(var I=0;I<a;I++)ti(A,v[Q+I]);r+=a}return F[s>>2]=r,0},gA=new Uint8Array(123),BA=25;BA>=0;--BA)gA[48+BA]=52+BA,gA[65+BA]=BA,gA[97+BA]=26+BA;gA[43]=62,gA[47]=63,_t(),$t(),i.noExitRuntime&&(ZA=i.noExitRuntime),i.print&&(J=i.print),i.printErr&&(_=i.printErr),i.wasmBinary&&(W=i.wasmBinary),i.arguments&&(h=i.arguments),i.thisProgram&&(D=i.thisProgram);var We,ee,iA,Ze,L,Oe,Ke,Xe,Ve,ze,je,qe;function ii(A){We=A.da,ee=A.ea,iA=A.fa,Ze=A.ha,L=A.ia,Oe=A.ja,Ke=A.ka,Xe=A.la,Ve=A.ma,ze=A.na,je=A.oa,qe=A.pa}var si={m:yt,w:mt,a:Gt,f:Ft,B:Nt,o:vt,h:kt,H:Rt,W:St,t:Ut,N:bt,aa:eg,Z:gg,d:ig,L:rg,s:ag,u:Ig,i:og,c:Cg,$:Eg,M:ug,n:mg,Y:Gg,X:Fg,O:Ng,F:vg,S:kg,q:Rg,R:Sg,_:qA,V:Mg,p:xg,U:Jg,K:Tg,T:_g,Q:Lg,v:Pg,P:Hg,j:Wg,G:zg,I:Ai,J:gi,z:ni,A:Ei,y:hi,x:li,g:ri,e:Qi,r:Ci,k:Ii,b:ai,C:oi,l:ci,D:Bi,E:He},hA=await ft();function ri(A,e){var g=K();try{return Z(A)(e)}catch(s){if(O(g),s!==s+0)throw s;L(1,0)}}function Bi(A,e,g,s,r,B,Q,a,I,E,n){var u=K();try{Z(A)(e,g,s,r,B,Q,a,I,E,n)}catch(w){if(O(u),w!==w+0)throw w;L(1,0)}}function ai(A,e){var g=K();try{Z(A)(e)}catch(s){if(O(g),s!==s+0)throw s;L(1,0)}}function Qi(A,e,g){var s=K();try{return Z(A)(e,g)}catch(r){if(O(s),r!==r+0)throw r;L(1,0)}}function Ii(A){var e=K();try{Z(A)()}catch(g){if(O(e),g!==g+0)throw g;L(1,0)}}function oi(A,e,g){var s=K();try{Z(A)(e,g)}catch(r){if(O(s),r!==r+0)throw r;L(1,0)}}function Ci(A,e,g,s){var r=K();try{return Z(A)(e,g,s)}catch(B){if(O(r),B!==B+0)throw B;L(1,0)}}function Ei(A,e,g,s,r){var B=K();try{return Z(A)(e,g,s,r)}catch(Q){if(O(B),Q!==Q+0)throw Q;L(1,0)}}function ni(A,e,g,s){var r=K();try{return Z(A)(e,g,s)}catch(B){if(O(r),B!==B+0)throw B;L(1,0)}}function hi(A,e,g,s,r,B){var Q=K();try{return Z(A)(e,g,s,r,B)}catch(a){if(O(Q),a!==a+0)throw a;L(1,0)}}function ci(A,e,g,s){var r=K();try{Z(A)(e,g,s)}catch(B){if(O(r),B!==B+0)throw B;L(1,0)}}function li(A){var e=K();try{return Z(A)()}catch(g){if(O(e),g!==g+0)throw g;L(1,0)}}function te(){if(IA>0){lA=te;return}if(Qt(),IA>0){lA=te;return}function A(){i.calledRun=!0,!X&&(It(),V?.(i),i.onRuntimeInitialized?.(),ot())}i.setStatus?(i.setStatus("Running..."),setTimeout(()=>{setTimeout(()=>i.setStatus(""),1),A()},1)):A()}function ui(){if(i.preInit)for(typeof i.preInit=="function"&&(i.preInit=[i.preInit]);i.preInit.length>0;)i.preInit.shift()()}return ui(),te(),Ce?t=i:t=new Promise((A,e)=>{V=A,z=e}),t}),tt=di;var TA=tt(),_A=navigator?.gpu?.requestAdapter({powerPreference:"high-performance"}),ie=_A?.then(async R=>{if(!R)return null;let t=R.limits,i=R.features,C=await R.requestDevice({requiredFeatures:i.has("timestamp-query")?["timestamp-query"]:[],requiredLimits:{maxBufferSize:t.maxBufferSize,maxStorageBufferBindingSize:t.maxStorageBufferBindingSize,maxStorageBuffersPerShaderStage:t.maxStorageBuffersPerShaderStage}});return C.lost.then(o=>{if(o.reason!=="destroyed")throw new Error(`WebGPU device was lost with info: ${o.message}`)}),C});if(!navigator?.gpu)console.warn("WebGPU not supported, you will be unable to create <dgs-player>");else if(!_A||!ie)throw new Error("WebGPU supported, but failed to create adapter or device!");import{mat4 as Bt,vec3 as se}from"gl-matrix";var yA=class{constructor(t,i){let C=t.means.byteLength+t.velocities.byteLength+t.length*Uint32Array.BYTES_PER_ELEMENT,o;try{o=new SharedArrayBuffer(C)}catch{throw new Error(`SharedArrayBuffer is not available in this environment.
 
 This commonly means either:
 \u2022 Cross-origin isolation is not enabled.
-\u2022 You are on an unsupported browser`)}let h=0;new Float32Array(o,h,t.means.length).set(t.means);let d=h+t.means.byteLength;new Float32Array(o,d,t.velocities.length).set(t.velocities);let y=d+t.velocities.byteLength;this.#B=new Worker(new URL("./workers/sort.js",import.meta.url),{type:"module"}),this.#B.onmessage=l=>{if(l.data.type!=="sorted")return;let N=new Uint32Array(o,t.means.byteLength+t.velocities.byteLength,l.data.count);i(N,l.data.duration)},this.#B.postMessage({type:"init",count:t.length,dynamic:!!t.dynamic,sab:o,meansOffset:h,velocitiesOffset:d,indicesOffset:y})}sort(t,i,C){this.#B.postMessage({type:"sort",view:t.slice(),proj:i.slice(),time:C})}#B=null};var gt=`/* gaussian_preprocess.wgsl
+\u2022 You are on an unsupported browser`)}let h=0;new Float32Array(o,h,t.means.length).set(t.means);let d=h+t.means.byteLength;new Float32Array(o,d,t.velocities.length).set(t.velocities);let y=d+t.velocities.byteLength;this.#r=new Worker(new URL("./workers/sort.js",import.meta.url),{type:"module"}),this.#r.onmessage=l=>{if(l.data.type!=="sorted")return;let N=new Uint32Array(o,t.means.byteLength+t.velocities.byteLength,l.data.count);i(N,l.data.duration)},this.#r.postMessage({type:"init",count:t.length,dynamic:!!t.dynamic,sab:o,meansOffset:h,velocitiesOffset:d,indicesOffset:y})}sort(t,i,C){this.#r.postMessage({type:"sort",view:t.slice(),proj:i.slice(),time:C})}#r=null};var gt=`/* gaussian_preprocess.wgsl
  *
  * performs gaussian culling + preprocessing
  */
@@ -428,10 +428,10 @@ fn fs(in: VertexOutput) -> @location(0) vec4f
 		let c = textureSample(colorTex, colorSampler, in.uv);
 		// output premultiplied-like color: rgb in src, alpha = src.a
 		return vec4<f32>(c.rgb, c.a);
-	}`;var H=Float32Array.BYTES_PER_ELEMENT,eA=Uint32Array.BYTES_PER_ELEMENT,rt=64,mA=4,pi=.001,yi=.001,mi=0,re=class{constructor(t){this.#t=t}async initialize(){this.#B=await TA,this.#A=await ie,this.#I=await _A,this.#u=this.#v(),this.#h=this.#p(),this.#d=this.#G(),this.#f=this.#F(),this.#D=this.#k(),this.#s=this.#y(),this.#C=this.#N(),this.#I.features.has("timestamp-query")&&(this.#g=this.#R())}resize(){this.#h=this.#p()}setGaussians(t){this.#e=this.#w?this.#B.combine(t,this.#w):t,this.#i=this.#Y(this.#e);let i=new yA(this.#e,(C,o)=>{this.#r=!1,this.#E==i&&(this.#b(C),this.#n=!0,this.#a.lastSortTime=o)});this.#n=!1,this.#o=null,this.#E=i}setScene(t){this.#w=t}setPointSize(t){this.#c=t}draw(t,i,C,o={},h=!1){if(!this.#e||(this.#g==null&&(h=!1),!this.#r&&this.#U(t,C)&&(this.#r=!0,this.#E.sort(t,i,C),this.#o={view:t.slice(),time:C}),!this.#n))return;let D=performance.now();var d=0;this.#l&&(d=D-this.#l),this.#l=D;let p=se.transformMat4(se.create(),se.fromValues(0,0,0),Bt.invert(Bt.create(),t)),y=[i[0]*(this.#t.width/2),i[5]*(this.#t.height/2)],l=[this.#t.width,this.#t.height];this.#S(t,i,p,y,l,C);let N=this.#m(),J=null,_=null;h&&(J=this.#A.createBuffer({size:mA*8,usage:GPUBufferUsage.QUERY_RESOLVE|GPUBufferUsage.COPY_SRC}),_=this.#A.createBuffer({size:mA*8,usage:GPUBufferUsage.COPY_DST|GPUBufferUsage.MAP_READ}));let W=this.#A.createCommandEncoder(),X=W.beginComputePass({timestampWrites:h?{querySet:this.#g.querySet,beginningOfPassWriteIndex:0,endOfPassWriteIndex:1}:void 0});X.setPipeline(this.#d),X.setBindGroup(0,N.preprocess),this.#Q>0&&X.dispatchWorkgroups(Math.ceil(this.#Q/rt)),X.end();let M=W.beginRenderPass({label:"main",colorAttachments:[{view:this.#h.view,clearValue:{r:0,g:0,b:0,a:0},loadOp:"clear",storeOp:"store"}],timestampWrites:h?{querySet:this.#g.querySet,beginningOfPassWriteIndex:2,endOfPassWriteIndex:3}:void 0});M.setPipeline(this.#f),M.setVertexBuffer(0,this.#s.vertex),M.setIndexBuffer(this.#s.index,"uint16"),M.setBindGroup(0,N.rasterize),this.#Q>0&&M.drawIndexed(6,this.#Q),M.end();let V=o.backgroundColor??[0,0,0],z=W.beginRenderPass({label:"composite",colorAttachments:[{view:this.#u.getCurrentTexture().createView(),clearValue:{r:V[0],g:V[1],b:V[2],a:1},loadOp:"clear",storeOp:"store"}]});z.setPipeline(this.#D),z.setBindGroup(0,N.composite),z.draw(3),z.end(),h&&(W.resolveQuerySet(this.#g.querySet,0,mA,J,0),W.copyBufferToBuffer(J,0,_,0,mA*8)),this.#A.queue.submit([W.finish()]),h&&_.mapAsync(GPUMapMode.READ).then(()=>{let j=_.getMappedRange(),U=new BigUint64Array(j);if(this.#g.accumFrames++,this.#g.accumTime+=d,this.#g.accumPreprocessTime+=Number(U[1]-U[0]),this.#g.accumRasterTime+=Number(U[3]-U[2]),_.unmap(),this.#g.accumTime>=1e3){let v=this.#g.accumPreprocessTime/1e6/this.#g.accumFrames,G=this.#g.accumRasterTime/1e6/this.#g.accumFrames,m=v+G;this.#a.preprocessTime=v,this.#a.rasterTime=G,this.#a.totalTime=m,this.#g.accumFrames=0,this.#g.accumTime=0,this.#g.accumPreprocessTime=0,this.#g.accumRasterTime=0}})}get numGaussians(){return this.#e?.length??0}get numGaussiansVisible(){return this.#Q??0}get performanceProfile(){return this.#a}#B=null;#A=null;#I=null;#t=null;#u=null;#h=null;#d=null;#f=null;#D=null;#g=null;#w=null;#e=null;#c=null;#i=null;#s=null;#C=null;#Q=0;#E=null;#n=!1;#r=!1;#o=null;#l=null;#a={};#v(){let t=this.#t.getContext("webgpu");return t.configure({device:this.#A,format:navigator.gpu.getPreferredCanvasFormat(),alphaMode:"opaque"}),t}#p(){let t=this.#t.width|0,i=this.#t.height|0;if(t==0||i==0)return;let C=navigator.gpu.getPreferredCanvasFormat(),o=this.#A.createTexture({size:[t,i,1],format:C,usage:GPUTextureUsage.RENDER_ATTACHMENT|GPUTextureUsage.TEXTURE_BINDING});return{tex:o,view:o.createView(),sampler:this.#A.createSampler({magFilter:"linear",minFilter:"linear"})}}#G(){let t=this.#A.createShaderModule({label:"gaussian preprocess",code:gt});return this.#A.createComputePipeline({label:"gaussian preprocess",layout:"auto",compute:{module:t,entryPoint:"preprocess",constants:{WORKGROUP_SIZE:rt}}})}#F(){let t=this.#A.createShaderModule({label:"gaussian rasterize",code:it});return this.#A.createRenderPipeline({label:"gaussian",layout:"auto",vertex:{module:t,entryPoint:"vs",buffers:[{stepMode:"vertex",arrayStride:2*H,attributes:[{shaderLocation:0,offset:0,format:"float32x2"}]}]},fragment:{module:t,entryPoint:"fs",targets:[{format:navigator.gpu.getPreferredCanvasFormat(),blend:{alpha:{srcFactor:"one-minus-dst-alpha",dstFactor:"one",operation:"add"},color:{srcFactor:"one-minus-dst-alpha",dstFactor:"one",operation:"add"}}}]},primitive:{topology:"triangle-list",cullMode:"none"}})}#k(){let t=this.#A.createShaderModule({label:"composite",code:st});return this.#A.createRenderPipeline({label:"composite",layout:"auto",vertex:{module:t,entryPoint:"vs"},fragment:{module:t,entryPoint:"fs",targets:[{format:navigator.gpu.getPreferredCanvasFormat(),blend:{color:{srcFactor:"src-alpha",dstFactor:"one-minus-src-alpha",operation:"add"},alpha:{srcFactor:"one",dstFactor:"one-minus-src-alpha",operation:"add"}}}]},primitive:{topology:"triangle-list",cullMode:"none"}})}#R(){return{querySet:this.#A.createQuerySet({type:"timestamp",count:mA}),accumFrames:0,accumTime:0,accumRasterTime:0,accumPreprocessTime:0}}#y(){let t=new Float32Array([-2,-2,2,-2,2,2,-2,2]),i=this.#A.createBuffer({label:"quad vertices",size:t.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});this.#A.queue.writeBuffer(i,0,t);let C=new Uint16Array([0,1,2,0,2,3]),o=this.#A.createBuffer({label:"quad indices",size:C.byteLength,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST});return this.#A.queue.writeBuffer(o,0,C),{vertex:i,index:o}}#N(){let t=0;return t+=16*H,t+=16*H,t+=3*H,t+=1*H,t+=2*H,t+=2*H,t+=1*H,t+=1*eA,t+=1*eA,t+=1*eA,t+=2*H,t+=2*H,t+=2*H,t+=2*eA,this.#A.createBuffer({label:"params",size:t,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST})}#Y(t){let i={};return[{name:"means",alignment:4*H},{name:"scales",alignment:eA},{name:"rotations",alignment:eA},{name:"opacities",alignment:eA},{name:"colors",alignment:eA},{name:"shs",alignment:eA},{name:"velocities",alignment:4*H}].forEach(o=>{i[o.name]=this.#M(this.#i?.[o.name],{label:o.name,size:this.#J(t[o.name].byteLength,o.alignment),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),this.#x(i[o.name],t[o.name])}),i.sortedIndices=this.#M(this.#i?.sortedIndices,{label:"sorted indices",size:Math.max(t.length,1)*eA,usage:GPUBufferUsage.COPY_DST|GPUBufferUsage.STORAGE}),i.rendered=this.#M(this.#i?.rendered,{label:"rendered gaussians",size:Math.max(t.length,1)*12*H,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST|GPUBufferUsage.INDIRECT}),i}#S(t,i,C,o,h,D){let d=new ArrayBuffer(this.#C.size),p=new Float32Array(d),y=new Uint32Array(d),l=0;p.set(t,l),l+=16,p.set(i,l),l+=16,p.set(C,l),l+=3,p.set([D],l),l+=1,p.set(o,l),l+=2,p.set(h,l),l+=2,p.set([this.#c??0],l),l+=1,y.set([this.#Q],l),l+=1,y.set([Number(this.#e.dynamic)],l),l+=1,y.set([this.#e.shDegree],l),l+=1,p.set([this.#e.scaleMin,this.#e.scaleMax],l),l+=2,p.set([this.#e.colorMin,this.#e.colorMax],l),l+=2,p.set([this.#e.shMin,this.#e.shMax],l),l+=2,this.#A.queue.writeBuffer(this.#C,0,d)}#m(){let t=this.#A.createBindGroup({label:"gaussian preprocess",layout:this.#d.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.#C}},{binding:1,resource:{buffer:this.#i.means}},{binding:2,resource:{buffer:this.#i.scales}},{binding:3,resource:{buffer:this.#i.rotations}},{binding:4,resource:{buffer:this.#i.opacities}},{binding:5,resource:{buffer:this.#i.colors}},{binding:6,resource:{buffer:this.#i.shs}},{binding:7,resource:{buffer:this.#i.velocities}},{binding:8,resource:{buffer:this.#i.sortedIndices}},{binding:9,resource:{buffer:this.#i.rendered}}]}),i=this.#A.createBindGroup({label:"gaussian rasterize",layout:this.#f.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.#C}},{binding:1,resource:{buffer:this.#i.rendered}}]}),C=this.#A.createBindGroup({label:"composite",layout:this.#D.getBindGroupLayout(0),entries:[{binding:0,resource:this.#h.view},{binding:1,resource:this.#h.sampler}]});return{preprocess:t,rasterize:i,composite:C}}#U(t,i){if(this.#o==null)return!0;let C=this.#o.view,o=[t[2],t[6],t[10]],h=[t[12],t[13],t[14]],D=[C[2],C[6],C[10]],d=[C[12],C[13],C[14]],p=1-(o[0]*D[0]+o[1]*D[1]+o[2]*D[2]),y=Math.pow(h[0]-d[0],2)+Math.pow(h[1]-d[1],2)+Math.pow(h[2]-d[2],2),l=Math.abs(i-this.#o.time);return p>pi||y>yi||l>mi}#b(t){this.#Q=t.length,this.#A.queue.writeBuffer(this.#i.sortedIndices,0,t)}#M(t,i){return t==null||t.size<i.size?(t?.destroy(),this.#A.createBuffer(i)):t}#x(t,i){let C,o,h;i instanceof ArrayBuffer?(C=i,o=0,h=i.byteLength):(C=i.buffer,o=i.byteOffset,h=i.byteLength);let D=h&-4;D>0&&this.#A.queue.writeBuffer(t,0,C,o,D);let d=h-D;if(d>0){let p=new Uint8Array(4);p.set(new Uint8Array(C,o+D,d)),this.#A.queue.writeBuffer(t,D,p,0,4)}}#J(t,i){return t==0?i:t+i-1&~(i-1)}},at=re;import{mat4 as Y,vec3 as c}from"gl-matrix";var GA=class R{constructor(){if(new.target===R)throw new Error("Cannot instantiate abstract class Camera directly");this.keysPressed=new Set,this.mouseDown=!1,this.mouseX=0,this.mouseY=0}getViewMatrix(){return null}getProjMatrix(t){let i=this.fov||80;return Y.perspective(Y.create(),i*Math.PI/180,t,.01,100)}getParams(){return{}}onMouseDown(t){t.button===0&&(this.mouseDown=!0)}onMouseUp(t){t.button===0&&(this.mouseDown=!1)}onMouseMove(t){this.mouseX=t.clientX,this.mouseY=t.clientY}onDoubleClick(t){}onScroll(t){}onTouchStart(t){t.touches.length===1&&(this.mouseDown=!0),this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY}onTouchEnd(t){t.touches.length===1&&(this.mouseDown=!1)}onTouchMove(t){this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY}onKeyDown(t){this.keysPressed.add(t.code)}onKeyUp(t){this.keysPressed.delete(t.code)}update(t){}_editingSomething(){let t=document.activeElement;return t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.isContentEditable)}attachToCanvas(t){this._onMouseDown=i=>this.onMouseDown(i),this._onMouseUp=i=>this.onMouseUp(i),this._onMouseMove=i=>this.onMouseMove(i),this._onMouseLeave=i=>this.onMouseUp(i),this._onDoubleClick=i=>this.onDoubleClick(i),this._onWheel=i=>{this.onScroll!==R.prototype.onScroll&&i.preventDefault(),this.onScroll(i.deltaY)},this._onTouchStart=i=>{this.onTouchStart!=R.prototype.onTouchStart&&i.preventDefault(),this.onTouchStart(i)},this._onTouchMove=i=>{this.onTouchMove!=R.prototype.onTouchMove&&i.preventDefault(),this.onTouchMove(i)},this._onTouchEnd=i=>{this.onTouchEnd!=R.prototype.onTouchEnd&&i.preventDefault(),this.onTouchEnd(i)},this._onKeyDown=i=>{this._editingSomething()||(i.code==="Space"&&i.preventDefault(),this.onKeyDown(i))},this._onKeyUp=i=>{this._editingSomething()||(i.code==="Space"&&i.preventDefault(),this.onKeyUp(i))},t.addEventListener("mousedown",this._onMouseDown),t.addEventListener("mouseup",this._onMouseUp),t.addEventListener("mousemove",this._onMouseMove),t.addEventListener("mouseleave",this._onMouseLeave),t.addEventListener("dblclick",this._onDoubleClick),t.addEventListener("wheel",this._onWheel),t.addEventListener("touchstart",this._onTouchStart),t.addEventListener("touchmove",this._onTouchMove),t.addEventListener("touchend",this._onTouchEnd),window.addEventListener("keydown",this._onKeyDown),window.addEventListener("keyup",this._onKeyUp),this._canvas=t}detachFromCanvas(){this._canvas&&(this._canvas.removeEventListener("mousedown",this._onMouseDown),this._canvas.removeEventListener("mouseup",this._onMouseUp),this._canvas.removeEventListener("mousemove",this._onMouseMove),this._canvas.removeEventListener("mouseleave",this._onMouseLeave),this._canvas.removeEventListener("dblclick",this._onDoubleClick),this._canvas.removeEventListener("wheel",this._onWheel),this._canvas.removeEventListener("touchstart",this._onTouchStart),this._canvas.removeEventListener("touchmove",this._onTouchMove),this._canvas.removeEventListener("touchend",this._onTouchEnd),window.removeEventListener("keydown",this._onKeyDown),window.removeEventListener("keyup",this._onKeyUp),this._canvas=null)}},cA=class extends GA{constructor(t={}){super(),this.fov=t.fov||80,this.sens=t.sens||.003,this.panSens=t.panSens||.0025,this.scrollSens=t.scrollSens||.0025,this.keyMoveSpeed=t.keyMoveSpeed||.02,this.minRadius=t.minRadius||.5,this.maxRadius=t.maxRadius||3,this.targetRadius=t.radius||(this.minRadius+this.maxRadius)/2,this.radius=this.targetRadius,this.targetTheta=t.theta||0,this.theta=this.targetTheta,this.targetPhi=t.phi||0,this.phi=this.targetPhi,this.targetPos=c.fromValues(t.targetX||0,t.targetY||0,t.targetZ||0),this.pos=this.targetPos,this.mouseX=t.mouseX||0,this.mouseY=t.mouseY||0,this.rotating=t.startRotating||!1,this.dragging=t.startRotating||!1,this.pinchStartDistance=0}getViewMatrix(){let t=c.fromValues(this.pos[0]+this.radius*Math.sin(this.theta)*Math.cos(this.phi),this.pos[1]+this.radius*Math.sin(this.phi),this.pos[2]+this.radius*Math.cos(this.theta)*Math.cos(this.phi));return Y.lookAt(Y.create(),t,this.pos,c.fromValues(0,1,0))}getParams(){return{fov:this.fov,sens:this.sens,panSens:this.panSens,scrollSens:this.scrollSens,radius:this.radius,minRadius:this.minRadius,maxRadius:this.maxRadius,theta:this.theta,phi:this.phi,targetX:this.pos[0],targetY:this.pos[1],targetZ:this.pos[2],mouseX:this.mouseX,mouseY:this.mouseY,startRotating:this.rotating||this.dragging}}onMouseDown(t){if(t.button===0)this.rotating=!0;else return;this.mouseX=t.clientX,this.mouseY=t.clientY}onMouseUp(t){this.rotating=!1}onDoubleClick(t){this.targetRadius/=2}onMouseMove(t){if(this.rotating){let i=t.clientX-this.mouseX,C=t.clientY-this.mouseY;this.targetTheta+=i*this.sens,this.targetPhi-=C*this.sens,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2+.01),this.targetPhi=Math.min(this.targetPhi,Math.PI/2-.01)}this.mouseX=t.clientX,this.mouseY=t.clientY}onScroll(t){this.targetRadius+=t*this.scrollSens,this.targetRadius=Math.max(this.targetRadius,this.minRadius),this.targetRadius=Math.min(this.targetRadius,this.maxRadius)}onTouchStart(t){if(t.touches.length===1)this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY,this.dragging=!0;else if(t.touches.length===2){this.dragging=!1;let i=t.touches[0],C=t.touches[1];this.pinchStartDistance=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY)}}onTouchMove(t){if(t.touches.length===1&&this.dragging){let i=t.touches[0],C=i.clientX-this.mouseX,o=i.clientY-this.mouseY;this.targetTheta+=C*this.sens,this.targetPhi-=o*this.sens,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2),this.targetPhi=Math.min(this.targetPhi,Math.PI/2),this.mouseX=i.clientX,this.mouseY=i.clientY}else if(t.touches.length===2){let i=t.touches[0],C=t.touches[1],o=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY),h=this.pinchStartDistance-o;this.onScroll(h),this.pinchStartDistance=o}}onTouchEnd(t){t.touches.length===0?this.dragging=!1:t.touches.length===1&&(this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY)}update(t){super.update(t);let i=1-Math.pow(.99,t);this.pos=c.add(c.create(),this.pos,c.scale(c.create(),c.sub(c.create(),this.targetPos,this.pos),i)),this.radius+=(this.targetRadius-this.radius)*i,this.theta+=(this.targetTheta-this.theta)*i,this.phi+=(this.targetPhi-this.phi)*i,this.keysPressed.size>0&&this.handleKeyboardMovement(t)}handleKeyboardMovement(t){let i=this.keyMoveSpeed*(t/16.67),C=Math.cos(this.targetTheta),o=-Math.sin(this.targetTheta),h=-Math.sin(this.targetTheta),D=-Math.cos(this.targetTheta),d=0,p=0,y=0;this.keysPressed.has("KeyW")&&(d+=h,y+=D),this.keysPressed.has("KeyS")&&(d-=h,y-=D),this.keysPressed.has("KeyA")&&(d+=C,y+=o),this.keysPressed.has("KeyD")&&(d-=C,y-=o),this.keysPressed.has("Space")&&(p-=1),this.keysPressed.has("ShiftLeft")&&(p+=1),this.targetPos=c.add(c.create(),this.targetPos,c.scale(c.create(),c.normalize(c.create(),c.fromValues(d,p,y)),i))}},LA=class extends GA{constructor(t={}){super(),this.fov=t.fov||80,this.baseTheta=t.baseTheta||Math.PI/4,this.basePhi=t.basePhi||Math.PI/4,this.targetTheta=t.theta||this.baseTheta,this.targetPhi=t.phi||this.basePhi,this.targetRadius=t.radius||1.5,this.theta=this.targetTheta,this.phi=this.targetPhi,this.radius=this.targetRadius,this.minRadius=t.minRadius||.5,this.maxRadius=t.maxRadius||3,this.targetX=t.targetX||0,this.targetY=t.targetY||0,this.targetZ=t.targetZ||0,this.sens=t.sens||.003,this.scrollSens=t.scrollSens||.0025,this.resistance=t.resistance||.25,this.deadZone=t.deadZone||.1,this.snapSmoothness=t.snapSmoothness||.9925,this.valueSmoothness=t.valueSmoothness||.9925,this.radiusSmoothness=t.radiusSmoothness||.99,this.mouseX=t.mouseX||0,this.mouseY=t.mouseY||0,this.rotating=t.startRotating||!1,this.pinchStartDistance=0,this.canvas=null}attachToCanvas(t){super.attachToCanvas(t),this.canvas=t}getViewMatrix(){let t=this.targetX+this.radius*Math.sin(this.theta)*Math.cos(this.phi),i=this.targetY+this.radius*Math.sin(this.phi),C=this.targetZ+this.radius*Math.cos(this.theta)*Math.cos(this.phi);return Y.lookAt(Y.create(),c.fromValues(t,i,C),c.fromValues(this.targetX,this.targetY,this.targetZ),c.fromValues(0,1,0))}onMouseDown(t){t.button===0&&(this.rotating=!0,this.mouseX=t.clientX,this.mouseY=t.clientY,this.targetTheta=this.theta,this.targetPhi=this.phi,this.targetRadius=this.radius)}onMouseUp(t){t.button===0&&(this.rotating=!1)}onMouseMove(t){if(!this.rotating){this.mouseX=t.clientX,this.mouseY=t.clientY;return}let i=t.clientX-this.mouseX,C=t.clientY-this.mouseY,o=this.targetTheta-this.baseTheta,h=this.targetPhi-this.basePhi,D=this.#B(o,h,this.resistance);this.targetTheta+=i*this.sens*D,this.targetPhi-=C*this.sens*D,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2+.01),this.targetPhi=Math.min(this.targetPhi,Math.PI/2-.01),this.mouseX=t.clientX,this.mouseY=t.clientY}onScroll(t){this.targetRadius+=t*this.scrollSens,this.targetRadius=Math.max(this.targetRadius,this.minRadius),this.targetRadius=Math.min(this.targetRadius,this.maxRadius)}onTouchStart(t){if(t.touches.length===1){let i=t.touches[0];this.rotating=!0,this.mouseX=i.clientX,this.mouseY=i.clientY}else if(t.touches.length===2){this.rotating=!1;let i=t.touches[0],C=t.touches[1];this.pinchStartDistance=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY)}}onTouchMove(t){if(t.touches.length===1&&this.rotating){let i=t.touches[0],C=i.clientX-this.mouseX,o=i.clientY-this.mouseY,h=this.targetTheta-this.baseTheta,D=this.targetPhi-this.basePhi,d=this.#B(h,D,this.resistance);this.targetTheta+=C*this.sens*d,this.targetPhi-=o*this.sens*d,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2+.01),this.targetPhi=Math.min(this.targetPhi,Math.PI/2-.01),this.mouseX=i.clientX,this.mouseY=i.clientY}else if(t.touches.length===2){let i=t.touches[0],C=t.touches[1],o=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY),h=this.pinchStartDistance-o;this.onScroll(h),this.pinchStartDistance=o}}onTouchEnd(t){if(t.touches.length===0)this.rotating=!1;else if(t.touches.length===1){let i=t.touches[0];this.mouseX=i.clientX,this.mouseY=i.clientY}}update(t){super.update(t);let i=1-Math.pow(this.snapSmoothness,t),C=1-Math.pow(this.valueSmoothness,t);if(this.rotating)this.theta=this.targetTheta,this.phi=this.targetPhi,this.radius=this.targetRadius;else{let o=this.#A(this.targetTheta,this.targetPhi,this.baseTheta,this.basePhi,this.deadZone);this.targetTheta+=(o.theta-this.targetTheta)*i,this.targetPhi+=(o.phi-this.targetPhi)*i,this.theta+=(this.targetTheta-this.theta)*C,this.phi+=(this.targetPhi-this.phi)*C,this.radius+=(this.targetRadius-this.radius)*(1-Math.pow(this.radiusSmoothness,t))}}#B(t,i,C){let h=Math.hypot(t,i)/(1-C);return 1/(1+h*h)}#A(t,i,C,o,h){let D=t-C,d=i-o,p=Math.hypot(D,d);if(p<=h)return{theta:t,phi:i};{let y=h/p;return{theta:C+D*y,phi:o+d*y}}}getParams(){return{fov:this.fov,baseTheta:this.baseTheta,basePhi:this.basePhi,theta:this.theta,phi:this.phi,radius:this.radius,minRadius:this.minRadius,maxRadius:this.maxRadius,targetX:this.targetX,targetY:this.targetY,targetZ:this.targetZ,sens:this.sens,scrollSens:this.scrollSens,resistance:this.resistance,deadZone:this.deadZone,snapSmoothness:this.snapSmoothness,valueSmoothness:this.valueSmoothness,radiusSmoothness:this.radiusSmoothness,startRotating:this.mouseDown,mouseX:this.mouseX,mouseY:this.mouseY}}},PA=class extends GA{constructor(t={}){super(),this.screenPos=t.screenPos||[0,0,1],this.screenTarget=t.screenTarget||[0,0,0],this.screenScale=t.screenScale||1,this.eyePosWorld=t.eyePosWorld||[0,0,1],this.worldToVoxelScale=t.worldToVoxelScale||1,this.screenTransform=Y.invert(Y.create(),Y.lookAt(Y.create(),this.screenPos,this.screenTarget,[0,1,0]))}getViewMatrix(t){return this.#B(t).view}getProjMatrix(t){return this.#B(t).proj}#B(t){var o=t>1?1:t,h=t>1?1/t:1;o*=this.screenScale,h*=this.screenScale;let D=c.transformMat4(c.create(),c.fromValues(-o,-h,0),this.screenTransform),d=c.transformMat4(c.create(),c.fromValues(o,-h,0),this.screenTransform),p=c.transformMat4(c.create(),c.fromValues(-o,h,0),this.screenTransform),y=c.scale(c.create(),this.eyePosWorld,this.worldToVoxelScale);y[1]+=h,y[2]=Math.max(y[2],1e-4);let l=c.transformMat4(c.create(),y,this.screenTransform),N=c.sub(c.create(),d,D),J=c.sub(c.create(),p,D),_=c.sub(c.create(),D,l),W=c.sub(c.create(),d,l),X=c.sub(c.create(),p,l);N=c.normalize(c.create(),N),J=c.normalize(c.create(),J);let M=c.scale(c.create(),c.cross(c.create(),N,J),1),V=-c.dot(_,M),z=c.dot(N,_)*.01/V,j=c.dot(N,W)*.01/V,U=c.dot(J,_)*.01/V,v=c.dot(J,X)*.01/V,G=Y.create();G[0]=2*.01/(j-z),G[4]=0,G[8]=(j+z)/(j-z),G[12]=0,G[1]=0,G[5]=2*.01/(v-U),G[9]=(v+U)/(v-U),G[13]=0,G[2]=0,G[6]=0,G[10]=(100+.01)/(.01-100),G[14]=200*.01/(.01-100),G[3]=0,G[7]=0,G[11]=-1,G[15]=0;let m=Y.create();m[0]=N[0],m[4]=N[1],m[8]=N[2],m[12]=0,m[1]=J[0],m[5]=J[1],m[9]=J[2],m[13]=0,m[2]=M[0],m[6]=M[1],m[10]=M[2],m[14]=0,m[3]=0,m[7]=0,m[11]=0,m[15]=1;let QA=Y.translate(Y.create(),Y.identity(Y.create()),c.scale(c.create(),l,-1));return{view:Y.mul(Y.create(),m,QA),proj:G}}getParams(){return{screenPos:this.screenPos,screenTarget:this.screenTarget,screenScale:this.screenScale,eyePosWorld:this.eyePosWorld,worldToVoxelScale:this.worldToVoxelScale,startRotating:this.mouseDown,mouseX:this.mouseX,mouseY:this.mouseY}}};var Be,Gi=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";Gi?(Be=class extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"open"});TA.then(o=>{this.#B=o,this.#Y()});let i=document.createElement("div");i.style.position="relative",i.style.width="100%",i.style.height="100%",i.style.overflow="hidden",t.appendChild(i),this.#A=document.createElement("canvas"),Object.assign(this.#A.style,{width:"100%",height:"100%",display:"block"}),i.appendChild(this.#A),this.#o=document.createElement("div"),Object.assign(this.#o.style,{position:"absolute",display:"none",top:"1%",left:"1%",background:"rgba(0,0,0,0.4)",padding:"8px 8px",borderRadius:"8px",backdropFilter:"blur(6px)",pointerEvents:"auto",userSelect:"none"}),i.appendChild(this.#o),this.#l=document.createElement("div"),Object.assign(this.#l.style,{display:"block",color:"white",fontFamily:"monospace",fontSize:"12px",whiteSpace:"pre",marginBottom:"10px"}),this.#o.appendChild(this.#l);let C=document.createElement("div");C.textContent="Show Camera Params \u25BC",Object.assign(C.style,{display:"block",cursor:"pointer",color:"white",fontFamily:"monospace",fontSize:"12px"}),this.#o.appendChild(C),this.#a=document.createElement("pre"),Object.assign(this.#a.style,{display:"none",color:"white",fontFamily:"monospace",fontSize:"12px",whiteSpace:"pre"}),this.#o.appendChild(this.#a),C.addEventListener("click",()=>{this.#a.style.display==="none"?(this.#a.style.display="block",C.textContent="Hide Camera Params \u25B2"):(this.#a.style.display="none",C.textContent="Show Camera Params \u25BC")}),this.#a.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(this.#a.textContent);let o=this.#a.style.color;this.#a.style.color="rgba(255,255,255,0.2)",setTimeout(()=>{this.#a.style.color=o||"transparent"},200)}catch(o){console.error("Failed to copy camera JSON:",o)}}),this.#E=document.createElement("div"),Object.assign(this.#E.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"}),i.appendChild(this.#E),this.#n=document.createElement("button"),this.#n.type="button",Object.assign(this.#n.style,{border:"none",background:"transparent",color:"white",fontSize:"24px",cursor:"pointer",padding:"4px",flexShrink:"0"}),this.#n.addEventListener("click",()=>{this.#Q=!this.#Q,this.#e.length==1&&this.#s>=this.#e[0].metadata.duration&&(this.#s=0)}),this.#E.appendChild(this.#n),this.#r=document.createElement("input"),this.#r.type="range",this.#r.min=0,this.#r.max=1,this.#r.step=.001,this.#r.value=0,Object.assign(this.#r.style,{flex:"1 1 auto",minWidth:"120px",maxWidth:"100%",cursor:"pointer",accentColor:"#fff"}),this.#C=!1,this.#r.addEventListener("input",()=>{this.#s=parseFloat(this.#r.value)}),this.#r.addEventListener("pointerdown",()=>{this.#C=!0}),this.#r.addEventListener("pointerup",()=>{this.#C=!1}),this.#E.appendChild(this.#r),this.#I=new at(this.#A),this.#t=new cA}connectedCallback(){this.#t.attachToCanvas(this.#A),this.#u=new ResizeObserver(t=>{let i=t[0],C=Math.round(i.contentBoxSize[0].inlineSize*window.devicePixelRatio),o=Math.round(i.contentBoxSize[0].blockSize*window.devicePixelRatio),h=i.target;h.width=C,h.height=o,this.#I.resize()}),this.clear(),this.#I.initialize().then(()=>{this.#u.observe(this.#A),requestAnimationFrame(t=>{this.#v(t)})})}disconnectedCallback(){this.#t.detachFromCanvas(),this.#u.disconnect()}static get observedAttributes(){return["src","scene","camera","background-color","loop","autoplay","controls","point-size","time-scale","debug"]}attributeChangedCallback(t,i,C){if(i!==C)switch(t){case"src":{C==null?this.#p(null):this.#R(C).then(o=>{this.#m(()=>{C.endsWith(".ply")?this.#p(this.#k(o)):this.#p(this.#F(o))})});break}case"scene":{C==null?this.#G(null):this.#R(C).then(o=>{this.#m(()=>{C.endsWith(".ply")?this.#G(this.#k(o)):this.#G(this.#F(o)),this.#c=!0})});break}case"camera":{let o="default",h={};try{h=JSON.parse(C),o=h.type}catch{}this.setCamera(o,h);break}case"background-color":{try{let o=this.getAttribute("background-color").split(" ").map(h=>Number(h)/255);o.length===3&&(this.#w.backgroundColor=o)}catch{}break}case"loop":this.#h=this.hasAttribute("loop");break;case"autoplay":this.#d=this.hasAttribute("autoplay");break;case"controls":this.#f=this.hasAttribute("controls");break;case"time-scale":try{this.#D=Number(this.getAttribute("time-scale"))}catch{}break;case"point-size":this.#I.setPointSize(C);break;case"debug":this.#g=this.hasAttribute("debug");break;default:break}}play(){this.#Q=!0}pause(){this.#Q=!1}enqueue(t){this.#m(()=>{this.#e.push(this.#F(t))})}clear(){this.#m(()=>{this.#e=[{gaussians:new this.#B.Gaussians,metadata:{duration:0}}],this.#c=!0})}setCamera(t,i){this.#t.detachFromCanvas(),t==="default"?this.#t=new cA(i):t==="snap"?this.#t=new LA(i):t==="window"?this.#t=new PA(i):(console.warn("Invalid camera provided, defaulting to 'default'"),this.#t=new cA),this.#t.attachToCanvas(this.#A)}get paused(){return!this.#Q}get currentTime(){return this.#s}set currentTime(t){let i=this.#e[0].metadata.duration;if(t<0||t>i){console.warn("Setting out-of-bounds currentTime");return}this.#s=t}get currentSegment(){return this.#e[0]}#B=null;#A=null;#I=null;#t=null;#u=null;#h=!1;#d=!1;#f=!1;#D=1;#g=!1;#w={};#e=[];#c=!1;#i=null;#s=0;#C=!1;#Q=!1;#E=null;#n=null;#r=null;#o=null;#l=null;#a=null;#v(t){t/=1e3;var i=0;this.#i&&(i=t-this.#i),this.#Q&&!this.#C&&(this.#s+=i*this.#D);let C=this.#e[0],o=C.metadata.duration,h=!1;for(;this.#s>=o&&this.#e.length>1;)o>0&&this.onSegmentEnd?.(!1),this.#s-=o,this.#e.shift(),C=this.#e[0],o=C.metadata.duration,h=!0;(h||this.#c)&&(this.#I.setGaussians(C.gaussians),this.#c=!1),this.#h?this.#s%=o>0?o:1:this.#s>o&&(o>0&&this.onSegmentEnd?.(!0),this.#s=o,this.#Q=!1);let D=this.#f&&o>0;Object.assign(this.#E.style,{display:D?"flex":"none"}),this.#n.textContent=this.#Q?"\u23F8\uFE0F":"\u25B6\uFE0F",this.#r.max=o,!this.#C&&this.#r&&(this.#r.value=this.#s),this.#i=t,this.#t.update(i*1e3);let d=this.#t.getViewMatrix(this.#A.width/this.#A.height),p=this.#t.getProjMatrix(this.#A.width/this.#A.height),y=this.#s/(o>0?o:1);this.#I.draw(d,p,y,this.#w,this.#g);let l=this.#I.performanceProfile;Object.assign(this.#o.style,{display:this.#g?"block":"none"}),this.#l.textContent=`Time: ${this.#s.toFixed(3)} / ${o.toFixed(3)} s
-Num Gaussians Visible: ${this.#I.numGaussiansVisible} / ${this.#I.numGaussians}
+	}`;var H=Float32Array.BYTES_PER_ELEMENT,eA=Uint32Array.BYTES_PER_ELEMENT,rt=64,mA=4,pi=.001,yi=.001,mi=0,re=class{constructor(t){this.#g=t}async initialize(){this.#r=await TA,this.#A=await ie,this.#Q=await _A,this.#u=this.#p(),this.#l=this.#a(),this.#d=this.#R(),this.#f=this.#F(),this.#D=this.#N(),this.#n=this.#Y(),this.#h=this.#S(),this.#Q.features.has("timestamp-query")&&(this.#i=this.#v())}resize(){this.#l=this.#a()}setGaussians(t){this.#B=this.#w?this.#r.combine(t,this.#w):t,this.#e=this.#y(this.#B);let i=new yA(this.#B,(C,o)=>{this.#E=!1,this.#c==i&&(this.#m(C),this.#I=!0,this.#o.lastSortTime=o)});this.#I=!1,this.#C=null,this.#c=i}setScene(t){this.#w=t}setPointSize(t){this.#G=t}draw(t,i,C,o={},h=!1){if(!this.#B||(this.#i==null&&(h=!1),!this.#E&&this.#U(t,C)&&(this.#E=!0,this.#c.sort(t,i,C),this.#C={view:t.slice(),time:C}),!this.#I))return;let D=performance.now();var d=0;this.#s&&(d=D-this.#s),this.#s=D;let p=se.transformMat4(se.create(),se.fromValues(0,0,0),Bt.invert(Bt.create(),t)),y=[i[0]*(this.#g.width/2),i[5]*(this.#g.height/2)],l=[this.#g.width,this.#g.height];this.#k(t,i,p,y,l,C);let N=this.#M(),J=null,_=null;h&&(J=this.#A.createBuffer({size:mA*8,usage:GPUBufferUsage.QUERY_RESOLVE|GPUBufferUsage.COPY_SRC}),_=this.#A.createBuffer({size:mA*8,usage:GPUBufferUsage.COPY_DST|GPUBufferUsage.MAP_READ}));let W=this.#A.createCommandEncoder(),X=W.beginComputePass({timestampWrites:h?{querySet:this.#i.querySet,beginningOfPassWriteIndex:0,endOfPassWriteIndex:1}:void 0});X.setPipeline(this.#d),X.setBindGroup(0,N.preprocess),this.#t>0&&X.dispatchWorkgroups(Math.ceil(this.#t/rt)),X.end();let M=W.beginRenderPass({label:"main",colorAttachments:[{view:this.#l.view,clearValue:{r:0,g:0,b:0,a:0},loadOp:"clear",storeOp:"store"}],timestampWrites:h?{querySet:this.#i.querySet,beginningOfPassWriteIndex:2,endOfPassWriteIndex:3}:void 0});M.setPipeline(this.#f),M.setVertexBuffer(0,this.#n.vertex),M.setIndexBuffer(this.#n.index,"uint16"),M.setBindGroup(0,N.rasterize),this.#t>0&&M.drawIndexed(6,this.#t),M.end();let V=o.backgroundColor??[0,0,0],z=W.beginRenderPass({label:"composite",colorAttachments:[{view:this.#u.getCurrentTexture().createView(),clearValue:{r:V[0],g:V[1],b:V[2],a:1},loadOp:"clear",storeOp:"store"}]});z.setPipeline(this.#D),z.setBindGroup(0,N.composite),z.draw(3),z.end(),h&&(W.resolveQuerySet(this.#i.querySet,0,mA,J,0),W.copyBufferToBuffer(J,0,_,0,mA*8)),this.#A.queue.submit([W.finish()]),h&&_.mapAsync(GPUMapMode.READ).then(()=>{let j=_.getMappedRange(),U=new BigUint64Array(j);if(this.#i.accumFrames++,this.#i.accumTime+=d,this.#i.accumPreprocessTime+=Number(U[1]-U[0]),this.#i.accumRasterTime+=Number(U[3]-U[2]),_.unmap(),this.#i.accumTime>=1e3){let v=this.#i.accumPreprocessTime/1e6/this.#i.accumFrames,G=this.#i.accumRasterTime/1e6/this.#i.accumFrames,m=v+G;this.#o.preprocessTime=v,this.#o.rasterTime=G,this.#o.totalTime=m,this.#i.accumFrames=0,this.#i.accumTime=0,this.#i.accumPreprocessTime=0,this.#i.accumRasterTime=0}})}get numGaussians(){return this.#B?.length??0}get numGaussiansVisible(){return this.#t??0}get performanceProfile(){return this.#o}#r=null;#A=null;#Q=null;#g=null;#u=null;#l=null;#d=null;#f=null;#D=null;#i=null;#w=null;#B=null;#G=null;#e=null;#n=null;#h=null;#t=0;#c=null;#I=!1;#E=!1;#C=null;#s=null;#o={};#p(){let t=this.#g.getContext("webgpu");return t.configure({device:this.#A,format:navigator.gpu.getPreferredCanvasFormat(),alphaMode:"opaque"}),t}#a(){let t=this.#g.width|0,i=this.#g.height|0;if(t==0||i==0)return;let C=navigator.gpu.getPreferredCanvasFormat(),o=this.#A.createTexture({size:[t,i,1],format:C,usage:GPUTextureUsage.RENDER_ATTACHMENT|GPUTextureUsage.TEXTURE_BINDING});return{tex:o,view:o.createView(),sampler:this.#A.createSampler({magFilter:"linear",minFilter:"linear"})}}#R(){let t=this.#A.createShaderModule({label:"gaussian preprocess",code:gt});return this.#A.createComputePipeline({label:"gaussian preprocess",layout:"auto",compute:{module:t,entryPoint:"preprocess",constants:{WORKGROUP_SIZE:rt}}})}#F(){let t=this.#A.createShaderModule({label:"gaussian rasterize",code:it});return this.#A.createRenderPipeline({label:"gaussian",layout:"auto",vertex:{module:t,entryPoint:"vs",buffers:[{stepMode:"vertex",arrayStride:2*H,attributes:[{shaderLocation:0,offset:0,format:"float32x2"}]}]},fragment:{module:t,entryPoint:"fs",targets:[{format:navigator.gpu.getPreferredCanvasFormat(),blend:{alpha:{srcFactor:"one-minus-dst-alpha",dstFactor:"one",operation:"add"},color:{srcFactor:"one-minus-dst-alpha",dstFactor:"one",operation:"add"}}}]},primitive:{topology:"triangle-list",cullMode:"none"}})}#N(){let t=this.#A.createShaderModule({label:"composite",code:st});return this.#A.createRenderPipeline({label:"composite",layout:"auto",vertex:{module:t,entryPoint:"vs"},fragment:{module:t,entryPoint:"fs",targets:[{format:navigator.gpu.getPreferredCanvasFormat(),blend:{color:{srcFactor:"src-alpha",dstFactor:"one-minus-src-alpha",operation:"add"},alpha:{srcFactor:"one",dstFactor:"one-minus-src-alpha",operation:"add"}}}]},primitive:{topology:"triangle-list",cullMode:"none"}})}#v(){return{querySet:this.#A.createQuerySet({type:"timestamp",count:mA}),accumFrames:0,accumTime:0,accumRasterTime:0,accumPreprocessTime:0}}#Y(){let t=new Float32Array([-2,-2,2,-2,2,2,-2,2]),i=this.#A.createBuffer({label:"quad vertices",size:t.byteLength,usage:GPUBufferUsage.VERTEX|GPUBufferUsage.COPY_DST});this.#A.queue.writeBuffer(i,0,t);let C=new Uint16Array([0,1,2,0,2,3]),o=this.#A.createBuffer({label:"quad indices",size:C.byteLength,usage:GPUBufferUsage.INDEX|GPUBufferUsage.COPY_DST});return this.#A.queue.writeBuffer(o,0,C),{vertex:i,index:o}}#S(){let t=0;return t+=16*H,t+=16*H,t+=3*H,t+=1*H,t+=2*H,t+=2*H,t+=1*H,t+=1*eA,t+=1*eA,t+=1*eA,t+=2*H,t+=2*H,t+=2*H,t+=2*eA,this.#A.createBuffer({label:"params",size:t,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST})}#y(t){let i={};return[{name:"means",alignment:4*H},{name:"scales",alignment:eA},{name:"rotations",alignment:eA},{name:"opacities",alignment:eA},{name:"colors",alignment:eA},{name:"shs",alignment:eA},{name:"velocities",alignment:4*H}].forEach(o=>{i[o.name]=this.#b(this.#e?.[o.name],{label:o.name,size:this.#J(t[o.name].byteLength,o.alignment),usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST}),this.#x(i[o.name],t[o.name])}),i.sortedIndices=this.#b(this.#e?.sortedIndices,{label:"sorted indices",size:Math.max(t.length,1)*eA,usage:GPUBufferUsage.COPY_DST|GPUBufferUsage.STORAGE}),i.rendered=this.#b(this.#e?.rendered,{label:"rendered gaussians",size:Math.max(t.length,1)*12*H,usage:GPUBufferUsage.STORAGE|GPUBufferUsage.COPY_DST|GPUBufferUsage.INDIRECT}),i}#k(t,i,C,o,h,D){let d=new ArrayBuffer(this.#h.size),p=new Float32Array(d),y=new Uint32Array(d),l=0;p.set(t,l),l+=16,p.set(i,l),l+=16,p.set(C,l),l+=3,p.set([D],l),l+=1,p.set(o,l),l+=2,p.set(h,l),l+=2,p.set([this.#G??0],l),l+=1,y.set([this.#t],l),l+=1,y.set([Number(this.#B.dynamic)],l),l+=1,y.set([this.#B.shDegree],l),l+=1,p.set([this.#B.scaleMin,this.#B.scaleMax],l),l+=2,p.set([this.#B.colorMin,this.#B.colorMax],l),l+=2,p.set([this.#B.shMin,this.#B.shMax],l),l+=2,this.#A.queue.writeBuffer(this.#h,0,d)}#M(){let t=this.#A.createBindGroup({label:"gaussian preprocess",layout:this.#d.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.#h}},{binding:1,resource:{buffer:this.#e.means}},{binding:2,resource:{buffer:this.#e.scales}},{binding:3,resource:{buffer:this.#e.rotations}},{binding:4,resource:{buffer:this.#e.opacities}},{binding:5,resource:{buffer:this.#e.colors}},{binding:6,resource:{buffer:this.#e.shs}},{binding:7,resource:{buffer:this.#e.velocities}},{binding:8,resource:{buffer:this.#e.sortedIndices}},{binding:9,resource:{buffer:this.#e.rendered}}]}),i=this.#A.createBindGroup({label:"gaussian rasterize",layout:this.#f.getBindGroupLayout(0),entries:[{binding:0,resource:{buffer:this.#h}},{binding:1,resource:{buffer:this.#e.rendered}}]}),C=this.#A.createBindGroup({label:"composite",layout:this.#D.getBindGroupLayout(0),entries:[{binding:0,resource:this.#l.view},{binding:1,resource:this.#l.sampler}]});return{preprocess:t,rasterize:i,composite:C}}#U(t,i){if(this.#C==null)return!0;let C=this.#C.view,o=[t[2],t[6],t[10]],h=[t[12],t[13],t[14]],D=[C[2],C[6],C[10]],d=[C[12],C[13],C[14]],p=1-(o[0]*D[0]+o[1]*D[1]+o[2]*D[2]),y=Math.pow(h[0]-d[0],2)+Math.pow(h[1]-d[1],2)+Math.pow(h[2]-d[2],2),l=Math.abs(i-this.#C.time);return p>pi||y>yi||l>mi}#m(t){this.#t=t.length,this.#A.queue.writeBuffer(this.#e.sortedIndices,0,t)}#b(t,i){return t==null||t.size<i.size?(t?.destroy(),this.#A.createBuffer(i)):t}#x(t,i){let C,o,h;i instanceof ArrayBuffer?(C=i,o=0,h=i.byteLength):(C=i.buffer,o=i.byteOffset,h=i.byteLength);let D=h&-4;D>0&&this.#A.queue.writeBuffer(t,0,C,o,D);let d=h-D;if(d>0){let p=new Uint8Array(4);p.set(new Uint8Array(C,o+D,d)),this.#A.queue.writeBuffer(t,D,p,0,4)}}#J(t,i){return t==0?i:t+i-1&~(i-1)}},at=re;import{mat4 as Y,vec3 as c}from"gl-matrix";var GA=class R{constructor(){if(new.target===R)throw new Error("Cannot instantiate abstract class Camera directly");this.keysPressed=new Set,this.mouseDown=!1,this.mouseX=0,this.mouseY=0}getViewMatrix(){return null}getProjMatrix(t){let i=this.fov||80;return Y.perspective(Y.create(),i*Math.PI/180,t,.01,100)}getParams(){return{}}onMouseDown(t){t.button===0&&(this.mouseDown=!0)}onMouseUp(t){t.button===0&&(this.mouseDown=!1)}onMouseMove(t){this.mouseX=t.clientX,this.mouseY=t.clientY}onDoubleClick(t){}onScroll(t){}onTouchStart(t){t.touches.length===1&&(this.mouseDown=!0),this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY}onTouchEnd(t){t.touches.length===1&&(this.mouseDown=!1)}onTouchMove(t){this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY}onKeyDown(t){this.keysPressed.add(t.code)}onKeyUp(t){this.keysPressed.delete(t.code)}update(t){}_editingSomething(){let t=document.activeElement;return t&&(t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.isContentEditable)}attachToCanvas(t){this._onMouseDown=i=>this.onMouseDown(i),this._onMouseUp=i=>this.onMouseUp(i),this._onMouseMove=i=>this.onMouseMove(i),this._onMouseLeave=i=>this.onMouseUp(i),this._onDoubleClick=i=>this.onDoubleClick(i),this._onWheel=i=>{this.onScroll!==R.prototype.onScroll&&i.preventDefault(),this.onScroll(i.deltaY)},this._onTouchStart=i=>{this.onTouchStart!=R.prototype.onTouchStart&&i.preventDefault(),this.onTouchStart(i)},this._onTouchMove=i=>{this.onTouchMove!=R.prototype.onTouchMove&&i.preventDefault(),this.onTouchMove(i)},this._onTouchEnd=i=>{this.onTouchEnd!=R.prototype.onTouchEnd&&i.preventDefault(),this.onTouchEnd(i)},this._onKeyDown=i=>{this._editingSomething()||(i.code==="Space"&&i.preventDefault(),this.onKeyDown(i))},this._onKeyUp=i=>{this._editingSomething()||(i.code==="Space"&&i.preventDefault(),this.onKeyUp(i))},t.addEventListener("mousedown",this._onMouseDown),t.addEventListener("mouseup",this._onMouseUp),t.addEventListener("mousemove",this._onMouseMove),t.addEventListener("mouseleave",this._onMouseLeave),t.addEventListener("dblclick",this._onDoubleClick),t.addEventListener("wheel",this._onWheel),t.addEventListener("touchstart",this._onTouchStart),t.addEventListener("touchmove",this._onTouchMove),t.addEventListener("touchend",this._onTouchEnd),window.addEventListener("keydown",this._onKeyDown),window.addEventListener("keyup",this._onKeyUp),this._canvas=t}detachFromCanvas(){this._canvas&&(this._canvas.removeEventListener("mousedown",this._onMouseDown),this._canvas.removeEventListener("mouseup",this._onMouseUp),this._canvas.removeEventListener("mousemove",this._onMouseMove),this._canvas.removeEventListener("mouseleave",this._onMouseLeave),this._canvas.removeEventListener("dblclick",this._onDoubleClick),this._canvas.removeEventListener("wheel",this._onWheel),this._canvas.removeEventListener("touchstart",this._onTouchStart),this._canvas.removeEventListener("touchmove",this._onTouchMove),this._canvas.removeEventListener("touchend",this._onTouchEnd),window.removeEventListener("keydown",this._onKeyDown),window.removeEventListener("keyup",this._onKeyUp),this._canvas=null)}},cA=class extends GA{constructor(t={}){super(),this.fov=t.fov||80,this.sens=t.sens||.003,this.panSens=t.panSens||.0025,this.scrollSens=t.scrollSens||.0025,this.keyMoveSpeed=t.keyMoveSpeed||.02,this.minRadius=t.minRadius||.5,this.maxRadius=t.maxRadius||3,this.targetRadius=t.radius||(this.minRadius+this.maxRadius)/2,this.radius=this.targetRadius,this.targetTheta=t.theta||0,this.theta=this.targetTheta,this.targetPhi=t.phi||0,this.phi=this.targetPhi,this.targetPos=c.fromValues(t.targetX||0,t.targetY||0,t.targetZ||0),this.pos=this.targetPos,this.mouseX=t.mouseX||0,this.mouseY=t.mouseY||0,this.rotating=t.startRotating||!1,this.dragging=t.startRotating||!1,this.pinchStartDistance=0}getViewMatrix(){let t=c.fromValues(this.pos[0]+this.radius*Math.sin(this.theta)*Math.cos(this.phi),this.pos[1]+this.radius*Math.sin(this.phi),this.pos[2]+this.radius*Math.cos(this.theta)*Math.cos(this.phi));return Y.lookAt(Y.create(),t,this.pos,c.fromValues(0,1,0))}getParams(){return{fov:this.fov,sens:this.sens,panSens:this.panSens,scrollSens:this.scrollSens,radius:this.radius,minRadius:this.minRadius,maxRadius:this.maxRadius,theta:this.theta,phi:this.phi,targetX:this.pos[0],targetY:this.pos[1],targetZ:this.pos[2],mouseX:this.mouseX,mouseY:this.mouseY,startRotating:this.rotating||this.dragging}}onMouseDown(t){if(t.button===0)this.rotating=!0;else return;this.mouseX=t.clientX,this.mouseY=t.clientY}onMouseUp(t){this.rotating=!1}onDoubleClick(t){this.targetRadius/=2}onMouseMove(t){if(this.rotating){let i=t.clientX-this.mouseX,C=t.clientY-this.mouseY;this.targetTheta+=i*this.sens,this.targetPhi-=C*this.sens,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2+.01),this.targetPhi=Math.min(this.targetPhi,Math.PI/2-.01)}this.mouseX=t.clientX,this.mouseY=t.clientY}onScroll(t){this.targetRadius+=t*this.scrollSens,this.targetRadius=Math.max(this.targetRadius,this.minRadius),this.targetRadius=Math.min(this.targetRadius,this.maxRadius)}onTouchStart(t){if(t.touches.length===1)this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY,this.dragging=!0;else if(t.touches.length===2){this.dragging=!1;let i=t.touches[0],C=t.touches[1];this.pinchStartDistance=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY)}}onTouchMove(t){if(t.touches.length===1&&this.dragging){let i=t.touches[0],C=i.clientX-this.mouseX,o=i.clientY-this.mouseY;this.targetTheta+=C*this.sens,this.targetPhi-=o*this.sens,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2),this.targetPhi=Math.min(this.targetPhi,Math.PI/2),this.mouseX=i.clientX,this.mouseY=i.clientY}else if(t.touches.length===2){let i=t.touches[0],C=t.touches[1],o=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY),h=this.pinchStartDistance-o;this.onScroll(h),this.pinchStartDistance=o}}onTouchEnd(t){t.touches.length===0?this.dragging=!1:t.touches.length===1&&(this.mouseX=t.touches[0].clientX,this.mouseY=t.touches[0].clientY)}update(t){super.update(t);let i=1-Math.pow(.99,t);this.pos=c.add(c.create(),this.pos,c.scale(c.create(),c.sub(c.create(),this.targetPos,this.pos),i)),this.radius+=(this.targetRadius-this.radius)*i,this.theta+=(this.targetTheta-this.theta)*i,this.phi+=(this.targetPhi-this.phi)*i,this.keysPressed.size>0&&this.handleKeyboardMovement(t)}handleKeyboardMovement(t){let i=this.keyMoveSpeed*(t/16.67),C=Math.cos(this.targetTheta),o=-Math.sin(this.targetTheta),h=-Math.sin(this.targetTheta),D=-Math.cos(this.targetTheta),d=0,p=0,y=0;this.keysPressed.has("KeyW")&&(d+=h,y+=D),this.keysPressed.has("KeyS")&&(d-=h,y-=D),this.keysPressed.has("KeyA")&&(d+=C,y+=o),this.keysPressed.has("KeyD")&&(d-=C,y-=o),this.keysPressed.has("Space")&&(p-=1),this.keysPressed.has("ShiftLeft")&&(p+=1),this.targetPos=c.add(c.create(),this.targetPos,c.scale(c.create(),c.normalize(c.create(),c.fromValues(d,p,y)),i))}},LA=class extends GA{constructor(t={}){super(),this.fov=t.fov||80,this.baseTheta=t.baseTheta||Math.PI/4,this.basePhi=t.basePhi||Math.PI/4,this.targetTheta=t.theta||this.baseTheta,this.targetPhi=t.phi||this.basePhi,this.targetRadius=t.radius||1.5,this.theta=this.targetTheta,this.phi=this.targetPhi,this.radius=this.targetRadius,this.minRadius=t.minRadius||.5,this.maxRadius=t.maxRadius||3,this.targetX=t.targetX||0,this.targetY=t.targetY||0,this.targetZ=t.targetZ||0,this.sens=t.sens||.003,this.scrollSens=t.scrollSens||.0025,this.resistance=t.resistance||.25,this.deadZone=t.deadZone||.1,this.snapSmoothness=t.snapSmoothness||.9925,this.valueSmoothness=t.valueSmoothness||.9925,this.radiusSmoothness=t.radiusSmoothness||.99,this.mouseX=t.mouseX||0,this.mouseY=t.mouseY||0,this.rotating=t.startRotating||!1,this.pinchStartDistance=0,this.canvas=null}attachToCanvas(t){super.attachToCanvas(t),this.canvas=t}getViewMatrix(){let t=this.targetX+this.radius*Math.sin(this.theta)*Math.cos(this.phi),i=this.targetY+this.radius*Math.sin(this.phi),C=this.targetZ+this.radius*Math.cos(this.theta)*Math.cos(this.phi);return Y.lookAt(Y.create(),c.fromValues(t,i,C),c.fromValues(this.targetX,this.targetY,this.targetZ),c.fromValues(0,1,0))}onMouseDown(t){t.button===0&&(this.rotating=!0,this.mouseX=t.clientX,this.mouseY=t.clientY,this.targetTheta=this.theta,this.targetPhi=this.phi,this.targetRadius=this.radius)}onMouseUp(t){t.button===0&&(this.rotating=!1)}onMouseMove(t){if(!this.rotating){this.mouseX=t.clientX,this.mouseY=t.clientY;return}let i=t.clientX-this.mouseX,C=t.clientY-this.mouseY,o=this.targetTheta-this.baseTheta,h=this.targetPhi-this.basePhi,D=this.#r(o,h,this.resistance);this.targetTheta+=i*this.sens*D,this.targetPhi-=C*this.sens*D,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2+.01),this.targetPhi=Math.min(this.targetPhi,Math.PI/2-.01),this.mouseX=t.clientX,this.mouseY=t.clientY}onScroll(t){this.targetRadius+=t*this.scrollSens,this.targetRadius=Math.max(this.targetRadius,this.minRadius),this.targetRadius=Math.min(this.targetRadius,this.maxRadius)}onTouchStart(t){if(t.touches.length===1){let i=t.touches[0];this.rotating=!0,this.mouseX=i.clientX,this.mouseY=i.clientY}else if(t.touches.length===2){this.rotating=!1;let i=t.touches[0],C=t.touches[1];this.pinchStartDistance=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY)}}onTouchMove(t){if(t.touches.length===1&&this.rotating){let i=t.touches[0],C=i.clientX-this.mouseX,o=i.clientY-this.mouseY,h=this.targetTheta-this.baseTheta,D=this.targetPhi-this.basePhi,d=this.#r(h,D,this.resistance);this.targetTheta+=C*this.sens*d,this.targetPhi-=o*this.sens*d,this.targetPhi=Math.max(this.targetPhi,-Math.PI/2+.01),this.targetPhi=Math.min(this.targetPhi,Math.PI/2-.01),this.mouseX=i.clientX,this.mouseY=i.clientY}else if(t.touches.length===2){let i=t.touches[0],C=t.touches[1],o=Math.hypot(C.clientX-i.clientX,C.clientY-i.clientY),h=this.pinchStartDistance-o;this.onScroll(h),this.pinchStartDistance=o}}onTouchEnd(t){if(t.touches.length===0)this.rotating=!1;else if(t.touches.length===1){let i=t.touches[0];this.mouseX=i.clientX,this.mouseY=i.clientY}}update(t){super.update(t);let i=1-Math.pow(this.snapSmoothness,t),C=1-Math.pow(this.valueSmoothness,t);if(this.rotating)this.theta=this.targetTheta,this.phi=this.targetPhi,this.radius=this.targetRadius;else{let o=this.#A(this.targetTheta,this.targetPhi,this.baseTheta,this.basePhi,this.deadZone);this.targetTheta+=(o.theta-this.targetTheta)*i,this.targetPhi+=(o.phi-this.targetPhi)*i,this.theta+=(this.targetTheta-this.theta)*C,this.phi+=(this.targetPhi-this.phi)*C,this.radius+=(this.targetRadius-this.radius)*(1-Math.pow(this.radiusSmoothness,t))}}#r(t,i,C){let h=Math.hypot(t,i)/(1-C);return 1/(1+h*h)}#A(t,i,C,o,h){let D=t-C,d=i-o,p=Math.hypot(D,d);if(p<=h)return{theta:t,phi:i};{let y=h/p;return{theta:C+D*y,phi:o+d*y}}}getParams(){return{fov:this.fov,baseTheta:this.baseTheta,basePhi:this.basePhi,theta:this.theta,phi:this.phi,radius:this.radius,minRadius:this.minRadius,maxRadius:this.maxRadius,targetX:this.targetX,targetY:this.targetY,targetZ:this.targetZ,sens:this.sens,scrollSens:this.scrollSens,resistance:this.resistance,deadZone:this.deadZone,snapSmoothness:this.snapSmoothness,valueSmoothness:this.valueSmoothness,radiusSmoothness:this.radiusSmoothness,startRotating:this.mouseDown,mouseX:this.mouseX,mouseY:this.mouseY}}},PA=class extends GA{constructor(t={}){super(),this.screenPos=t.screenPos||[0,0,1],this.screenTarget=t.screenTarget||[0,0,0],this.screenScale=t.screenScale||1,this.eyePosWorld=t.eyePosWorld||[0,0,1],this.worldToVoxelScale=t.worldToVoxelScale||1,this.screenTransform=Y.invert(Y.create(),Y.lookAt(Y.create(),this.screenPos,this.screenTarget,[0,1,0]))}getViewMatrix(t){return this.#r(t).view}getProjMatrix(t){return this.#r(t).proj}#r(t){var o=t>1?1:t,h=t>1?1/t:1;o*=this.screenScale,h*=this.screenScale;let D=c.transformMat4(c.create(),c.fromValues(-o,-h,0),this.screenTransform),d=c.transformMat4(c.create(),c.fromValues(o,-h,0),this.screenTransform),p=c.transformMat4(c.create(),c.fromValues(-o,h,0),this.screenTransform),y=c.scale(c.create(),this.eyePosWorld,this.worldToVoxelScale);y[1]+=h,y[2]=Math.max(y[2],1e-4);let l=c.transformMat4(c.create(),y,this.screenTransform),N=c.sub(c.create(),d,D),J=c.sub(c.create(),p,D),_=c.sub(c.create(),D,l),W=c.sub(c.create(),d,l),X=c.sub(c.create(),p,l);N=c.normalize(c.create(),N),J=c.normalize(c.create(),J);let M=c.scale(c.create(),c.cross(c.create(),N,J),1),V=-c.dot(_,M),z=c.dot(N,_)*.01/V,j=c.dot(N,W)*.01/V,U=c.dot(J,_)*.01/V,v=c.dot(J,X)*.01/V,G=Y.create();G[0]=2*.01/(j-z),G[4]=0,G[8]=(j+z)/(j-z),G[12]=0,G[1]=0,G[5]=2*.01/(v-U),G[9]=(v+U)/(v-U),G[13]=0,G[2]=0,G[6]=0,G[10]=(100+.01)/(.01-100),G[14]=200*.01/(.01-100),G[3]=0,G[7]=0,G[11]=-1,G[15]=0;let m=Y.create();m[0]=N[0],m[4]=N[1],m[8]=N[2],m[12]=0,m[1]=J[0],m[5]=J[1],m[9]=J[2],m[13]=0,m[2]=M[0],m[6]=M[1],m[10]=M[2],m[14]=0,m[3]=0,m[7]=0,m[11]=0,m[15]=1;let QA=Y.translate(Y.create(),Y.identity(Y.create()),c.scale(c.create(),l,-1));return{view:Y.mul(Y.create(),m,QA),proj:G}}getParams(){return{screenPos:this.screenPos,screenTarget:this.screenTarget,screenScale:this.screenScale,eyePosWorld:this.eyePosWorld,worldToVoxelScale:this.worldToVoxelScale,startRotating:this.mouseDown,mouseX:this.mouseX,mouseY:this.mouseY}}};var Be,Gi=typeof window<"u"&&typeof HTMLElement<"u"&&typeof document<"u";Gi?(Be=class extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"open"});TA.then(o=>{this.#r=o,this.#M()});let i=document.createElement("div");i.style.position="relative",i.style.width="100%",i.style.height="100%",i.style.overflow="hidden",t.appendChild(i),this.#A=document.createElement("canvas"),Object.assign(this.#A.style,{width:"100%",height:"100%",display:"block"}),i.appendChild(this.#A),this.#o=document.createElement("div"),Object.assign(this.#o.style,{position:"absolute",display:"none",top:"1%",left:"1%",background:"rgba(0,0,0,0.4)",padding:"8px 8px",borderRadius:"8px",backdropFilter:"blur(6px)",pointerEvents:"auto",userSelect:"none"}),i.appendChild(this.#o),this.#p=document.createElement("div"),Object.assign(this.#p.style,{display:"block",color:"white",fontFamily:"monospace",fontSize:"12px",whiteSpace:"pre",marginBottom:"10px"}),this.#o.appendChild(this.#p);let C=document.createElement("div");C.textContent="Show Camera Params \u25BC",Object.assign(C.style,{display:"block",cursor:"pointer",color:"white",fontFamily:"monospace",fontSize:"12px"}),this.#o.appendChild(C),this.#a=document.createElement("pre"),Object.assign(this.#a.style,{display:"none",color:"white",fontFamily:"monospace",fontSize:"12px",whiteSpace:"pre"}),this.#o.appendChild(this.#a),C.addEventListener("click",()=>{this.#a.style.display==="none"?(this.#a.style.display="block",C.textContent="Hide Camera Params \u25B2"):(this.#a.style.display="none",C.textContent="Show Camera Params \u25BC")}),this.#a.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(this.#a.textContent);let o=this.#a.style.color;this.#a.style.color="rgba(255,255,255,0.2)",setTimeout(()=>{this.#a.style.color=o||"transparent"},200)}catch(o){console.error("Failed to copy camera JSON:",o)}}),this.#E=document.createElement("div"),Object.assign(this.#E.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"}),i.appendChild(this.#E),this.#C=document.createElement("button"),this.#C.type="button",Object.assign(this.#C.style,{border:"none",background:"transparent",color:"white",fontSize:"24px",cursor:"pointer",padding:"4px",flexShrink:"0"}),this.#C.addEventListener("click",()=>{this.#I=!this.#I,this.#e.length==1&&this.#t>=this.#e[0].metadata.duration&&(this.#t=0)}),this.#E.appendChild(this.#C),this.#s=document.createElement("input"),this.#s.type="range",this.#s.min=0,this.#s.max=1,this.#s.step=.001,this.#s.value=0,Object.assign(this.#s.style,{flex:"1 1 auto",minWidth:"120px",maxWidth:"100%",cursor:"pointer",accentColor:"#fff"}),this.#c=!1,this.#s.addEventListener("input",()=>{this.#t=parseFloat(this.#s.value)}),this.#s.addEventListener("pointerdown",()=>{this.#c=!0}),this.#s.addEventListener("pointerup",()=>{this.#c=!1}),this.#E.appendChild(this.#s),this.#Q=new at(this.#A),this.#g=new cA}connectedCallback(){this.#g.attachToCanvas(this.#A),this.#u=new ResizeObserver(t=>{let i=t[0],C=Math.round(i.contentBoxSize[0].inlineSize*window.devicePixelRatio),o=Math.round(i.contentBoxSize[0].blockSize*window.devicePixelRatio),h=i.target;h.width=C,h.height=o,this.#Q.resize()}),this.clear(),this.#Q.initialize().then(()=>{this.#u.observe(this.#A),requestAnimationFrame(t=>{this.#R(t)})})}disconnectedCallback(){this.#g.detachFromCanvas(),this.#u.disconnect()}static get observedAttributes(){return["src","scene","camera","background-color","loop","autoplay","controls","point-size","time-scale","debug"]}attributeChangedCallback(t,i,C){if(i!==C)switch(t){case"src":{C==null?this.#F(null):this.#S(C).then(o=>{this.#m(()=>{C.endsWith(".ply")?this.#F(this.#Y(o)):this.#F(this.#v(o))})});break}case"scene":{C==null?this.#N(null):this.#S(C).then(o=>{this.#m(()=>{C.endsWith(".ply")?this.#N(this.#Y(o)):this.#N(this.#v(o)),this.#n=!0})});break}case"camera":{let o="default",h={};try{h=JSON.parse(C),o=h.type}catch{}this.setCamera(o,h);break}case"background-color":{try{let o=this.getAttribute("background-color").split(" ").map(h=>Number(h)/255);o.length===3&&(this.#w.backgroundColor=o)}catch{}break}case"loop":this.#l=this.hasAttribute("loop");break;case"autoplay":this.#d=this.hasAttribute("autoplay");break;case"controls":this.#f=this.hasAttribute("controls");break;case"time-scale":try{this.#D=Number(this.getAttribute("time-scale"))}catch{}break;case"point-size":this.#Q.setPointSize(C);break;case"debug":this.#i=this.hasAttribute("debug");break;default:break}}play(){this.#I=!0}pause(){this.#I=!1}enqueue(t){this.#m(()=>{this.#e.push(this.#v(t))})}clear(){this.#m(()=>{this.#e=[{gaussians:new this.#r.Gaussians,metadata:{duration:0}}],this.#n=!0})}setCamera(t,i){this.#g.detachFromCanvas(),t==="default"?this.#g=new cA(i):t==="snap"?this.#g=new LA(i):t==="window"?this.#g=new PA(i):(console.warn("Invalid camera provided, defaulting to 'default'"),this.#g=new cA),this.#g.attachToCanvas(this.#A)}get paused(){return!this.#I}get currentTime(){return this.#t}set currentTime(t){let i=this.#e[0].metadata.duration;if(t<0||t>i){console.warn("Setting out-of-bounds currentTime");return}this.#t=t}get currentSegment(){return this.#e[0]}set viewMatrix(t){this.#B=t}set projectionMatrix(t){this.#G=t}#r=null;#A=null;#Q=null;#g=null;#u=null;#l=!1;#d=!1;#f=!1;#D=1;#i=!1;#w={};#B=null;#G=null;#e=[];#n=!1;#h=null;#t=0;#c=!1;#I=!1;#E=null;#C=null;#s=null;#o=null;#p=null;#a=null;#R(t){t/=1e3;var i=0;this.#h&&(i=t-this.#h),this.#I&&!this.#c&&(this.#t+=i*this.#D);let C=this.#e[0],o=C.metadata.duration,h=!1;for(;this.#t>=o&&this.#e.length>1;)o>0&&this.onSegmentEnd?.(!1),this.#t-=o,this.#e.shift(),C=this.#e[0],o=C.metadata.duration,h=!0;(h||this.#n)&&(this.#Q.setGaussians(C.gaussians),this.#n=!1),this.#l?this.#t%=o>0?o:1:this.#t>o&&(o>0&&this.onSegmentEnd?.(!0),this.#t=o,this.#I=!1);let D=this.#f&&o>0;Object.assign(this.#E.style,{display:D?"flex":"none"}),this.#C.textContent=this.#I?"\u23F8\uFE0F":"\u25B6\uFE0F",this.#s.max=o,!this.#c&&this.#s&&(this.#s.value=this.#t),this.#h=t,this.#g.update(i*1e3);let d=this.#B??this.#g.getViewMatrix(this.#A.width/this.#A.height),p=this.#G??this.#g.getProjMatrix(this.#A.width/this.#A.height),y=this.#t/(o>0?o:1);this.#Q.draw(d,p,y,this.#w,this.#i);let l=this.#Q.performanceProfile;Object.assign(this.#o.style,{display:this.#i?"block":"none"}),this.#p.textContent=`Time: ${this.#t.toFixed(3)} / ${o.toFixed(3)} s
+Num Gaussians Visible: ${this.#Q.numGaussiansVisible} / ${this.#Q.numGaussians}
 
 Frame Time: ${this.#y(l.totalTime)}
 	- Preprocess: ${this.#y(l.preprocessTime)}
 	- Raster:     ${this.#y(l.rasterTime)}
-Last Sort Time: ${this.#y(l.lastSortTime)}`,this.#a.textContent=JSON.stringify(this.#t.getParams(),null,2),requestAnimationFrame(N=>{this.#v(N)})}#p(t){this.#e=[t],this.#s=0,this.#Q=this.#d,this.#c=!0}#G(t){this.#I.setScene(t.gaussians)}#F(t){try{return this.#B.decode(t)}catch(i){throw new Error("Failed to decode .dgs file, see the above stack trace for details: "+i)}}#k(t){try{return this.#B.loadPly(t)}catch(i){throw new Error("Failed to load .ply file, see the above stack trace for details: "+i)}}async#R(t){let i=await fetch(t);if(!i.ok)throw new Error("Failed to fetch buffer at "+t);return await i.arrayBuffer()}#y(t){return(t?.toFixed(2)??"N/A")+" ms"}#N=Promise.resolve();#Y=null;#S=new Promise(t=>this.#Y=t);#m(t){return this.#N=this.#N.then(async()=>(await this.#S,await t()),i=>{throw console.error("Enqueuing call failed: ",i),i}),this.#N}},customElements.define("dgs-player",Be)):Be=class{};export{Be as DGSPlayer};
+Last Sort Time: ${this.#y(l.lastSortTime)}`,this.#a.textContent=JSON.stringify(this.#g.getParams(),null,2),requestAnimationFrame(N=>{this.#R(N)})}#F(t){this.#e=[t],this.#t=0,this.#I=this.#d,this.#n=!0}#N(t){this.#Q.setScene(t.gaussians)}#v(t){try{return this.#r.decode(t)}catch(i){throw new Error("Failed to decode .dgs file, see the above stack trace for details: "+i)}}#Y(t){try{return this.#r.loadPly(t)}catch(i){throw new Error("Failed to load .ply file, see the above stack trace for details: "+i)}}async#S(t){let i=await fetch(t);if(!i.ok)throw new Error("Failed to fetch buffer at "+t);return await i.arrayBuffer()}#y(t){return(t?.toFixed(2)??"N/A")+" ms"}#k=Promise.resolve();#M=null;#U=new Promise(t=>this.#M=t);#m(t){return this.#k=this.#k.then(async()=>(await this.#U,await t()),i=>{throw console.error("Enqueuing call failed: ",i),i}),this.#k}},customElements.define("dgs-player",Be)):Be=class{};export{Be as DGSPlayer};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dgs-js",
-    "version": "1.1.6",
+    "version": "1.1.8",
     "main": "dist/index.js",
     "files": [
         "dist/**/*"