@loaders.gl/tiles 3.1.0-alpha.4 → 3.1.0-alpha.5

package/dist/tileset/tileset-3d.d.ts

@@ -0,0 +1,171 @@
+import { Matrix4, Vector3 } from '@math.gl/core';
+import { Stats } from '@probe.gl/stats';
+import { RequestScheduler, LoaderWithParser, LoaderOptions } from '@loaders.gl/loader-utils';
+import { FrameState } from './helpers/frame-state';
+import Tile3D from './tile-3d';
+import TilesetTraverser from './traversers/tileset-traverser';
+export declare type Tileset3DProps = {
+    throttleRequests?: boolean;
+    maxRequests?: number;
+    loadOptions?: LoaderOptions;
+    loadTiles?: boolean;
+    basePath?: string;
+    maximumMemoryUsage?: number;
+    description?: string;
+    attributions?: string[];
+    ellipsoid?: object;
+    modelMatrix?: Matrix4;
+    maximumScreenSpaceError?: number;
+    viewportTraversersMap?: any;
+    updateTransforms?: boolean;
+    viewDistanceScale?: number;
+    onTileLoad?: (tile: Tile3D) => any;
+    onTileUnload?: (tile: Tile3D) => any;
+    onTileError?: (tile: Tile3D, message: string, url: string) => any;
+    contentLoader?: (tile: Tile3D) => Promise<void>;
+    onTraversalComplete?: (selectedTiles: Tile3D[]) => Tile3D[];
+};
+declare type Props = {
+    description: string;
+    ellipsoid: object;
+    modelMatrix: Matrix4;
+    throttleRequests: boolean;
+    maximumMemoryUsage: number;
+    onTileLoad: (tile: Tile3D) => any;
+    onTileUnload: (tile: Tile3D) => any;
+    onTileError: (tile: Tile3D, message: string, url: string) => any;
+    onTraversalComplete: (selectedTiles: Tile3D[]) => Tile3D[];
+    maximumScreenSpaceError: number;
+    viewportTraversersMap: any;
+    attributions: string[];
+    maxRequests: number;
+    loadTiles: boolean;
+    loadOptions: LoaderOptions;
+    updateTransforms: boolean;
+    viewDistanceScale: number;
+    basePath: string;
+    contentLoader?: (tile: Tile3D) => Promise<void>;
+    i3s: {
+        [key: string]: any;
+    };
+};
+export default class Tileset3D {
+    options: Props;
+    loadOptions: {
+        [key: string]: any;
+    };
+    type: string;
+    tileset: {
+        [key: string]: any;
+    };
+    loader: LoaderWithParser;
+    url: string;
+    basePath: string;
+    modelMatrix: Matrix4;
+    ellipsoid: any;
+    lodMetricType: string;
+    lodMetricValue: number;
+    refine: string;
+    root: Tile3D | null;
+    roots: {
+        [key: string]: Tile3D;
+    };
+    asset: {
+        [key: string]: any;
+    };
+    description: string;
+    properties: any;
+    extras: any;
+    attributions: any;
+    credits: any;
+    stats: Stats;
+    traverseCounter: number;
+    geometricError: number;
+    selectedTiles: Tile3D[];
+    cartographicCenter: Vector3 | null;
+    cartesianCenter: Vector3 | null;
+    zoom: number;
+    boundingVolume: any;
+    gpuMemoryUsageInBytes: any;
+    dynamicScreenSpaceErrorComputedDensity: any;
+    _traverser: TilesetTraverser;
+    private _cache;
+    _requestScheduler: RequestScheduler;
+    _frameNumber: number;
+    private _queryParamsString;
+    private _queryParams;
+    private _extensionsUsed;
+    private _tiles;
+    private _pendingCount;
+    private lastUpdatedVieports;
+    private _requestedTiles;
+    private _emptyTiles;
+    private frameStateData;
+    maximumMemoryUsage: number;
+    /**
+     * Create a new Tileset3D
+     * @param json
+     * @param props
+     */
+    constructor(json: any, options?: Tileset3DProps);
+    /** Release resources */
+    destroy(): void;
+    /** Is the tileset loaded (update needs to have been called at least once) */
+    isLoaded(): boolean;
+    get tiles(): object[];
+    get frameNumber(): number;
+    get queryParams(): string;
+    setProps(props: Tileset3DProps): void;
+    /** @deprecated */
+    setOptions(options: Tileset3DProps): void;
+    /**
+     * Return a loadable tile url for a specific tile subpath
+     * @param tilePath a tile subpath
+     */
+    getTileUrl(tilePath: string): string;
+    hasExtension(extensionName: string): boolean;
+    /**
+     * Update visible tiles relying on a list of viewports
+     * @param viewports - list of viewports
+     */
+    update(viewports: any[]): void;
+    /**
+     * Check if traversal is needed for particular viewport
+     * @param {string} viewportId - id of a viewport
+     * @return {boolean}
+     */
+    _needTraverse(viewportId: string): boolean;
+    /**
+     * The callback to post-process tiles after traversal procedure
+     * @param frameState - frame state for tile culling
+     */
+    _onTraversalEnd(frameState: FrameState): void;
+    /**
+     * Update tiles relying on data from all traversers
+     */
+    _updateTiles(): void;
+    _tilesChanged(oldSelectedTiles: any, selectedTiles: any): boolean;
+    _loadTiles(): void;
+    _unloadTiles(): void;
+    _updateStats(): void;
+    _initializeTileSet(tilesetJson: any): void;
+    _calculateViewProps(): void;
+    _initializeStats(): void;
+    _initializeTileHeaders(tilesetJson: any, parentTileHeader: any): Tile3D;
+    _initializeTraverser(): any;
+    _destroyTileHeaders(parentTile: any): void;
+    _loadTile(tile: any): Promise<void>;
+    _onTileLoadError(tile: any, error: any): void;
+    _onTileLoad(tile: any, loaded: any): void;
+    _onStartTileLoading(): void;
+    _onEndTileLoading(): void;
+    _addTileToCache(tile: any): void;
+    _updateCacheStats(tile: any): void;
+    _unloadTile(tile: any): void;
+    _destroy(): void;
+    _destroySubtree(tile: any): void;
+    _destroyTile(tile: any): void;
+    _initializeCesiumTileset(tilesetJson: any): void;
+    _initializeI3STileset(): void;
+}
+export {};

package/dist/tileset/tileset-cache.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Stores tiles with content loaded.
+ *
+ * @private
+ */
+export default class TilesetCache {
+    private _list;
+    private _sentinel;
+    private _trimTiles;
+    constructor();
+    reset(): void;
+    touch(tile: any): void;
+    add(tileset: any, tile: any, addCallback: any): void;
+    unloadTile(tileset: any, tile: any, unloadCallback?: any): void;
+    unloadTiles(tileset: any, unloadCallback: any): void;
+    trim(): void;
+}

package/dist/tileset/traversers/i3s-tile-manager.d.ts

@@ -0,0 +1,7 @@
+export default class I3STileManager {
+    private _statusMap;
+    constructor();
+    add(request: any, key: any, callback: any, frameState: any): void;
+    update(key: any, frameState: any): void;
+    find(key: any): any;
+}

package/dist/tileset/traversers/i3s-tileset-traverser.d.ts

@@ -0,0 +1,17 @@
+import TilesetTraverser from './tileset-traverser';
+export default class I3STilesetTraverser extends TilesetTraverser {
+    private _tileManager;
+    constructor(options: any);
+    shouldRefine(tile: any, frameState: any): boolean;
+    updateChildTiles(tile: any, frameState: any): boolean;
+    _loadTile(nodeId: any, tileset: any): Promise<any>;
+    /**
+     * The callback to init TileHeader instance after loading the tile JSON
+     * @param {Object} header - the tile JSON from a dataset
+     * @param {TileHeader} tile - the parent TileHeader instance
+     * @param {string} extendedId - optional ID to separate copies of a tile for different viewports.
+     *                              const extendedId = `${tile.id}-${frameState.viewport.id}`;
+     * @return {void}
+     */
+    _onTileLoad(header: any, tile: any, extendedId: any): void;
+}

package/dist/tileset/traversers/tileset-3d-traverser.d.ts

@@ -0,0 +1,6 @@
+import TilesetTraverser from './tileset-traverser';
+export default class Tileset3DTraverser extends TilesetTraverser {
+    compareDistanceToCamera(a: any, b: any): number;
+    updateTileVisibility(tile: any, frameState: any): void;
+    meetsScreenSpaceErrorEarly(tile: any, frameState: any): boolean;
+}

package/dist/tileset/traversers/tileset-traverser.d.ts

@@ -0,0 +1,51 @@
+import ManagedArray from '../../utils/managed-array';
+export declare type TilesetTraverserProps = {
+    loadSiblings?: boolean;
+    skipLevelOfDetail?: boolean;
+    maximumScreenSpaceError?: number;
+    onTraversalEnd?: (frameState: any) => any;
+    viewportTraversersMap?: {
+        [key: string]: any;
+    };
+    basePath?: string;
+};
+export declare type Props = {
+    loadSiblings: boolean;
+    skipLevelOfDetail: boolean;
+    updateTransforms: boolean;
+    maximumScreenSpaceError: number;
+    onTraversalEnd: (frameState: any) => any;
+    viewportTraversersMap: {
+        [key: string]: any;
+    };
+    basePath: string;
+};
+export declare const DEFAULT_PROPS: Props;
+export default class TilesetTraverser {
+    options: Props;
+    root: any;
+    requestedTiles: object;
+    selectedTiles: object;
+    emptyTiles: object;
+    protected _traversalStack: ManagedArray;
+    protected _emptyTraversalStack: ManagedArray;
+    protected _frameNumber: number | null;
+    constructor(options: TilesetTraverserProps);
+    traverse(root: any, frameState: any, options: any): void;
+    reset(): void;
+    executeTraversal(root: any, frameState: any): void;
+    updateChildTiles(tile: any, frameState: any): boolean;
+    updateAndPushChildren(tile: any, frameState: any, stack: any, depth: any): boolean;
+    updateTile(tile: any, frameState: any): void;
+    selectTile(tile: any, frameState: any): void;
+    loadTile(tile: any, frameState: any): void;
+    touchTile(tile: any, frameState: any): void;
+    canTraverse(tile: any, frameState: any, useParentMetric?: boolean, ignoreVisibility?: boolean): boolean;
+    shouldLoadTile(tile: any): any;
+    shouldSelectTile(tile: any): any;
+    shouldRefine(tile: any, frameState: any, useParentMetric: any): boolean;
+    updateTileVisibility(tile: any, frameState: any): void;
+    compareDistanceToCamera(b: any, a: any): number;
+    anyChildrenVisible(tile: any, frameState: any): boolean;
+    executeEmptyTraversal(root: any, frameState: any): boolean;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Doubly linked list node
+ *
+ * @private
+ */
+export default class DoublyLinkedListNode {
+    constructor(item: any, previous: any, next: any);
+    item: any;
+    previous: any;
+    next: any;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Doubly linked list
+ *
+ * @private
+ */
+export default class DoublyLinkedList {
+    head: any;
+    tail: any;
+    _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: DoublyLinkedListNode): void;
+    /**
+     * Moves nextNode after node
+     * @param {DoublyLinkedListNode} node
+     * @param {DoublyLinkedListNode} nextNode
+     */
+    splice(node: DoublyLinkedListNode, nextNode: DoublyLinkedListNode): void;
+    _insert(node: any, nextNode: any): void;
+}
+import DoublyLinkedListNode from "../utils/doubly-linked-list-node";

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

@@ -0,0 +1,84 @@
+/**
+ * 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 {
+    constructor(length?: number);
+    _array: any[];
+    _map: Map<any, any>;
+    _length: number;
+    set length(arg: 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;
+    /**
+     * Gets the internal array.
+     *
+     * @memberof ManagedArray.prototype
+     * @type Array
+     * @readonly
+     */
+    readonly get values(): any[];
+    /**
+     * Gets the element at an index.
+     *
+     * @param {Number} index The index to get.
+     */
+    get(index: number): 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: number, 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: number): void;
+    /**
+     * Resize the array.
+     *
+     * @param {Number} length The length.
+     */
+    resize(length: number): void;
+    /**
+     * Trim the internal array to the specified length. Defaults to the current length.
+     *
+     * @param {Number} [length] The length.
+     */
+    trim(length?: number | undefined): void;
+    reset(): void;
+    find(target: any): boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loaders.gl/tiles",
-  "version": "3.1.0-alpha.4",
+  "version": "3.1.0-alpha.5",
   "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,20 @@
   ],
   "scripts": {
     "pre-build": "npm run build-bundle",
+    "post-build": "tsc",
     "build-bundle": "webpack --display=minimal --config ../../scripts/webpack/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-alpha.5",
+    "@loaders.gl/math": "3.1.0-alpha.5",
     "@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.0.0"
+  },
+  "gitHead": "352241dd910a8c6307a235dadbe154ca915b885b"
 }

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 '../..';
+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: