itowns 2.44.3-next.4 → 2.44.3-next.41

package/lib/Renderer/Color.js

@@ -1,56 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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) ||
-    // 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

@@ -1,243 +0,0 @@
-import * as THREE from 'three';
-/* babel-plugin-inline-import './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 './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";
-import ShaderUtils from "./Shader/ShaderUtils.js";
-import Capabilities from "../Core/System/Capabilities.js";
-import RenderMode from "./RenderMode.js";
-import CommonMaterial from "./CommonMaterial.js";
-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;