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

package/lib/Renderer/Color.js

@@ -0,0 +1,56 @@
+export function lab2rgb(lab) {
+  let y = (lab[0] + 16) / 116;
+  let x = lab[1] / 500 + y;
+  let z = y - lab[2] / 200;
+  let r;
+  let g;
+  let b;
+  x = 0.95047 * (x * x * x > 0.008856 ? x * x * x : (x - 16 / 116) / 7.787);
+  y = 1.00000 * (y * y * y > 0.008856 ? y * y * y : (y - 16 / 116) / 7.787);
+  z = 1.08883 * (z * z * z > 0.008856 ? z * z * z : (z - 16 / 116) / 7.787);
+  r = x * 3.2406 + y * -1.5372 + z * -0.4986;
+  g = x * -0.9689 + y * 1.8758 + z * 0.0415;
+  b = x * 0.0557 + y * -0.2040 + z * 1.0570;
+  r = r > 0.0031308 ? 1.055 * r ** (1 / 2.4) - 0.055 : 12.92 * r;
+  g = g > 0.0031308 ? 1.055 * g ** (1 / 2.4) - 0.055 : 12.92 * g;
+  b = b > 0.0031308 ? 1.055 * b ** (1 / 2.4) - 0.055 : 12.92 * b;
+  return [Math.max(0, Math.min(1, r)) * 255, Math.max(0, Math.min(1, g)) * 255, Math.max(0, Math.min(1, b)) * 255];
+}
+export function rgb2lab(rgb) {
+  let r = rgb.r || rgb[0] / 255;
+  let g = rgb.g || rgb[1] / 255;
+  let b = rgb.b || rgb[2] / 255;
+  let x;
+  let y;
+  let z;
+  r = r > 0.04045 ? ((r + 0.055) / 1.055) ** 2.4 : r / 12.92;
+  g = g > 0.04045 ? ((g + 0.055) / 1.055) ** 2.4 : g / 12.92;
+  b = b > 0.04045 ? ((b + 0.055) / 1.055) ** 2.4 : b / 12.92;
+  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
+  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
+  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
+  x = x > 0.008856 ? x ** (1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? y ** (1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? z ** (1 / 3) : 7.787 * z + 16 / 116;
+  return [116 * y - 16, 500 * (x - y), 200 * (y - z)];
+}
+
+// calculate the perceptual distance between colors in CIELAB
+// https://github.com/THEjoezack/ColorMine/blob/master/ColorMine/ColorSpaces/Comparisons/Cie94Comparison.cs
+export function deltaE(rgbA, rgbB) {
+  const labA = rgb2lab(rgbA);
+  const labB = rgb2lab(rgbB);
+  const deltaL = labA[0] - labB[0];
+  const deltaA = labA[1] - labB[1];
+  const deltaB = labA[2] - labB[2];
+  const c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
+  const c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
+  const deltaC = c1 - c2;
+  let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
+  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
+  const deltaLKlsl = deltaL / 1.0;
+  const deltaCkcsc = deltaC / (1.0 + 0.045 * c1);
+  const deltaHkhsh = deltaH / (1.0 + 0.015 * c1);
+  const i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
+  return i < 0 ? 0 : Math.sqrt(i);
+}

package/lib/Renderer/ColorLayersOrdering.js

@@ -0,0 +1,115 @@
+import { ImageryLayers } from "../Layer/Layer.js";
+function updateLayersOrdering(geometryLayer, imageryLayers) {
+  const sequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
+  const cO = function (object) {
+    if (object.material?.setSequence) {
+      object.material.setSequence(sequence);
+    }
+  };
+  for (const node of geometryLayer.level0Nodes) {
+    node.traverse(cO);
+  }
+}
+export const COLOR_LAYERS_ORDER_CHANGED = 'layers-order-changed';
+
+/**
+ * Utilitary to organize {@link ColorLayer} in a {@link View}.
+ *
+ * @module ColorLayersOrdering
+ */
+export default {
+  /**
+   * Moves up in the layer list. This function has no effect if the layer is
+   * moved to its current index.
+   *
+   * @param {View} view - The view in which the layer is moved up.
+   * @param {string} layerId - The ID of the layer to move.
+   *
+   * @example
+   * itowns.ColorLayersOrdering.moveLayerUp(viewer, 'idLayerToUp');
+   */
+  moveLayerUp(view, layerId) {
+    const imageryLayers = view.getLayers(l => l.isColorLayer);
+    const layer = view.getLayerById(layerId);
+    if (layer) {
+      const previousSequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
+      ImageryLayers.moveLayerUp(layer, imageryLayers);
+      updateLayersOrdering(view.tileLayer, imageryLayers);
+      view.dispatchEvent({
+        type: COLOR_LAYERS_ORDER_CHANGED,
+        previous: {
+          sequence: previousSequence
+        },
+        new: {
+          sequence: ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers)
+        }
+      });
+      view.notifyChange(view.tileLayer);
+    } else {
+      throw new Error(`${layerId} isn't color layer`);
+    }
+  },
+  /**
+   * Moves down in the layer list. This function has no effect if the layer is
+   * moved to its current index.
+   *
+   * @param {View} view - The view in which the layer is moved down.
+   * @param {string} layerId - The ID of the layer to move.
+   *
+   * @example
+   * itowns.ColorLayersOrdering.moveLayerDown(viewer, 'idLayerToDown');
+   */
+  moveLayerDown(view, layerId) {
+    const imageryLayers = view.getLayers(l => l.isColorLayer);
+    const layer = view.getLayerById(layerId);
+    if (layer) {
+      const previousSequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
+      ImageryLayers.moveLayerDown(layer, imageryLayers);
+      updateLayersOrdering(view.tileLayer, imageryLayers);
+      view.dispatchEvent({
+        type: COLOR_LAYERS_ORDER_CHANGED,
+        previous: {
+          sequence: previousSequence
+        },
+        new: {
+          sequence: ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers)
+        }
+      });
+      view.notifyChange(view.tileLayer);
+    } else {
+      throw new Error(`${layerId} isn't color layer`);
+    }
+  },
+  /**
+   * Moves a specific layer to a specific index in the layer list. This
+   * function has no effect if the layer is moved to its current index.
+   *
+   * @param {View} view - The view in which the layer is moved.
+   * @param {string} layerId - The ID of the layer to move.
+   * @param {number} index - The index to move the layer to.
+   *
+   * @example
+   * itowns.ColorLayersOrdering.moveLayerToIndex(viewer, 'idLayerToChangeIndex', 2);
+   */
+  moveLayerToIndex(view, layerId, index) {
+    const imageryLayers = view.getLayers(l => l.isColorLayer);
+    const layer = view.getLayerById(layerId);
+    if (layer) {
+      const previousSequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
+      ImageryLayers.moveLayerToIndex(layer, index, imageryLayers);
+      updateLayersOrdering(view.tileLayer, imageryLayers);
+      view.dispatchEvent({
+        type: COLOR_LAYERS_ORDER_CHANGED,
+        previous: {
+          sequence: previousSequence
+        },
+        new: {
+          sequence: ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers)
+        }
+      });
+      view.notifyChange(view.tileLayer);
+    } else {
+      throw new Error(`${layerId} isn't color layer`);
+    }
+  }
+};

package/lib/Renderer/CommonMaterial.js

@@ -0,0 +1,31 @@
+import * as THREE from 'three';
+export default {
+  setDefineMapping(object, PROPERTY, mapping) {
+    Object.keys(mapping).forEach(key => {
+      object.defines[`${PROPERTY}_${key}`] = mapping[key];
+    });
+  },
+  setDefineProperty(object, property, PROPERTY, initValue) {
+    object.defines[PROPERTY] = initValue;
+    Object.defineProperty(object, property, {
+      get: () => object.defines[PROPERTY],
+      set: value => {
+        if (object.defines[PROPERTY] != value) {
+          object.defines[PROPERTY] = value;
+          object.needsUpdate = true;
+        }
+      }
+    });
+  },
+  setUniformProperty(object, property, initValue) {
+    object.uniforms[property] = new THREE.Uniform(initValue);
+    Object.defineProperty(object, property, {
+      get: () => object.uniforms[property].value,
+      set: value => {
+        if (object.uniforms[property].value != value) {
+          object.uniforms[property].value = value;
+        }
+      }
+    });
+  }
+};

package/lib/Renderer/Label2DRenderer.js

@@ -0,0 +1,192 @@
+import * as THREE from 'three';
+import GlobeLayer from "../Core/Prefab/Globe/GlobeLayer.js";
+function isIntersectedOrOverlaped(a, b) {
+  return !(a.left > b.right || a.right < b.left || a.top > b.bottom || a.bottom < b.top);
+}
+const frustum = new THREE.Frustum();
+
+// A grid to manage labels on the screen.
+export class ScreenGrid {
+  constructor() {
+    let x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 12;
+    let y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+    let width = arguments.length > 2 ? arguments[2] : undefined;
+    let height = arguments.length > 3 ? arguments[3] : undefined;
+    this.x = x;
+    this.y = y;
+    this.grid = [];
+    this.visible = [];
+    this.resize();
+    this.reset();
+    this.width = width;
+    this.height = height;
+  }
+
+  // Reset each cell and hidden and visible.
+  reset() {
+    for (let i = 0; i < this.x; i++) {
+      for (let j = 0; j < this.y; j++) {
+        // Splice is prefered to creating a new array, in term of memory
+        this.grid[i][j].splice(0, this.grid[i][j].length);
+      }
+    }
+    this.visible = [];
+  }
+
+  // Add rows if needed — but don't delete anything else. Columns are taken
+  // care in reset().
+  resize() {
+    for (let i = 0; i < this.x; i++) {
+      if (!this.grid[i]) {
+        this.grid[i] = [];
+      }
+      for (let j = 0; j < this.y; j++) {
+        if (!this.grid[i][j]) {
+          this.grid[i][j] = [];
+        }
+      }
+    }
+  }
+
+  // Insert a label using its boundaries. It is either added to hidden or
+  // visible, given the result. The grid is populated with true for every
+  // filled cell.
+  insert(obj) {
+    const minx = Math.max(0, Math.floor(obj.boundaries.left / this.width * this.x));
+    const maxx = Math.min(this.x - 1, Math.floor(obj.boundaries.right / this.width * this.x));
+    const miny = Math.max(0, Math.floor(obj.boundaries.top / this.height * this.y));
+    const maxy = Math.min(this.y - 1, Math.floor(obj.boundaries.bottom / this.height * this.y));
+    for (let i = minx; i <= maxx; i++) {
+      for (let j = miny; j <= maxy; j++) {
+        if (this.grid[i][j].length > 0) {
+          if (this.grid[i][j].some(l => isIntersectedOrOverlaped(l.boundaries, obj.boundaries))) {
+            obj.visible = false;
+            return false;
+          }
+        }
+      }
+    }
+    for (let i = minx; i <= maxx; i++) {
+      for (let j = miny; j <= maxy; j++) {
+        this.grid[i][j].push(obj);
+      }
+    }
+    return true;
+  }
+}
+const worldPosition = new THREE.Vector3();
+
+/**
+ * This renderer is inspired by the
+ * [`THREE.CSS2DRenderer`](https://threejs.org/docs/#examples/en/renderers/CSS2DRenderer).
+ * It is instanciated in `c3DEngine`, as another renderer to handles Labels.
+ */
+class Label2DRenderer {
+  constructor() {
+    this.domElement = document.createElement('div');
+    this.domElement.style.overflow = 'hidden';
+    this.domElement.style.position = 'absolute';
+    this.domElement.style.top = '0';
+    this.domElement.style.height = '100%';
+    this.domElement.style.width = '100%';
+    this.domElement.style.zIndex = 1;
+
+    // Used to destroy labels that are not added to the DOM
+    this.garbage = document.createElement('div');
+    this.garbage.style.display = 'none';
+    this.domElement.appendChild(this.garbage);
+    this.halfWidth = 0;
+    this.halfHeight = 0;
+    this.grid = new ScreenGrid();
+    this.infoTileLayer = undefined;
+  }
+  setSize(width, height) {
+    this.domElement.style.width = `${width}`;
+    this.domElement.style.height = `${height}`;
+    this.halfWidth = width / 2;
+    this.halfHeight = height / 2;
+    this.grid.width = width;
+    this.grid.height = height;
+    this.grid.x = Math.ceil(width / 20);
+    this.grid.y = Math.ceil(height / 20);
+    this.grid.resize();
+  }
+  registerLayer(layer) {
+    this.domElement.appendChild(layer.domElement.dom);
+  }
+  render(scene, camera) {
+    const labelLayers = this.infoTileLayer && this.infoTileLayer.layer.attachedLayers.filter(l => l.isLabelLayer && l.visible);
+    if (labelLayers.length == 0) {
+      return;
+    }
+    this.grid.reset();
+
+    // set camera frustum
+    frustum.setFromProjectionMatrix(camera.projectionMatrix);
+    labelLayers.forEach(labelLayer => {
+      labelLayer.submittedLabelNodes.forEach(labelsNode => {
+        labelsNode.labels.forEach(label => {
+          labelsNode.updatePosition(label);
+          this.culling(label, camera);
+        });
+        labelsNode.domElements.labels.show();
+        labelsNode.needsUpdate = false;
+      });
+    });
+
+    // sort by order, then by visibility inside those subsets
+    // https://docs.mapbox.com/help/troubleshooting/optimize-map-label-placement/#label-hierarchy
+    this.grid.visible.sort((a, b) => {
+      const r = b.order - a.order;
+      if (r == 0) {
+        if (!a.visible && b.visible) {
+          return 1;
+        } else {
+          return -1;
+        }
+      } else {
+        return r;
+      }
+    });
+    this.grid.visible.forEach(l => {
+      if (this.grid.insert(l)) {
+        l.visible = true;
+        l.updateCSSPosition();
+      } else {
+        l.visible = false;
+      }
+    });
+    labelLayers.forEach(labelLayer => {
+      labelLayer.toHide.children.forEach(labelsNode => labelsNode.domElements?.labels.hide());
+      labelLayer.toHide.clear();
+    });
+  }
+  culling(label, camera) {
+    label.getWorldPosition(worldPosition);
+    // Check if the frustum contains tle label
+    if (!frustum.containsPoint(worldPosition.applyMatrix4(camera.matrixWorldInverse)) ||
+    // Check if globe horizon culls the label
+    // Do some horizon culling (if possible) if the tiles level is small enough.
+    label.horizonCullingPoint && GlobeLayer.horizonCulling(label.horizonCullingPoint)
+    // Why do we might need this part ?
+    // || // Check if content isn't present in visible labels
+    // this.grid.visible.some((l) => {
+    //     // TODO for icon without text filter by position
+    //     const textContent = label.content.textContent;
+    //     return textContent !== '' && l.content.textContent.toLowerCase() == textContent.toLowerCase();
+    // })
+    ) {
+      label.visible = false;
+    } else {
+      // projecting world position label
+      worldPosition.applyMatrix4(camera.projectionMatrix);
+      label.updateProjectedPosition(worldPosition.x * this.halfWidth + this.halfWidth, -worldPosition.y * this.halfHeight + this.halfHeight);
+      this.grid.visible.push(label);
+    }
+  }
+  removeLabelDOM(label) {
+    this.garbage.appendChild(label.content);
+    this.garbage.innerHTML = '';
+  }
+}
+export default Label2DRenderer;

package/lib/Renderer/LayeredMaterial.js

@@ -0,0 +1,243 @@
+import * as THREE from 'three';
+import ShaderUtils from "./Shader/ShaderUtils.js";
+import Capabilities from "../Core/System/Capabilities.js";
+import RenderMode from "./RenderMode.js";
+import CommonMaterial from "./CommonMaterial.js";
+/* babel-plugin-inline-import '../Renderer/Shader/TileVS.glsl' */
+const TileVS = "#include <itowns/precision_qualifier>\n#include <common>\n#include <itowns/elevation_pars_vertex>\n#include <logdepthbuf_pars_vertex>\n#if NUM_CRS > 1\nattribute float     uv_1;\n#endif\n\nuniform bool lightingEnabled;\nvarying vec2 vHighPrecisionZW;\n\n#if MODE == MODE_FINAL\n#include <fog_pars_vertex>\nvarying vec3        vUv;\nvarying vec3        vNormal;\n#endif\nvoid main() {\n        #include <begin_vertex>\n        #include <itowns/elevation_vertex>\n        #include <itowns/geoid_vertex>\n        #include <project_vertex>\n        #include <logdepthbuf_vertex>\n        vHighPrecisionZW = gl_Position.zw;\n#if MODE == MODE_FINAL\n        #include <fog_vertex>\n        #if NUM_CRS > 1\n        vUv = vec3(uv, (uv_1 > 0.) ? uv_1 : uv.y); // set uv_1 = uv if uv_1 is undefined\n        #else\n        vUv = vec3(uv, 0.0);\n        #endif\n        vNormal = normalize ( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );\n#endif\n}\n";
+/* babel-plugin-inline-import '../Renderer/Shader/TileFS.glsl' */
+const TileFS = "#include <itowns/precision_qualifier>\n#include <logdepthbuf_pars_fragment>\n#include <itowns/pitUV>\n#include <itowns/color_layers_pars_fragment>\n#if MODE == MODE_FINAL\n#include <itowns/fog_pars_fragment>\n#include <itowns/overlay_pars_fragment>\n#include <itowns/lighting_pars_fragment>\n#endif\n#include <itowns/mode_pars_fragment>\n\nuniform vec3        diffuse;\nuniform float       opacity;\nvarying vec3        vUv; // uv.x/uv_1.x, uv.y, uv_1.y\nvarying vec2        vHighPrecisionZW;\n\nvoid main() {\n    #include <logdepthbuf_fragment>\n\n#if MODE == MODE_ID\n\n    #include <itowns/mode_id_fragment>\n\n#elif MODE == MODE_DEPTH\n\n    #include <itowns/mode_depth_fragment>\n\n#else\n\n    gl_FragColor = vec4(diffuse, opacity);\n\n    uvs[0] = vec3(vUv.xy, 0.);\n\n#if NUM_CRS > 1\n    uvs[1] = vec3(vUv.x, fract(vUv.z), floor(vUv.z));\n#endif\n\n    vec4 color;\n    #pragma unroll_loop\n    for ( int i = 0; i < NUM_FS_TEXTURES; i ++ ) {\n        color = getLayerColor( i , colorTextures[ i ], colorOffsetScales[ i ], colorLayers[ i ]);\n        gl_FragColor.rgb = mix(gl_FragColor.rgb, color.rgb, color.a);\n    }\n\n  #if defined(DEBUG)\n    if (showOutline) {\n        #pragma unroll_loop\n        for ( int i = 0; i < NUM_CRS; i ++) {\n            color = getOutlineColor( outlineColors[ i ], uvs[ i ].xy);\n            gl_FragColor.rgb = mix(gl_FragColor.rgb, color.rgb, color.a);\n        }\n    }\n  #endif\n\n    #include <itowns/fog_fragment>\n    #include <itowns/lighting_fragment>\n    #include <itowns/overlay_fragment>\n\n#endif\n}\n";
+const identityOffsetScale = new THREE.Vector4(0.0, 0.0, 1.0, 1.0);
+const defaultTex = new THREE.Texture();
+
+// from three.js packDepthToRGBA
+const UnpackDownscale = 255 / 256; // 0..1 -> fraction (excluding 1)
+const bitSh = new THREE.Vector4(UnpackDownscale, UnpackDownscale / 256.0, UnpackDownscale / (256.0 * 256.0), UnpackDownscale / (256.0 * 256.0 * 256.0));
+export function unpack1K(color, factor) {
+  return factor ? bitSh.dot(color) * factor : bitSh.dot(color);
+}
+
+// Max sampler color count to LayeredMaterial
+// Because there's a statement limitation to unroll, in getColorAtIdUv method
+const maxSamplersColorCount = 15;
+const samplersElevationCount = 1;
+export function getMaxColorSamplerUnitsCount() {
+  const maxSamplerUnitsCount = Capabilities.getMaxTextureUnitsCount();
+  return Math.min(maxSamplerUnitsCount - samplersElevationCount, maxSamplersColorCount);
+}
+export const colorLayerEffects = {
+  noEffect: 0,
+  removeLightColor: 1,
+  removeWhiteColor: 2,
+  customEffect: 3
+};
+const defaultStructLayer = {
+  bias: 0,
+  noDataValue: -99999,
+  zmin: 0,
+  zmax: 0,
+  scale: 0,
+  mode: 0,
+  textureOffset: 0,
+  opacity: 0,
+  crs: 0,
+  effect_parameter: 0,
+  effect_type: colorLayerEffects.noEffect,
+  transparent: false
+};
+function updateLayersUniforms(uniforms, olayers, max) {
+  // prepare convenient access to elevation or color uniforms
+  const layers = uniforms.layers.value;
+  const textures = uniforms.textures.value;
+  const offsetScales = uniforms.offsetScales.value;
+  const textureCount = uniforms.textureCount;
+
+  // flatten the 2d array [i,j] -> layers[_layerIds[i]].textures[j]
+  let count = 0;
+  for (const layer of olayers) {
+    // textureOffset property is added to RasterTile
+    layer.textureOffset = count;
+    for (let i = 0, il = layer.textures.length; i < il; ++i, ++count) {
+      if (count < max) {
+        offsetScales[count] = layer.offsetScales[i];
+        textures[count] = layer.textures[i];
+        layers[count] = layer;
+      }
+    }
+  }
+  if (count > max) {
+    console.warn(`LayeredMaterial: Not enough texture units (${max} < ${count}), excess textures have been discarded.`);
+  }
+  textureCount.value = count;
+
+  // WebGL 2.0 doesn't support the undefined uniforms.
+  // So the undefined uniforms are defined by default value.
+  for (let i = count; i < textures.length; i++) {
+    textures[i] = defaultTex;
+    offsetScales[i] = identityOffsetScale;
+    layers[i] = defaultStructLayer;
+  }
+}
+export const ELEVATION_MODES = {
+  RGBA: 0,
+  COLOR: 1,
+  DATA: 2
+};
+let nbSamplers;
+const fragmentShader = [];
+class LayeredMaterial extends THREE.ShaderMaterial {
+  #_visible = true;
+  constructor() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let crsCount = arguments.length > 1 ? arguments[1] : undefined;
+    super(options);
+    nbSamplers = nbSamplers || [samplersElevationCount, getMaxColorSamplerUnitsCount()];
+    this.defines.NUM_VS_TEXTURES = nbSamplers[0];
+    this.defines.NUM_FS_TEXTURES = nbSamplers[1];
+    // TODO: We do not use the fog from the scene, is this a desired
+    // behavior?
+    this.defines.USE_FOG = 1;
+    this.defines.NUM_CRS = crsCount;
+    CommonMaterial.setDefineMapping(this, 'ELEVATION', ELEVATION_MODES);
+    CommonMaterial.setDefineMapping(this, 'MODE', RenderMode.MODES);
+    CommonMaterial.setDefineProperty(this, 'mode', 'MODE', RenderMode.MODES.FINAL);
+    this.vertexShader = TileVS;
+    // three loop unrolling of ShaderMaterial only supports integer bounds,
+    // see https://github.com/mrdoob/three.js/issues/28020
+    fragmentShader[crsCount] = fragmentShader[crsCount] || ShaderUtils.unrollLoops(TileFS, this.defines);
+    this.fragmentShader = fragmentShader[crsCount];
+
+    // Color uniforms
+    CommonMaterial.setUniformProperty(this, 'diffuse', new THREE.Color(0.04, 0.23, 0.35));
+    CommonMaterial.setUniformProperty(this, 'opacity', this.opacity);
+
+    // Lighting uniforms
+    CommonMaterial.setUniformProperty(this, 'lightingEnabled', false);
+    CommonMaterial.setUniformProperty(this, 'lightPosition', new THREE.Vector3(-0.5, 0.0, 1.0));
+
+    // Misc properties
+    CommonMaterial.setUniformProperty(this, 'fogDistance', 1000000000.0);
+    CommonMaterial.setUniformProperty(this, 'fogColor', new THREE.Color(0.76, 0.85, 1.0));
+    CommonMaterial.setUniformProperty(this, 'overlayAlpha', 0);
+    CommonMaterial.setUniformProperty(this, 'overlayColor', new THREE.Color(1.0, 0.3, 0.0));
+    CommonMaterial.setUniformProperty(this, 'objectId', 0);
+    CommonMaterial.setUniformProperty(this, 'geoidHeight', 0.0);
+
+    // > 0 produces gaps,
+    // < 0 causes oversampling of textures
+    // = 0 causes sampling artefacts due to bad estimation of texture-uv gradients
+    // best is a small negative number
+    CommonMaterial.setUniformProperty(this, 'minBorderDistance', -0.01);
+
+    // LayeredMaterialLayers
+    this.layers = [];
+    this.elevationLayerIds = [];
+    this.colorLayerIds = [];
+
+    // elevation layer uniforms, to be updated using updateUniforms()
+    this.uniforms.elevationLayers = new THREE.Uniform(new Array(nbSamplers[0]).fill(defaultStructLayer));
+    this.uniforms.elevationTextures = new THREE.Uniform(new Array(nbSamplers[0]).fill(defaultTex));
+    this.uniforms.elevationOffsetScales = new THREE.Uniform(new Array(nbSamplers[0]).fill(identityOffsetScale));
+    this.uniforms.elevationTextureCount = new THREE.Uniform(0);
+
+    // color layer uniforms, to be updated using updateUniforms()
+    this.uniforms.colorLayers = new THREE.Uniform(new Array(nbSamplers[1]).fill(defaultStructLayer));
+    this.uniforms.colorTextures = new THREE.Uniform(new Array(nbSamplers[1]).fill(defaultTex));
+    this.uniforms.colorOffsetScales = new THREE.Uniform(new Array(nbSamplers[1]).fill(identityOffsetScale));
+    this.uniforms.colorTextureCount = new THREE.Uniform(0);
+
+    // can't do an ES6 setter/getter here
+    Object.defineProperty(this, 'visible', {
+      // Knowing the visibility of a `LayeredMaterial` is useful. For example in a
+      // `GlobeView`, if you zoom in, "parent" tiles seems hidden; in fact, there
+      // are not, it is only their material (so `LayeredMaterial`) that is set to
+      // not visible.
+
+      // Adding an event when changing this property can be useful to hide others
+      // things, like in `TileDebug`, or in later PR to come (#1303 for example).
+      //
+      // TODO : verify if there is a better mechanism to avoid this event
+      get() {
+        return this.#_visible;
+      },
+      set(v) {
+        if (this.#_visible != v) {
+          this.#_visible = v;
+          this.dispatchEvent({
+            type: v ? 'shown' : 'hidden'
+          });
+        }
+      }
+    });
+  }
+  getUniformByType(type) {
+    return {
+      layers: this.uniforms[`${type}Layers`],
+      textures: this.uniforms[`${type}Textures`],
+      offsetScales: this.uniforms[`${type}OffsetScales`],
+      textureCount: this.uniforms[`${type}TextureCount`]
+    };
+  }
+  updateLayersUniforms() {
+    const colorlayers = this.layers.filter(l => this.colorLayerIds.includes(l.id) && l.visible && l.opacity > 0);
+    colorlayers.sort((a, b) => this.colorLayerIds.indexOf(a.id) - this.colorLayerIds.indexOf(b.id));
+    updateLayersUniforms(this.getUniformByType('color'), colorlayers, this.defines.NUM_FS_TEXTURES);
+    if (this.elevationLayerIds.some(id => this.getLayer(id)) || this.uniforms.elevationTextureCount.value && !this.elevationLayerIds.length) {
+      const elevationLayer = this.getElevationLayer() ? [this.getElevationLayer()] : [];
+      updateLayersUniforms(this.getUniformByType('elevation'), elevationLayer, this.defines.NUM_VS_TEXTURES);
+    }
+    this.layersNeedUpdate = false;
+  }
+  dispose() {
+    this.dispatchEvent({
+      type: 'dispose'
+    });
+    this.layers.forEach(l => l.dispose(true));
+    this.layers.length = 0;
+    this.layersNeedUpdate = true;
+  }
+
+  // TODO: rename to setColorLayerIds and add setElevationLayerIds ?
+  setSequence(sequenceLayer) {
+    this.colorLayerIds = sequenceLayer;
+    this.layersNeedUpdate = true;
+  }
+  setSequenceElevation(layerId) {
+    this.elevationLayerIds[0] = layerId;
+    this.layersNeedUpdate = true;
+  }
+  removeLayer(layerId) {
+    const index = this.layers.findIndex(l => l.id === layerId);
+    if (index > -1) {
+      this.layers[index].dispose();
+      this.layers.splice(index, 1);
+      const idSeq = this.colorLayerIds.indexOf(layerId);
+      if (idSeq > -1) {
+        this.colorLayerIds.splice(idSeq, 1);
+      } else {
+        this.elevationLayerIds = [];
+      }
+    }
+  }
+  addLayer(rasterNode) {
+    if (rasterNode.layer.id in this.layers) {
+      console.warn('The "{layer.id}" layer was already present in the material, overwritting.');
+    }
+    this.layers.push(rasterNode);
+  }
+  getLayer(id) {
+    return this.layers.find(l => l.id === id);
+  }
+  getLayers(ids) {
+    return this.layers.filter(l => ids.includes(l.id));
+  }
+  getElevationLayer() {
+    return this.layers.find(l => l.id === this.elevationLayerIds[0]);
+  }
+  setElevationScale(scale) {
+    if (this.elevationLayerIds.length) {
+      this.getElevationLayer().scale = scale;
+    }
+  }
+}
+export default LayeredMaterial;