itowns 2.45.1 → 2.45.2-next.0

package/lib/Renderer/LayeredMaterial.js

@@ -1,12 +1,11 @@
 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 DEBUG == 1\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";
-/* 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();
 
@@ -31,146 +30,215 @@ export const colorLayerEffects = {
   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
+
+/** GPU struct for color layers */
+
+/** GPU struct for elevation layers */
+
+/** Default GPU struct values for initialization QoL */
+const defaultStructLayers = {
+  color: {
+    textureOffset: 0,
+    crs: 0,
+    opacity: 0,
+    effect_parameter: 0,
+    effect_type: colorLayerEffects.noEffect,
+    transparent: false
+  },
+  elevation: {
+    scale: 0,
+    bias: 0,
+    mode: 0,
+    zmin: 0,
+    zmax: 0
+  }
 };
-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]
+function updateLayersUniforms(uniforms, tiles, max) {
+  // Aliases for readability
+  const uLayers = uniforms.layers.value;
+  const uTextures = uniforms.textures.value;
+  const uOffsetScales = uniforms.offsetScales.value;
+  const uTextureCount = 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;
-      }
+  for (const tile of tiles) {
+    // FIXME: RasterElevationTile are always passed to this function alone
+    // so this works, but it's really not great even ignoring the dynamic
+    // addition of a field.
+    // @ts-expect-error: adding field to passed layer
+    tile.textureOffset = count;
+    for (let i = 0; i < tile.textures.length && count < max; ++i, ++count) {
+      uOffsetScales[count] = tile.offsetScales[i];
+      uTextures[count] = tile.textures[i];
+      uLayers[count] = tile;
     }
   }
   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;
+    console.warn(`LayeredMaterial: Not enough texture units (${max} < ${count}),` + 'excess textures have been discarded.');
   }
+  uTextureCount.value = count;
 }
 export const ELEVATION_MODES = {
   RGBA: 0,
   COLOR: 1,
   DATA: 2
 };
+
+/**
+ * Convenience type that wraps all of the generic type's fields in
+ * [THREE.IUniform]s.
+ */
+
+/** List of the uniform types required for a LayeredMaterial. */
+
 let nbSamplers;
 const fragmentShader = [];
-class LayeredMaterial extends THREE.ShaderMaterial {
-  #_visible = true;
+
+/** Replacing the default uniforms dynamic type with our own static map. */
+
+/** Fills in a Partial object's field and narrows the type accordingly. */
+function fillInProp(obj, name, value) {
+  if (obj[name] === undefined) {
+    obj[name] = value;
+  }
+}
+/**
+ * Initialiszes elevation and render mode defines and narrows the type
+ * accordingly.
+ */
+function initModeDefines(defines) {
+  Object.keys(ELEVATION_MODES).forEach(key => fillInProp(defines, `ELEVATION_${key}`, ELEVATION_MODES[key]));
+  Object.keys(RenderMode.MODES).forEach(key => fillInProp(defines, `MODE_${key}`, RenderMode.MODES[key]));
+}
+
+/** Material that handles the overlap of multiple raster tiles. */
+export 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];
+    nbSamplers ??= [samplersElevationCount, getMaxColorSamplerUnitsCount()];
+    const defines = {};
+    fillInProp(defines, 'NUM_VS_TEXTURES', nbSamplers[0]);
+    fillInProp(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);
+    fillInProp(defines, 'USE_FOG', 1);
+    fillInProp(defines, 'NUM_CRS', crsCount);
+    initModeDefines(defines);
+    fillInProp(defines, 'MODE', RenderMode.MODES.FINAL);
+    fillInProp(defines, 'DEBUG', +false);
+    this.defines = defines;
     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);
+    fragmentShader[crsCount] ??= ShaderUtils.unrollLoops(TileFS, defines);
     this.fragmentShader = fragmentShader[crsCount];
+    this.initUniforms({
+      // Color uniforms
+      diffuse: new THREE.Color(0.04, 0.23, 0.35),
+      opacity: this.opacity,
+      // Lighting uniforms
+      lightingEnabled: false,
+      lightPosition: new THREE.Vector3(-0.5, 0.0, 1.0),
+      // Misc properties
+      fogDistance: 1000000000.0,
+      fogColor: new THREE.Color(0.76, 0.85, 1.0),
+      overlayAlpha: 0,
+      overlayColor: new THREE.Color(1.0, 0.3, 0.0),
+      objectId: 0,
+      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
+      minBorderDistance: -0.01
+    });
 
-    // Color uniforms
-    CommonMaterial.setUniformProperty(this, 'diffuse', new THREE.Color(0.04, 0.23, 0.35));
-    CommonMaterial.setUniformProperty(this, 'opacity', this.opacity);
+    // LayeredMaterialLayers
+    this.colorTiles = [];
+    this.colorTileIds = [];
+    this.layersNeedUpdate = false;
 
-    // Lighting uniforms
-    CommonMaterial.setUniformProperty(this, 'lightingEnabled', false);
-    CommonMaterial.setUniformProperty(this, 'lightPosition', new THREE.Vector3(-0.5, 0.0, 1.0));
+    // elevation/color layer uniforms, to be updated using updateUniforms()
+    this.initUniforms({
+      elevationLayers: new Array(nbSamplers[0]).fill(defaultStructLayers.elevation),
+      elevationTextures: new Array(nbSamplers[0]).fill(defaultTex),
+      elevationOffsetScales: new Array(nbSamplers[0]).fill(identityOffsetScale),
+      elevationTextureCount: 0,
+      colorLayers: new Array(nbSamplers[1]).fill(defaultStructLayers.color),
+      colorTextures: new Array(nbSamplers[1]).fill(defaultTex),
+      colorOffsetScales: new Array(nbSamplers[1]).fill(identityOffsetScale),
+      colorTextureCount: 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);
+    // Can't do an ES6 getter/setter here because it would override the
+    // Material::visible property with accessors, which is not allowed.
+    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.
 
-    // > 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);
+      // 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).
 
-    // 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;
+        return this._visible;
       },
       set(v) {
-        if (this.#_visible != v) {
-          this.#_visible = v;
+        if (this._visible != v) {
+          this._visible = v;
           this.dispatchEvent({
             type: v ? 'shown' : 'hidden'
           });
         }
       }
     });
+
+    // setTimeout(() => console.log(this), 2);
+  }
+  get mode() {
+    return this.defines.MODE;
+  }
+  set mode(mode) {
+    if (this.defines.MODE != mode) {
+      this.defines.MODE = mode;
+      this.needsUpdate = true;
+    }
+  }
+  getUniform(name) {
+    return this.uniforms[name]?.value;
+  }
+  setUniform(name, value) {
+    const uniform = this.uniforms[name];
+    if (uniform === undefined) {
+      return;
+    }
+    if (uniform.value !== value) {
+      uniform.value = value;
+    }
+  }
+  initUniforms(uniforms) {
+    for (const [name, value] of Object.entries(uniforms)) {
+      if (this.uniforms[name] === undefined) {
+        this.uniforms[name] = {
+          value
+        };
+      }
+    }
+  }
+  setUniforms(uniforms) {
+    for (const [name, value] of Object.entries(uniforms)) {
+      this.setUniform(name, value);
+    }
   }
-  getUniformByType(type) {
+  getLayerUniforms(type) {
     return {
       layers: this.uniforms[`${type}Layers`],
       textures: this.uniforms[`${type}Textures`],
@@ -179,12 +247,13 @@ class LayeredMaterial extends THREE.ShaderMaterial {
     };
   }
   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);
+    const colorlayers = this.colorTiles.filter(rt => rt.visible && rt.opacity > 0);
+    colorlayers.sort((a, b) => this.colorTileIds.indexOf(a.id) - this.colorTileIds.indexOf(b.id));
+    updateLayersUniforms(this.getLayerUniforms('color'), colorlayers, this.defines.NUM_FS_TEXTURES);
+    if (this.elevationTileId !== undefined && this.getElevationTile()) {
+      if (this.elevationTile !== undefined) {
+        updateLayersUniforms(this.getLayerUniforms('elevation'), [this.elevationTile], this.defines.NUM_VS_TEXTURES);
+      }
     }
     this.layersNeedUpdate = false;
   }
@@ -192,52 +261,63 @@ class LayeredMaterial extends THREE.ShaderMaterial {
     this.dispatchEvent({
       type: 'dispose'
     });
-    this.layers.forEach(l => l.dispose(true));
-    this.layers.length = 0;
+    this.colorTiles.forEach(l => l.dispose(true));
+    this.colorTiles.length = 0;
+    this.elevationTile?.dispose(true);
     this.layersNeedUpdate = true;
   }
-
-  // TODO: rename to setColorLayerIds and add setElevationLayerIds ?
-  setSequence(sequenceLayer) {
-    this.colorLayerIds = sequenceLayer;
+  setColorTileIds(ids) {
+    this.colorTileIds = ids;
     this.layersNeedUpdate = true;
   }
-  setSequenceElevation(layerId) {
-    this.elevationLayerIds[0] = layerId;
+  setElevationTileId(id) {
+    this.elevationTileId = id;
     this.layersNeedUpdate = true;
   }
-  removeLayer(layerId) {
-    const index = this.layers.findIndex(l => l.id === layerId);
+  removeTile(tileId) {
+    const index = this.colorTiles.findIndex(l => l.id === tileId);
     if (index > -1) {
-      this.layers[index].dispose();
-      this.layers.splice(index, 1);
-      const idSeq = this.colorLayerIds.indexOf(layerId);
+      this.colorTiles[index].dispose();
+      this.colorTiles.splice(index, 1);
+      const idSeq = this.colorTileIds.indexOf(tileId);
       if (idSeq > -1) {
-        this.colorLayerIds.splice(idSeq, 1);
+        this.colorTileIds.splice(idSeq, 1);
       } else {
-        this.elevationLayerIds = [];
+        this.elevationTileId = undefined;
       }
     }
   }
-  addLayer(rasterNode) {
-    if (rasterNode.layer.id in this.layers) {
-      console.warn('The "{layer.id}" layer was already present in the material, overwritting.');
+  addColorTile(rasterTile) {
+    if (rasterTile.layer.id in this.colorTiles) {
+      console.warn('Layer "{layer.id}" already present in material, overwriting.');
     }
-    this.layers.push(rasterNode);
+    this.colorTiles.push(rasterTile);
   }
-  getLayer(id) {
-    return this.layers.find(l => l.id === id);
+  setElevationTile(rasterTile) {
+    const old = this.elevationTile;
+    if (old !== undefined) {
+      old.dispose();
+    }
+    this.elevationTile = rasterTile;
   }
-  getLayers(ids) {
-    return this.layers.filter(l => ids.includes(l.id));
+  getColorTile(id) {
+    return this.colorTiles.find(l => l.id === id);
   }
-  getElevationLayer() {
-    return this.layers.find(l => l.id === this.elevationLayerIds[0]);
+  getElevationTile() {
+    return this.elevationTile;
   }
-  setElevationScale(scale) {
-    if (this.elevationLayerIds.length) {
-      this.getElevationLayer().scale = scale;
+  getTile(id) {
+    return this.elevationTile?.id === id ? this.elevationTile : this.colorTiles.find(l => l.id === id);
+  }
+  getTiles(ids) {
+    // NOTE: this could instead be a mapping with an undefined in place of
+    // unfound IDs. Need to identify a use case for it though as it would
+    // probably have a performance cost (albeit minor in the grand scheme of
+    // things).
+    const res = this.colorTiles.filter(l => ids.includes(l.id));
+    if (this.elevationTile !== undefined && ids.includes(this.elevationTile?.id)) {
+      res.push(this.elevationTile);
     }
+    return res;
   }
-}
-export default LayeredMaterial;
+}

package/lib/Renderer/OBB.d.ts

@@ -0,0 +1,65 @@
+export default OBB;
+/**
+ * Oriented bounding box
+ * @extends THREE.Object3D
+ */
+declare class OBB extends THREE.Object3D<THREE.Object3DEventMap> {
+    /**
+     * @param {THREE.Vector3}  min representing the lower (x, y, z) boundary of the box. Default is ( + Infinity, + Infinity, + Infinity ).
+     * @param {THREE.Vector3}  max representing the lower upper (x, y, z) boundary of the box. Default is ( - Infinity, - Infinity, - Infinity ).
+     */
+    constructor(min?: THREE.Vector3, max?: THREE.Vector3);
+    box3D: THREE.Box3;
+    natBox: THREE.Box3;
+    z: {
+        min: number;
+        max: number;
+        scale: number;
+    };
+    /**
+     * Creates a new instance of the object with same properties than original.
+     *
+     * @return     {OBB}  Copy of this object.
+     */
+    clone(): OBB;
+    /**
+     * Copy the property of OBB
+     *
+     * @param      {OBB}  cOBB OBB to copy
+     * @return     {OBB}  the copy
+     */
+    copy(cOBB: OBB): OBB;
+    /**
+     * Update z min, z max and z scale of oriented bounding box
+     *
+     * @param {Object}  [elevation={}]
+     * @param {number}  [elevation.min]             The minimum of oriented bounding box
+     * @param {number}  [elevation.max]             The maximum of oriented bounding box
+     * @param {number}  [elevation.scale]           The scale of oriented bounding box Z axis
+     * @param {number}  [elevation.geoidHeight]     The geoid height added to ellipsoid.
+     */
+    updateZ(elevation?: {
+        min?: number | undefined;
+        max?: number | undefined;
+        scale?: number | undefined;
+        geoidHeight?: number | undefined;
+    }): void;
+    /**
+     * Determines if the sphere is above the XY space of the box
+     *
+     * @param      {Sphere}   sphere  The sphere
+     * @return     {boolean}  True if sphere is above the XY space of the box, False otherwise.
+     */
+    isSphereAboveXYBox(sphere: Sphere): boolean;
+    /**
+     * Compute OBB from extent.
+     * The OBB resulted can be only in the system 'EPSG:3946'.
+     *
+     * @param      {Extent}        extent     The extent (with crs 'EPSG:4326') to compute oriented bounding box
+     * @param      {number}        minHeight  The minimum height of OBB
+     * @param      {number}        maxHeight  The maximum height of OBB
+     * @return     {OBB}           return this object
+     */
+    setFromExtent(extent: Extent, minHeight?: number, maxHeight?: number): OBB;
+}
+import * as THREE from 'three';

package/lib/Renderer/OrientedImageCamera.d.ts

@@ -0,0 +1,36 @@
+export default OrientedImageCamera;
+/**
+ * OrientedImageCamera is a ThreeJs camera adapted to photogrammetric description.
+ * So we can build a ThreeJs perspective camera from size and focal information.
+ */
+declare class OrientedImageCamera extends THREE.PerspectiveCamera {
+    /**
+     * @param {number|Vector2} size - image size in pixels (default: x=1024, y=x)
+     * @param {number|Vector2} focal - focal length in pixels (default: x=1024, y=x)
+     * @param {Vector2} center - principal point in pixels (default: size/2)
+     * @param {number} near - Camera frustum near plane (default: see THREE.PerspectiveCamera).
+     * @param {number} far - Camera frustum far plane (default: see THREE.PerspectiveCamera).
+     * @param {number} skew - shear transform parameter (default: 0)
+     * @param {number} aspect - aspect ratio of the camera (default: size.x/size.y).
+     */
+    constructor(size: number | Vector2, focal: number | Vector2, center: Vector2, near: number | undefined, far: number | undefined, skew: number, aspect: number);
+    size: any;
+    focal: any;
+    center: any;
+    skew: number;
+    textureMatrixWorldInverse: THREE.Matrix4;
+    distortion: Distortion;
+    maskPath: any;
+    mask: any;
+    copy(source: any, recursive: any): this;
+}
+import * as THREE from 'three';
+declare class Distortion {
+    constructor(size: any);
+    size: any;
+    pps: THREE.Vector2 | null;
+    polynom: THREE.Vector4 | null;
+    l1l2: THREE.Vector3 | null;
+    setFromMicmacCalibration(distortion: any, imageYDown?: boolean): void;
+    clone(): Distortion;
+}

package/lib/Renderer/OrientedImageMaterial.d.ts

@@ -0,0 +1,68 @@
+export default OrientedImageMaterial;
+/**
+ * OrientedImageMaterial is a custom shader material used to do projective texture mapping.<br/>
+ *
+ * This Material is designed to project many textures simultaneously.
+ * Each projected texture setting is stored as an {@link OrientedImageCamera}.<br/>
+ * <br/>
+ * All cameras settings, like distorsion, can be specified in a configuration file.
+ * See [CameraCalibrationParser]{@link module:CameraCalibrationParser.parse}
+ * used to parse a configuration file and create an array of camera.<br/>
+ * <br/>
+ * The current implementation supports the following distortion models : <br/>
+ *  - no distortion (polynom==vec3(0),l1l2==vec2(0))<br/>
+ *  - radial distortion (polynom!=vec3(0),l1l2==vec2(0)) (see <b>15.2.2 Radial Model</b> in [MicMac doc](https://github.com/micmacIGN/Documentation/blob/master/DocMicMac.pdf)) </br>
+ *  - equilinear fish eye distortion (polynom!=vec3(0),l1l2 != vec2(0)) (see <b>15.3.4 Fish eye models</b> in [MicMac doc](https://github.com/micmacIGN/Documentation/blob/master/DocMicMac.pdf)) </br>
+ * (Note: radial decentric parameters P1 are P2 not supported and assumed to be 0).<br/>
+ * <br/>
+ * To get a more comprehensive support of camera Micmac models, you can consider using [three-photogrammetric-camera]{@link https://github.com/mbredif/three-photogrammetric-camera} instead.
+ */
+declare class OrientedImageMaterial extends THREE.ShaderMaterial {
+    /**
+     * @param { OrientedImageCamera[]} cameras - Array of {@link OrientedImageCamera}. Each camera will project a texture.
+     * [CameraCalibrationParser]{@link module:CameraCalibrationParser.parse} can used to create this array of camera from a configuration file.
+     * @param {Object} [options={}] - Object with one or more properties defining the material's appearance.
+     * Any property of the material (including any property inherited from
+     * [THREE.Material]{@link https://threejs.org/docs/#api/en/materials/Material} and
+     * [THREE.ShaderMaterial]{@link https://threejs.org/docs/#api/en/materials/ShaderMaterial}) can be passed in here.
+     * @param {Number} [options.side=THREE.DoubleSide] - We override default
+     * [THREE.Material.side]{@link https://threejs.org/docs/#api/en/materials/Material.side} from FrontSide to DoubleSide.
+     * @param {Boolean} [options.transparent=true] - We override default
+     * [THREE.Material.transparent]{@link https://threejs.org/docs/#api/en/materials/Material.transparent} from false to true.
+     * @param {Number} [options.opacity=0.1] - We override default
+     * [THREE.Material.opacity]{@link https://threejs.org/docs/#api/en/materials/Material.opacity} from 1 to 0.1.
+     * @param {Number} [options.alphaBorder=20] - Part of the texture that is blended, when texture crosses each other.
+     * For example, 10 means a border as large as 1 / 10 of the size of the texture is used to blend colors.
+     * @param {Number} [options.debugAlphaBorder=0] - Set this option to 1 to see influence of alphaBorder option.
+     */
+    constructor(cameras: OrientedImageCamera[], options?: {
+        side?: number | undefined;
+        transparent?: boolean | undefined;
+        opacity?: number | undefined;
+        alphaBorder?: number | undefined;
+        debugAlphaBorder?: number | undefined;
+    });
+    alphaBorder: number;
+    cameras: OrientedImageCamera[];
+    group: THREE.Group<THREE.Object3DEventMap>;
+    fragmentShader: any;
+    /**
+     * Set new textures and new position/orientation of the camera set.
+     * @param {THREE.Texture} textures - Array of [THREE.Texture]{@link https://threejs.org/docs/#api/en/textures/Texture}.
+     * @param {Object} feature - New position / orientation of the set of cameras
+     * @param {THREE.Vector3} feature.position - New position.
+     * @param {THREE.Quaternion} feature.quaternion - New orientation.
+     * @param {Array} camerasNames - camera names of panoramic feature
+     */
+    setTextures(textures: THREE.Texture, feature: {
+        position: THREE.Vector3;
+        quaternion: THREE.Quaternion;
+    }, camerasNames: any[]): void;
+    /**
+     * Udate the uniforms using the current value of camera.matrixWorld.
+     * Need to be called when the camera of the scene has changed.
+     * @param {THREE.Camera} viewCamera - Camera of the scene.
+     */
+    updateUniforms(viewCamera: THREE.Camera): void;
+}
+import * as THREE from 'three';