3dtiles-inspector 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -6,6 +6,22 @@ The format is based on Keep a Changelog and this project follows Semantic Versio
 
 ## [Unreleased]
 
+## [0.1.5] - 2026-04-27
+
+### Added
+
+- Added an LOD `Layer Multiplier` slider to scale geometric errors progressively by distance from leaf tiles.
+
+### Changed
+
+- Tightened inspector toolbar spacing and LOD slider value labels.
+
+## [0.1.4] - 2026-04-25
+
+### Changed
+
+- Raised the default tileset and terrain geometric-error targets to `16` for more consistent LOD behavior.
+
 ## [0.1.3] - 2026-04-25
 
 ### Fixed

package/README.md

@@ -82,6 +82,7 @@ const {
 - `Set Position` to click the globe, terrain, or loaded tiles and place the tileset there
 - `Terrain` to toggle Cesium World Terrain while keeping satellite imagery
 - `Geometric Error` scaling from `1/16x` to `16x`
+- `Layer Multiplier` scaling from `1/1.5x` to `1.5x` for leaf-based geometric error changes between tile depths
 - `Save` to persist the updated root transform and geometric-error scale back to disk
 
 If `build_summary.json` exists next to the root tileset, `Save` also updates:
@@ -90,6 +91,7 @@ If `build_summary.json` exists next to the root tileset, `Save` also updates:
 - `root_transform_source`
 - `root_coordinate`
 - `viewer_geometric_error_scale`
+- `viewer_geometric_error_layer_scale`
 
 ## Package Surface
 

package/dist/inspector-assets/viewer/app.js

@@ -65484,14 +65484,28 @@ var geometricErrorScaleInput = document.getElementById(
   "geometric-error-scale"
 );
 var geometricErrorValueEl = document.getElementById("geometric-error-value");
+var geometricErrorLayerScaleInput = document.getElementById(
+  "geometric-error-layer-scale"
+);
+var geometricErrorLayerValueEl = document.getElementById(
+  "geometric-error-layer-value"
+);
 var setPositionButton = document.getElementById("set-position");
 var resetButton = document.getElementById("reset");
 var saveButton = document.getElementById("save");
 var GEOMETRIC_ERROR_SCALE_MIN_EXPONENT = -4;
 var GEOMETRIC_ERROR_SCALE_MAX_EXPONENT = 4;
 var GEOMETRIC_ERROR_SCALE_STEP = 0.1;
-var DEFAULT_ERROR_TARGET = 6;
-var DEFAULT_TERRAIN_ERROR_TARGET = 2;
+var GEOMETRIC_ERROR_LAYER_SCALE_MAX = 1.5;
+var GEOMETRIC_ERROR_LAYER_SCALE_MIN_EXPONENT = -Math.log2(
+  GEOMETRIC_ERROR_LAYER_SCALE_MAX
+);
+var GEOMETRIC_ERROR_LAYER_SCALE_MAX_EXPONENT = Math.log2(
+  GEOMETRIC_ERROR_LAYER_SCALE_MAX
+);
+var GEOMETRIC_ERROR_LAYER_SCALE_STEP = "any";
+var DEFAULT_ERROR_TARGET = 16;
+var DEFAULT_TERRAIN_ERROR_TARGET = 16;
 var RUNTIME_STATS_UPDATE_INTERVAL_MS = 250;
 function normalizeLocalResourceUrl(value) {
   if (typeof value !== "string" || value.length === 0) {
@@ -65801,12 +65815,16 @@ var savedRootInverseMatrix = new Matrix4();
 var pointerCoords = new Vector2();
 var pickRaycaster = new Raycaster();
 var pickTargets = [];
+var originalTileGeometricErrors = /* @__PURE__ */ new WeakMap();
 var tiles = null;
 var toolbarVisible = true;
 var activeTransformMode = null;
 var geometricErrorScaleExponent = 0;
 var geometricErrorScale = 1;
 var lastSavedGeometricErrorScale = 1;
+var geometricErrorLayerScaleExponent = 0;
+var geometricErrorLayerScale = 1;
+var lastSavedGeometricErrorLayerScale = 1;
 var lastSavedMatrix = new Matrix4();
 var savedRootMatrix = new Matrix4();
 var savedRootMatrixPromise = Promise.resolve();
@@ -65831,9 +65849,73 @@ function updateGeometricErrorScaleDisplay() {
     geometricErrorScale
   )}`;
 }
+function updateGeometricErrorLayerScaleDisplay() {
+  geometricErrorLayerValueEl.textContent = `x${formatGeometricErrorScale(
+    geometricErrorLayerScale
+  )}`;
+}
 function getEffectiveGeometricErrorScale() {
   return lastSavedGeometricErrorScale * geometricErrorScale;
 }
+function getEffectiveGeometricErrorLayerScale() {
+  return lastSavedGeometricErrorLayerScale * geometricErrorLayerScale;
+}
+function getKnownTileLeafDistance(tile, visited = /* @__PURE__ */ new Set()) {
+  if (!tile || typeof tile !== "object" || visited.has(tile)) {
+    return 0;
+  }
+  visited.add(tile);
+  let maxDistance = 0;
+  const children = Array.isArray(tile.children) ? tile.children : [];
+  for (const child of children) {
+    maxDistance = Math.max(
+      maxDistance,
+      getKnownTileLeafDistance(child, visited) + 1
+    );
+  }
+  visited.delete(tile);
+  return maxDistance;
+}
+function getOriginalTileGeometricError(tile) {
+  if (!tile || typeof tile !== "object") {
+    return null;
+  }
+  if (!originalTileGeometricErrors.has(tile)) {
+    const number = Number(tile.geometricError);
+    if (!Number.isFinite(number)) {
+      return null;
+    }
+    originalTileGeometricErrors.set(tile, number);
+  }
+  return originalTileGeometricErrors.get(tile);
+}
+function applyGeometricErrorLayerScaleToTile(tile) {
+  const originalGeometricError = getOriginalTileGeometricError(tile);
+  if (originalGeometricError === null) {
+    return;
+  }
+  const leafDistance = getKnownTileLeafDistance(tile);
+  tile.geometricError = originalGeometricError * getEffectiveGeometricErrorLayerScale() ** leafDistance;
+}
+function applyGeometricErrorLayerScaleToTileset() {
+  if (!tiles) {
+    return;
+  }
+  tiles.traverse(
+    (tile) => {
+      applyGeometricErrorLayerScaleToTile(tile);
+      return false;
+    },
+    null,
+    false
+  );
+}
+var geometricErrorLayerScalePlugin = {
+  name: "GeometricErrorLayerScalePlugin",
+  preprocessNode(tile) {
+    applyGeometricErrorLayerScaleToTile(tile);
+  }
+};
 function getGaussianMeshSplatCount(mesh) {
   if (!mesh || typeof mesh !== "object") {
     return 0;
@@ -65898,6 +65980,19 @@ function setGeometricErrorScaleExponent(exponent) {
   updateGeometricErrorScaleDisplay();
   updateTilesetErrorTarget();
 }
+function setGeometricErrorLayerScaleExponent(exponent) {
+  geometricErrorLayerScaleExponent = clamp2(
+    Number(exponent),
+    GEOMETRIC_ERROR_LAYER_SCALE_MIN_EXPONENT,
+    GEOMETRIC_ERROR_LAYER_SCALE_MAX_EXPONENT
+  );
+  geometricErrorLayerScale = exponentToGeometricErrorScale(
+    geometricErrorLayerScaleExponent
+  );
+  geometricErrorLayerScaleInput.value = geometricErrorLayerScaleExponent.toFixed(1);
+  updateGeometricErrorLayerScaleDisplay();
+  applyGeometricErrorLayerScaleToTileset();
+}
 function syncTerrainButton() {
   terrainButton.classList.toggle("active", terrainEnabled);
   terrainLight.visible = terrainEnabled;
@@ -65979,7 +66074,15 @@ function toggleTransformMode(mode) {
 geometricErrorScaleInput.min = String(GEOMETRIC_ERROR_SCALE_MIN_EXPONENT);
 geometricErrorScaleInput.max = String(GEOMETRIC_ERROR_SCALE_MAX_EXPONENT);
 geometricErrorScaleInput.step = String(GEOMETRIC_ERROR_SCALE_STEP);
+geometricErrorLayerScaleInput.min = String(
+  GEOMETRIC_ERROR_LAYER_SCALE_MIN_EXPONENT
+);
+geometricErrorLayerScaleInput.max = String(
+  GEOMETRIC_ERROR_LAYER_SCALE_MAX_EXPONENT
+);
+geometricErrorLayerScaleInput.step = String(GEOMETRIC_ERROR_LAYER_SCALE_STEP);
 setGeometricErrorScaleExponent(geometricErrorScaleExponent);
+setGeometricErrorLayerScaleExponent(geometricErrorLayerScaleExponent);
 setTerrainEnabled(terrainEnabled);
 setTransformMode(activeTransformMode);
 syncToolbarVisibility();
@@ -66473,7 +66576,9 @@ function loadTileset(url) {
   updateRuntimeStats(true);
   resetEditableGroup();
   lastSavedGeometricErrorScale = 1;
+  lastSavedGeometricErrorLayerScale = 1;
   setGeometricErrorScaleExponent(0);
+  setGeometricErrorLayerScaleExponent(0);
   savedRootMatrix.identity();
   savedRootMatrixLoadError = null;
   savedRootMatrixPromise = refreshSavedRootMatrix(url).then(
@@ -66496,7 +66601,16 @@ function loadTileset(url) {
   next.registerPlugin(new go());
   next.registerPlugin(new To());
   next.registerPlugin(new w2());
-  next.registerPlugin(new GaussianSplatPlugin({ renderer, scene }));
+  next.registerPlugin(geometricErrorLayerScalePlugin);
+  next.registerPlugin(
+    new GaussianSplatPlugin({
+      renderer,
+      scene,
+      sparkRendererOptions: {
+        accumExtSplats: true
+      }
+    })
+  );
   debugTilesPlugin = new Oo({
     displayBoxBounds: showBoundingVolume,
     displaySphereBounds: showBoundingVolume,
@@ -66543,6 +66657,7 @@ function loadTileset(url) {
       setStatus("Tileset ready.");
     }
   };
+  next.addEventListener("load-tileset", applyGeometricErrorLayerScaleToTileset);
   next.addEventListener("load-tile-set", tryFrame);
   next.addEventListener("load-tileset", tryFrame);
 }
@@ -66554,6 +66669,8 @@ async function saveTransform() {
   const incrementalMatrix = currentMatrix.clone().multiply(lastSavedMatrix.clone().invert());
   const incrementalGeometricErrorScale = geometricErrorScale;
   const savedGeometricErrorScale = getEffectiveGeometricErrorScale();
+  const incrementalGeometricErrorLayerScale = geometricErrorLayerScale;
+  const savedGeometricErrorLayerScale = getEffectiveGeometricErrorLayerScale();
   try {
     const response = await fetch(SAVE_URL, {
       method: "POST",
@@ -66561,6 +66678,7 @@ async function saveTransform() {
         "Content-Type": "application/json"
       },
       body: JSON.stringify({
+        geometricErrorLayerScale: incrementalGeometricErrorLayerScale,
         geometricErrorScale: incrementalGeometricErrorScale,
         transform: incrementalMatrix.toArray()
       })
@@ -66591,13 +66709,17 @@ async function saveTransform() {
       }
     }
     lastSavedGeometricErrorScale = savedGeometricErrorScale;
+    lastSavedGeometricErrorLayerScale = savedGeometricErrorLayerScale;
     lastSavedMatrix.copy(currentMatrix);
     setGeometricErrorScaleExponent(0);
+    setGeometricErrorLayerScaleExponent(0);
     syncTransformHandleFromTilesTransform();
     syncCoordinateInputsFromTilesTransform();
     setStatus(
-      `Saved transform and geometric-error scale x${formatGeometricErrorScale(
+      `Saved transform, geometric-error scale x${formatGeometricErrorScale(
         savedGeometricErrorScale
+      )}, and layer multiplier x${formatGeometricErrorScale(
+        savedGeometricErrorLayerScale
       )} to ${ROOT_TILESET_LABEL} and build_summary.json.`
     );
   } catch (err2) {
@@ -66638,6 +66760,16 @@ geometricErrorScaleInput.addEventListener("change", () => {
     )}.`
   );
 });
+geometricErrorLayerScaleInput.addEventListener("input", () => {
+  setGeometricErrorLayerScaleExponent(geometricErrorLayerScaleInput.value);
+});
+geometricErrorLayerScaleInput.addEventListener("change", () => {
+  setStatus(
+    `Geometric-error layer multiplier set to x${formatGeometricErrorScale(
+      geometricErrorLayerScale
+    )}.`
+  );
+});
 moveToTilesButton.addEventListener("click", moveCameraToTiles);
 moveCameraToCoordinateButton.addEventListener("click", moveCameraToCoordinate);
 moveTilesToCoordinateButton.addEventListener("click", moveTilesToCoordinate);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Inspect, align, and save local 3D Tiles root transforms in an interactive browser session.",
   "author": "William Liu <lyz15972107087@gmail.com>",
   "license": "Apache-2.0",

package/src/viewer/app.js

@@ -100,14 +100,28 @@ const geometricErrorScaleInput = document.getElementById(
   'geometric-error-scale',
 );
 const geometricErrorValueEl = document.getElementById('geometric-error-value');
+const geometricErrorLayerScaleInput = document.getElementById(
+  'geometric-error-layer-scale',
+);
+const geometricErrorLayerValueEl = document.getElementById(
+  'geometric-error-layer-value',
+);
 const setPositionButton = document.getElementById('set-position');
 const resetButton = document.getElementById('reset');
 const saveButton = document.getElementById('save');
 const GEOMETRIC_ERROR_SCALE_MIN_EXPONENT = -4;
 const GEOMETRIC_ERROR_SCALE_MAX_EXPONENT = 4;
 const GEOMETRIC_ERROR_SCALE_STEP = 0.1;
-const DEFAULT_ERROR_TARGET = 6;
-const DEFAULT_TERRAIN_ERROR_TARGET = 2;
+const GEOMETRIC_ERROR_LAYER_SCALE_MAX = 1.5;
+const GEOMETRIC_ERROR_LAYER_SCALE_MIN_EXPONENT = -Math.log2(
+  GEOMETRIC_ERROR_LAYER_SCALE_MAX,
+);
+const GEOMETRIC_ERROR_LAYER_SCALE_MAX_EXPONENT = Math.log2(
+  GEOMETRIC_ERROR_LAYER_SCALE_MAX,
+);
+const GEOMETRIC_ERROR_LAYER_SCALE_STEP = 'any';
+const DEFAULT_ERROR_TARGET = 16;
+const DEFAULT_TERRAIN_ERROR_TARGET = 16;
 const RUNTIME_STATS_UPDATE_INTERVAL_MS = 250;
 
 function normalizeLocalResourceUrl(value) {
@@ -470,12 +484,16 @@ const savedRootInverseMatrix = new Matrix4();
 const pointerCoords = new Vector2();
 const pickRaycaster = new Raycaster();
 const pickTargets = [];
+const originalTileGeometricErrors = new WeakMap();
 let tiles = null;
 let toolbarVisible = true;
 let activeTransformMode = null;
 let geometricErrorScaleExponent = 0;
 let geometricErrorScale = 1;
 let lastSavedGeometricErrorScale = 1;
+let geometricErrorLayerScaleExponent = 0;
+let geometricErrorLayerScale = 1;
+let lastSavedGeometricErrorLayerScale = 1;
 let lastSavedMatrix = new Matrix4();
 const savedRootMatrix = new Matrix4();
 let savedRootMatrixPromise = Promise.resolve();
@@ -496,8 +514,7 @@ function updateTilesetErrorTarget() {
     return;
   }
 
-  tiles.errorTarget =
-    DEFAULT_ERROR_TARGET / getEffectiveGeometricErrorScale();
+  tiles.errorTarget = DEFAULT_ERROR_TARGET / getEffectiveGeometricErrorScale();
 }
 
 function updateGeometricErrorScaleDisplay() {
@@ -506,10 +523,88 @@ function updateGeometricErrorScaleDisplay() {
   )}`;
 }
 
+function updateGeometricErrorLayerScaleDisplay() {
+  geometricErrorLayerValueEl.textContent = `x${formatGeometricErrorScale(
+    geometricErrorLayerScale,
+  )}`;
+}
+
 function getEffectiveGeometricErrorScale() {
   return lastSavedGeometricErrorScale * geometricErrorScale;
 }
 
+function getEffectiveGeometricErrorLayerScale() {
+  return lastSavedGeometricErrorLayerScale * geometricErrorLayerScale;
+}
+
+function getKnownTileLeafDistance(tile, visited = new Set()) {
+  if (!tile || typeof tile !== 'object' || visited.has(tile)) {
+    return 0;
+  }
+
+  visited.add(tile);
+  let maxDistance = 0;
+  const children = Array.isArray(tile.children) ? tile.children : [];
+  for (const child of children) {
+    maxDistance = Math.max(
+      maxDistance,
+      getKnownTileLeafDistance(child, visited) + 1,
+    );
+  }
+  visited.delete(tile);
+  return maxDistance;
+}
+
+function getOriginalTileGeometricError(tile) {
+  if (!tile || typeof tile !== 'object') {
+    return null;
+  }
+
+  if (!originalTileGeometricErrors.has(tile)) {
+    const number = Number(tile.geometricError);
+    if (!Number.isFinite(number)) {
+      return null;
+    }
+    originalTileGeometricErrors.set(tile, number);
+  }
+
+  return originalTileGeometricErrors.get(tile);
+}
+
+function applyGeometricErrorLayerScaleToTile(tile) {
+  const originalGeometricError = getOriginalTileGeometricError(tile);
+  if (originalGeometricError === null) {
+    return;
+  }
+
+  const leafDistance = getKnownTileLeafDistance(tile);
+  tile.geometricError =
+    originalGeometricError *
+    getEffectiveGeometricErrorLayerScale() ** leafDistance;
+}
+
+function applyGeometricErrorLayerScaleToTileset() {
+  if (!tiles) {
+    return;
+  }
+
+  tiles.traverse(
+    (tile) => {
+      applyGeometricErrorLayerScaleToTile(tile);
+      return false;
+    },
+    null,
+    false,
+  );
+}
+
+const geometricErrorLayerScalePlugin = {
+  name: 'GeometricErrorLayerScalePlugin',
+  preprocessNode(tile) {
+    applyGeometricErrorLayerScaleToTile(tile);
+  },
+};
+
 function getGaussianMeshSplatCount(mesh) {
   if (!mesh || typeof mesh !== 'object') {
     return 0;
@@ -572,7 +667,10 @@ function updateRuntimeStats(force = false) {
   }
 
   const now = performance.now();
-  if (!force && now - lastRuntimeStatsUpdateTime < RUNTIME_STATS_UPDATE_INTERVAL_MS) {
+  if (
+    !force &&
+    now - lastRuntimeStatsUpdateTime < RUNTIME_STATS_UPDATE_INTERVAL_MS
+  ) {
     return;
   }
 
@@ -581,7 +679,9 @@ function updateRuntimeStats(force = false) {
   const cacheBytes = tiles?.lruCache?.cachedBytes ?? 0;
   const activeSparkSplats = getActiveSparkSplatsCount();
   const splatCount =
-    activeSparkSplats !== null ? activeSparkSplats : getLoadedGaussianSplatCount();
+    activeSparkSplats !== null
+      ? activeSparkSplats
+      : getLoadedGaussianSplatCount();
 
   cacheBytesValueEl.textContent = formatBytes(cacheBytes);
   splatsCountValueEl.textContent = formatInteger(splatCount);
@@ -601,6 +701,21 @@ function setGeometricErrorScaleExponent(exponent) {
   updateTilesetErrorTarget();
 }
 
+function setGeometricErrorLayerScaleExponent(exponent) {
+  geometricErrorLayerScaleExponent = clamp(
+    Number(exponent),
+    GEOMETRIC_ERROR_LAYER_SCALE_MIN_EXPONENT,
+    GEOMETRIC_ERROR_LAYER_SCALE_MAX_EXPONENT,
+  );
+  geometricErrorLayerScale = exponentToGeometricErrorScale(
+    geometricErrorLayerScaleExponent,
+  );
+  geometricErrorLayerScaleInput.value =
+    geometricErrorLayerScaleExponent.toFixed(1);
+  updateGeometricErrorLayerScaleDisplay();
+  applyGeometricErrorLayerScaleToTileset();
+}
+
 function syncTerrainButton() {
   terrainButton.classList.toggle('active', terrainEnabled);
   terrainLight.visible = terrainEnabled;
@@ -698,7 +813,15 @@ function toggleTransformMode(mode) {
 geometricErrorScaleInput.min = String(GEOMETRIC_ERROR_SCALE_MIN_EXPONENT);
 geometricErrorScaleInput.max = String(GEOMETRIC_ERROR_SCALE_MAX_EXPONENT);
 geometricErrorScaleInput.step = String(GEOMETRIC_ERROR_SCALE_STEP);
+geometricErrorLayerScaleInput.min = String(
+  GEOMETRIC_ERROR_LAYER_SCALE_MIN_EXPONENT,
+);
+geometricErrorLayerScaleInput.max = String(
+  GEOMETRIC_ERROR_LAYER_SCALE_MAX_EXPONENT,
+);
+geometricErrorLayerScaleInput.step = String(GEOMETRIC_ERROR_LAYER_SCALE_STEP);
 setGeometricErrorScaleExponent(geometricErrorScaleExponent);
+setGeometricErrorLayerScaleExponent(geometricErrorLayerScaleExponent);
 setTerrainEnabled(terrainEnabled);
 setTransformMode(activeTransformMode);
 syncToolbarVisibility();
@@ -1320,7 +1443,9 @@ function loadTileset(url) {
 
   resetEditableGroup();
   lastSavedGeometricErrorScale = 1;
+  lastSavedGeometricErrorLayerScale = 1;
   setGeometricErrorScaleExponent(0);
+  setGeometricErrorLayerScaleExponent(0);
   savedRootMatrix.identity();
   savedRootMatrixLoadError = null;
   savedRootMatrixPromise = refreshSavedRootMatrix(url).then(
@@ -1344,7 +1469,16 @@ function loadTileset(url) {
   next.registerPlugin(new TileCompressionPlugin());
   next.registerPlugin(new UnloadTilesPlugin());
   next.registerPlugin(new ImplicitTilingPlugin());
-  next.registerPlugin(new GaussianSplatPlugin({ renderer, scene }));
+  next.registerPlugin(geometricErrorLayerScalePlugin);
+  next.registerPlugin(
+    new GaussianSplatPlugin({
+      renderer,
+      scene,
+      sparkRendererOptions: {
+        accumExtSplats: true,
+      },
+    }),
+  );
   debugTilesPlugin = new DebugTilesPlugin({
     displayBoxBounds: showBoundingVolume,
     displaySphereBounds: showBoundingVolume,
@@ -1395,6 +1529,7 @@ function loadTileset(url) {
     }
   };
 
+  next.addEventListener('load-tileset', applyGeometricErrorLayerScaleToTileset);
   next.addEventListener('load-tile-set', tryFrame);
   next.addEventListener('load-tileset', tryFrame);
 }
@@ -1410,6 +1545,8 @@ async function saveTransform() {
     .multiply(lastSavedMatrix.clone().invert());
   const incrementalGeometricErrorScale = geometricErrorScale;
   const savedGeometricErrorScale = getEffectiveGeometricErrorScale();
+  const incrementalGeometricErrorLayerScale = geometricErrorLayerScale;
+  const savedGeometricErrorLayerScale = getEffectiveGeometricErrorLayerScale();
 
   try {
     const response = await fetch(SAVE_URL, {
@@ -1418,6 +1555,7 @@ async function saveTransform() {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
+        geometricErrorLayerScale: incrementalGeometricErrorLayerScale,
         geometricErrorScale: incrementalGeometricErrorScale,
         transform: incrementalMatrix.toArray(),
       }),
@@ -1448,13 +1586,17 @@ async function saveTransform() {
       }
     }
     lastSavedGeometricErrorScale = savedGeometricErrorScale;
+    lastSavedGeometricErrorLayerScale = savedGeometricErrorLayerScale;
     lastSavedMatrix.copy(currentMatrix);
     setGeometricErrorScaleExponent(0);
+    setGeometricErrorLayerScaleExponent(0);
     syncTransformHandleFromTilesTransform();
     syncCoordinateInputsFromTilesTransform();
     setStatus(
-      `Saved transform and geometric-error scale x${formatGeometricErrorScale(
+      `Saved transform, geometric-error scale x${formatGeometricErrorScale(
         savedGeometricErrorScale,
+      )}, and layer multiplier x${formatGeometricErrorScale(
+        savedGeometricErrorLayerScale,
       )} to ${ROOT_TILESET_LABEL} and build_summary.json.`,
     );
   } catch (err) {
@@ -1502,6 +1644,16 @@ geometricErrorScaleInput.addEventListener('change', () => {
     )}.`,
   );
 });
+geometricErrorLayerScaleInput.addEventListener('input', () => {
+  setGeometricErrorLayerScaleExponent(geometricErrorLayerScaleInput.value);
+});
+geometricErrorLayerScaleInput.addEventListener('change', () => {
+  setStatus(
+    `Geometric-error layer multiplier set to x${formatGeometricErrorScale(
+      geometricErrorLayerScale,
+    )}.`,
+  );
+});
 moveToTilesButton.addEventListener('click', moveCameraToTiles);
 moveCameraToCoordinateButton.addEventListener('click', moveCameraToCoordinate);
 moveTilesToCoordinateButton.addEventListener('click', moveTilesToCoordinate);

package/src/viewer/session.js

@@ -184,10 +184,153 @@ function scaleGeometricErrorValue(target, key, scale, label) {
     throw new InspectorError(`${label} must be a finite number.`);
   }
 
-  target[key] = number * scale;
+  const next = number * scale;
+  if (!Number.isFinite(next)) {
+    throw new InspectorError(`${label} scaled value must be finite.`);
+  }
+
+  target[key] = next;
+}
+
+function getGeometricErrorScaleForLeafDistance(
+  geometricErrorScale,
+  geometricErrorLayerScale,
+  leafDistance,
+  label,
+) {
+  const scale =
+    geometricErrorScale * geometricErrorLayerScale ** Math.max(0, leafDistance);
+  if (!Number.isFinite(scale)) {
+    throw new InspectorError(`${label} scale must be a finite number.`);
+  }
+  return scale;
+}
+
+function assertTilesetPathInsideRoot(resolvedPath, rootDir) {
+  if (
+    resolvedPath !== rootDir &&
+    !resolvedPath.startsWith(`${rootDir}${path.sep}`)
+  ) {
+    throw new InspectorError(
+      `Nested tileset path escapes the viewer root: ${resolvedPath}`,
+    );
+  }
+}
+
+function getLocalExternalTilesetPaths(tile, baseDir) {
+  const paths = [];
+  if (!tile || typeof tile !== 'object') {
+    return paths;
+  }
+
+  if (tile.content && typeof tile.content === 'object') {
+    const filePath = getLocalJsonReferencePath(
+      baseDir,
+      tile.content.uri || tile.content.url,
+    );
+    if (filePath) {
+      paths.push(filePath);
+    }
+  }
+
+  if (Array.isArray(tile.contents)) {
+    tile.contents.forEach((entry) => {
+      if (entry && typeof entry === 'object') {
+        const filePath = getLocalJsonReferencePath(
+          baseDir,
+          entry.uri || entry.url,
+        );
+        if (filePath) {
+          paths.push(filePath);
+        }
+      }
+    });
+  }
+
+  return paths;
+}
+
+function getTilesetRootLeafDistance(
+  tilesetPath,
+  rootDir,
+  leafDistanceCache,
+  stack,
+) {
+  const resolvedPath = path.resolve(tilesetPath);
+  if (leafDistanceCache.has(resolvedPath)) {
+    return leafDistanceCache.get(resolvedPath);
+  }
+
+  if (stack.has(resolvedPath)) {
+    return 0;
+  }
+
+  assertTilesetPathInsideRoot(resolvedPath, rootDir);
+
+  if (!fs.existsSync(resolvedPath)) {
+    throw new InspectorError(
+      `Referenced nested tileset does not exist: ${resolvedPath}`,
+    );
+  }
+
+  const tileset = readJsonFile(resolvedPath);
+  if (!tileset || typeof tileset !== 'object' || !tileset.root) {
+    throw new InspectorError(`${resolvedPath} must contain a root object.`);
+  }
+
+  stack.add(resolvedPath);
+  const leafDistance = getTileLeafDistance(
+    tileset.root,
+    path.dirname(resolvedPath),
+    rootDir,
+    leafDistanceCache,
+    stack,
+  );
+  stack.delete(resolvedPath);
+  leafDistanceCache.set(resolvedPath, leafDistance);
+  return leafDistance;
+}
+
+function getTileLeafDistance(tile, baseDir, rootDir, leafDistanceCache, stack) {
+  if (!tile || typeof tile !== 'object') {
+    return 0;
+  }
+
+  let maxDistance = 0;
+  if (Array.isArray(tile.children)) {
+    tile.children.forEach((child) => {
+      maxDistance = Math.max(
+        maxDistance,
+        getTileLeafDistance(child, baseDir, rootDir, leafDistanceCache, stack) +
+          1,
+      );
+    });
+  }
+
+  getLocalExternalTilesetPaths(tile, baseDir).forEach((childTilesetPath) => {
+    maxDistance = Math.max(
+      maxDistance,
+      getTilesetRootLeafDistance(
+        childTilesetPath,
+        rootDir,
+        leafDistanceCache,
+        stack,
+      ) + 1,
+    );
+  });
+
+  return maxDistance;
 }
 
-function scaleTilesetGeometricErrors(tile, scale, pathLabel = 'tileset.root') {
+function scaleTilesetGeometricErrors(
+  tile,
+  geometricErrorScale,
+  geometricErrorLayerScale,
+  baseDir,
+  rootDir,
+  leafDistanceCache,
+  pathLabel = 'tileset.root',
+) {
   if (!tile || typeof tile !== 'object') {
     return;
   }
@@ -195,7 +338,12 @@ function scaleTilesetGeometricErrors(tile, scale, pathLabel = 'tileset.root') {
   scaleGeometricErrorValue(
     tile,
     'geometricError',
-    scale,
+    getGeometricErrorScaleForLeafDistance(
+      geometricErrorScale,
+      geometricErrorLayerScale,
+      getTileLeafDistance(tile, baseDir, rootDir, leafDistanceCache, new Set()),
+      pathLabel,
+    ),
     `${pathLabel}.geometricError`,
   );
 
@@ -206,7 +354,11 @@ function scaleTilesetGeometricErrors(tile, scale, pathLabel = 'tileset.root') {
   tile.children.forEach((child, index) => {
     scaleTilesetGeometricErrors(
       child,
-      scale,
+      geometricErrorScale,
+      geometricErrorLayerScale,
+      baseDir,
+      rootDir,
+      leafDistanceCache,
       `${pathLabel}.children[${index}]`,
     );
   });
@@ -234,27 +386,8 @@ function collectExternalTilesetPaths(tile, baseDir, results) {
     return;
   }
 
-  const maybePaths = [];
-  if (tile.content && typeof tile.content === 'object') {
-    maybePaths.push(
-      getLocalJsonReferencePath(baseDir, tile.content.uri || tile.content.url),
-    );
-  }
-
-  if (Array.isArray(tile.contents)) {
-    tile.contents.forEach((entry) => {
-      if (entry && typeof entry === 'object') {
-        maybePaths.push(
-          getLocalJsonReferencePath(baseDir, entry.uri || entry.url),
-        );
-      }
-    });
-  }
-
-  maybePaths.forEach((filePath) => {
-    if (filePath) {
-      results.add(filePath);
-    }
+  getLocalExternalTilesetPaths(tile, baseDir).forEach((filePath) => {
+    results.add(filePath);
   });
 
   if (!Array.isArray(tile.children)) {
@@ -268,7 +401,13 @@ function collectExternalTilesetPaths(tile, baseDir, results) {
 
 function updateTilesetJsonFile(
   tilesetPath,
-  { geometricErrorScale, rootDir, rootTransform = null },
+  {
+    geometricErrorLayerScale,
+    geometricErrorScale,
+    rootDir,
+    rootTransform = null,
+    leafDistanceCache = new Map(),
+  },
   visited = new Set(),
 ) {
   const resolvedPath = path.resolve(tilesetPath);
@@ -277,14 +416,7 @@ function updateTilesetJsonFile(
   }
   visited.add(resolvedPath);
 
-  if (
-    resolvedPath !== rootDir &&
-    !resolvedPath.startsWith(`${rootDir}${path.sep}`)
-  ) {
-    throw new InspectorError(
-      `Nested tileset path escapes the viewer root: ${resolvedPath}`,
-    );
-  }
+  assertTilesetPathInsideRoot(resolvedPath, rootDir);
 
   if (!fs.existsSync(resolvedPath)) {
     throw new InspectorError(
@@ -301,30 +433,44 @@ function updateTilesetJsonFile(
     tileset.root.transform = rootTransform.slice();
   }
 
+  const tilesetDir = path.dirname(resolvedPath);
   scaleGeometricErrorValue(
     tileset,
     'geometricError',
-    geometricErrorScale,
+    getGeometricErrorScaleForLeafDistance(
+      geometricErrorScale,
+      geometricErrorLayerScale,
+      getTileLeafDistance(
+        tileset.root,
+        tilesetDir,
+        rootDir,
+        leafDistanceCache,
+        new Set(),
+      ),
+      resolvedPath,
+    ),
     `${resolvedPath}.geometricError`,
   );
   scaleTilesetGeometricErrors(
     tileset.root,
     geometricErrorScale,
+    geometricErrorLayerScale,
+    tilesetDir,
+    rootDir,
+    leafDistanceCache,
     `${resolvedPath}.root`,
   );
   writeJsonAtomic(resolvedPath, tileset);
 
   const nestedTilesets = new Set();
-  collectExternalTilesetPaths(
-    tileset.root,
-    path.dirname(resolvedPath),
-    nestedTilesets,
-  );
+  collectExternalTilesetPaths(tileset.root, tilesetDir, nestedTilesets);
   nestedTilesets.forEach((childTilesetPath) => {
     updateTilesetJsonFile(
       childTilesetPath,
       {
+        geometricErrorLayerScale,
         geometricErrorScale,
+        leafDistanceCache,
         rootDir,
       },
       visited,
@@ -337,13 +483,17 @@ function updateTilesetJsonFile(
 function saveViewerTransform(
   rootTilesetPath,
   editMatrix,
-  { geometricErrorScale = 1 } = {},
+  { geometricErrorLayerScale = 1, geometricErrorScale = 1 } = {},
 ) {
   const normalizedEdit = normalizeMatrix4Array(editMatrix, 'transform');
   const normalizedGeometricErrorScale = normalizePositiveFinite(
     geometricErrorScale,
     'geometricErrorScale',
   );
+  const normalizedGeometricErrorLayerScale = normalizePositiveFinite(
+    geometricErrorLayerScale,
+    'geometricErrorLayerScale',
+  );
   const tilesetPath = path.resolve(rootTilesetPath);
   const rootDir = path.dirname(tilesetPath);
 
@@ -366,6 +516,7 @@ function saveViewerTransform(
   const nextRoot = multiplyMatrix4(normalizedEdit, currentRoot);
 
   updateTilesetJsonFile(tilesetPath, {
+    geometricErrorLayerScale: normalizedGeometricErrorLayerScale,
     geometricErrorScale: normalizedGeometricErrorScale,
     rootDir,
     rootTransform: nextRoot,
@@ -386,6 +537,15 @@ function saveViewerTransform(
     summary.root_coordinate = null;
     summary.viewer_geometric_error_scale =
       previousGeometricErrorScale * normalizedGeometricErrorScale;
+    const previousGeometricErrorLayerScale =
+      summary.viewer_geometric_error_layer_scale == null
+        ? 1
+        : normalizePositiveFinite(
+            summary.viewer_geometric_error_layer_scale,
+            'build_summary.viewer_geometric_error_layer_scale',
+          );
+    summary.viewer_geometric_error_layer_scale =
+      previousGeometricErrorLayerScale * normalizedGeometricErrorLayerScale;
     writeJsonAtomic(summaryPath, summary);
   }
 
@@ -529,9 +689,28 @@ async function handleSaveTransformRequest(rootTilesetPath, req, res) {
     return;
   }
 
+  let normalizedGeometricErrorLayerScale;
+  try {
+    normalizedGeometricErrorLayerScale = normalizePositiveFinite(
+      payload.geometricErrorLayerScale == null
+        ? 1
+        : payload.geometricErrorLayerScale,
+      'geometricErrorLayerScale',
+    );
+  } catch (err) {
+    sendJson(res, 400, {
+      error:
+        err instanceof Error && err.message
+          ? err.message
+          : 'geometricErrorLayerScale must be a finite number greater than 0.',
+    });
+    return;
+  }
+
   let nextRoot;
   try {
     nextRoot = saveViewerTransform(rootTilesetPath, normalizedEdit, {
+      geometricErrorLayerScale: normalizedGeometricErrorLayerScale,
       geometricErrorScale: normalizedGeometricErrorScale,
     });
   } catch (err) {
@@ -547,6 +726,7 @@ async function handleSaveTransformRequest(rootTilesetPath, req, res) {
   sendJson(res, 200, {
     ok: true,
     transform: nextRoot,
+    geometricErrorLayerScale: normalizedGeometricErrorLayerScale,
     geometricErrorScale: normalizedGeometricErrorScale,
   });
 }
@@ -756,7 +936,7 @@ function buildViewerHtml(viewerConfig) {
       .toolbar {
         display: grid;
         align-content: start;
-        gap: 12px;
+        gap: 10px;
         padding: 14px;
         border: 1px solid rgba(22, 50, 79, 0.12);
         border-top: 0;
@@ -782,7 +962,7 @@ function buildViewerHtml(viewerConfig) {
         justify-content: center;
         width: 100%;
         min-height: 32px;
-        padding: 10px 12px;
+        padding: 8px 12px;
         border: 1px solid rgba(22, 50, 79, 0.08);
         border-radius: 20px 20px 0 0;
         font: inherit;
@@ -804,7 +984,7 @@ function buildViewerHtml(viewerConfig) {
         justify-self: start;
         width: auto;
         min-height: 36px;
-        padding: 7px 12px 8px;
+        padding: 6px 12px 7px;
         border-radius: 999px;
         color: #506377;
         background: rgba(255, 255, 255, 0.94);
@@ -830,7 +1010,7 @@ function buildViewerHtml(viewerConfig) {
       .toolbar-section {
         display: grid;
         gap: 10px;
-        padding: 12px;
+        padding: 10px 12px;
         border: 1px solid rgba(22, 50, 79, 0.08);
         border-radius: 14px;
         background:
@@ -839,7 +1019,7 @@ function buildViewerHtml(viewerConfig) {
 
       .toolbar-section-header {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         justify-content: space-between;
         gap: 10px;
       }
@@ -857,7 +1037,7 @@ function buildViewerHtml(viewerConfig) {
         margin: 0;
         font-size: 12px;
         font-weight: 700;
-        color: #16324f;
+        color: #5d738b;
       }
 
       .button-row {
@@ -886,7 +1066,7 @@ function buildViewerHtml(viewerConfig) {
         justify-content: center;
         border: 0;
         border-radius: 999px;
-        padding: 9px 14px;
+        padding: 7px 14px;
         font: inherit;
         font-size: 14px;
         font-weight: 600;
@@ -926,6 +1106,14 @@ function buildViewerHtml(viewerConfig) {
         min-width: 0;
       }
 
+      .range-field-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+        min-width: 0;
+      }
+
       .range-field span {
         font-size: 11px;
         font-weight: 600;
@@ -1105,10 +1293,12 @@ function buildViewerHtml(viewerConfig) {
         <div class="toolbar-section">
           <div class="toolbar-section-header">
             <p class="toolbar-section-title">LOD</p>
-            <p id="geometric-error-value" class="toolbar-value">x1.00</p>
           </div>
           <label class="range-field">
-            <span>Geometric Error</span>
+            <div class="range-field-header">
+              <span>Geometric Error</span>
+              <p id="geometric-error-value" class="toolbar-value">x1.00</p>
+            </div>
             <input
               id="geometric-error-scale"
               type="range"
@@ -1118,6 +1308,20 @@ function buildViewerHtml(viewerConfig) {
               value="0"
             />
           </label>
+          <label class="range-field">
+            <div class="range-field-header">
+              <span>Layer Multiplier</span>
+              <p id="geometric-error-layer-value" class="toolbar-value">x1.00</p>
+            </div>
+            <input
+              id="geometric-error-layer-scale"
+              type="range"
+              min="-0.5849625007211562"
+              max="0.5849625007211562"
+              step="any"
+              value="0"
+            />
+          </label>
         </div>
         <div class="toolbar-section status-panel">
           <div class="status-actions">