@splnlss/3d-story-viewer 0.5.5 → 0.5.7

package/build/viewer.js

@@ -6471,7 +6471,7 @@ const QUAD_INDICES$1 = new Uint16Array([0, 1, 2, 0, 2, 3]);
 const workerUrl$1 = new URL("assets/viewer/spark-old-worker-932b4a2c87ca.js", import.meta.url).href;
 const workerWasmUrl$1 = new URL("assets/viewer/spark-worker-015de49d2d00.wasm", import.meta.url).href;
 function WorkerWrapper$1(options) {
-  const url = new URL(workerUrl$1);
+  const url = new URL(workerUrl$1, globalThis.location.href);
   url.searchParams.set("wasm", workerWasmUrl$1);
   return new Worker(url, {
     name: options == null ? void 0 : options.name
@@ -8218,7 +8218,7 @@ async function withWorker(callback) {
 const workerUrl = new URL("assets/viewer/spark-worker-5ec8a483b87c.js", import.meta.url).href;
 const workerWasmUrl = new URL("assets/viewer/spark-worker-015de49d2d00.wasm", import.meta.url).href;
 function WorkerWrapper$2(options) {
-  const url = new URL(workerUrl);
+  const url = new URL(workerUrl, globalThis.location.href);
   url.searchParams.set("wasm", workerWasmUrl);
   return new Worker(url, {
     name: options == null ? void 0 : options.name
@@ -12111,7 +12111,7 @@ const _SplatAccumulator = class _SplatAccumulator2 {
     this.time = 0;
     this.deltaTime = 0;
     this.viewToWorld = new Matrix4();
-    this.viewOrigin = new Vector3();
+    this.renderOrigin = new Vector3();
     this.viewDirection = new Vector3();
     this.maxSplats = 0;
     this.numSplats = 0;
@@ -12394,10 +12394,10 @@ const _SplatAccumulator = class _SplatAccumulator2 {
     lodInstances
   }) {
     var _a22;
-    this.viewToWorld.copy(camera.matrixWorld);
-    camera.getWorldPosition(this.viewOrigin);
+    camera.getWorldPosition(this.renderOrigin);
+    this.viewToWorld.copy(camera.matrixWorld).setPosition(0, 0, 0);
     camera.getWorldDirection(this.viewDirection);
-    _SplatAccumulator2.viewCenterUniform.value.copy(this.viewOrigin);
+    _SplatAccumulator2.viewCenterUniform.value.set(0, 0, 0);
     _SplatAccumulator2.viewDirUniform.value.copy(this.viewDirection);
     _SplatAccumulator2.sortRadialUniform.value = sortRadial;
     this.time = time;
@@ -12431,6 +12431,7 @@ const _SplatAccumulator = class _SplatAccumulator2 {
           time: this.time,
           deltaTime: this.deltaTime,
           viewToWorld: this.viewToWorld,
+          renderOrigin: this.renderOrigin,
           camera,
           renderSize,
           globalEdits,
@@ -12695,6 +12696,14 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
     this.sortTimeoutId = -1;
     this.sortedCenter = new Vector3().setScalar(Number.NEGATIVE_INFINITY);
     this.sortedDir = new Vector3().setScalar(0);
+    this.accumToCamera = new Matrix4();
+    this.accumToCameraScale = new Vector3();
+    this.renderCameraToWorld = new Matrix4();
+    this.renderCameraOrigin = new Vector3();
+    this.lodCameraToWorld = new Matrix4();
+    this.lodCameraScale = new Vector3();
+    this.lodViewToObject = new Matrix4();
+    this.lodMeshOrigin = new Vector3();
     this.readback32 = new Uint32Array(0);
     this.lastLodRaycastTime = 0;
     this.lodWorker = null;
@@ -12936,17 +12945,14 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
     this.uniforms.far.value = typedCamera.far;
     const geometry = this.geometry;
     geometry.instanceCount = spark.activeSplats;
-    const accumToWorld = new Matrix4();
-    if (!this.display.extSplats) {
-      accumToWorld.makeTranslation(spark.display.viewOrigin);
-    }
-    const cameraToWorld = camera.matrixWorld.clone();
-    const worldToCamera = cameraToWorld.invert();
-    const accumToCamera = worldToCamera.multiply(accumToWorld);
+    const renderCameraToWorld = this.renderCameraToWorld.copy(camera.matrixWorld).setPosition(
+      this.renderCameraOrigin.setFromMatrixPosition(camera.matrixWorld).sub(spark.display.renderOrigin)
+    );
+    const accumToCamera = this.accumToCamera.copy(renderCameraToWorld).invert();
     accumToCamera.decompose(
       this.uniforms.renderToViewPos.value,
       this.uniforms.renderToViewQuat.value,
-      new Vector3()
+      this.accumToCameraScale
     );
     this.uniforms.renderToViewBasis.value.setFromMatrix4(accumToCamera);
     this.uniforms.maxStdDev.value = spark.maxStdDev;
@@ -13123,7 +13129,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
       await new Promise((resolve) => setTimeout(resolve, this.readPause));
     }
     const current = this.current;
-    this.sortedCenter.copy(current.viewOrigin);
+    this.sortedCenter.copy(current.renderOrigin);
     this.sortedDir.copy(current.viewDirection);
     const { numSplats, maxSplats } = current;
     const rows = Math.max(1, Math.ceil(maxSplats / 16384));
@@ -13244,8 +13250,9 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
     const viewPos = new Vector3();
     const viewQuat = new Quaternion();
     this.current.viewToWorld.decompose(viewPos, viewQuat, new Vector3());
+    const lodPos = this.lodPosOverride ?? this.current.renderOrigin;
     if (this.lodPosOverride) {
-      viewPos.copy(this.lodPosOverride);
+      viewPos.copy(this.lodPosOverride).sub(this.current.renderOrigin);
     }
     if (this.lodQuatOverride) {
       viewQuat.copy(this.lodQuatOverride).normalize();
@@ -13254,7 +13261,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
       if (this.lastLod.pixelScaleLimit !== pixelScaleLimit || this.lastLod.maxSplats !== maxSplats) {
         this.lodDirty = true;
       }
-      const distance2 = viewPos.distanceTo(this.lastLod.pos);
+      const distance2 = lodPos.distanceTo(this.lastLod.pos);
       const distanceRamp = Math.max(0, 1 - distance2 / 1);
       const dot2 = viewQuat.dot(this.lastLod.quat);
       const quatRamp = Math.max(0, 1 - (1 - dot2) / 0.01);
@@ -13354,10 +13361,10 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
         const deltaPred = new Vector3();
         if (this.lastLod) {
           const deltaTime = Math.max(1, now22 - this.lastLod.timestamp);
-          deltaPred.copy(viewPos).sub(this.lastLod.pos).multiplyScalar(this.lastTraverseTime / deltaTime);
+          deltaPred.copy(lodPos).sub(this.lastLod.pos).multiplyScalar(this.lastTraverseTime / deltaTime);
         }
         this.lastLod = {
-          pos: viewPos,
+          pos: lodPos.clone(),
           quat: viewQuat,
           pixelScaleLimit,
           maxSplats,
@@ -13369,8 +13376,10 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
           deltaPred,
           lodMeshes,
           maxSplats,
+          this.lastLod.pos,
           viewPos,
           viewQuat,
+          this.current.renderOrigin,
           pixelScaleLimit
         );
         this.currentLod = this.lastLod;
@@ -13395,18 +13404,20 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
       this.lodIdToSplats.set(lodId, splats);
     }
   }
-  async updateLodInstances(worker, deltaPred, lodMeshes, maxSplats, viewPos, viewQuat, pixelScaleLimit) {
+  async updateLodInstances(worker, deltaPred, lodMeshes, maxSplats, lodPos, viewPos, viewQuat, renderOrigin, pixelScaleLimit) {
     const uuidToMesh = /* @__PURE__ */ new Map();
-    const cameraToWorld = new Matrix4().compose(
+    const cameraToWorld = this.lodCameraToWorld.compose(
       viewPos,
       viewQuat,
-      new Vector3().setScalar(1)
+      this.lodCameraScale.setScalar(1)
     );
     const instances = lodMeshes.reduce(
       (instances2, mesh) => {
         var _a22, _b2;
         uuidToMesh.set(mesh.uuid, mesh);
-        const viewToObject = mesh.matrixWorld.clone().invert().multiply(cameraToWorld);
+        const viewToObject = this.lodViewToObject.copy(mesh.matrixWorld).setPosition(
+          this.lodMeshOrigin.setFromMatrixPosition(mesh.matrixWorld).sub(renderOrigin)
+        ).invert().multiply(cameraToWorld);
         const splats = ((_a22 = mesh.packedSplats) == null ? void 0 : _a22.lodSplats) ?? ((_b2 = mesh.extSplats) == null ? void 0 : _b2.lodSplats) ?? mesh.paged;
         if (!splats) {
           return instances2;
@@ -13422,7 +13433,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
           instanceId: mesh.uuid,
           lodId: record.lodId,
           rootPage: record.rootPage,
-          viewToObjectCols: viewToObject.elements,
+          viewToObjectCols: viewToObject.elements.slice(),
           lodScale: mesh.lodScale,
           behindFoveate: mesh.behindFoveate ?? this.behindFoveate,
           coneFov0: mesh.coneFov0 ?? this.coneFov0,
@@ -13457,7 +13468,7 @@ const _SparkRenderer = class _SparkRenderer2 extends Mesh {
         const meshPosition = mesh.getWorldPosition(new Vector3());
         return {
           splats: mesh.paged,
-          distance: meshPosition.distanceTo(viewPos)
+          distance: meshPosition.distanceTo(lodPos)
         };
       }).filter((result2) => result2 !== null);
       if (!this.pageSizeWarning && pagedMeshes.length > this.pager.maxPages) {
@@ -15032,6 +15043,11 @@ const _SplatMesh = class _SplatMesh2 extends SplatGenerator {
     this.splatRgba = null;
     this.maxSh = 3;
     this.showLodPageDyno = new DynoInt({ value: 0 });
+    this.objectToRender = new Matrix4();
+    this.objectToRenderOffset = new Vector3();
+    this.worldToObject = new Matrix4();
+    this.worldToView = new Matrix4();
+    this.viewToObjectMatrix = new Matrix4();
     if (options.splats) {
       this.splats = options.splats;
       this.numSplats = options.splats.getNumSplats();
@@ -15433,6 +15449,7 @@ const _SplatMesh = class _SplatMesh2 extends SplatGenerator {
     time,
     deltaTime,
     viewToWorld,
+    renderOrigin,
     camera,
     renderSize,
     globalEdits,
@@ -15464,40 +15481,44 @@ const _SplatMesh = class _SplatMesh2 extends SplatGenerator {
       this.lastSplats = this.context.splats;
       this.generatorDirty = true;
     }
+    this.updateMatrixWorld();
+    const objectToWorld = this.objectToRender.copy(this.matrixWorld);
+    objectToWorld.setPosition(
+      this.objectToRenderOffset.setFromMatrixPosition(this.matrixWorld).sub(renderOrigin)
+    );
     if (!this.covSplats) {
-      if (this.context.transform.update(this)) {
+      if (this.context.transform.updateFromMatrix(objectToWorld)) {
         updated = true;
       }
       if (this.context.viewToWorld.updateFromMatrix(viewToWorld) && this.enableViewToWorld) {
         updated = true;
       }
-      const worldToView = viewToWorld.clone().invert();
+      const worldToView = this.worldToView.copy(viewToWorld).invert();
       if (this.context.worldToView.updateFromMatrix(worldToView) && this.enableWorldToView) {
         updated = true;
       }
-      const objectToWorld = new Matrix4().compose(
-        this.context.transform.translate.value,
-        this.context.transform.rotate.value,
-        new Vector3().setScalar(this.context.transform.scale.value)
+      const viewToObjectMatrix = this.viewToObjectMatrix.multiplyMatrices(
+        this.worldToObject.copy(objectToWorld).invert(),
+        viewToWorld
       );
-      const worldToObject = objectToWorld.invert();
-      const viewToObjectMatrix = worldToObject.multiply(viewToWorld);
       if (this.context.viewToObject.updateFromMatrix(viewToObjectMatrix) && (this.enableViewToObject || this.context.splats.hasRgbDir())) {
         updated = true;
       }
     } else {
-      if (this.context.covTransform.update(this)) {
+      if (this.context.covTransform.updateFromMatrix(objectToWorld)) {
         updated = true;
       }
       if (this.context.covViewToWorld.updateFromMatrix(viewToWorld) && this.enableViewToWorld) {
         updated = true;
       }
-      const worldToView = viewToWorld.clone().invert();
+      const worldToView = this.worldToView.copy(viewToWorld).invert();
       if (this.context.covWorldToView.updateFromMatrix(worldToView) && this.enableWorldToView) {
         updated = true;
       }
-      const worldToObject = this.matrixWorld.clone().invert();
-      const viewToObjectMatrix = worldToObject.multiply(viewToWorld);
+      const viewToObjectMatrix = this.viewToObjectMatrix.multiplyMatrices(
+        this.worldToObject.copy(objectToWorld).invert(),
+        viewToWorld
+      );
       if (this.context.covViewToObject.updateFromMatrix(viewToObjectMatrix) && (this.enableViewToObject || this.context.splats.hasRgbDir())) {
         updated = true;
       }
@@ -17694,6 +17715,7 @@ const _OldSparkRenderer = class _OldSparkRenderer2 extends Mesh {
     this.lastUpdateTime = null;
     this.defaultCameras = [];
     this.lastStochastic = null;
+    this.renderOrigin = new Vector3();
     this.pendingUpdate = {
       scene: null,
       originToWorld: new Matrix4(),
@@ -18033,6 +18055,7 @@ const _OldSparkRenderer = class _OldSparkRenderer2 extends Mesh {
       originToWorld = this.active.toWorld;
     }
     viewToWorld = viewToWorld ?? originToWorld.clone();
+    this.renderOrigin.setFromMatrixPosition(originToWorld);
     const time = this.time ?? this.clock.getElapsedTime();
     const deltaTime = time - (this.lastUpdateTime ?? time);
     this.lastUpdateTime = time;
@@ -18048,6 +18071,7 @@ const _OldSparkRenderer = class _OldSparkRenderer2 extends Mesh {
         time,
         deltaTime,
         viewToWorld,
+        renderOrigin: this.renderOrigin,
         globalEdits
       });
     }
@@ -26706,20 +26730,28 @@ class TransitionControls extends EventDispatcher {
     this.lookAt = new Vector3();
     this.cameraTween = null;
     this.lookAtTween = null;
+    this.activeTransition = null;
     this.is2D = false;
   }
   animateTo(position, quaternion, duration = TweenSettings.DURATION) {
-    return new Promise((resolve, reject) => {
+    this.cancel();
+    return new Promise((resolve) => {
       const fromPosition = this.camera.position.clone();
       const fromQuaternion = this.camera.quaternion.clone();
       const toPosition = position.clone();
       const toQuaternion = quaternion.clone();
+      const transition = { resolve, toPosition, toQuaternion };
+      this.activeTransition = transition;
       const deltaPosition = toPosition.clone().sub(fromPosition);
       const deltaDistance = deltaPosition.length();
       const deltaQuaternion = toQuaternion.clone().multiply(fromQuaternion.clone().invert());
       const deltaAngle = Math.acos(Math.min(1, deltaQuaternion.w));
-      if (deltaDistance < 1 && deltaAngle < 1) {
-        resolve();
+      if (duration <= 0 || deltaDistance < 1 && deltaAngle < 1) {
+        this.camera.position.copy(toPosition);
+        this.camera.quaternion.copy(toQuaternion);
+        this.camera.updateMatrixWorld(true);
+        this.activeTransition = null;
+        resolve(true);
       } else {
         const fromLookAt = new Vector3(0, 0, -deltaDistance * 0.25).applyQuaternion(fromQuaternion).add(fromPosition);
         const toLookAt = new Vector3(0, 0, -deltaDistance * 0.25).applyQuaternion(toQuaternion).add(toPosition);
@@ -26730,15 +26762,24 @@ class TransitionControls extends EventDispatcher {
         this.lookAtTween = new Tween(this.lookAt).to(toLookAt, duration).easing(Easing.Quartic.InOut).onComplete(() => {
           this.lookAt.copy(toLookAt);
           this.lookAtTween = null;
+          this.complete(transition);
         }).start();
         this.cameraTween = new Tween(this.camera).to({ position: toPosition, up: toUp }, duration).easing(Easing.Quartic.InOut).onComplete(() => {
           this.camera.position.copy(toPosition);
           this.cameraTween = null;
-          resolve();
+          this.complete(transition);
         }).start();
       }
     });
   }
+  complete(transition) {
+    if (this.activeTransition !== transition || this.cameraTween || this.lookAtTween) return;
+    this.camera.position.copy(transition.toPosition);
+    this.camera.quaternion.copy(transition.toQuaternion);
+    this.camera.updateMatrixWorld(true);
+    this.activeTransition = null;
+    transition.resolve(true);
+  }
   update(time) {
     if (this.cameraUpTween) this.cameraUpTween.update(time);
     if (this.cameraTween) this.cameraTween.update(time);
@@ -26748,6 +26789,8 @@ class TransitionControls extends EventDispatcher {
     }
   }
   cancel() {
+    const transition = this.activeTransition;
+    this.activeTransition = null;
     if (this.cameraTween) {
       this.cameraTween.stop();
       this.cameraTween = null;
@@ -26760,6 +26803,7 @@ class TransitionControls extends EventDispatcher {
       this.cameraUpTween.stop();
       this.cameraUpTween = null;
     }
+    transition == null ? void 0 : transition.resolve(false);
   }
 }
 var sky_default$1 = "uniform vec3 sunPosition;uniform float rayleigh;uniform float turbidity;uniform float mieCoefficient;uniform vec3 up;varying vec3 vWorldPosition;varying vec3 vSunDirection;varying float vSunfade;varying vec3 vBetaR;varying vec3 vBetaM;varying float vSunE;const float e=2.71828182845904523536028747135266249775724709369995957;const float pi=3.141592653589793238462643383279502884197169;const vec3 lambda=vec3(680E-9,550E-9,450E-9);const vec3 totalRayleigh=vec3(5.804542996261093E-6,1.3562911419845635E-5,3.0265902468824876E-5);const float v=4.0;const vec3 K=vec3(0.686,0.678,0.666);const vec3 MieConst=vec3(1.8399918514433978E14,2.7798023919660528E14,4.0790479543861094E14);const float cutoffAngle=1.6110731556870734;const float steepness=1.5;const float EE=1000.0;float sunIntensity(float zenithAngleCos){zenithAngleCos=clamp(zenithAngleCos,-1.0,1.0);return EE*max(0.0,1.0-pow(e,-((cutoffAngle-acos(zenithAngleCos))/steepness)));}vec3 totalMie(float T){float c=(0.2*T)*10E-18;return 0.434*c*MieConst;}void main(){vec4 worldPosition=modelMatrix*vec4(position,1.0);vWorldPosition=worldPosition.xyz;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);gl_Position.z=gl_Position.w;vSunDirection=normalize(sunPosition);vSunE=sunIntensity(dot(vSunDirection,up));vSunfade=1.0-clamp(1.0-exp((sunPosition.y/450000.0)),0.0,1.0);float rayleighCoefficient=rayleigh-(1.0*(1.0-vSunfade));vBetaR=totalRayleigh*rayleighCoefficient;vBetaM=totalMie(turbidity)*mieCoefficient;}";
@@ -27152,7 +27196,7 @@ class GeojsonLayer extends ContentLayer {
     this.clear();
   }
 }
-const GAUSSIAN_FORMATS = /* @__PURE__ */ new Set(["ply", "sog"]);
+const GAUSSIAN_FORMATS = /* @__PURE__ */ new Set(["ply", "sog", "spz", "rad"]);
 function geodeticToEcefPosition(longitude, latitude, altitude) {
   const semiMajorAxis = 6378137;
   const eccentricity = 0.081819190842622;
@@ -27189,7 +27233,7 @@ function validateGaussianSplatLayerDefinition(definition) {
   }
   requireNonEmptyString((_a3 = definition.data) == null ? void 0 : _a3.url, "data.url");
   if (!GAUSSIAN_FORMATS.has((_b2 = definition.data) == null ? void 0 : _b2.format)) {
-    throw new Error('data.format must be "ply" or "sog".');
+    throw new Error('data.format must be "ply", "sog", "spz", or "rad".');
   }
   const renderOrder = ((_c = definition.options) == null ? void 0 : _c.renderOrder) ?? 0;
   if (renderOrder !== 0) {
@@ -27261,7 +27305,9 @@ function makeGaussianSplatTransform(transform) {
 }
 const FORMAT_TYPES = {
   ply: SplatFileType.PLY,
-  sog: SplatFileType.PCSOGSZIP
+  sog: SplatFileType.PCSOGSZIP,
+  spz: SplatFileType.SPZ,
+  rad: SplatFileType.RAD
 };
 function normalizeError(error) {
   return error instanceof Error ? error : new Error(String(error));
@@ -27292,39 +27338,15 @@ class GaussianSplatLayer extends ContentLayer {
     }
   }
   async load() {
-    var _a3, _b2, _c, _d, _e2, _f, _g, _h, _i2;
+    var _a3, _b2, _c, _d, _e2, _f, _g, _h, _i2, _j;
     if (this.loadState === "loading" || this.loadState === "ready" || this.loadState === "disposed") return;
     const attempt = ++this.loadAttempt;
     this.loadState = "loading";
-    this.abortController = new AbortController();
     let mesh = null;
     try {
       (_b2 = (_a3 = this.callbacks).onStart) == null ? void 0 : _b2.call(_a3, this);
       (_d = (_c = this.callbacks).ensureRenderer) == null ? void 0 : _d.call(_c);
-      const response = await fetch(this.definition.data.url, { signal: this.abortController.signal });
-      if (!response.ok) {
-        throw new Error(`Failed to load Gaussian splat: ${response.status} ${response.statusText}`);
-      }
-      if (!response.body) {
-        throw new Error("Failed to load Gaussian splat: response body is unavailable.");
-      }
-      const contentLengthHeader = response.headers.get("Content-Length");
-      const contentLength = contentLengthHeader === null ? void 0 : Number.parseInt(contentLengthHeader, 10);
-      mesh = new SplatMesh({
-        stream: response.body,
-        streamLength: Number.isFinite(contentLength) && contentLength >= 0 ? contentLength : void 0,
-        fileType: FORMAT_TYPES[this.definition.data.format],
-        onProgress: (event) => {
-          var _a4, _b3;
-          if (this.loadState !== "disposed" && attempt === this.loadAttempt) {
-            (_b3 = (_a4 = this.callbacks).onProgress) == null ? void 0 : _b3.call(_a4, this, {
-              loaded: event.loaded,
-              total: event.total,
-              lengthComputable: event.lengthComputable
-            });
-          }
-        }
-      });
+      mesh = this.definition.data.format === "rad" ? this.createPagedMesh() : await this.createDirectMesh(attempt);
       mesh.layers.set(0);
       mesh.matrix.copy(this.transformMatrix);
       mesh.matrix.decompose(mesh.position, mesh.quaternion, mesh.scale);
@@ -27332,23 +27354,66 @@ class GaussianSplatLayer extends ContentLayer {
       mesh.matrixWorldNeedsUpdate = true;
       this.splatMesh = mesh;
       this.add(mesh);
-      await mesh.initialized;
+      if (this.definition.data.format === "rad") {
+        if (!((_e2 = mesh.paged) == null ? void 0 : _e2.getRadMeta)) {
+          throw new Error("Failed to initialize paged RAD streaming.");
+        }
+        await Promise.all([mesh.initialized, mesh.paged.getRadMeta()]);
+      } else {
+        await mesh.initialized;
+      }
       if (this.loadState === "disposed" || attempt !== this.loadAttempt) {
         this.disposeMesh(mesh);
         return;
       }
       this.abortController = null;
       this.loadState = "ready";
-      (_f = (_e2 = this.callbacks).onReady) == null ? void 0 : _f.call(_e2, this);
+      (_g = (_f = this.callbacks).onReady) == null ? void 0 : _g.call(_f, this);
     } catch (error) {
       this.disposeMesh(mesh);
-      const aborted = (_g = this.abortController) == null ? void 0 : _g.signal.aborted;
+      const aborted = (_h = this.abortController) == null ? void 0 : _h.signal.aborted;
       this.abortController = null;
       if (this.loadState === "disposed" || attempt !== this.loadAttempt || aborted) return;
       this.loadState = "error";
-      (_i2 = (_h = this.callbacks).onError) == null ? void 0 : _i2.call(_h, this, normalizeError(error));
+      (_j = (_i2 = this.callbacks).onError) == null ? void 0 : _j.call(_i2, this, normalizeError(error));
     }
   }
+  createPagedMesh() {
+    const paged = new PagedSplats({
+      rootUrl: this.definition.data.url,
+      fileType: FORMAT_TYPES[this.definition.data.format]
+    });
+    return new SplatMesh({
+      paged
+    });
+  }
+  async createDirectMesh(attempt) {
+    this.abortController = new AbortController();
+    const response = await fetch(this.definition.data.url, { signal: this.abortController.signal });
+    if (!response.ok) {
+      throw new Error(`Failed to load Gaussian splat: ${response.status} ${response.statusText}`);
+    }
+    if (!response.body) {
+      throw new Error("Failed to load Gaussian splat: response body is unavailable.");
+    }
+    const contentLengthHeader = response.headers.get("Content-Length");
+    const contentLength = contentLengthHeader === null ? void 0 : Number.parseInt(contentLengthHeader, 10);
+    return new SplatMesh({
+      stream: response.body,
+      streamLength: Number.isFinite(contentLength) && contentLength >= 0 ? contentLength : void 0,
+      fileType: FORMAT_TYPES[this.definition.data.format],
+      onProgress: (event) => {
+        var _a3, _b2;
+        if (this.loadState !== "disposed" && attempt === this.loadAttempt) {
+          (_b2 = (_a3 = this.callbacks).onProgress) == null ? void 0 : _b2.call(_a3, this, {
+            loaded: event.loaded,
+            total: event.total,
+            lengthComputable: event.lengthComputable
+          });
+        }
+      }
+    });
+  }
   disposeMesh(mesh) {
     if (!mesh || mesh.userData.gaussianSplatDisposed) return;
     mesh.userData.gaussianSplatDisposed = true;
@@ -27396,12 +27461,17 @@ const ViewerEvents = (
   }
 );
 class Viewer extends EventDispatcher {
+  /**
+   * @param {HTMLElement | null} container
+   * @param {import('../main.js').ViewerOptions} [options]
+   */
   constructor(container, options = {}) {
     super();
     this.isViewer = true;
     this.type = "viewer";
     this.disposed = false;
     this.sparkRenderer = null;
+    this.transparentBackground = options.transparentBackground ?? true;
     Tokens.CESIUM = options.cesiumToken || void 0;
     Tokens.GOOGLEMAPS = options.googleMapsToken || void 0;
     this.state = new StateDispatcher({
@@ -27412,9 +27482,11 @@ class Viewer extends EventDispatcher {
     });
     this.renderer = new WebGLRenderer({
       antialias: true,
-      powerPreference: "high-performance"
+      powerPreference: "high-performance",
+      alpha: this.transparentBackground,
+      premultipliedAlpha: true
     });
-    this.renderer.setClearColor(16777215, 1);
+    this.renderer.setClearColor(this.transparentBackground ? 0 : 16777215, this.transparentBackground ? 0 : 1);
     this.renderer.toneMapping = AgXToneMapping;
     this.renderer.outputColorSpace = SRGBColorSpace;
     this.renderer.toneMappingExposure = 1;
@@ -27449,6 +27521,7 @@ class Viewer extends EventDispatcher {
     this.transitionControls = new TransitionControls(this.camera);
     this.globeManager = new GlobeManager(this.scene, this.camera, this.renderer, { apiToken: Tokens.CESIUM, googleMapsToken: Tokens.GOOGLEMAPS });
     if (this.globeManager.tiles) {
+      this.globeManager.tiles.group.visible = !this.transparentBackground;
       this.globeControls.setTilesRenderer(this.globeManager.tiles);
     }
     this.cameraCoords = {};
@@ -27492,6 +27565,7 @@ class Viewer extends EventDispatcher {
     if (container) this.appendTo(container);
     this.sky = new Sky();
     this.sky.scale.setScalar(2e7);
+    this.sky.visible = !this.transparentBackground;
     this.scene.add(this.sky);
     const phi = MathUtils.degToRad(80);
     const theta = MathUtils.degToRad(180);
@@ -27551,7 +27625,7 @@ class Viewer extends EventDispatcher {
     return coords;
   }
   setBackgroundColor(color) {
-    this.renderer.setClearColor(color, 0);
+    this.renderer.setClearColor(color, this.transparentBackground ? 0 : 1);
   }
   appendTo(container) {
     this.container = container;
@@ -27847,8 +27921,8 @@ class Viewer extends EventDispatcher {
   async alignCamera(lon, lat, alt, pitch = this.cameraCoords.pitch, yaw = this.cameraCoords.yaw, roll = this.cameraCoords.roll, duration = TweenSettings.DURATION) {
     const targetPosition = new Vector3().fromArray(geodeticToEcefPosition$1(lon, lat, alt));
     const targetQuaternion = geodeticToEcefRotation(lon, lat, pitch, yaw, roll);
-    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then(() => {
-      this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt, pitch, yaw, roll });
+    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then((completed) => {
+      if (completed) this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt, pitch, yaw, roll });
     });
   }
   async focusCamera(lon, lat, alt, distance = 2e3, pitch = this.cameraCoords.pitch, duration = TweenSettings.DURATION) {
@@ -27856,8 +27930,8 @@ class Viewer extends EventDispatcher {
     const targetQuaternion = geodeticToEcefRotation(lon, lat, pitch, 0, 0);
     const direction = new Vector3(0, 0, 1).applyQuaternion(targetQuaternion);
     targetPosition.addScaledVector(direction, distance);
-    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then(() => {
-      this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
+    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then((completed) => {
+      if (completed) this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
     });
   }
   async angleCamera(pitch = this.cameraCoords.pitch, yaw = this.cameraCoords.yaw, duration = TweenSettings.DURATION) {
@@ -27868,17 +27942,17 @@ class Viewer extends EventDispatcher {
     const targetQuaternion = geodeticToEcefRotation(lon, lat, pitch, yaw, 0);
     const direction = new Vector3(0, 0, 1).applyQuaternion(targetQuaternion);
     targetPosition.addScaledVector(direction, distance);
-    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then(() => {
-      this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
+    return this.transitionControls.animateTo(targetPosition, targetQuaternion, duration).then((completed) => {
+      if (completed) this.dispatchEvent({ type: ViewerEvents.TRANSITIONED, lon, lat, alt });
     });
   }
   setViewMode(mode = "3d") {
     if (mode == "3d") {
       this.globeControls.rotationSpeed = 1;
-      this.angleCamera(-60, void 0, 500);
+      return this.angleCamera(-60, void 0, 500);
     } else {
       this.globeControls.rotationSpeed = 0;
-      this.angleCamera(-90, 0, 500);
+      return this.angleCamera(-90, 0, 500);
     }
   }
   exportScene() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@splnlss/3d-story-viewer",
-    "version": "0.5.5",
+    "version": "0.5.7",
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
@@ -25,10 +25,15 @@
         }
     },
     "scripts": {
+        "patch:spark": "patch-package --error-on-fail && node scripts/check-spark-backport.mjs",
+        "predev": "yarn patch:spark",
         "dev": "vite",
+        "prebuild": "yarn patch:spark",
         "build": "vite build && tsc -p tsconfig.types.json",
         "preview": "vite preview",
+        "pretest": "yarn patch:spark",
         "test": "vitest run",
+        "pretest:browser": "yarn patch:spark",
         "test:browser": "playwright test",
         "test:all": "npm run test && npm run test:browser",
         "pack:check": "node scripts/check-package-assets.mjs",
@@ -40,6 +45,8 @@
         "@loaders.gl/gltf": "^4.3.4",
         "@loaders.gl/polyfills": "^4.3.4",
         "@playwright/test": "1.62.1",
+        "patch-package": "8.0.1",
+        "pngjs": "7.0.0",
         "typescript": "5.9.3",
         "vitest": "3.2.7"
     },
@@ -49,6 +56,7 @@
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tweenjs/tween.js": "^25.0.0",
         "@vitejs/plugin-basic-ssl": "^1.2.0",
+        "dotenv": "^17.2.2",
         "earcut": "^3.0.1",
         "sass": "^1.83.4",
         "stats.js": "^0.17.0",
@@ -57,7 +65,6 @@
         "terser": "^5.37.0",
         "three": "0.185.1",
         "vite": "^6.0.5",
-        "vite-plugin-glsl": "^1.3.1",
-        "dotenv": "^17.2.2"
+        "vite-plugin-glsl": "^1.3.1"
     }
 }