itowns 2.45.1-next.0 → 2.45.1-next.1

package/lib/Converter/Feature2Texture.js

@@ -0,0 +1,174 @@
+import * as THREE from 'three';
+import { FEATURE_TYPES } from "../Core/Feature.js";
+import { Extent, Coordinates } from '@itowns/geographic';
+import Style, { StyleContext } from "../Core/Style.js";
+const defaultStyle = new Style();
+const context = new StyleContext();
+let style;
+
+/**
+ * Draw polygon (contour, line edge and fill) based on feature vertices into canvas
+ * using the given style(s). Several styles will re-draws the polygon each one with
+ * a different style.
+ * @param      {CanvasRenderingContext2D} ctx - canvas' 2D rendering context.
+ * @param      {Number[]} vertices - All the vertices of the Feature.
+ * @param      {Object[]} indices - Contains the indices that define the geometry.
+ * Objects stored in this array have two properties, an `offset` and a `count`.
+* The offset is related to the overall number of vertices in the Feature.
+ * @param      {Number} size - The size of the feature.
+ * @param      {Number} extent - The extent.
+ * @param      {Number} invCtxScale - The ration to scale line width and radius circle.
+ * @param      {Boolean} canBeFilled - true if feature.type == FEATURE_TYPES.POLYGON
+ */
+function drawPolygon(ctx, vertices) {
+  let indices = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [{
+    offset: 0,
+    count: 1
+  }];
+  let size = arguments.length > 3 ? arguments[3] : undefined;
+  let extent = arguments.length > 4 ? arguments[4] : undefined;
+  let invCtxScale = arguments.length > 5 ? arguments[5] : undefined;
+  let canBeFilled = arguments.length > 6 ? arguments[6] : undefined;
+  if (vertices.length === 0) {
+    return;
+  }
+  // build contour
+  const path = new Path2D();
+  for (const indice of indices) {
+    if (indice.extent && Extent.intersectsExtent(indice.extent, extent)) {
+      const offset = indice.offset * size;
+      const count = offset + indice.count * size;
+      path.moveTo(vertices[offset], vertices[offset + 1]);
+      for (let j = offset + size; j < count; j += size) {
+        path.lineTo(vertices[j], vertices[j + 1]);
+      }
+    }
+  }
+  style.applyToCanvasPolygon(ctx, path, invCtxScale, canBeFilled);
+}
+function drawPoint(ctx, x, y, invCtxScale) {
+  ctx.beginPath();
+  const opacity = style.point.opacity == undefined ? 1.0 : style.point.opacity;
+  if (opacity !== ctx.globalAlpha) {
+    ctx.globalAlpha = opacity;
+  }
+  ctx.arc(x, y, (style.point.radius || 3.0) * invCtxScale, 0, 2 * Math.PI, false);
+  if (style.point.color) {
+    ctx.fillStyle = style.point.color;
+    ctx.fill();
+  }
+  if (style.point.line) {
+    ctx.lineWidth = (style.point.width || 1.0) * invCtxScale;
+    ctx.strokeStyle = style.point.line;
+    ctx.stroke();
+  }
+}
+const coord = new Coordinates('EPSG:4326', 0, 0, 0);
+function drawFeature(ctx, feature, extent, invCtxScale) {
+  const extentDim = extent.planarDimensions();
+  const scaleRadius = extentDim.x / ctx.canvas.width;
+  for (const geometry of feature.geometries) {
+    if (Extent.intersectsExtent(geometry.extent, extent)) {
+      context.setGeometry(geometry);
+      if (style.zoom.min > style.context.zoom || style.zoom.max <= style.context.zoom) {
+        return;
+      }
+      if (feature.type === FEATURE_TYPES.POINT && style.point) {
+        // cross multiplication to know in the extent system the real size of
+        // the point
+        const px = (Math.round(style.point.radius * invCtxScale) || 3 * invCtxScale) * scaleRadius;
+        for (const indice of geometry.indices) {
+          const offset = indice.offset * feature.size;
+          const count = offset + indice.count * feature.size;
+          for (let j = offset; j < count; j += feature.size) {
+            coord.setFromArray(feature.vertices, j);
+            if (extent.isPointInside(coord, px)) {
+              drawPoint(ctx, feature.vertices[j], feature.vertices[j + 1], invCtxScale);
+            }
+          }
+        }
+      } else {
+        drawPolygon(ctx, feature.vertices, geometry.indices, feature.size, extent, invCtxScale, feature.type == FEATURE_TYPES.POLYGON);
+      }
+    }
+  }
+}
+const origin = new THREE.Vector3();
+const dimension = new THREE.Vector3(0, 0, 1);
+const scale = new THREE.Vector3();
+const quaternion = new THREE.Quaternion();
+const world2texture = new THREE.Matrix4();
+const feature2texture = new THREE.Matrix4();
+const worldTextureOrigin = new THREE.Vector3();
+const featureExtent = new Extent('EPSG:4326', 0, 0, 0, 0);
+export default {
+  // backgroundColor is a THREE.Color to specify a color to fill the texture
+  // with, given there is no feature passed in parameter
+  createTextureFromFeature(collection, extent, sizeTexture, layerStyle, backgroundColor) {
+    style = layerStyle || defaultStyle;
+    style.setContext(context);
+    let texture;
+    if (collection) {
+      // A texture is instancied drawn canvas
+      // origin and dimension are used to transform the feature's coordinates to canvas's space
+      extent.planarDimensions(dimension);
+      const c = document.createElement('canvas');
+      coord.crs = extent.crs;
+      c.width = sizeTexture;
+      c.height = sizeTexture;
+      const ctx = c.getContext('2d', {
+        willReadFrequently: true
+      });
+      if (backgroundColor) {
+        ctx.fillStyle = backgroundColor.getStyle();
+        ctx.fillRect(0, 0, sizeTexture, sizeTexture);
+      }
+
+      // Documentation needed !!
+      ctx.globalCompositeOperation = layerStyle.globalCompositeOperation || 'source-over';
+      ctx.imageSmoothingEnabled = false;
+      ctx.lineJoin = 'round';
+
+      // transform extent to feature projection
+      extent.as(collection.crs, featureExtent);
+      // transform extent to local system
+      featureExtent.applyMatrix4(collection.matrixWorldInverse);
+
+      // compute matrix transformation `world2texture` to convert coordinates to texture coordinates
+      if (collection.isInverted) {
+        worldTextureOrigin.set(extent.west, extent.north, 0);
+        scale.set(ctx.canvas.width, -ctx.canvas.height, 1.0).divide(dimension);
+      } else {
+        worldTextureOrigin.set(extent.west, extent.south, 0);
+        scale.set(ctx.canvas.width, ctx.canvas.height, 1.0).divide(dimension);
+      }
+      world2texture.compose(worldTextureOrigin.multiply(scale).negate(), quaternion, scale);
+
+      // compute matrix transformation `feature2texture` to convert features coordinates to texture coordinates
+      feature2texture.multiplyMatrices(world2texture, collection.matrixWorld);
+      feature2texture.decompose(origin, quaternion, scale);
+      ctx.setTransform(scale.x, 0, 0, scale.y, origin.x, origin.y);
+
+      // to scale line width and radius circle
+      const invCtxScale = Math.abs(1 / scale.x);
+      context.setZoom(extent.zoom);
+
+      // Draw the canvas
+      for (const feature of collection.features) {
+        context.setFeature(feature);
+        drawFeature(ctx, feature, featureExtent, invCtxScale);
+      }
+      texture = new THREE.CanvasTexture(c);
+      texture.flipY = collection.isInverted;
+    } else if (backgroundColor) {
+      const data = new Uint8Array(3);
+      data[0] = backgroundColor.r * 255;
+      data[1] = backgroundColor.g * 255;
+      data[2] = backgroundColor.b * 255;
+      texture = new THREE.DataTexture(data, 1, 1, THREE.RGBAFormat);
+    } else {
+      texture = new THREE.Texture();
+    }
+    return texture;
+  }
+};

package/lib/Converter/convertToTile.js

@@ -0,0 +1,70 @@
+import * as THREE from 'three';
+import TileMesh from "../Core/TileMesh.js";
+import LayeredMaterial from "../Renderer/LayeredMaterial.js";
+import { newTileGeometry } from "../Core/Prefab/TileBuilder.js";
+import ReferLayerProperties from "../Layer/ReferencingLayerProperties.js";
+import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
+const dimensions = new THREE.Vector2();
+function setTileFromTiledLayer(tile, tileLayer) {
+  if (tileLayer.diffuse) {
+    tile.material.diffuse = tileLayer.diffuse;
+  }
+  if (tileLayer.isGlobeLayer) {
+    // Computes a point used for horizon culling.
+    // If the point is below the horizon,
+    // the tile is guaranteed to be below the horizon as well.
+    tile.horizonCullingPoint = tile.extent.center().as('EPSG:4978').toVector3();
+    tile.extent.planarDimensions(dimensions).multiplyScalar(THREE.MathUtils.DEG2RAD);
+
+    // alpha is maximum angle between two points of tile
+    const alpha = dimensions.length();
+    const h = Math.abs(1.0 / Math.cos(alpha * 0.5));
+    tile.horizonCullingPoint.setLength(h * tile.horizonCullingPoint.length());
+    tile.horizonCullingPointElevationScaled = tile.horizonCullingPoint.clone();
+  }
+}
+export default {
+  convert(requester, extent, layer) {
+    const builder = layer.builder;
+    const parent = requester;
+    const level = parent !== undefined ? parent.level + 1 : 0;
+    const paramsGeometry = {
+      extent,
+      level,
+      segments: layer.segments || 16,
+      disableSkirt: layer.disableSkirt,
+      hideSkirt: layer.hideSkirt
+    };
+    return newTileGeometry(builder, paramsGeometry).then(result => {
+      // build tile mesh
+      result.geometry.increaseRefCount();
+      const crsCount = layer.tileMatrixSets.length;
+      const material = new LayeredMaterial(layer.materialOptions, crsCount);
+      ReferLayerProperties(material, layer);
+      const tile = new TileMesh(result.geometry, material, layer, extent, level);
+      if (parent && parent.isTileMesh) {
+        // get parent extent transformation
+        const pTrans = builder.computeShareableExtent(parent.extent);
+        // place relative to his parent
+        result.position.sub(pTrans.position).applyQuaternion(pTrans.quaternion.invert());
+        result.quaternion.premultiply(pTrans.quaternion);
+      }
+      tile.position.copy(result.position);
+      tile.quaternion.copy(result.quaternion);
+      tile.visible = false;
+      tile.updateMatrix();
+      setTileFromTiledLayer(tile, layer);
+      if (parent) {
+        tile.geoidHeight = parent.geoidHeight;
+        const geoidHeight = geoidLayerIsVisible(layer) ? tile.geoidHeight : 0;
+        tile.setBBoxZ({
+          min: parent.obb.z.min,
+          max: parent.obb.z.max,
+          geoidHeight
+        });
+        tile.material.geoidHeight = geoidHeight;
+      }
+      return tile;
+    });
+  }
+};

package/lib/Converter/textureConverter.js

@@ -0,0 +1,43 @@
+import * as THREE from 'three';
+import Feature2Texture from "./Feature2Texture.js";
+import { Extent } from '@itowns/geographic';
+const extentTexture = new Extent('EPSG:4326');
+const textureLayer = (texture, layer) => {
+  texture.generateMipmaps = false;
+  texture.magFilter = layer.magFilter || THREE.LinearFilter;
+  texture.minFilter = layer.minFilter || THREE.LinearFilter;
+  return texture;
+};
+function textureColorLayer(texture, layer) {
+  texture.anisotropy = 16;
+  texture.premultiplyAlpha = layer.transparent;
+  return textureLayer(texture, layer);
+}
+export default {
+  convert(data, destinationTile, layer) {
+    let texture;
+    if (data.isFeatureCollection) {
+      const backgroundLayer = layer.source.backgroundLayer;
+      const backgroundColor = backgroundLayer && backgroundLayer.paint ? new THREE.Color(backgroundLayer.paint['background-color']) : undefined;
+      destinationTile.toExtent(layer.crs, extentTexture);
+      texture = Feature2Texture.createTextureFromFeature(data, extentTexture, layer.subdivisionThreshold, layer.style, backgroundColor);
+      texture.features = data;
+      texture.extent = destinationTile;
+    } else if (data.isTexture) {
+      texture = data;
+    } else {
+      throw new Error('Data type is not supported to convert into texture');
+    }
+    if (layer.isColorLayer) {
+      return textureColorLayer(texture, layer);
+    } else if (layer.isElevationLayer) {
+      if (texture.flipY) {
+        // DataTexture default to false, so make sure other Texture types
+        // do the same (eg image texture)
+        // See UV construction for more details
+        texture.flipY = false;
+      }
+      return textureLayer(texture, layer);
+    }
+  }
+};

package/lib/Core/3DTiles/C3DTBatchTable.js

@@ -0,0 +1,131 @@
+import binaryPropertyAccessor from "./utils/BinaryPropertyAccessor.js";
+import { C3DTilesTypes } from "./C3DTilesEnums.js";
+const utf8Decoder = new TextDecoder();
+
+/**
+ * A 3D Tiles
+ * [batch
+ * table](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification/TileFormats/BatchTable).
+ * @property {C3DTilesTypes} type - Used by 3D Tiles extensions
+ * (e.g. {@link C3DTBatchTableHierarchyExtension}) to know in which context
+ * (i.e. for which 3D Tiles class) the parsing of the extension should be done.
+ * @property {number} batchLength - the length of the batch.
+ * @property {object} content - the content of the batch table in the form:
+ * {property1: values[], property2: values[], ...}.
+ * @property {object} extensions - 3D Tiles extensions of the batch table
+ * stored in the following format:
+ * {extensioName1: extensionObject1, extensioName2: extensionObject2, ...}
+ */
+class C3DTBatchTable {
+  /**
+   * @param {ArrayBuffer} [buffer=new ArrayBuffer()] - batch table buffer to parse
+   * @param {number} [jsonLength=0] - batch table json part length
+  * @param {number} [binaryLength=0] - batch table binary part length
+   * @param {number} [batchLength=0] - the length of the batch.
+   * @param {Object} [registeredExtensions] - extensions registered to the layer
+   */
+  constructor() {
+    let buffer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new ArrayBuffer();
+    let jsonLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let binaryLength = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let batchLength = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    let registeredExtensions = arguments.length > 4 ? arguments[4] : undefined;
+    if (arguments.length === 4 && typeof batchLength === 'object' && !Array.isArray(batchLength) && batchLength !== null) {
+      console.warn('You most likely used a deprecated constructor of C3DTBatchTable.');
+    }
+    if (jsonLength + binaryLength !== buffer.byteLength) {
+      console.error('3DTiles batch table json length and binary length are not consistent with total buffer' + ' length. The batch table may be wrong.');
+    }
+    this.type = C3DTilesTypes.batchtable;
+    this.batchLength = batchLength;
+    const jsonBuffer = buffer.slice(0, jsonLength);
+    const decodedJsonBuffer = utf8Decoder.decode(new Uint8Array(jsonBuffer));
+    const jsonContent = decodedJsonBuffer === '' ? null : JSON.parse(decodedJsonBuffer);
+    if (binaryLength > 0) {
+      const binaryBuffer = buffer.slice(jsonLength, jsonLength + binaryLength);
+      for (const propKey in jsonContent) {
+        if (!Object.prototype.hasOwnProperty.call(jsonContent, propKey)) {
+          continue;
+        }
+        const propVal = jsonContent[propKey];
+        // Batch table entries that have already been parsed from the JSON buffer have an array of values.
+        if (Array.isArray(propVal)) {
+          continue;
+        }
+        if (typeof propVal?.byteOffset !== 'undefined' && typeof propVal?.componentType !== 'undefined' && typeof propVal?.type !== 'undefined') {
+          jsonContent[propKey] = binaryPropertyAccessor(binaryBuffer, this.batchLength, propVal.byteOffset, propVal.componentType, propVal.type);
+        } else {
+          console.error('Invalid 3D Tiles batch table property that is neither a JSON array nor a valid ' + 'accessor to a binary body');
+        }
+      }
+    }
+
+    // Separate the content and the possible extensions
+    // When an extension is found, we call its parser and append the
+    // returned object to batchTable.extensions
+    // Extensions must be registered in the layer (see an example of this in
+    // 3dtiles_hierarchy.html)
+    if (jsonContent && jsonContent.extensions) {
+      this.extensions = registeredExtensions.parseExtensions(jsonContent.extensions, this.type);
+      delete jsonContent.extensions;
+    }
+
+    // Store batch table json content
+    this.content = jsonContent;
+  }
+
+  /**
+   * Creates and returns a javascript object holding the displayable
+   * information from the batch table and from extensions of the batch table,
+   * for a given feature (identified with its batchID).
+   * @param {integer} batchID - id of the feature
+   * @returns {Object} - displayable information relative to the batch
+   * table and its extensions. Object is formatted as follow:
+   * {batchTable:
+   *      {property1: value1
+   *       property2: value2
+   *       ...}
+   *  extensions:
+   *      {extension1:
+   *          {property1: value1
+   *           ...}
+   *        extension2: {...}
+   *        ...}
+   * }
+   */
+  getInfoById(batchID) {
+    // Verify that the batch ID is valid
+    if (batchID < 0 && batchID < this.batchLength) {
+      throw new Error(`Batch Id (${batchID}) must be between 0 and
+            ${this.batchLength} to access feature properties from the batch
+            table.`);
+    }
+    const featureDisplayableInfo = {};
+    featureDisplayableInfo.batchTable = {};
+    // Get properties from batch table content
+    for (const property in this.content) {
+      // check that the property is not inherited from prototype chain
+      if (Object.prototype.hasOwnProperty.call(this.content, property)) {
+        const val = this.content[property][batchID];
+        // Property value may be a threejs vector (see 3D Tiles spec and BinaryPropertyAccessor.js)
+        if (val && (val.isVector2 || val.isVector3 || val.isVector4)) {
+          featureDisplayableInfo.batchTable[property] = val.toArray();
+        } else {
+          featureDisplayableInfo.batchTable[property] = val;
+        }
+      }
+    }
+
+    // Extensions
+    if (this.extensions) {
+      featureDisplayableInfo.extensions = {};
+      for (const extName in this.extensions) {
+        if (Object.prototype.hasOwnProperty.call(this.extensions, extName)) {
+          featureDisplayableInfo.extensions[extName] = this.extensions[extName].getInfoById(batchID);
+        }
+      }
+    }
+    return featureDisplayableInfo;
+  }
+}
+export default C3DTBatchTable;

package/lib/Core/3DTiles/C3DTBatchTableHierarchyExtension.js

@@ -0,0 +1,96 @@
+/**
+ * Batch Table part of the 3D Tiles
+ * [Batch Table Hierarchy Extension](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/extensions/3DTILES_batch_table_hierarchy)
+ * @property {object} classes - The classes as defined in the specification.
+ * @property {object} inverseHierarchy - InverseHierarchy contains for each
+ * instance (i.e. georgraphic feature e.g. building, roof, etc.) an array of the
+ * indexes of its parents. For example, the parents of the instance 0 can be
+ * found using inverseHierarchy[0].
+ * @property {number[]} instancesIdxs - For each instance of the extension,
+ * contains a javascript object with classId and instanceIdx. classId is the id
+ * of the class (from this.classes) of the instance. instanceIdx is the index of
+ * the instance in this class. Goal: Ease the retrieval of the properties of an
+ * instance.
+ */
+class C3DTBatchTableHierarchyExtension {
+  /**
+   * Constructor of the C3DTBatchTableHierarchyExtension class.
+   * @param {Object} json - The parsed json of the batch table part of the 3D
+   * Tiles [Batch Table Hierarchy Extension](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/extensions/3DTILES_batch_table_hierarchy)
+   */
+  constructor(json) {
+    this.classes = json.classes;
+    this.inverseHierarchy = {};
+    this.instancesIdxs = [];
+
+    // Counts the number of instances of a class
+    const classCounter = {};
+    let parentIdsCounter = 0;
+
+    // if omitted, parentCounts is an array of length instancesLength,
+    // where all values are 1 (cf. spec)
+    let parentCounts = json.parentCounts;
+    if (parentCounts === undefined) {
+      parentCounts = new Array(json.instancesLength);
+      parentCounts.fill(1);
+    }
+
+    // for each instance
+    for (let i = 0; i < json.instancesLength; i++) {
+      // for each parent of the current instance
+      for (let j = 0; j < parentCounts[i]; j++) {
+        // When an instance's parentId points to itself, then it has no
+        // parent" (cf. spec)
+        if (i !== json.parentIds[parentIdsCounter]) {
+          if (this.inverseHierarchy[i] === undefined) {
+            this.inverseHierarchy[i] = [];
+          }
+          this.inverseHierarchy[i].push(json.parentIds[parentIdsCounter]);
+          parentIdsCounter++;
+        }
+      }
+      const classId = json.classIds[i];
+      if (classCounter[classId] === undefined) {
+        classCounter[classId] = 0;
+      }
+      this.instancesIdxs[i] = {
+        classId,
+        instanceIdx: classCounter[classId]
+      };
+      classCounter[classId]++;
+    }
+  }
+
+  /**
+   * Creates and returns a javascript object holding the displayable
+   * information relative to this extension for a given feature.
+   * @param {integer} featureId - id of the feature
+   * @returns {Object} - displayable information relative to this
+   * extension, for the feature with id=featureId and for its parents
+   */
+  getInfoById(featureId) {
+    const instanceProperties = {};
+    // get feature class name
+    const instanceClassId = this.instancesIdxs[featureId].classId;
+    const featureClass = this.classes[instanceClassId].name;
+    // get feature properties and values
+    const instanceIdx = this.instancesIdxs[featureId].instanceIdx;
+    const instances = this.classes[instanceClassId].instances;
+    for (const key in instances) {
+      if (Object.prototype.hasOwnProperty.call(instances, key)) {
+        instanceProperties[key] = instances[key][instanceIdx];
+      }
+    }
+    // create return object: className: {featureProperties and values}
+    const pickingInfo = {};
+    pickingInfo[featureClass] = instanceProperties;
+    // If this feature has parent(s), recurse on them
+    if (this.inverseHierarchy && this.inverseHierarchy[featureId]) {
+      for (const parentID of this.inverseHierarchy[featureId]) {
+        Object.assign(pickingInfo, this.getInfoById(parentID));
+      }
+    }
+    return pickingInfo;
+  }
+}
+export default C3DTBatchTableHierarchyExtension;

package/lib/Core/3DTiles/C3DTBoundingVolume.js

@@ -0,0 +1,156 @@
+import * as THREE from 'three';
+import { Ellipsoid, Coordinates } from '@itowns/geographic';
+import { C3DTilesTypes, C3DTilesBoundingVolumeTypes } from "./C3DTilesEnums.js";
+const ellipsoid = new Ellipsoid();
+
+// bounding box scratch variables
+const boxSize = new THREE.Vector3();
+const boxCenter = new THREE.Vector3();
+
+// Bounding region scratch variables
+const southEastUpCarto = new Coordinates('EPSG:4326');
+const southEastUpVec3 = new THREE.Vector3();
+const northWestBottomCarto = new Coordinates('EPSG:4326');
+const northWestBottomVec3 = new THREE.Vector3();
+const radiusScratch = new THREE.Vector3();
+
+// Culling scratch value
+const worldCoordinateCenter = new THREE.Vector3();
+
+/**
+ * Bounding region is converted to a bounding sphere to simplify and speed computation and culling. This function
+ * computes a sphere enclosing the bounding region.
+ * @param {Object} region - the parsed json from the tile representing the region
+ * @param {THREE.Matrix4} tileMatrixInverse - the inverse transformation matrix of the tile to transform the produced
+ * sphere from a global to a reference local to the tile
+ * @return {THREE.Sphere} a sphere enclosing the given region
+ */
+function initFromRegion(region, tileMatrixInverse) {
+  const east = region[2];
+  const west = region[0];
+  const south = region[1];
+  const north = region[3];
+  const minHeight = region[4];
+  const maxHeight = region[5];
+  const eastDeg = THREE.MathUtils.radToDeg(east);
+  const westDeg = THREE.MathUtils.radToDeg(west);
+  const southDeg = THREE.MathUtils.radToDeg(south);
+  const northDeg = THREE.MathUtils.radToDeg(north);
+  northWestBottomCarto.setFromValues(westDeg, northDeg, minHeight);
+  ellipsoid.cartographicToCartesian(northWestBottomCarto, northWestBottomVec3);
+  southEastUpCarto.setFromValues(eastDeg, southDeg, maxHeight);
+  ellipsoid.cartographicToCartesian(southEastUpCarto, southEastUpVec3);
+  const regionCenter = new THREE.Vector3();
+  regionCenter.lerpVectors(northWestBottomVec3, southEastUpVec3, 0.5);
+  const radius = radiusScratch.subVectors(northWestBottomVec3, southEastUpVec3).length() / 2;
+  const sphere = new THREE.Sphere(regionCenter, radius);
+  sphere.applyMatrix4(tileMatrixInverse);
+  return sphere;
+}
+
+/**
+ * Create a bounding box from a json describing a box in a 3D Tiles tile.
+ * @param {Object} box - the parsed json from the tile representing the box
+ * @return {THREE.Box3} the bounding box of the tile
+ */
+function initFromBox(box) {
+  // box[0], box[1], box[2] = center of the box
+  // box[3], box[4], box[5] = x axis direction and half-length
+  // box[6], box[7], box[8] = y axis direction and half-length
+  // box[9], box[10], box[11] = z axis direction and half-length
+  boxCenter.set(box[0], box[1], box[2]);
+  boxSize.set(box[3], box[7], box[11]).multiplyScalar(2);
+  const box3 = new THREE.Box3();
+  box3.setFromCenterAndSize(boxCenter, boxSize);
+  return box3;
+}
+
+/**
+ * Creats a bounding sphere from a json describing a sphere in a 3D Tiles tile.
+ * @param {Object} sphere - the parsed json from the tile representing the sphere
+ * @returns {THREE.Sphere} the bounding sphere of the tile
+ */
+function initFromSphere(sphere) {
+  const sphereCenter = new THREE.Vector3();
+  sphereCenter.set(sphere[0], sphere[1], sphere[2]);
+  return new THREE.Sphere(sphereCenter, sphere[3]);
+}
+
+/**
+ * [bounding volume](https://github.com/AnalyticalGraphicsInc/3d-tiles/blob/master/specification/schema/boundingVolume.schema.json)
+ * Used to represent bounding volumes and viewer request volumes. The input bounding volume (from the dataset) can be a
+ * box, a sphere or a region. Regions are transformed to spheres internally for simplification of parsing and to speed
+ * up computations such as culling.
+ * @property {C3DTilesTypes} type - Used by 3D Tiles extensions
+ * (e.g. {@link C3DTBatchTableHierarchyExtension}) to know in which context
+ * (i.e. for which 3D Tiles class) the parsing of the extension should be done.
+ * @property {String} initialVolumeType - the initial volume type to be able to dissociate spheres
+ * and regions if needed since both are converted to spheres (one of {@link C3DTilesBoundingVolumeTypes})
+ * @property {THREE.Box3|THREE.Sphere} volume - The 3D bounding volume created. Can be a THREE.Box3 for bounding volumes
+ * of types box or a THREE.Sphere for bounding volumes of type sphere or region.
+ * @property {object} extensions - 3D Tiles extensions of the bounding volume
+ * stored in the following format:
+ * {extensioName1: extensionObject1, extensioName2: extensionObject2, ...}
+ */
+class C3DTBoundingVolume {
+  constructor(json, tileMatrixInverse, registeredExtensions) {
+    this.type = C3DTilesTypes.boundingVolume;
+    if (json.region) {
+      this.initialVolumeType = C3DTilesBoundingVolumeTypes.region;
+      this.volume = initFromRegion(json.region, tileMatrixInverse);
+    } else if (json.box) {
+      this.initialVolumeType = C3DTilesBoundingVolumeTypes.box;
+      this.volume = initFromBox(json.box);
+    } else if (json.sphere) {
+      this.initialVolumeType = C3DTilesBoundingVolumeTypes.sphere;
+      this.volume = initFromSphere(json.sphere);
+    } else {
+      throw new Error(`Unknown bounding volume type: ${json}. 3D Tiles nodes must have a bounding volume of type
+            region, box or sphere.`);
+    }
+    if (json.extensions) {
+      this.extensions = registeredExtensions.parseExtensions(json.extensions, this.type);
+    }
+  }
+
+  /**
+   * Performs camera frustum culling on bounding volumes.
+   * @param {Camera} camera - the camera to perform culling for
+   * @param {THREE.Matrix4} tileMatrixWorld - the world matrix of the tile
+   * @returns {boolean} true if the tile should be culled out (bounding volume not in camera frustum), false otherwise.
+   */
+  boundingVolumeCulling(camera, tileMatrixWorld) {
+    if (this.initialVolumeType === C3DTilesBoundingVolumeTypes.box) {
+      return !camera.isBox3Visible(this.volume, tileMatrixWorld);
+    } else if (this.initialVolumeType === C3DTilesBoundingVolumeTypes.sphere || this.initialVolumeType === C3DTilesBoundingVolumeTypes.region) {
+      return !camera.isSphereVisible(this.volume, tileMatrixWorld);
+    } else {
+      throw new Error('Unknown bounding volume type.');
+    }
+  }
+
+  /**
+   * Checks if the camera is inside the [viewer request volumes](https://github.com/CesiumGS/3d-tiles/tree/main/specification#viewer-request-volume).
+   * @param {Camera} camera - the camera to perform culling for
+   * @param {THREE.Matrix4} tileMatrixWorld - the world matrix of the tile
+   * @returns {boolean} true if the camera is outside the viewer request volume, false otherwise.
+   */
+  viewerRequestVolumeCulling(camera, tileMatrixWorld) {
+    if (this.initialVolumeType === C3DTilesBoundingVolumeTypes.region) {
+      console.warn('Region viewerRequestVolume not yet supported');
+      return true;
+    }
+    if (this.initialVolumeType === C3DTilesBoundingVolumeTypes.box) {
+      console.warn('Bounding box viewerRequestVolume not yet supported');
+      return true;
+    }
+    if (this.initialVolumeType === C3DTilesBoundingVolumeTypes.sphere) {
+      worldCoordinateCenter.copy(this.volume.center);
+      worldCoordinateCenter.applyMatrix4(tileMatrixWorld);
+      // To check the distance between the center sphere and the camera
+      return !(camera.camera3D.position.distanceTo(worldCoordinateCenter) <= this.volume.radius);
+    }
+    return false;
+  }
+}
+export default C3DTBoundingVolume;