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

package/lib/Renderer/RasterTile.js

@@ -0,0 +1,243 @@
+import * as THREE from 'three';
+import { ELEVATION_MODES } from "./LayeredMaterial.js";
+import { checkNodeElevationTextureValidity, insertSignificantValuesFromParent, computeMinMaxElevation } from "../Parser/XbilParser.js";
+export const EMPTY_TEXTURE_ZOOM = -1;
+const pitch = new THREE.Vector4();
+function getIndiceWithPitch(i, pitch, w) {
+  // Return corresponding indice in parent tile using pitch
+  // normalized
+  const currentY = Math.floor(i / w) / w; // normalized
+  const newX = pitch.x + i % w / w * pitch.z;
+  const newY = pitch.y + currentY * pitch.w;
+  const newIndice = Math.floor(newY * w) * w + Math.floor(newX * w);
+  return newIndice;
+}
+
+/**
+ * A `RasterTile` is part of raster {@link Layer} data.
+ * This part is a spatial subdivision of the extent of a layer.
+ * In the `RasterTile`, The data are converted on three.js textures.
+ * This `RasterTile` textures are assigned to a `LayeredMaterial`.
+ * This material is applied on terrain (TileMesh).
+ * The color textures are mapped to color the terrain.
+ * The elevation textures are used to displace vertex terrain.
+ *
+ * @class RasterTile
+ */
+class RasterTile extends THREE.EventDispatcher {
+  constructor(material, layer) {
+    super();
+    this.layer = layer;
+    this.crs = layer.parent.tileMatrixSets.indexOf(layer.crs);
+    if (this.crs == -1) {
+      console.error('Unknown crs:', layer.crs);
+    }
+    this.textures = [];
+    this.offsetScales = [];
+    this.level = EMPTY_TEXTURE_ZOOM;
+    this.material = material;
+    this._handlerCBEvent = () => {
+      this.material.layersNeedUpdate = true;
+    };
+    layer.addEventListener('visible-property-changed', this._handlerCBEvent);
+    layer.addEventListener('opacity-property-changed', this._handlerCBEvent);
+  }
+  get id() {
+    return this.layer.id;
+  }
+  get opacity() {
+    return this.layer.opacity;
+  }
+  get visible() {
+    return this.layer.visible;
+  }
+  initFromParent(parent, extents) {
+    if (parent && parent.level > this.level) {
+      let index = 0;
+      const sortedParentTextures = this.sortBestParentTextures(parent.textures);
+      for (const childExtent of extents) {
+        const matchingParentTexture = sortedParentTextures.find(parentTexture => parentTexture && childExtent.isInside(parentTexture.extent));
+        if (matchingParentTexture) {
+          this.setTexture(index++, matchingParentTexture, childExtent.offsetToParent(matchingParentTexture.extent));
+        }
+      }
+    }
+  }
+  sortBestParentTextures(textures) {
+    const sortByValidity = (a, b) => {
+      if (a.isTexture === b.isTexture) {
+        return 0;
+      } else {
+        return a.isTexture ? -1 : 1;
+      }
+    };
+    const sortByZoom = (a, b) => b.extent.zoom - a.extent.zoom;
+    return textures.toSorted((a, b) => sortByValidity(a, b) || sortByZoom(a, b));
+  }
+  disposeRedrawnTextures(newTextures) {
+    const validTextureIndexes = newTextures.map((texture, index) => this.shouldWriteTextureAtIndex(index, texture) ? index : -1).filter(index => index !== -1);
+    if (validTextureIndexes.length === newTextures.length) {
+      // Dispose the whole tile when all textures are overwritten
+      this.dispose(false);
+    } else {
+      this.disposeAtIndexes(validTextureIndexes);
+    }
+  }
+  dispose() {
+    let removeEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (removeEvent) {
+      this.layer.removeEventListener('visible-property-changed', this._handlerCBEvent);
+      this.layer.removeEventListener('opacity-property-changed', this._handlerCBEvent);
+      // dispose all events
+      this._listeners = {};
+    }
+    // TODO: WARNING  verify if textures to dispose aren't attached with ancestor
+    // Dispose all textures
+    this.disposeAtIndexes(this.textures.keys());
+    this.textures = [];
+    this.offsetScales = [];
+    this.level = EMPTY_TEXTURE_ZOOM;
+  }
+  disposeAtIndexes(indexes) {
+    for (const index of indexes) {
+      const texture = this.textures[index];
+      if (texture && texture.isTexture) {
+        texture.dispose();
+      }
+    }
+    this.material.layersNeedUpdate = true;
+  }
+  setTexture(index, texture, offsetScale) {
+    if (this.shouldWriteTextureAtIndex(index, texture)) {
+      this.level = texture && texture.extent ? texture.extent.zoom : this.level;
+      this.textures[index] = texture || null;
+      this.offsetScales[index] = offsetScale;
+      this.material.layersNeedUpdate = true;
+    }
+  }
+  setTextures(textures, pitchs) {
+    this.disposeRedrawnTextures(textures);
+    for (let i = 0, il = textures.length; i < il; ++i) {
+      this.setTexture(i, textures[i], pitchs[i]);
+    }
+  }
+  shouldWriteTextureAtIndex(index, texture) {
+    // Do not apply noData texture if current texture is valid
+    return !this.textures[index] || texture && texture.isTexture;
+  }
+}
+export default RasterTile;
+export class RasterColorTile extends RasterTile {
+  get effect_type() {
+    return this.layer.effect_type;
+  }
+  get effect_parameter() {
+    return this.layer.effect_parameter;
+  }
+  get transparent() {
+    return this.layer.transparent;
+  }
+}
+export class RasterElevationTile extends RasterTile {
+  constructor(material, layer) {
+    super(material, layer);
+    const defaultEle = {
+      bias: 0,
+      mode: ELEVATION_MODES.DATA,
+      zmin: -Infinity,
+      zmax: Infinity
+    };
+    this.scaleFactor = 1.0;
+
+    // Define elevation properties
+    if (layer.useRgbaTextureElevation) {
+      defaultEle.mode = ELEVATION_MODES.RGBA;
+      defaultEle.zmax = 5000;
+      throw new Error('Restore this feature');
+    } else if (layer.useColorTextureElevation) {
+      this.scaleFactor = layer.colorTextureElevationMaxZ - layer.colorTextureElevationMinZ;
+      defaultEle.mode = ELEVATION_MODES.COLOR;
+      defaultEle.bias = layer.colorTextureElevationMinZ;
+      this.min = this.layer.colorTextureElevationMinZ;
+      this.max = this.layer.colorTextureElevationMaxZ;
+    } else {
+      this.min = 0;
+      this.max = 0;
+    }
+    this.bias = layer.bias ?? defaultEle.bias;
+    this.mode = layer.mode ?? defaultEle.mode;
+    this.zmin = layer.zmin ?? defaultEle.zmin;
+    this.zmax = layer.zmax ?? defaultEle.zmax;
+    layer.addEventListener('scale-property-changed', this._handlerCBEvent);
+  }
+  get scale() {
+    return this.layer.scale * this.scaleFactor;
+  }
+  dispose(removeEvent) {
+    super.dispose(removeEvent);
+    if (removeEvent) {
+      this.layer.removeEventListener('scale-property-changed', this._handlerCBEvent);
+    }
+  }
+  initFromParent(parent, extents) {
+    const currentLevel = this.level;
+    super.initFromParent(parent, extents);
+    this.updateMinMaxElevation();
+    if (currentLevel !== this.level) {
+      this.dispatchEvent({
+        type: 'rasterElevationLevelChanged',
+        node: this
+      });
+    }
+  }
+  setTextures(textures, offsetScales) {
+    const anyValidTexture = textures.find(texture => texture != null);
+    if (!anyValidTexture) {
+      return;
+    }
+    const currentLevel = this.level;
+    this.replaceNoDataValueFromTexture(anyValidTexture);
+    super.setTextures(textures, offsetScales);
+    this.updateMinMaxElevation();
+    if (currentLevel !== this.level) {
+      this.dispatchEvent({
+        type: 'rasterElevationLevelChanged',
+        node: this
+      });
+    }
+  }
+  updateMinMaxElevation() {
+    const firstValidIndex = this.textures.findIndex(texture => texture.isTexture);
+    if (firstValidIndex !== -1 && !this.layer.useColorTextureElevation) {
+      const {
+        min,
+        max
+      } = computeMinMaxElevation(this.textures[firstValidIndex], this.offsetScales[firstValidIndex], {
+        noDataValue: this.layer.noDataValue,
+        zmin: this.layer.zmin,
+        zmax: this.layer.zmax
+      });
+      if (this.min != min || this.max != max) {
+        this.min = isNaN(min) ? this.min : min;
+        this.max = isNaN(max) ? this.max : max;
+      }
+    }
+  }
+  replaceNoDataValueFromTexture(texture) {
+    const nodatavalue = this.layer.noDataValue;
+    if (nodatavalue == undefined) {
+      return;
+    }
+    // replace no data value with parent texture value or 0 (if no significant value found).
+    const parentTexture = this.textures.find(texture => texture != null);
+    const parentDataElevation = parentTexture && parentTexture.image && parentTexture.image.data;
+    const dataElevation = texture.image && texture.image.data;
+    if (dataElevation && !checkNodeElevationTextureValidity(dataElevation, nodatavalue)) {
+      insertSignificantValuesFromParent(dataElevation, parentDataElevation && dataParent(texture, parentTexture, parentDataElevation, pitch), nodatavalue);
+    }
+  }
+}
+function dataParent(texture, parentTexture, parentDataElevation, pitch) {
+  texture.extent.offsetToParent(parentTexture.extent, pitch);
+  return i => parentDataElevation[getIndiceWithPitch(i, pitch, 256)];
+}

package/lib/Renderer/RenderMode.js

@@ -0,0 +1,31 @@
+const MODES = {
+  FINAL: 0,
+  // final color
+  DEPTH: 1,
+  // depth buffer
+  ID: 2 // id object
+};
+function push(object3d, mode) {
+  const _mode = object3d.mode ?? MODES.FINAL;
+  if (_mode == mode) {
+    return () => {};
+  }
+  const setMode = m => node => {
+    const material = node.material;
+    if (material) {
+      material.mode = m;
+    }
+  };
+  object3d.traverse(setMode(mode));
+  return () => {
+    object3d.traverse(setMode(_mode));
+  };
+}
+
+// Rendering mode
+// According to the rendering mode, the material's object switches
+// the mode property of the materials
+export default {
+  MODES,
+  push
+};

package/lib/Renderer/Shader/ShaderChunk.js

@@ -0,0 +1,160 @@
+import * as THREE from 'three';
+/* babel-plugin-inline-import './Chunk/color_layers_pars_fragment.glsl' */
+const color_layers_pars_fragment = "struct Layer {\n    int textureOffset;\n    int crs;\n    int effect_type;\n    float effect_parameter;\n    float opacity;\n    bool transparent;\n};\n\n#include <itowns/custom_header_colorLayer>\n\nuniform sampler2D   colorTextures[NUM_FS_TEXTURES];\nuniform vec4        colorOffsetScales[NUM_FS_TEXTURES];\nuniform Layer       colorLayers[NUM_FS_TEXTURES];\nuniform int         colorTextureCount;\n\nvec3 uvs[NUM_CRS];\n\nfloat getBorderDistance(vec2 uv) {\n    vec2 p2 = min(uv, 1. -uv);\n    return min(p2.x, p2.y);\n}\n\nfloat tolerance = 0.99;\n\nvec4 applyWhiteToInvisibleEffect(vec4 color) {\n    float a = dot(color.rgb, vec3(0.333333333));\n    if (a >= tolerance) {\n        color.a = 0.0;\n    }\n    return color;\n}\n\nvec4 applyLightColorToInvisibleEffect(vec4 color, float intensity) {\n    float a = max(0.05,1. - length(color.xyz - 1.));\n    color.a *= 1.0 - pow(abs(a), intensity);\n    color.rgb *= color.rgb * color.rgb;\n    return color;\n}\n\n#if defined(DEBUG)\nuniform bool showOutline;\nuniform vec3 outlineColors[NUM_CRS];\nuniform float outlineWidth;\n\nvec4 getOutlineColor(vec3 outlineColor, vec2 uv) {\n    float alpha = 1. - clamp(getBorderDistance(uv) / outlineWidth, 0., 1.);\n    return vec4(outlineColor, alpha);\n}\n#endif\n\nuniform float minBorderDistance;\nvec4 getLayerColor(int textureOffset, sampler2D tex, vec4 offsetScale, Layer layer) {\n    if ( textureOffset >= colorTextureCount ) return vec4(0);\n\n    vec3 uv;\n    // #pragma unroll_loop\n    for ( int i = 0; i < NUM_CRS; i ++ ) {\n        if ( i == layer.crs ) uv = uvs[ i ];\n    }\n\n    float borderDistance = getBorderDistance(uv.xy);\n    if (textureOffset != layer.textureOffset + int(uv.z) || borderDistance < minBorderDistance ) return vec4(0);\n    vec4 color = texture2D(tex, pitUV(uv.xy, offsetScale));\n    if (layer.effect_type == 3) {\n        #include <itowns/custom_body_colorLayer>\n    } else {\n        if (layer.transparent && color.a != 0.0) {\n            color.rgb /= color.a;\n        }\n\n        if (layer.effect_type == 1) {\n            color = applyLightColorToInvisibleEffect(color, layer.effect_parameter);\n        } else if (layer.effect_type == 2) {\n            color = applyWhiteToInvisibleEffect(color);\n        }\n    }\n    color.a *= layer.opacity;\n    return color;\n}\n";
+/* babel-plugin-inline-import './Chunk/elevation_pars_vertex.glsl' */
+const elevation_pars_vertex = "#if NUM_VS_TEXTURES > 0\n    struct Layer {\n        float scale;\n        float bias;\n        int mode;\n        float zmin;\n        float zmax;\n    };\n\n    uniform Layer       elevationLayers[NUM_VS_TEXTURES];\n    uniform sampler2D   elevationTextures[NUM_VS_TEXTURES];\n    uniform vec4        elevationOffsetScales[NUM_VS_TEXTURES];\n    uniform int         elevationTextureCount;\n    uniform float       geoidHeight;\n\n    highp float decode32(highp vec4 rgba) {\n        highp float Sign = 1.0 - step(128.0,rgba[0])*2.0;\n        highp float Exponent = 2.0 * mod(rgba[0],128.0) + step(128.0,rgba[1]) - 127.0;\n        highp float Mantissa = mod(rgba[1],128.0)*65536.0 + rgba[2]*256.0 +rgba[3] + float(0x800000);\n        highp float Result =  Sign * exp2(Exponent) * (Mantissa * exp2(-23.0 ));\n        return Result;\n    }\n\n    float getElevationMode(vec2 uv, sampler2D tex, int mode) {\n        if (mode == ELEVATION_RGBA)\n            return decode32(texture2D( tex, uv ).abgr * 255.0);\n        if (mode == ELEVATION_DATA || mode == ELEVATION_COLOR)\n            return texture2D( tex, uv ).r;\n        return 0.;\n    }\n\n    float getElevation(vec2 uv, sampler2D tex, vec4 offsetScale, Layer layer) {\n        // Elevation textures are inverted along the y-axis\n        uv = vec2(uv.x, 1.0 - uv.y);\n        uv = uv * offsetScale.zw + offsetScale.xy;\n        float d = clamp(getElevationMode(uv, tex, layer.mode), layer.zmin, layer.zmax);\n        return d * layer.scale + layer.bias;\n    }\n#endif\n";
+/* babel-plugin-inline-import './Chunk/elevation_vertex.glsl' */
+const elevation_vertex = "#if NUM_VS_TEXTURES > 0\n    if(elevationTextureCount > 0) {\n        float elevation = getElevation(uv, elevationTextures[0], elevationOffsetScales[0], elevationLayers[0]);\n        transformed += elevation * normal;\n    }\n#endif\n";
+/* babel-plugin-inline-import './Chunk/geoid_vertex.glsl' */
+const geoid_vertex = "transformed += geoidHeight * normal;\n";
+/* babel-plugin-inline-import './Chunk/fog_fragment.glsl' */
+const fog_fragment = "#if defined(USE_FOG)\n    float fogFactor = 1. - min( exp(-vFogDepth / fogDistance), 1.);\n    gl_FragColor.rgb = mix(gl_FragColor.rgb, fogColor, fogFactor);\n#endif\n";
+/* babel-plugin-inline-import './Chunk/fog_pars_fragment.glsl' */
+const fog_pars_fragment = "#if defined(USE_FOG)\nuniform vec3  fogColor;\nuniform float fogDistance;\nvarying float vFogDepth;\n#endif\n";
+/* babel-plugin-inline-import './Chunk/lighting_fragment.glsl' */
+const lighting_fragment = "if (lightingEnabled) {\n    float light = min(2. * dot(vNormal, lightPosition), 1.);\n    gl_FragColor.rgb *= light;\n}\n";
+/* babel-plugin-inline-import './Chunk/lighting_pars_fragment.glsl' */
+const lighting_pars_fragment = "uniform bool lightingEnabled;\nuniform vec3 lightPosition;\nvarying vec3 vNormal;\n";
+/* babel-plugin-inline-import './Chunk/mode_pars_fragment.glsl' */
+const mode_pars_fragment = "#if MODE == MODE_ID || MODE == MODE_DEPTH\n#include <packing>\n#endif\n\n#if MODE == MODE_ID\nuniform int objectId;\n#endif\n";
+/* babel-plugin-inline-import './Chunk/mode_depth_fragment.glsl' */
+const mode_depth_fragment = "#if defined(USE_LOGDEPTHBUF)\ngl_FragColor = packDepthToRGBA(gl_FragDepthEXT);\n#else\nfloat fragCoordZ = 0.5 * vHighPrecisionZW[0] / vHighPrecisionZW[1] + 0.5;\ngl_FragColor = packDepthToRGBA(fragCoordZ);\n#endif\n";
+/* babel-plugin-inline-import './Chunk/mode_id_fragment.glsl' */
+const mode_id_fragment = "// 16777216.0 == 256.0 * 256.0 * 256.0\ngl_FragColor = packDepthToRGBA(float(objectId) / 16777216.0);\n";
+/* babel-plugin-inline-import './Chunk/overlay_fragment.glsl' */
+const overlay_fragment = "gl_FragColor.rgb = mix(gl_FragColor.rgb, overlayColor, overlayAlpha);\n";
+/* babel-plugin-inline-import './Chunk/overlay_pars_fragment.glsl' */
+const overlay_pars_fragment = "uniform vec3  overlayColor;\nuniform float overlayAlpha;\n";
+/* babel-plugin-inline-import './Chunk/pitUV.glsl' */
+const pitUV = "vec2 pitUV(vec2 uv, vec4 pit)\n{\n    return uv * pit.zw + vec2(pit.x, 1.0 - pit.w - pit.y);\n}\n\n";
+/* babel-plugin-inline-import './Chunk/precision_qualifier.glsl' */
+const precision_qualifier = "precision highp float;\nprecision highp int;\n";
+/* babel-plugin-inline-import './Chunk/projective_texturing_vertex.glsl' */
+const projective_texturing_vertex = "for(int i = 0; i < ORIENTED_IMAGES_COUNT; ++i)\n    projectiveTextureCoords[i] = projectiveTextureMatrix[i] * mvPosition;\n";
+/* babel-plugin-inline-import './Chunk/projective_texturing_pars_vertex.glsl' */
+const projective_texturing_pars_vertex = "uniform mat4 projectiveTextureMatrix[ORIENTED_IMAGES_COUNT];\nvarying vec4 projectiveTextureCoords[ORIENTED_IMAGES_COUNT];\n";
+/* babel-plugin-inline-import './Chunk/projective_texturing_pars_fragment.glsl' */
+const projective_texturing_pars_fragment = "uniform sampler2D projectiveTexture[ORIENTED_IMAGES_COUNT];\nuniform sampler2D mask[ORIENTED_IMAGES_COUNT];\nvarying vec4      projectiveTextureCoords[ORIENTED_IMAGES_COUNT];\nuniform float     projectiveTextureAlphaBorder;\nuniform float     opacity;\nuniform bool      boostLight;\n\nstruct Distortion {\n    vec2 size;\n#if USE_DISTORTION\n    vec2 pps;\n    vec4 polynom;\n    vec3 l1l2;\n#endif\n};\n\nuniform Distortion projectiveTextureDistortion[ORIENTED_IMAGES_COUNT];\n\nfloat getAlphaBorder(vec2 p)\n{\n    vec2 d = clamp(projectiveTextureAlphaBorder * min(p, 1. - p), 0., 1.);\n    return min(d.x, d.y);\n}\n\n#if USE_DISTORTION\nvoid distort(inout vec2 p, vec4 polynom, vec2 pps)\n{\n    vec2 v = p - pps;\n    float v2 = dot(v, v);\n    if (v2 > polynom.w) {\n        p = vec2(-1.);\n    }\n    else {\n        p += (v2 * (polynom.x + v2 * (polynom.y + v2 * polynom.z) ) ) * v;\n    }\n}\n\nvoid distort(inout vec2 p, vec4 polynom, vec3 l1l2, vec2 pps)\n{\n    if ((l1l2.x == 0.) && (l1l2.y == 0.)) {\n        distort(p, polynom, pps);\n    } else {\n        vec2 AB = (p - pps) / l1l2.z;\n        float R = length(AB);\n        float lambda = atan(R) / R;\n        vec2 ab = lambda * AB;\n        float rho2 = dot(ab, ab);\n        float r357 = 1. + rho2* (polynom.x + rho2* (polynom.y + rho2 * polynom.z));\n        p = pps + l1l2.z * (r357 * ab + vec2(dot(l1l2.xy, ab), l1l2.y * ab.x));\n    }\n}\n#endif\n\nvec4 mixBaseColor(vec4 aColor, vec4 baseColor) {\n    #ifdef USE_BASE_MATERIAL\n        baseColor.rgb = aColor.a == 1.0 ? aColor.rgb : mix(baseColor, aColor, aColor.a).rgb;\n        baseColor.a = min(1.0, aColor.a + baseColor.a);\n    #else\n        baseColor.rgb += aColor.rgb * aColor.a;\n        baseColor.a += aColor.a;\n    #endif\n    return baseColor;\n}\n\nvec4 projectiveTextureColor(vec4 coords, Distortion distortion, sampler2D tex, sampler2D mask, vec4 baseColor) {\n    vec3 p = coords.xyz / coords.w;\n    if(p.z * p.z < 1.) {\n#if USE_DISTORTION\n        p.xy *= distortion.size;\n        distort(p.xy, distortion.polynom, distortion.l1l2, distortion.pps);\n        p.xy /= distortion.size;\n#endif\n\n        float d = getAlphaBorder(p.xy) * texture2D(mask, p.xy).r;\n\n        if(d > 0.) {\n\n#if DEBUG_ALPHA_BORDER\n        vec3 r = texture2D(tex, p.xy).rgb;\n        return mixBaseColor(vec4( r.r * d, r.g, r.b, 1.0), baseColor);\n#else\n        vec4 color = texture2D(tex, p.xy);\n        color.a *= d;\n        if (boostLight) {\n            return mixBaseColor(vec4(sqrt(color.rgb), color.a), baseColor);\n        } else {\n            return mixBaseColor(color, baseColor);\n        }\n#endif\n\n        }\n    }\n    return mixBaseColor(vec4(0.), baseColor);\n}\n";
+const custom_header_colorLayer = '// no custom header';
+const custom_body_colorLayer = '// no custom body';
+const itownsShaderChunk = {
+  color_layers_pars_fragment,
+  custom_body_colorLayer,
+  custom_header_colorLayer,
+  elevation_pars_vertex,
+  elevation_vertex,
+  geoid_vertex,
+  fog_fragment,
+  fog_pars_fragment,
+  lighting_fragment,
+  lighting_pars_fragment,
+  mode_depth_fragment,
+  mode_id_fragment,
+  mode_pars_fragment,
+  overlay_fragment,
+  overlay_pars_fragment,
+  pitUV,
+  precision_qualifier,
+  projective_texturing_vertex,
+  projective_texturing_pars_vertex,
+  projective_texturing_pars_fragment
+};
+
+/**
+ * The ShaderChunkManager manages the itowns chunks shader.
+ * It adds chunks to THREE.ShaderChunk to compile shaders
+ *
+ * In itowns, if you want access to `ShaderChunkManager` instance :
+ *
+ * ```js
+ * import ShaderChunk from 'Renderer/Shader/ShaderChunk';
+ * ```
+ * or
+ * ```js
+ * const ShaderChunk = itowns.ShaderChunk';
+ * ```
+ *
+ * @property {Object} target - The target to install the chunks into.
+ * @property {string} [path] - A path to add before a chunk name as a prefix.
+ *
+ */
+class ShaderChunkManager {
+  /**
+   * Constructs a new instance ShaderChunkManager.
+   *
+   * @constructor
+   *
+   * @param {Object} target - The target to install the chunks into.
+   * @param {string} [path] - A path to add before a chunk name as a prefix.
+   *
+   */
+  constructor(target, path) {
+    this.path = path;
+    this.target = target;
+    this.install();
+  }
+  /**
+   * Set the header ColorLayer shader.
+   *
+   * @param  {string}  header  The glsl header
+   */
+  customHeaderColorLayer(header) {
+    itownsShaderChunk.custom_header_colorLayer = header;
+    this.target[`${this.path}custom_header_colorLayer`] = header;
+  }
+
+  /**
+   * Set the body ColorLayer shader.
+   * You could define you color terrain shader, with a header and a body.
+   * the header defines yours fonctions and the body defines the process on ColorLayer.
+   * @example <caption>Custom shader chunk</caption>
+   *  itowns.ShaderChunk.customHeaderColorLayer(`
+   *  // define yours methods
+   *  vec4 myColor(vec4 color, float a) {
+   *      return color * a;
+   *  }
+   * `);
+   * itowns.ShaderChunk.customBodyColorLayer(`
+   *  // the body set final color layer.
+   *  // layer.amount_effect is variable, it could be change in Layer instance.
+   *  color = myColor(color, layer.amount_effect)
+   * `);
+   *
+   *  var colorLayer = new itowns.ColorLayer('OPENSM', {
+   *    source,
+   *    type_effect: itowns.colorLayerEffects.customEffect,
+   *    amount_effect: 0.5,
+   *  });
+   *
+   * @param  {string}  body  The glsl body
+   */
+  customBodyColorLayer(body) {
+    itownsShaderChunk.custom_body_colorLayer = body;
+    this.target[`${this.path}custom_body_colorLayer`] = body;
+  }
+  /**
+   * Install chunks in a target, for example THREE.ShaderChunk, with adding an
+   * optional path.
+   *
+   * @param {Object} target - The target to install the chunks into.
+   * @param {Object} chunks - The chunks to install. The key of each chunk will be
+   * the name of installation of the chunk in the target (plus an optional path).
+   * @param {string} [path] - A path to add before a chunk name as a prefix.
+   *
+   * @return {Object} The target with installed chunks.
+   */
+  install() {
+    let target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.target;
+    let chunks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : itownsShaderChunk;
+    let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.path;
+    Object.keys(chunks).forEach(key => {
+      Object.defineProperty(this, key, {
+        get: () => chunks[key]
+      });
+      target[path + key] = chunks[key];
+    });
+    return target;
+  }
+}
+const ShaderChunk = new ShaderChunkManager(THREE.ShaderChunk, 'itowns/');
+export default ShaderChunk;

package/lib/Renderer/Shader/ShaderUtils.js

@@ -0,0 +1,47 @@
+const pattern_gl_Position = 'gl_Position.*(?![^]*gl_Position)';
+const pattern_Main = '[^\\w]*main[^\\w]*(void)?[^\\w]*{';
+const rePosition = new RegExp(pattern_gl_Position);
+const reMain = new RegExp(pattern_Main);
+export default {
+  patchMaterialForLogDepthSupport(material) {
+    // Check if the shader does not already use the log depth buffer
+    if (material.vertexShader.includes('USE_LOGDEPTHBUF') || material.vertexShader.includes('logdepthbuf_pars_vertex')) {
+      return;
+    }
+
+    // Add vertex shader log depth buffer header
+    material.vertexShader = `#include <logdepthbuf_pars_vertex>\n#define EPSILON 1e-6\n${material.vertexShader}`;
+    // Add log depth buffer code snippet after last gl_Position modification
+    let re = rePosition.exec(material.vertexShader);
+    let idx = re[0].length + re.index;
+    material.vertexShader = `${material.vertexShader.slice(0, idx)}\n#include <logdepthbuf_vertex>\n${material.vertexShader.slice(idx)}`;
+
+    // Add fragment shader log depth buffer header
+    material.fragmentShader = `#include <itowns/precision_qualifier\n${material.fragmentShader}`;
+    material.fragmentShader = `#include <logdepthbuf_pars_fragment>\n${material.fragmentShader}`;
+    // Add log depth buffer code snippet at the first line of the main function
+    re = reMain.exec(material.fragmentShader);
+    idx = re[0].length + re.index;
+    material.fragmentShader = `${material.fragmentShader.slice(0, idx)}\n#include <logdepthbuf_fragment>\n${material.fragmentShader.slice(idx)}`;
+    material.defines = {
+      USE_LOGDEPTHBUF: 1,
+      USE_LOGDEPTHBUF_EXT: 1
+    };
+  },
+  // adapted from unrollLoops in WebGLProgram
+  unrollLoops(string, defines) {
+    // look for a for loop with an unroll_loop pragma
+    // The detection of the scope of the for loop is hacky as it does not support nested scopes
+
+    function replace(match, start, end, snippet) {
+      let unroll = '';
+      start = start in defines ? defines[start] : parseInt(start, 10);
+      end = end in defines ? defines[end] : parseInt(end, 10);
+      for (let i = start; i < end; i++) {
+        unroll += snippet.replace(/\bi\b/g, ` ${i} `);
+      }
+      return unroll;
+    }
+    return string.replace(/#pragma unroll_loop\s+for\s*\(\s*int\s+i\s*=\s*([\w\d]+);\s*i\s+<\s+([\w\d]+);\s*i\s*\+\+\s*\)\s*\{\n([^}]*)\}/g, replace);
+  }
+};

package/lib/Renderer/SphereHelper.js

@@ -0,0 +1,17 @@
+import * as THREE from 'three';
+function SphereHelper(radius) {
+  THREE.Mesh.call(this);
+  this.geometry = new THREE.SphereGeometry(radius, 8, 8);
+  const color = new THREE.Color(Math.random(), Math.random(), Math.random());
+  this.material = new THREE.MeshBasicMaterial({
+    color: color.getHex(),
+    wireframe: true
+  });
+}
+SphereHelper.prototype = Object.create(THREE.Mesh.prototype);
+SphereHelper.prototype.constructor = SphereHelper;
+SphereHelper.prototype.update = function (radius) {
+  this.geometry.dispose();
+  this.geometry = new THREE.SphereGeometry(radius, 8, 8);
+};
+export default SphereHelper;

package/lib/Renderer/WebXR.js

@@ -0,0 +1,51 @@
+import * as THREE from 'three';
+async function shutdownXR(session) {
+  if (session) {
+    await session.end();
+  }
+}
+const initializeWebXR = (view, options) => {
+  const scale = options.scale || 1.0;
+  const xr = view.mainLoop.gfxEngine.renderer.xr;
+  xr.addEventListener('sessionstart', () => {
+    const camera = view.camera.camera3D;
+    const exitXRSession = event => {
+      if (event.key === 'Escape') {
+        document.removeEventListener('keydown', exitXRSession);
+        xr.enabled = false;
+        view.camera.camera3D = camera;
+        view.scene.scale.multiplyScalar(1 / scale);
+        view.scene.updateMatrixWorld();
+        shutdownXR(xr.getSession());
+        view.notifyChange(view.camera.camera3D, true);
+      }
+    };
+    view.scene.scale.multiplyScalar(scale);
+    view.scene.updateMatrixWorld();
+    xr.enabled = true;
+    xr.getReferenceSpace('local');
+    const position = view.camera.position();
+    const geodesicNormal = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), position.geodesicNormal).invert();
+    const quat = new THREE.Quaternion(-1, 0, 0, 1).normalize().multiply(geodesicNormal);
+    const trans = camera.position.clone().multiplyScalar(-scale).applyQuaternion(quat);
+    const transform = new XRRigidTransform(trans, quat);
+    const baseReferenceSpace = xr.getReferenceSpace();
+    const teleportSpaceOffset = baseReferenceSpace.getOffsetReferenceSpace(transform);
+    xr.setReferenceSpace(teleportSpaceOffset);
+    view.camera.camera3D = xr.getCamera();
+    view.camera.resize(view.camera.width, view.camera.height);
+    document.addEventListener('keydown', exitXRSession, false);
+
+    // TODO Fix asynchronization between xr and MainLoop render loops.
+    // (see MainLoop#scheduleViewUpdate).
+    xr.setAnimationLoop(timestamp => {
+      if (xr.isPresenting && view.camera.camera3D.cameras[0]) {
+        view.camera.camera3D.updateMatrix();
+        view.camera.camera3D.updateMatrixWorld(true);
+        view.notifyChange(view.camera.camera3D, true);
+      }
+      view.mainLoop.step(view, timestamp);
+    });
+  });
+};
+export default initializeWebXR;