@loaders.gl/tiles 3.1.0-alpha.4 → 3.1.0-beta.3

package/dist/utils/doubly-linked-list-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doubly-linked-list-node.d.ts","sourceRoot":"","sources":["../../src/utils/doubly-linked-list-node.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,IAAI,MAAC;IACL,QAAQ,MAAC;IACT,IAAI,MAAC;gBAEO,IAAI,KAAA,EAAE,QAAQ,KAAA,EAAE,IAAI,KAAA;CAKjC"}

package/dist/utils/doubly-linked-list-node.js

@@ -0,0 +1,17 @@
+"use strict";
+// This file is derived from the Cesium code base under Apache 2 license
+// See LICENSE.md and https://github.com/AnalyticalGraphicsInc/cesium/blob/master/LICENSE.md
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Doubly linked list node
+ *
+ * @private
+ */
+class DoublyLinkedListNode {
+    constructor(item, previous, next) {
+        this.item = item;
+        this.previous = previous;
+        this.next = next;
+    }
+}
+exports.default = DoublyLinkedListNode;

package/dist/utils/doubly-linked-list.d.ts

@@ -0,0 +1,31 @@
+import DoublyLinkedListNode from '../utils/doubly-linked-list-node';
+/**
+ * Doubly linked list
+ *
+ * @private
+ */
+export default class DoublyLinkedList {
+    head: DoublyLinkedListNode | null;
+    tail: DoublyLinkedListNode | null;
+    _length: number;
+    get length(): number;
+    /**
+     * Adds the item to the end of the list
+     * @param {*} [item]
+     * @return {DoublyLinkedListNode}
+     */
+    add(item: any): DoublyLinkedListNode;
+    /**
+     * Removes the given node from the list
+     * @param {DoublyLinkedListNode} node
+     */
+    remove(node: any): void;
+    /**
+     * Moves nextNode after node
+     * @param {DoublyLinkedListNode} node
+     * @param {DoublyLinkedListNode} nextNode
+     */
+    splice(node: any, nextNode: any): void;
+    _insert(node: any, nextNode: any): void;
+}
+//# sourceMappingURL=doubly-linked-list.d.ts.map

package/dist/utils/doubly-linked-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doubly-linked-list.d.ts","sourceRoot":"","sources":["../../src/utils/doubly-linked-list.ts"],"names":[],"mappings":"AAGA,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AAEpE;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAgB;IACnC,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IACzC,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAQ;IACzC,OAAO,SAAK;IAEZ,IAAI,MAAM,WAET;IAED;;;;OAIG;IACH,GAAG,CAAC,IAAI,KAAA;IAgBR;;;OAGG;IACH,MAAM,CAAC,IAAI,KAAA;IA4BX;;;;OAIG;IACH,MAAM,CAAC,IAAI,KAAA,EAAE,QAAQ,KAAA;IAUrB,OAAO,CAAC,IAAI,KAAA,EAAE,QAAQ,KAAA;CAgBvB"}

package/dist/utils/doubly-linked-list.js

@@ -0,0 +1,100 @@
+"use strict";
+// This file is derived from the Cesium code base under Apache 2 license
+// See LICENSE.md and https://github.com/AnalyticalGraphicsInc/cesium/blob/master/LICENSE.md
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const doubly_linked_list_node_1 = __importDefault(require("../utils/doubly-linked-list-node"));
+/**
+ * Doubly linked list
+ *
+ * @private
+ */
+class DoublyLinkedList {
+    constructor() {
+        this.head = null;
+        this.tail = null;
+        this._length = 0;
+    }
+    get length() {
+        return this._length;
+    }
+    /**
+     * Adds the item to the end of the list
+     * @param {*} [item]
+     * @return {DoublyLinkedListNode}
+     */
+    add(item) {
+        const node = new doubly_linked_list_node_1.default(item, this.tail, null);
+        if (this.tail) {
+            this.tail.next = node;
+            this.tail = node;
+        }
+        else {
+            this.head = node;
+            this.tail = node;
+        }
+        ++this._length;
+        return node;
+    }
+    /**
+     * Removes the given node from the list
+     * @param {DoublyLinkedListNode} node
+     */
+    remove(node) {
+        if (!node) {
+            return;
+        }
+        if (node.previous && node.next) {
+            node.previous.next = node.next;
+            node.next.previous = node.previous;
+        }
+        else if (node.previous) {
+            // Remove last node
+            node.previous.next = null;
+            this.tail = node.previous;
+        }
+        else if (node.next) {
+            // Remove first node
+            node.next.previous = null;
+            this.head = node.next;
+        }
+        else {
+            // Remove last node in the linked list
+            this.head = null;
+            this.tail = null;
+        }
+        node.next = null;
+        node.previous = null;
+        --this._length;
+    }
+    /**
+     * Moves nextNode after node
+     * @param {DoublyLinkedListNode} node
+     * @param {DoublyLinkedListNode} nextNode
+     */
+    splice(node, nextNode) {
+        if (node === nextNode) {
+            return;
+        }
+        // Remove nextNode, then insert after node
+        this.remove(nextNode);
+        this._insert(node, nextNode);
+    }
+    _insert(node, nextNode) {
+        const oldNodeNext = node.next;
+        node.next = nextNode;
+        // nextNode is the new tail
+        if (this.tail === node) {
+            this.tail = nextNode;
+        }
+        else {
+            oldNodeNext.previous = nextNode;
+        }
+        nextNode.next = oldNodeNext;
+        nextNode.previous = node;
+        ++this._length;
+    }
+}
+exports.default = DoublyLinkedList;

package/dist/utils/managed-array.d.ts

@@ -0,0 +1,85 @@
+/**
+ * A wrapper around arrays so that the internal length of the array can be manually managed.
+ *
+ * @alias ManagedArray
+ * @constructor
+ * @private
+ *
+ * @param {Number} [length=0] The initial length of the array.
+ */
+export default class ManagedArray {
+    _map: Map<any, any>;
+    _array: any[];
+    _length: number;
+    constructor(length?: number);
+    /**
+     * Gets or sets the length of the array.
+     * If the set length is greater than the length of the internal array, the internal array is resized.
+     *
+     * @memberof ManagedArray.prototype
+     * @type Number
+     */
+    get length(): number;
+    set length(length: number);
+    /**
+     * Gets the internal array.
+     *
+     * @memberof ManagedArray.prototype
+     * @type Array
+     * @readonly
+     */
+    get values(): any[];
+    /**
+     * Gets the element at an index.
+     *
+     * @param {Number} index The index to get.
+     */
+    get(index: any): any;
+    /**
+     * Sets the element at an index. Resizes the array if index is greater than the length of the array.
+     *
+     * @param {Number} index The index to set.
+     * @param {*} element The element to set at index.
+     */
+    set(index: any, element: any): void;
+    delete(element: any): void;
+    /**
+     * Returns the last element in the array without modifying the array.
+     *
+     * @returns {*} The last element in the array.
+     */
+    peek(): any;
+    /**
+     * Push an element into the array.
+     *
+     * @param {*} element The element to push.
+     */
+    push(element: any): void;
+    /**
+     * Pop an element from the array.
+     *
+     * @returns {*} The last element in the array.
+     */
+    pop(): any;
+    /**
+     * Resize the internal array if length > _array.length.
+     *
+     * @param {Number} length The length.
+     */
+    reserve(length: any): void;
+    /**
+     * Resize the array.
+     *
+     * @param {Number} length The length.
+     */
+    resize(length: any): void;
+    /**
+     * Trim the internal array to the specified length. Defaults to the current length.
+     *
+     * @param {Number} [length] The length.
+     */
+    trim(length: any): void;
+    reset(): void;
+    find(target: any): boolean;
+}
+//# sourceMappingURL=managed-array.d.ts.map

package/dist/utils/managed-array.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"managed-array.d.ts","sourceRoot":"","sources":["../../src/utils/managed-array.ts"],"names":[],"mappings":"AAKA;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,YAAY;IAC/B,IAAI,gBAAa;IACjB,MAAM,EAAE,GAAG,EAAE,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;gBAEJ,MAAM,SAAI;IAKtB;;;;;;OAMG;IACH,IAAI,MAAM,WAET;IAED,IAAI,MAAM,CAAC,MAAM,QAAA,EAKhB;IAED;;;;;;OAMG;IACH,IAAI,MAAM,UAET;IAED;;;;OAIG;IACH,GAAG,CAAC,KAAK,KAAA;IAKT;;;;;OAKG;IACH,GAAG,CAAC,KAAK,KAAA,EAAE,OAAO,KAAA;IAelB,MAAM,CAAC,OAAO,KAAA;IASd;;;;OAIG;IACH,IAAI;IAIJ;;;;OAIG;IACH,IAAI,CAAC,OAAO,KAAA;IAQZ;;;;OAIG;IACH,GAAG;IAMH;;;;OAIG;IACH,OAAO,CAAC,MAAM,KAAA;IAQd;;;;OAIG;IACH,MAAM,CAAC,MAAM,KAAA;IAMb;;;;OAIG;IACH,IAAI,CAAC,MAAM,KAAA;IAOX,KAAK;IAML,IAAI,CAAC,MAAM,KAAA;CAGZ"}

package/dist/utils/managed-array.js

@@ -0,0 +1,151 @@
+"use strict";
+// This file is derived from the Cesium code base under Apache 2 license
+// See LICENSE.md and https://github.com/AnalyticalGraphicsInc/cesium/blob/master/LICENSE.md
+Object.defineProperty(exports, "__esModule", { value: true });
+const loader_utils_1 = require("@loaders.gl/loader-utils");
+/**
+ * A wrapper around arrays so that the internal length of the array can be manually managed.
+ *
+ * @alias ManagedArray
+ * @constructor
+ * @private
+ *
+ * @param {Number} [length=0] The initial length of the array.
+ */
+class ManagedArray {
+    constructor(length = 0) {
+        this._map = new Map();
+        this._array = new Array(length);
+        this._length = length;
+    }
+    /**
+     * Gets or sets the length of the array.
+     * If the set length is greater than the length of the internal array, the internal array is resized.
+     *
+     * @memberof ManagedArray.prototype
+     * @type Number
+     */
+    get length() {
+        return this._length;
+    }
+    set length(length) {
+        this._length = length;
+        if (length > this._array.length) {
+            this._array.length = length;
+        }
+    }
+    /**
+     * Gets the internal array.
+     *
+     * @memberof ManagedArray.prototype
+     * @type Array
+     * @readonly
+     */
+    get values() {
+        return this._array;
+    }
+    /**
+     * Gets the element at an index.
+     *
+     * @param {Number} index The index to get.
+     */
+    get(index) {
+        (0, loader_utils_1.assert)(index < this._array.length);
+        return this._array[index];
+    }
+    /**
+     * Sets the element at an index. Resizes the array if index is greater than the length of the array.
+     *
+     * @param {Number} index The index to set.
+     * @param {*} element The element to set at index.
+     */
+    set(index, element) {
+        (0, loader_utils_1.assert)(index >= 0);
+        if (index >= this.length) {
+            this.length = index + 1;
+        }
+        if (this._map.has(this._array[index])) {
+            this._map.delete(this._array[index]);
+        }
+        this._array[index] = element;
+        this._map.set(element, index);
+    }
+    delete(element) {
+        const index = this._map.get(element);
+        if (index >= 0) {
+            this._array.splice(index, 1);
+            this._map.delete(element);
+            this.length--;
+        }
+    }
+    /**
+     * Returns the last element in the array without modifying the array.
+     *
+     * @returns {*} The last element in the array.
+     */
+    peek() {
+        return this._array[this._length - 1];
+    }
+    /**
+     * Push an element into the array.
+     *
+     * @param {*} element The element to push.
+     */
+    push(element) {
+        if (!this._map.has(element)) {
+            const index = this.length++;
+            this._array[index] = element;
+            this._map.set(element, index);
+        }
+    }
+    /**
+     * Pop an element from the array.
+     *
+     * @returns {*} The last element in the array.
+     */
+    pop() {
+        const element = this._array[--this.length];
+        this._map.delete(element);
+        return element;
+    }
+    /**
+     * Resize the internal array if length > _array.length.
+     *
+     * @param {Number} length The length.
+     */
+    reserve(length) {
+        (0, loader_utils_1.assert)(length >= 0);
+        if (length > this._array.length) {
+            this._array.length = length;
+        }
+    }
+    /**
+     * Resize the array.
+     *
+     * @param {Number} length The length.
+     */
+    resize(length) {
+        (0, loader_utils_1.assert)(length >= 0);
+        this.length = length;
+    }
+    /**
+     * Trim the internal array to the specified length. Defaults to the current length.
+     *
+     * @param {Number} [length] The length.
+     */
+    trim(length) {
+        if (length === null || length === undefined) {
+            length = this.length;
+        }
+        this._array.length = length;
+    }
+    reset() {
+        this._array = [];
+        this._map = new Map();
+        this._length = 0;
+    }
+    find(target) {
+        return this._map.has(target);
+    }
+}
+exports.default = ManagedArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loaders.gl/tiles",
-  "version": "3.1.0-alpha.4",
+  "version": "3.1.0-beta.3",
   "description": "Common components for different tiles loaders.",
   "license": "MIT",
   "publishConfig": {
@@ -19,7 +19,7 @@
     "point cloud",
     "pointcloud"
   ],
-  "types": "src/index.ts",
+  "types": "dist/index.d.ts",
   "main": "dist/es5/index.js",
   "module": "dist/esm/index.js",
   "sideEffects": false,
@@ -30,17 +30,19 @@
   ],
   "scripts": {
     "pre-build": "npm run build-bundle",
-    "build-bundle": "webpack --display=minimal --config ../../scripts/webpack/bundle.js"
+    "build-bundle": "esbuild src/bundle.ts --bundle --outfile=dist/bundle.js"
   },
   "dependencies": {
-    "@loaders.gl/core": "3.1.0-alpha.4",
-    "@loaders.gl/loader-utils": "3.1.0-alpha.4",
-    "@loaders.gl/math": "3.1.0-alpha.4",
+    "@loaders.gl/loader-utils": "3.1.0-beta.3",
+    "@loaders.gl/math": "3.1.0-beta.3",
     "@math.gl/core": "^3.5.1",
     "@math.gl/culling": "^3.5.1",
     "@math.gl/geospatial": "^3.5.1",
     "@math.gl/web-mercator": "^3.5.1",
     "@probe.gl/stats": "^3.4.0"
   },
-  "gitHead": "e309784af37ef9f3640c7733c7851124c72e1fa3"
+  "peerDependencies": {
+    "@loaders.gl/core": "3.1.0-beta.1"
+  },
+  "gitHead": "3537c382b3ea4e092b24b6f94c3edee72076039c"
 }

package/src/index.ts

@@ -9,6 +9,7 @@ export {createBoundingVolume} from './tileset/helpers/bounding-volume';
 export {calculateTransformProps} from './tileset/helpers/transform-utils';
 
 export {getFrameState} from './tileset/helpers/frame-state';
+export {getLodStatus} from './tileset/helpers/i3s-lod';
 
 export {
   TILE_CONTENT_STATE,

package/src/tileset/helpers/i3s-lod.ts

@@ -1,52 +1,23 @@
-import {toRadians} from '@math.gl/core';
-
-const WGS84_RADIUS_X = 6378137.0;
-// use this to bias the lod switching  (1+ results in increasing the LOD quality)
-const qualityFactor = Math.PI / 2; // empirical derived bias factor
-/* eslint-disable max-statements */
-export function lodJudge(tile, frameState) {
-  const viewport = frameState.viewport;
-  const metersPerPixel = viewport.metersPerPixel;
-
-  const mbsLat = tile.header.mbs[1];
-  const mbsLon = tile.header.mbs[0];
-  const mbsZ = tile.header.mbs[2];
-  const mbsR = tile.header.mbs[3];
-
-  const {height, width, latitude, longitude} = viewport;
-
-  const viewportCenter = [longitude, latitude];
-  const mbsCenter = [mbsLon, mbsLat, mbsZ];
-  const mbsLatProjected = [longitude, mbsLat];
-  const mbsLonProjected = [mbsLon, latitude];
-
-  const diagonalInMeters = Math.sqrt(height * height + width * width) * metersPerPixel[0];
-  const distanceInMeters = getDistanceFromLatLon(viewportCenter, mbsCenter);
-
-  const visibleHeight = height * 0.5 + mbsR / WGS84_RADIUS_X;
-  const visibleWidth = width * 0.5 + mbsR / WGS84_RADIUS_X;
-
-  if (distanceInMeters > diagonalInMeters + mbsR / WGS84_RADIUS_X) {
-    return 'OUT';
-  }
-  if (getDistanceFromLatLon(viewportCenter, mbsLatProjected) > visibleHeight) {
-    return 'OUT';
-  }
-  if (getDistanceFromLatLon(viewportCenter, mbsLonProjected) > visibleWidth) {
-    return 'OUT';
-  }
-
-  if (tile.lodMetricValue === 0) {
+import {Matrix4, Vector3} from '@math.gl/core';
+import {Ellipsoid} from '@math.gl/geospatial';
+import Tile3D from '../tile-3d';
+import {FrameState} from './frame-state';
+
+/**
+ * For the maxScreenThreshold error metric, maxError means that you should replace the node with it's children
+   as soon as the nodes bounding sphere has a screen radius larger than maxError pixels.
+   In this sense a value of 0 means you should always load it's children,
+   or if it's a leaf node, you should always display it.
+ * @param tile 
+ * @param frameState 
+ * @returns 
+ */
+export function getLodStatus(tile: Tile3D, frameState: FrameState): 'DIG' | 'OUT' | 'DRAW' {
+  if (tile.lodMetricValue === 0 || isNaN(tile.lodMetricValue)) {
     return 'DIG';
   }
-
-  // For the maxScreenThreshold error metric, maxError means that you should replace the node with it's children
-  // as soon as the nodes bounding sphere has a screen radius larger than maxError pixels.
-  // In this sense a value of 0 means you should always load it's children,
-  // or if it's a leaf node, you should always display it.
-  let screenSize = getI3ScreenSize(tile, frameState); // in pixels
-  screenSize *= qualityFactor;
-  if (screenSize < 0.5) {
+  const screenSize = 2 * getProjectedRadius(tile, frameState);
+  if (screenSize < 2) {
     return 'OUT';
   }
   if (!tile.header.children || screenSize <= tile.lodMetricValue) {
@@ -57,58 +28,63 @@ export function lodJudge(tile, frameState) {
   return 'OUT';
 }
 
-/* eslint-enable max-statements */
-
-function projectVertexToSphere([x, y, z]) {
-  const azim = toRadians(x);
-  const incl = toRadians(y);
-  const radius = 1.0 + z / WGS84_RADIUS_X;
-  const radCosInc = radius * Math.cos(incl);
-  x = radCosInc * Math.cos(azim);
-  y = radCosInc * Math.sin(azim);
-  z = radius * Math.sin(incl);
-  return [x, y, z];
-}
-
-function getDistanceFromLatLon(observer: number[], center: number[]) {
-  const [observerLon, observerLat, observerZ = 0.0] = observer;
-  const [centerLon, centerLat, centerZ = 0.0] = center;
-
-  const projectedCenter = projectVertexToSphere([centerLon, centerLat, centerZ]);
-  const projectedObserver = projectVertexToSphere([observerLon, observerLat, observerZ]);
-  const dx = projectedObserver[0] - projectedCenter[0];
-  const dy = projectedObserver[1] - projectedCenter[1];
-  const dz = projectedObserver[2] - projectedCenter[2];
-  return dx * dx + dy * dy + dz * dz;
-}
-
-export function getI3ScreenSize(tile, frameState) {
-  const viewport = frameState.viewport;
+/**
+ * Calculate size of MBS radius projected on the screen plane
+ * @param tile
+ * @param frameState
+ * @returns
+ */
+// eslint-disable-next-line max-statements
+export function getProjectedRadius(tile: Tile3D, frameState: FrameState): number {
+  const originalViewport = frameState.viewport;
+  const ViewportClass = originalViewport.constructor;
+  const {longitude, latitude, height, width, bearing, zoom} = originalViewport;
+  // @ts-ignore
+  const viewport = new ViewportClass({longitude, latitude, height, width, bearing, zoom, pitch: 0});
   const mbsLat = tile.header.mbs[1];
   const mbsLon = tile.header.mbs[0];
   const mbsZ = tile.header.mbs[2];
   const mbsR = tile.header.mbs[3];
-
-  const mbsCenter = [mbsLon, mbsLat, mbsZ];
+  const mbsCenterCartesian = [...tile.boundingVolume.center];
   const cameraPositionCartographic = viewport.unprojectPosition(viewport.cameraPosition);
-  const dSquared = getDistanceFromLatLon(cameraPositionCartographic, mbsCenter);
-  const mbsRNormalized = mbsR / WGS84_RADIUS_X;
-  const d = dSquared - mbsRNormalized * mbsRNormalized;
-  const fltMax = 3.4028235e38; // convert from 0x7f7fffff which is the maximum
-  if (d <= 0.0) {
-    return 0.5 * fltMax;
-  }
-  // https://stackoverflow.com/questions/21648630/radius-of-projected-sphere-in-screen-space
-  // There is a formula there to calculate projected radius:
-  // return 1.0 / Math.tan(fov) * r / Math.sqrt(d * d - r * r); // Right
-  // Hack: 300 is a Magic number to get the correct LoD. Possibly, d and r are calculated in a wrong way.
-  const screenSizeFactor =
-    ((getTanOfHalfVFAngle(frameState) * mbsRNormalized) / Math.sqrt(d)) * 300;
-  return screenSizeFactor;
-}
-
-function getTanOfHalfVFAngle(frameState) {
-  const {projectionMatrix} = frameState.viewport;
-  const t = projectionMatrix[5];
-  return t;
+  const cameraPositionCartesian = Ellipsoid.WGS84.cartographicToCartesian(
+    cameraPositionCartographic,
+    new Vector3()
+  );
+
+  // ---------------------------
+  // Calculate mbs border vertex
+  // ---------------------------
+  const toEye = new Vector3(cameraPositionCartesian).subtract(mbsCenterCartesian).normalize();
+  // Add extra vector to form plane
+  const enuToCartesianMatrix = new Matrix4();
+  Ellipsoid.WGS84.eastNorthUpToFixedFrame(mbsCenterCartesian, enuToCartesianMatrix);
+  const cartesianToEnuMatrix = new Matrix4(enuToCartesianMatrix).invert();
+  const cameraPositionEnu = new Vector3(cameraPositionCartesian).transform(cartesianToEnuMatrix);
+  // Mean Proportionals in Right Triangles - Altitude rule
+  // https://mathbitsnotebook.com/Geometry/RightTriangles/RTmeanRight.html
+  const projection = Math.sqrt(
+    cameraPositionEnu[0] * cameraPositionEnu[0] + cameraPositionEnu[1] * cameraPositionEnu[1]
+  );
+  const extraZ = (projection * projection) / cameraPositionEnu[2];
+  const extraVertexEnu = new Vector3([cameraPositionEnu[0], cameraPositionEnu[1], extraZ]);
+  const extraVertexCartesian = extraVertexEnu.transform(enuToCartesianMatrix);
+  const extraVectorCartesian = new Vector3(extraVertexCartesian)
+    .subtract(mbsCenterCartesian)
+    .normalize();
+  // We need radius vector orthogonal to toEye vector
+  const radiusVector = toEye.cross(extraVectorCartesian).normalize().scale(mbsR);
+  const sphereMbsBorderVertexCartesian = new Vector3(mbsCenterCartesian).add(radiusVector);
+  const sphereMbsBorderVertexCartographic = Ellipsoid.WGS84.cartesianToCartographic(
+    sphereMbsBorderVertexCartesian
+  );
+  // ---------------------------
+
+  // Project center vertex and border vertex and calculate projected radius of MBS
+  const projectedOrigin = viewport.project([mbsLon, mbsLat, mbsZ]);
+  const projectedMbsBorderVertex = viewport.project(sphereMbsBorderVertexCartographic);
+  const projectedRadius = new Vector3(projectedOrigin)
+    .subtract(projectedMbsBorderVertex)
+    .magnitude();
+  return projectedRadius;
 }

package/src/tileset/helpers/transform-utils.ts

@@ -59,5 +59,7 @@ export function calculateTransformProps(tileHeader, tile) {
   tile.cartographicOrigin = cartographicOrigin;
 
   // Deprecated, drop
-  tile.modelMatrix = tile.cartographicModelMatrix;
+  if (!tile.coordinateSystem) {
+    tile.modelMatrix = tile.cartographicModelMatrix;
+  }
 }

package/src/tileset/tile-3d.ts

@@ -9,7 +9,7 @@ import {TILE_REFINEMENT, TILE_CONTENT_STATE, TILESET_TYPE} from '../constants';
 import {FrameState} from './helpers/frame-state';
 import {createBoundingVolume} from './helpers/bounding-volume';
 import {getTiles3DScreenSpaceError} from './helpers/tiles-3d-lod';
-import {getI3ScreenSize} from './helpers/i3s-lod';
+import {getProjectedRadius} from './helpers/i3s-lod';
 import {get3dTilesOptions} from './helpers/3d-tiles-options';
 import TilesetTraverser from './traversers/tileset-traverser';
 
@@ -287,7 +287,7 @@ export default class TileHeader {
   getScreenSpaceError(frameState, useParentLodMetric) {
     switch (this.tileset.type) {
       case TILESET_TYPE.I3S:
-        return getI3ScreenSize(this, frameState);
+        return getProjectedRadius(this, frameState);
       case TILESET_TYPE.TILES3D:
         return getTiles3DScreenSpaceError(this, frameState, useParentLodMetric);
       default:

package/src/tileset/tileset-cache.ts

@@ -80,7 +80,9 @@ export default class TilesetCache {
       node !== sentinel &&
       (tileset.gpuMemoryUsageInBytes > maximumMemoryUsageInBytes || trimTiles)
     ) {
+      // @ts-expect-error
       const tile = node.item;
+      // @ts-expect-error
       node = node.next;
       this.unloadTile(tileset, tile, unloadCallback);
     }