itowns 2.44.3-next.3 → 2.44.3-next.31

package/lib/Core/Tile/Tile.js

@@ -0,0 +1,219 @@
+import * as THREE from 'three';
+import * as CRS from "../Geographic/Crs.js";
+import Coordinates from "../Geographic/Coordinates.js";
+import Extent from "../Geographic/Extent.js";
+import { getInfoTms, getCountTiles } from "./TileGrid.js";
+const _tmsCoord = new THREE.Vector2();
+const _dimensionTile = new THREE.Vector2();
+const r = {
+  row: 0,
+  col: 0,
+  invDiff: 0
+};
+function _rowColfromParent(/** @type {Tile} */tile, /** @type {number} */zoom) {
+  const diffLevel = tile.zoom - zoom;
+  const diff = 2 ** diffLevel;
+  r.invDiff = 1 / diff;
+  r.row = (tile.row - tile.row % diff) * r.invDiff;
+  r.col = (tile.col - tile.col % diff) * r.invDiff;
+  return r;
+}
+const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _extent2 = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _c = new Coordinates('EPSG:4326', 0, 0);
+class Tile {
+  /**
+   * Tile is a geographical bounding rectangle defined by zoom, row and column.
+   *
+   * @param {String} crs projection of limit values.
+   * @param {number} [zoom=0] zoom value
+   * @param {number} [row=0] row value
+   * @param {number} [col=0] column value
+   */
+  constructor(crs) {
+    let zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let row = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let col = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    this.isTile = true;
+    this.crs = crs;
+    this.zoom = zoom;
+    this.row = row;
+    this.col = col;
+  }
+
+  /**
+   * Clone this tile
+   * @return {Tile} cloned tile
+   */
+  clone() {
+    return new Tile(this.crs, this.zoom, this.row, this.col);
+  }
+
+  /**
+   * Convert tile to the specified extent.
+   * @param {string} crs the projection of destination.
+   * @param {Extent} target copy the destination to target.
+   * @return {Extent}
+   */
+  toExtent(crs, target) {
+    CRS.isValid(crs);
+    target = target || new Extent('EPSG:4326', [0, 0, 0, 0]);
+    const {
+      epsg,
+      globalExtent,
+      globalDimension
+    } = getInfoTms(this.crs);
+    const countTiles = getCountTiles(this.crs, this.zoom);
+    _dimensionTile.set(1, 1).divide(countTiles).multiply(globalDimension);
+    target.west = globalExtent.west + (globalDimension.x - _dimensionTile.x * (countTiles.x - this.col));
+    target.east = target.west + _dimensionTile.x;
+    target.south = globalExtent.south + _dimensionTile.y * (countTiles.y - this.row - 1);
+    target.north = target.south + _dimensionTile.y;
+    target.crs = epsg;
+    target.zoom = this.zoom;
+    return crs == epsg ? target : target.as(crs, target);
+  }
+
+  /**
+   * Return true if `tile` is inside this tile.
+   *
+   * @param {Tile} tile the tile to check
+   *
+   * @return {boolean}
+   */
+  isInside(tile) {
+    if (this.zoom == tile.zoom) {
+      return this.row == tile.row && this.col == tile.col;
+    } else if (this.zoom < tile.zoom) {
+      return false;
+    } else {
+      _rowColfromParent(this, tile.zoom);
+      return r.row == tile.row && r.col == tile.col;
+    }
+  }
+
+  /**
+   * Return the translation and scale to transform this tile to input tile.
+   *
+   * @param {Tile} tile input tile
+   * @param {THREE.Vector4} target copy the result to target.
+   * @return {THREE.Vector4} {x: translation on west-east, y: translation on south-north, z: scale on west-east, w: scale on south-north}
+   */
+  offsetToParent(tile) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new THREE.Vector4();
+    if (this.crs != tile.crs) {
+      throw new Error('unsupported mix');
+    }
+    _rowColfromParent(this, tile.zoom);
+    return target.set(this.col * r.invDiff - r.col, this.row * r.invDiff - r.row, r.invDiff, r.invDiff);
+  }
+
+  /**
+   * Return parent tile with input level
+   *
+   * @param {number} levelParent level of parent.
+   * @return {Tile}
+   */
+  tiledExtentParent(levelParent) {
+    if (levelParent && levelParent < this.zoom) {
+      _rowColfromParent(this, levelParent);
+      return new Tile(this.crs, levelParent, r.row, r.col);
+    } else {
+      return this;
+    }
+  }
+
+  /**
+   * Set zoom, row and column values
+   *
+   * @param {number} [zoom=0] zoom value
+   * @param {number} [row=0] row value
+   * @param {number} [col=0] column value
+   *
+   * @return {Tile}
+   */
+  set() {
+    let zoom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let row = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let col = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    this.zoom = zoom;
+    this.row = row;
+    this.col = col;
+    return this;
+  }
+
+  /**
+   * Copy to this tile to input tile.
+   * @param {Tile} tile
+   * @return {Tile} copied extent
+   */
+  copy(tile) {
+    this.crs = tile.crs;
+    return this.set(tile.zoom, tile.row, tile.col);
+  }
+
+  /**
+   * Return values of tile in string, separated by the separator input.
+   * @param {string} separator
+   * @return {string}
+   */
+  toString() {
+    let separator = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return `${this.zoom}${separator}${this.row}${separator}${this.col}`;
+  }
+}
+
+/**
+ * @param {Extent} e
+ * @param {string} tms
+ * @returns {Tile[]}
+ */
+export function tiledCovering(e, tms) {
+  if (e.crs == 'EPSG:4326' && tms == 'EPSG:3857') {
+    const WMTS_PM = [];
+    const extent = _extent.copy(e).as(tms, _extent2);
+    const {
+      globalExtent,
+      globalDimension,
+      sTs
+    } = getInfoTms(tms);
+    extent.clampByExtent(globalExtent);
+    extent.planarDimensions(_dimensionTile);
+    const zoom = e.zoom + 1 || Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const countTiles = getCountTiles(tms, zoom);
+    const center = extent.center(_c);
+    _tmsCoord.x = center.x - globalExtent.west;
+    _tmsCoord.y = globalExtent.north - extent.north;
+    _tmsCoord.divide(globalDimension).multiply(countTiles).floor();
+
+    // ]N; N+1] => N
+    const maxRow = Math.ceil((globalExtent.north - extent.south) / globalDimension.x * countTiles.y) - 1;
+    for (let r = maxRow; r >= _tmsCoord.y; r--) {
+      WMTS_PM.push(new Tile(tms, zoom, r, _tmsCoord.x));
+    }
+    return WMTS_PM;
+  } else {
+    const target = new Tile(tms, 0, 0, 0);
+    const {
+      globalExtent,
+      globalDimension,
+      sTs,
+      isInverted
+    } = getInfoTms(e.crs);
+    const center = e.center(_c);
+    e.planarDimensions(_dimensionTile);
+    // Each level has 2^n * 2^n tiles...
+    // ... so we count how many tiles of the same width as tile we can fit in the layer
+    // ... 2^zoom = tilecount => zoom = log2(tilecount)
+    const zoom = Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const countTiles = getCountTiles(tms, zoom);
+
+    // Now that we have computed zoom, we can deduce x and y (or row / column)
+    _tmsCoord.x = center.x - globalExtent.west;
+    _tmsCoord.y = isInverted ? globalExtent.north - center.y : center.y - globalExtent.south;
+    _tmsCoord.divide(globalDimension).multiply(countTiles).floor();
+    target.set(zoom, _tmsCoord.y, _tmsCoord.x);
+    return [target];
+  }
+}
+export default Tile;

package/lib/Core/Tile/TileGrid.js

@@ -0,0 +1,43 @@
+import * as THREE from 'three';
+import Extent from "../Geographic/Extent.js";
+const _countTiles = new THREE.Vector2();
+const _dim = new THREE.Vector2();
+export const globalExtentTMS = new Map();
+export const schemeTiles = new Map();
+const extent4326 = new Extent('EPSG:4326', -180, 180, -90, 90);
+globalExtentTMS.set('EPSG:4326', extent4326);
+
+// Compute global extent of TMS in EPSG:3857
+// It's square whose a side is between -180° to 180°.
+// So, west extent, it's 180 convert in EPSG:3857
+const extent3857 = extent4326.as('EPSG:3857');
+extent3857.clampSouthNorth(extent3857.west, extent3857.east);
+globalExtentTMS.set('EPSG:3857', extent3857);
+schemeTiles.set('default', new THREE.Vector2(1, 1));
+schemeTiles.set('EPSG:3857', schemeTiles.get('default'));
+schemeTiles.set('EPSG:4326', new THREE.Vector2(2, 1));
+export function getInfoTms(/** @type {string} */crs) {
+  const globalExtent = globalExtentTMS.get(crs);
+  const globalDimension = globalExtent.planarDimensions(_dim);
+  const sTs = schemeTiles.get(crs) || schemeTiles.get('default');
+  // The isInverted parameter is to be set to the correct value, true or false
+  // (default being false) if the computation of the coordinates needs to be
+  // inverted to match the same scheme as OSM, Google Maps or other system.
+  // See link below for more information
+  // https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/
+  // in crs includes ':NI' => tms isn't inverted (NOT INVERTED)
+  const isInverted = !crs.includes(':NI');
+  return {
+    epsg: crs,
+    globalExtent,
+    globalDimension,
+    sTs,
+    isInverted
+  };
+}
+export function getCountTiles(/** @type {string} */crs, /** @type {number} */zoom) {
+  const sTs = schemeTiles.get(crs) || schemeTiles.get('default');
+  const count = 2 ** zoom;
+  _countTiles.set(count, count).multiply(sTs);
+  return _countTiles;
+}

package/lib/Core/TileGeometry.js

@@ -1,40 +1,124 @@
 import * as THREE from 'three';
-import computeBuffers, { getBufferIndexSize } from "./Prefab/computeBufferTileGeometry.js";
-function defaultBuffers(params) {
-  params.buildIndexAndUv_0 = true;
-  params.center = params.builder.center(params.extent).clone();
-  const buffers = computeBuffers(params);
-  buffers.index = new THREE.BufferAttribute(buffers.index, 1);
-  buffers.uvs[0] = new THREE.BufferAttribute(buffers.uvs[0], 2);
-  buffers.position = new THREE.BufferAttribute(buffers.position, 3);
-  buffers.normal = new THREE.BufferAttribute(buffers.normal, 3);
-  for (let i = 1; i < params.builder.uvCount; i++) {
-    buffers.uvs[1] = new THREE.BufferAttribute(buffers.uvs[1], 1);
-  }
-  return buffers;
+import { computeBuffers, getBufferIndexSize } from "./Prefab/computeBufferTileGeometry.js";
+import Coordinates from "./Geographic/Coordinates.js";
+function defaultBuffers(builder, params) {
+  const fullParams = {
+    disableSkirt: false,
+    hideSkirt: false,
+    buildIndexAndUv_0: true,
+    segments: 16,
+    coordinates: new Coordinates(builder.crs),
+    center: builder.center(params.extent).clone(),
+    ...params
+  };
+  const buffers = computeBuffers(builder, fullParams);
+  const bufferAttributes = {
+    index: buffers.index ? new THREE.BufferAttribute(buffers.index, 1) : null,
+    uvs: [...(buffers.uvs[0] ? [new THREE.BufferAttribute(buffers.uvs[0], 2)] : []), ...(buffers.uvs[1] ? [new THREE.BufferAttribute(buffers.uvs[1], 1)] : [])],
+    position: new THREE.BufferAttribute(buffers.position, 3),
+    normal: new THREE.BufferAttribute(buffers.normal, 3)
+  };
+  return bufferAttributes;
 }
-class TileGeometry extends THREE.BufferGeometry {
-  constructor(params) {
-    let buffers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultBuffers(params);
+export class TileGeometry extends THREE.BufferGeometry {
+  /** Oriented Bounding Box of the tile geometry. */
+
+  /** Ground area covered by this tile geometry. */
+
+  /** Resolution of the tile geometry in segments per side. */
+
+  /**
+   * [TileGeometry] instances are shared between tiles. Since a geometry
+   * handles its own GPU resource, it needs a reference counter to dispose of
+   * that resource only when it is discarded by every single owner of a
+   * reference to the geometry.
+   */
+  // https://github.com/iTowns/itowns/pull/2440#discussion_r1860743294
+  // TODO: Remove nullability by reworking OBB:setFromExtent
+
+  constructor(builder, params) {
+    let bufferAttributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultBuffers(builder, params);
     super();
-    this.center = params.center;
     this.extent = params.extent;
     this.segments = params.segments;
-    this.setIndex(buffers.index);
-    this.setAttribute('position', buffers.position);
-    this.setAttribute('normal', buffers.normal);
-    this.setAttribute('uv', buffers.uvs[0]);
-    for (let i = 1; i < buffers.uvs.length; i++) {
-      this.setAttribute(`uv_${i}`, buffers.uvs[i]);
+    this.setIndex(bufferAttributes.index);
+    this.setAttribute('position', bufferAttributes.position);
+    this.setAttribute('normal', bufferAttributes.normal);
+    this.setAttribute('uv', bufferAttributes.uvs[0]);
+    for (let i = 1; i < bufferAttributes.uvs.length; i++) {
+      this.setAttribute(`uv_${i}`, bufferAttributes.uvs[i]);
     }
     this.computeBoundingBox();
-    this.OBB = {};
+    this.OBB = null;
     if (params.hideSkirt) {
       this.hideSkirt = params.hideSkirt;
     }
+    this._refCount = null;
   }
-  set hideSkirt(value) {
-    this.setDrawRange(0, getBufferIndexSize(this.segments, value));
+
+  /**
+   * Enables or disables skirt rendering.
+   *
+   * @param toggle - Whether to hide the skirt; true hides, false shows.
+   */
+  set hideSkirt(toggle) {
+    this.setDrawRange(0, getBufferIndexSize(this.segments, toggle));
   }
-}
-export default TileGeometry;
+
+  /**
+   * Initialize reference count for this geometry if it is currently null.
+   *
+   * @param cacheTile - The [Cache] used to store this geometry.
+   * @param keys - The [south, level, epsg] key of this geometry.
+   */
+  initRefCount(cacheTile, keys) {
+    if (this._refCount !== null) {
+      return;
+    }
+    this._refCount = {
+      count: 0,
+      fn: () => {
+        this._refCount.count--;
+        if (this._refCount.count <= 0) {
+          // To avoid remove index buffer and attribute buffer uv
+          //  error un-bound buffer in webgl with VAO rendering.
+          // Could be removed if the attribute buffer deleting is
+          //  taken into account in the buffer binding state
+          //  (in THREE.WebGLBindingStates code).
+          this.index = null;
+          delete this.attributes.uv;
+          cacheTile.delete(...keys);
+          super.dispose();
+          // THREE.BufferGeometry.prototype.dispose.call(this);
+        }
+      }
+    };
+  }
+
+  /**
+   * Increase reference count.
+   *
+   * @throws If reference count has not been initialized.
+   */
+  increaseRefCount() {
+    if (this._refCount === null) {
+      throw new Error('[TileGeometry::increaseRefCount] ' + 'Tried to increment an unitialized reference count.');
+    }
+    this._refCount.count++;
+  }
+
+  /**
+   * The current reference count of this [TileGeometry] if it has been
+   * initialized.
+   */
+  get refCount() {
+    return this._refCount?.count;
+  }
+  dispose() {
+    if (this._refCount == null) {
+      super.dispose();
+    } else {
+      this._refCount.fn();
+    }
+  }
+}

package/lib/Core/TileMesh.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
-import CRS from "./Geographic/Crs.js";
 import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
+import { tiledCovering } from "./Tile/Tile.js";
 
 /**
  * A TileMesh is a THREE.Mesh with a geometricError and an OBB
@@ -29,7 +29,7 @@ class TileMesh extends THREE.Mesh {
     this.boundingSphere = new THREE.Sphere();
     this.obb.box3D.getBoundingSphere(this.boundingSphere);
     for (const tms of layer.tileMatrixSets) {
-      this.#_tms.set(tms, this.extent.tiledCovering(tms));
+      this.#_tms.set(tms, tiledCovering(this.extent, tms));
     }
     this.frustumCulled = false;
     this.matrixAutoUpdate = false;
@@ -70,7 +70,7 @@ class TileMesh extends THREE.Mesh {
     this.obb.box3D.getBoundingSphere(this.boundingSphere);
   }
   getExtentsByProjection(crs) {
-    return this.#_tms.get(CRS.formatToTms(crs));
+    return this.#_tms.get(crs);
   }
 
   /**

package/lib/Core/View.js

@@ -1,4 +1,5 @@
 import * as THREE from 'three';
+import * as CRS from "./Geographic/Crs.js";
 import Camera from "../Renderer/Camera.js";
 import initializeWebXR from "../Renderer/WebXR.js";
 import MainLoop, { MAIN_LOOP_EVENTS, RENDERING_PAUSED } from "./MainLoop.js";
@@ -6,7 +7,6 @@ import Capabilities from "./System/Capabilities.js";
 import { COLOR_LAYERS_ORDER_CHANGED } from "../Renderer/ColorLayersOrdering.js";
 import c3DEngine from "../Renderer/c3DEngine.js";
 import RenderMode from "../Renderer/RenderMode.js";
-import CRS from "./Geographic/Crs.js";
 import Coordinates from "./Geographic/Coordinates.js";
 import FeaturesUtils from "../Utils/FeaturesUtils.js";
 import { getMaxColorSamplerUnitsCount } from "../Renderer/LayeredMaterial.js";
@@ -30,7 +30,8 @@ export const VIEW_EVENTS = {
   LAYER_ADDED: 'layer-added',
   INITIALIZED: 'initialized',
   COLOR_LAYERS_ORDER_CHANGED,
-  CAMERA_MOVED: 'camera-moved'
+  CAMERA_MOVED: 'camera-moved',
+  DISPOSED: 'disposed'
 };
 
 /**
@@ -52,7 +53,7 @@ function _preprocessLayer(view, layer, parentLayer) {
     // Find crs projection layer, this is projection destination
     layer.crs = view.referenceCrs;
   } else if (!layer.crs) {
-    if (parentLayer && parentLayer.tileMatrixSets && parentLayer.tileMatrixSets.includes(CRS.formatToTms(source.crs))) {
+    if (parentLayer && parentLayer.tileMatrixSets && parentLayer.tileMatrixSets.includes(source.crs)) {
       layer.crs = source.crs;
     } else {
       layer.crs = parentLayer && parentLayer.extent.crs;
@@ -109,9 +110,11 @@ const coordinates = new Coordinates('EPSG:4326');
 const viewers = [];
 // Size of the camera frustrum, in meters
 let screenMeters;
+let id = 0;
 
 /**
- * @property {HTMLElement} domElement - Thhe domElement holding the canvas where the view is displayed
+ * @property {number} id - The id of the view. It's incremented at each new view instance, starting at 0.
+ * @property {HTMLElement} domElement - The domElement holding the canvas where the view is displayed
  * @property {String} referenceCrs - The coordinate reference system of the view
  * @property {MainLoop} mainLoop - itowns mainloop scheduling the operations
  * @property {THREE.Scene} scene - threejs scene of the view
@@ -136,10 +139,10 @@ class View extends THREE.EventDispatcher {
    * var view = itowns.View('EPSG:4326', viewerDiv, { camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC } });
    * var customControls = itowns.THREE.OrbitControls(view.camera3D, viewerDiv);
    *
-   * @param {string} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
+   * @param {String} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
    * @param {HTMLElement} viewerDiv - Where to instanciate the Three.js scene in the DOM
    * @param {Object} [options] - Optional properties.
-   * @param {object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
+   * @param {Object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
    * @param {MainLoop} [options.mainLoop] - {@link MainLoop} instance to use, otherwise a default one will be constructed
    * @param {WebGLRenderer|Object} [options.renderer] - {@link WebGLRenderer} instance to use, otherwise
    * a default one will be constructed. In this case, if options.renderer is an object, it will be used to
@@ -159,6 +162,7 @@ class View extends THREE.EventDispatcher {
     }
     super();
     this.domElement = viewerDiv;
+    this.id = id++;
     this.referenceCrs = crs;
     let engine;
     // options.renderer can be 2 separate things:
@@ -272,8 +276,6 @@ class View extends THREE.EventDispatcher {
     }
     // remove alls frameRequester
     this.removeAllFrameRequesters();
-    // remove alls events
-    this.removeAllEvents();
     // remove all layers
     const layers = this.getLayers(l => !l.isTiledGeometryLayer && !l.isAtmosphere);
     for (const layer of layers) {
@@ -290,6 +292,11 @@ class View extends THREE.EventDispatcher {
     viewers.splice(id, 1);
     // Remove remaining objects in the scene (e.g. helpers, debug, etc.)
     this.scene.traverse(ObjectRemovalHelper.cleanup);
+    this.dispatchEvent({
+      type: VIEW_EVENTS.DISPOSED
+    });
+    // remove alls events
+    this.removeAllEvents();
   }
 
   /**

package/lib/Layer/C3DTilesLayer.js

@@ -51,11 +51,14 @@ function findTileID(object) {
 function object3DHasFeature(object3d) {
   return object3d.geometry && object3d.geometry.attributes._BATCHID;
 }
+
+/**
+ * @extends GeometryLayer
+ */
 class C3DTilesLayer extends GeometryLayer {
   #fillColorMaterialsBuffer;
   /**
    * @deprecated Deprecated 3D Tiles layer. Use {@link OGC3DTilesLayer} instead.
-   * @extends GeometryLayer
    *
    * @example
    * // Create a new 3d-tiles layer from a web server
@@ -83,7 +86,7 @@ class C3DTilesLayer extends GeometryLayer {
    * {@link View} that already has a layer going by that id.
    * @param      {object}  config   configuration, all elements in it
    * will be merged as is in the layer.
-   * @param {C3TilesSource} config.source The source of 3d Tiles.
+   * @param {C3DTilesSource} config.source The source of 3d Tiles.
    *
    * name.
    * @param {Number} [config.sseThreshold=16] The [Screen Space Error](https://github.com/CesiumGS/3d-tiles/blob/main/specification/README.md#geometric-error)
@@ -102,6 +105,7 @@ class C3DTilesLayer extends GeometryLayer {
    * @param  {View}  view  The view
    */
   constructor(id, config, view) {
+    console.warn('C3DTilesLayer is deprecated and will be removed in iTowns 3.0 version. Use OGC3DTilesLayer instead.');
     super(id, new THREE.Group(), {
       source: config.source
     });
@@ -142,7 +146,7 @@ class C3DTilesLayer extends GeometryLayer {
       }
     }
 
-    /** @type {Style} */
+    /** @type {Style | null} */
     this._style = config.style || null;
 
     /** @type {Map<string, THREE.MeshStandardMaterial>} */
@@ -368,21 +372,15 @@ class C3DTilesLayer extends GeometryLayer {
           if (c3DTileFeature.object3d != object3d) {
             continue; // this feature do not belong to object3d
           }
+          this._style.context.setGeometry({
+            properties: c3DTileFeature
+          });
+
           /** @type {THREE.Color} */
-          let color = null;
-          if (typeof this._style.fill.color === 'function') {
-            color = new THREE.Color(this._style.fill.color(c3DTileFeature));
-          } else {
-            color = new THREE.Color(this._style.fill.color);
-          }
+          const color = new THREE.Color(this._style.fill.color);
 
           /** @type {number} */
-          let opacity = null;
-          if (typeof this._style.fill.opacity === 'function') {
-            opacity = this._style.fill.opacity(c3DTileFeature);
-          } else {
-            opacity = this._style.fill.opacity;
-          }
+          const opacity = this._style.fill.opacity;
           const materialId = color.getHexString() + opacity;
           let material = null;
           if (this.#fillColorMaterialsBuffer.has(materialId)) {
@@ -445,7 +443,13 @@ class C3DTilesLayer extends GeometryLayer {
     return this.#fillColorMaterialsBuffer.size;
   }
   set style(value) {
-    this._style = value;
+    if (value instanceof Style) {
+      this._style = value;
+    } else if (!value) {
+      this._style = null;
+    } else {
+      this._style = new Style(value);
+    }
     this.updateStyle();
   }
   get style() {

package/lib/Layer/ColorLayer.js

@@ -44,6 +44,8 @@ import { deprecatedColorLayerOptions } from "../Core/Deprecated/Undeprecator.js"
  * * `1`: used to amplify the transparency effect.
  * * `2`: unused.
  * * `3`: could be used by your own glsl code.
+ *
+ * @extends RasterLayer
  */
 class ColorLayer extends RasterLayer {
   /**
@@ -51,8 +53,6 @@ class ColorLayer extends RasterLayer {
    * it can be an aerial view of the ground or a simple transparent layer with the
    * roads displayed.
    *
-   * @extends Layer
-   *
    * @param {string} id - The id of the layer, that should be unique. It is
    * not mandatory, but an error will be emitted if this layer is added a
    * {@link View} that already has a layer going by that id.
@@ -92,15 +92,41 @@ class ColorLayer extends RasterLayer {
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     deprecatedColorLayerOptions(config);
-    super(id, config);
+    const {
+      effect_type = 0,
+      effect_parameter = 1.0,
+      transparent,
+      ...rasterConfig
+    } = config;
+    super(id, rasterConfig);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isColorLayer = true;
-    this.defineLayerProperty('visible', true);
-    this.defineLayerProperty('opacity', 1.0);
-    this.defineLayerProperty('sequence', 0);
-    this.transparent = config.transparent || this.opacity < 1.0;
+
+    /**
+     * @type {boolean}
+     */
+    this.visible = true;
+    this.defineLayerProperty('visible', this.visible);
+
+    /**
+     * @type {number}
+     */
+    this.opacity = 1.0;
+    this.defineLayerProperty('opacity', this.opacity);
+
+    /**
+     * @type {number}
+     */
+    this.sequence = 0;
+    this.defineLayerProperty('sequence', this.sequence);
+    this.transparent = transparent || this.opacity < 1.0;
     this.noTextureParentOutsideLimit = config.source ? config.source.isFileSource : false;
-    this.effect_type = config.effect_type ?? 0;
-    this.effect_parameter = config.effect_parameter ?? 1.0;
+    this.effect_type = effect_type;
+    this.effect_parameter = effect_parameter;
 
     // Feature options
     this.buildExtent = true;