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

package/lib/Core/Prefab/Globe/Atmosphere.js

@@ -0,0 +1,293 @@
+import * as THREE from 'three';
+import GeometryLayer from "../../../Layer/GeometryLayer.js";
+import { Coordinates, ellipsoidSizes, CoordStars } from '@itowns/geographic';
+import Sky from "./SkyShader.js";
+/* babel-plugin-inline-import './Shaders/skyFS.glsl' */
+const skyFS = "uniform vec3 v3LightPos;\nuniform float g;\nuniform float g2;\n\nvarying vec3 v3Direction;\nvarying vec3 c0;\nvarying vec3 c1;\n\n// Calculates the Mie phase function\nfloat getMiePhase(float fCos, float fCos2, float g, float g2) {\n    return 1.5 * ((1.0 - g2) / (2.0 + g2)) * (1.0 + fCos2) / pow(1.0 + g2 - 2.0 * g * fCos, 1.5);\n}\n\n// Calculates the Rayleigh phase function\nfloat getRayleighPhase(float fCos2) {\n    return 0.75 + 0.75 * fCos2;\n}\n\nvoid main (void) {\n    float fCos = dot(v3LightPos, v3Direction) / length(v3Direction);\n    float fCos2 = fCos * fCos;\n\n    vec3 color = getRayleighPhase(fCos2) * c0 + getMiePhase(fCos, fCos2, g, g2) * c1;\n\n    gl_FragColor = vec4(color, 1.0);\n    gl_FragColor.a = gl_FragColor.b;\n}";
+/* babel-plugin-inline-import './Shaders/skyVS.glsl' */
+const skyVS = "uniform vec3 v3LightPosition;   // The direction vector to the light source\nuniform vec3 v3InvWavelength;   // 1 / pow(wavelength, 4) for the red, green, and blue channels\nuniform float fCameraHeight;    // The camera's current height\nuniform float fCameraHeight2;   // fCameraHeight^2\nuniform float fOuterRadius;     // The outer (atmosphere) radius\nuniform float fOuterRadius2;    // fOuterRadius^2\nuniform float fInnerRadius;     // The inner (planetary) radius\nuniform float fInnerRadius2;    // fInnerRadius^2\nuniform float fKrESun;          // Kr * ESun\nuniform float fKmESun;          // Km * ESun\nuniform float fKr4PI;           // Kr * 4 * PI\nuniform float fKm4PI;           // Km * 4 * PI\nuniform float fScale;           // 1 / (fOuterRadius - fInnerRadius)\nuniform float fScaleDepth;      // The scale depth (i.e. the altitude at which the atmosphere's average density is found)\nuniform float fScaleOverScaleDepth; // fScale / fScaleDepth\n\nconst int nSamples = 3;\nconst float fSamples = 3.0;\n\nvarying vec3 v3Direction;\nvarying vec3 c0;\nvarying vec3 c1;\n\nfloat scale(float fCos) {\n    float x = 1.0 - fCos;\n    return fScaleDepth * exp(-0.00287 + x*(0.459 + x*(3.83 + x*(-6.80 + x*5.25))));\n}\n\nvoid main(void) {\n    float lengthCamera = length(cameraPosition);\n    float cameraHeight2 = lengthCamera * lengthCamera;\n\n    // Get the ray from the camera to the vertex and its length (which is the far point of the ray passing through the atmosphere)\n    vec3 v3Ray = position - cameraPosition;\n    float fFar = length(v3Ray);\n    v3Ray /= fFar;\n\n    // Calculate the closest intersection of the ray with the outer atmosphere (which is the near point of the ray passing through the atmosphere)\n    float B = 2.0 * dot(cameraPosition, v3Ray);\n    float C = cameraHeight2 - fOuterRadius2;\n    float fDet = max(0.0, B*B - 4.0 * C);\n    float fNear = 0.5 * (-B - sqrt(fDet));\n\n    // Calculate the ray's starting position, then calculate its scattering offset\n    vec3 v3Start = cameraPosition + v3Ray * fNear;\n    fFar -= fNear;\n    float fStartAngle = dot(v3Ray, v3Start) / fOuterRadius;\n    float fStartDepth = exp(-1.0 / fScaleDepth);\n    float fStartOffset = fStartDepth * scale(fStartAngle);\n\n    // Initialize the scattering loop variables\n    float fSampleLength = fFar / fSamples;\n    float fScaledLength = fSampleLength * fScale;\n    vec3 v3SampleRay = v3Ray * fSampleLength;\n    vec3 v3SamplePoint = v3Start + v3SampleRay * 0.5;\n\n    // Now loop through the sample rays\n    vec3 v3FrontColor = vec3(0.0, 0.0, 0.0);\n    for(int i=0; i<nSamples; i++)\n    {\n        float fHeight = length(v3SamplePoint);\n        float fDepth = exp(fScaleOverScaleDepth * (fInnerRadius - fHeight));\n        float fLightAngle = dot(v3LightPosition, v3SamplePoint) / fHeight;\n        float fCameraAngle = dot(v3Ray, v3SamplePoint) / fHeight;\n        float fScatter = (fStartOffset + fDepth * (scale(fLightAngle) - scale(fCameraAngle)));\n        vec3 v3Attenuate = exp(-fScatter * (v3InvWavelength * fKr4PI + fKm4PI));\n\n        v3FrontColor += v3Attenuate * (fDepth * fScaledLength);\n        v3SamplePoint += v3SampleRay;\n    }\n\n    // Finally, scale the Mie and Rayleigh colors and set up the varying variables for the pixel shader\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n    c0 = v3FrontColor * (v3InvWavelength * fKrESun);\n    c1 = v3FrontColor * fKmESun;\n    v3Direction = cameraPosition - position;\n}";
+/* babel-plugin-inline-import './Shaders/groundFS.glsl' */
+const groundFS = "varying vec3 c0;\nvarying vec3 c1;\n\nvoid main (void) {\n\tgl_FragColor = vec4(c1, 1.0 - c0/4.);\n}";
+/* babel-plugin-inline-import './Shaders/groundVS.glsl' */
+const groundVS = "uniform vec3 v3LightPosition;   // The direction vector to the light source\nuniform vec3 v3InvWavelength;   // 1 / pow(wavelength, 4) for the red, green, and blue channels\nuniform float fCameraHeight;    // The camera's current height\nuniform float fCameraHeight2;   // fCameraHeight^2\nuniform float fOuterRadius;     // The outer (atmosphere) radius\nuniform float fOuterRadius2;    // fOuterRadius^2\nuniform float fInnerRadius;     // The inner (planetary) radius\nuniform float fInnerRadius2;    // fInnerRadius^2\nuniform float fKrESun;          // Kr * ESun\nuniform float fKmESun;          // Km * ESun\nuniform float fKr4PI;           // Kr * 4 * PI\nuniform float fKm4PI;           // Km * 4 * PI\nuniform float fScale;           // 1 / (fOuterRadius - fInnerRadius)\nuniform float fScaleDepth;      // The scale depth (i.e. the altitude at which the atmosphere's average density is found)\nuniform float fScaleOverScaleDepth; // fScale / fScaleDepth\n\nvarying vec3 c0;\nvarying vec3 c1;\n\nconst int nSamples = 3;\nconst float fSamples = 3.0;\n\nfloat scale(float fCos)\n{\n    float x = 1.0 - fCos;\n    return fScaleDepth * exp(-0.00287 + x*(0.459 + x*(3.83 + x*(-6.80 + x*5.25))));\n}\n\nvoid main(void) {\n\n     float cameraHeight2 = length(cameraPosition) * length(cameraPosition);\n\n    // Get the ray from the camera to the vertex and its length (which is the far point of the ray passing through the atmosphere)\n    vec3 v3Ray = position - cameraPosition;\n    float fFar = length(v3Ray);\n    v3Ray /= fFar;\n\n    // Calculate the closest intersection of the ray with the outer atmosphere (which is the near point of the ray passing through the atmosphere)\n    float B = 2.0 * dot(cameraPosition, v3Ray);\n    float C = cameraHeight2 - fOuterRadius2;\n    float fDet = max(0.0, B*B - 4.0 * C);\n    float fNear = 0.5 * (-B - sqrt(fDet));\n\n    // Calculate the ray's starting position, then calculate its scattering offset\n    vec3 v3Start = cameraPosition + v3Ray * fNear;\n    fFar -= fNear;\n    float fDepth = exp((fInnerRadius - fOuterRadius) / fScaleDepth);\n    float fCameraAngle = dot(-v3Ray, position) / length(position);\n    float fLightAngle = dot(v3LightPosition, position) / length(position);\n    float fCameraScale = scale(fCameraAngle);\n    float fLightScale = scale(fLightAngle);\n    float fCameraOffset = fDepth*fCameraScale;\n    float fTemp = (fLightScale + fCameraScale);\n\n    // Initialize the scattering loop variables\n    float fSampleLength = fFar / fSamples;\n    float fScaledLength = fSampleLength * fScale;\n    vec3 v3SampleRay = v3Ray * fSampleLength;\n    vec3 v3SamplePoint = v3Start + v3SampleRay * 0.5;\n\n    // Now loop through the sample rays\n    vec3 v3FrontColor = vec3(0.0, 0.0, 0.0);\n    vec3 v3Attenuate = vec3(0.0, 0.0, 0.0);\n    for(int i=0; i<nSamples; i++)\n    {\n        float fHeight = length(v3SamplePoint);\n        float fDepth = exp(fScaleOverScaleDepth * (fInnerRadius - fHeight));\n        float fScatter = fDepth*fTemp - fCameraOffset;\n        v3Attenuate = exp(-fScatter * (v3InvWavelength * fKr4PI + fKm4PI));\n        v3FrontColor += v3Attenuate * (fDepth * fScaledLength);\n        v3SamplePoint += v3SampleRay;\n    }\n\n    // Calculate the attenuation factor for the ground\n    c0 = v3Attenuate;\n    c1 = v3FrontColor * (v3InvWavelength * fKrESun + fKmESun);\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}";
+/* babel-plugin-inline-import './Shaders/GlowFS.glsl' */
+const GlowFS = "#include <logdepthbuf_pars_fragment>\n\nuniform int atmoIN;\nvarying float intensity;\n\nvec4 glowColor = vec4(0.45, 0.74, 1. ,1.0);\n\nvoid main() {\n    #include <logdepthbuf_fragment>\n    gl_FragColor = glowColor * intensity;\n}\n\n";
+/* babel-plugin-inline-import './Shaders/GlowVS.glsl' */
+const GlowVS = "#include <common>\n#include <logdepthbuf_pars_vertex>\n\nuniform int atmoIN;\nvarying float intensity;\n\nvoid main()\n{\n    vec3 normalES    = normalize( normalMatrix * normal );\n    vec3 normalCAMES = normalize( normalMatrix * cameraPosition );\n\n    if(atmoIN == 0) {\n        intensity = pow(0.666 - dot(normalES, normalCAMES), 4. );\n    } else {\n        intensity = pow( 1.  - dot(normalES, normalCAMES), 0.8 );\n    }\n\n    gl_Position = projectionMatrix * modelViewMatrix * vec4( position,  1.0 );\n\n    #include <logdepthbuf_vertex>\n}\n\n\n";
+const LIGHTING_POSITION = new THREE.Vector3(1, 0, 0);
+const v = new THREE.Vector3();
+const coordCam = new Coordinates('EPSG:4326');
+const coordGeoCam = new Coordinates('EPSG:4326');
+const skyBaseColor = new THREE.Color(0x93d5f8);
+const colorSky = new THREE.Color();
+const spaceColor = new THREE.Color(0x030508);
+const limitAlti = 600000;
+const mfogDistance = ellipsoidSizes.x * 160.0;
+
+/**
+ * @extends GeometryLayer
+ */
+class Atmosphere extends GeometryLayer {
+  /**
+  * It's layer to simulate Globe atmosphere.
+  * There's 2 modes : simple and realistic (atmospheric-scattering).
+   *
+  * The atmospheric-scattering it is taken from :
+  * * [Atmosphere Shader From Space (Atmospheric scattering)](http://stainlessbeer.weebly.com/planets-9-atmospheric-scattering.html)
+  * * [Accurate Atmospheric Scattering (NVIDIA GPU Gems 2)](https://developer.nvidia.com/gpugems/gpugems2/part-ii-shading-lighting-and-shadows/chapter-16-accurate-atmospheric-scattering).
+  *
+  * @param {string} id - The id of the layer Atmosphere.
+  * @param {Object} [options] - options layer.
+  * @param {number} [options.Kr] - `Kr` is the rayleigh scattering constant.
+  * @param {number} [options.Km] - `Km` is the Mie scattering constant.
+  * @param {number} [options.ESun] - `ESun` is the brightness of the sun.
+  * @param {number} [options.g] - constant `g` that affects the symmetry of the scattering.
+  * @param {number} [options.innerRadius] - The inner (planetary) radius
+  * @param {number} [options.outerRadius] - The outer (Atmosphere) radius
+  * @param {number[]} [options.wavelength] - The constant is the `wavelength` (or color) of light.
+  * @param {number} [options.scaleDepth] - The `scale depth` (i.e. the altitude at which the atmosphere's average density is found).
+  * @param {number} [options.mieScaleDepth] - not used.
+  */
+  constructor() {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'atmosphere';
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    options.source = false;
+    super(id, new THREE.Object3D(), options);
+    this.isAtmosphere = true;
+    const material = new THREE.ShaderMaterial({
+      uniforms: {
+        atmoIN: {
+          type: 'i',
+          value: 0
+        },
+        screenSize: {
+          type: 'v2',
+          value: new THREE.Vector2(window.innerWidth, window.innerHeight)
+        } // Should be updated on screen resize...
+      },
+      vertexShader: GlowVS,
+      fragmentShader: GlowFS,
+      side: THREE.BackSide,
+      blending: THREE.AdditiveBlending,
+      transparent: true,
+      wireframe: false
+    });
+    const sphereGeometry = new THREE.SphereGeometry(1, 64, 64);
+    const basicAtmosphereOut = new THREE.Mesh(sphereGeometry, material);
+    basicAtmosphereOut.scale.copy(ellipsoidSizes).multiplyScalar(1.14);
+    this.basicAtmosphere = new THREE.Object3D();
+    this.realisticAtmosphere = new THREE.Object3D();
+    this.realisticAtmosphere.visible = false;
+    this.object3d.add(this.basicAtmosphere);
+    this.object3d.add(this.realisticAtmosphere);
+    this.basicAtmosphere.add(basicAtmosphereOut);
+    const materialAtmoIn = new THREE.ShaderMaterial({
+      uniforms: {
+        atmoIN: {
+          type: 'i',
+          value: 1
+        },
+        screenSize: {
+          type: 'v2',
+          value: new THREE.Vector2(window.innerWidth, window.innerHeight)
+        } // Should be updated on screen resize...
+      },
+      vertexShader: GlowVS,
+      fragmentShader: GlowFS,
+      side: THREE.FrontSide,
+      blending: THREE.AdditiveBlending,
+      transparent: true,
+      depthWrite: false
+    });
+    const basicAtmosphereIn = new THREE.Mesh(sphereGeometry, materialAtmoIn);
+    basicAtmosphereIn.scale.copy(ellipsoidSizes).multiplyScalar(1.002);
+    this.basicAtmosphere.add(basicAtmosphereIn);
+    this.realisticLightingPosition = {
+      x: -0.5,
+      y: 0.0,
+      z: 1.0
+    };
+    this.fog = {
+      enable: true,
+      distance: mfogDistance
+    };
+
+    // Atmosphere Shader From Space (Atmospheric scattering)
+    // http://stainlessbeer.weebly.com/planets-9-atmospheric-scattering.html
+    // https://developer.nvidia.com/gpugems/gpugems2/part-ii-shading-lighting-and-shadows/chapter-16-accurate-atmospheric-scattering
+    this.realisticAtmosphereInitParams = options.Kr ? options : {
+      Kr: 0.0025,
+      Km: 0.0015,
+      ESun: 20.0,
+      g: -0.950,
+      innerRadius: 6400000,
+      outerRadius: 6700000,
+      wavelength: [0.650, 0.570, 0.475],
+      scaleDepth: 0.25
+      // mieScaleDepth: 0.1,
+    };
+    this.object3d.updateMatrixWorld();
+  }
+  update(context, layer, node) {
+    // update uniforms
+    node.material.fogDistance = this.fog.distance;
+    node.material.lightingEnabled = this.realisticAtmosphere.visible;
+    node.material.lightPosition = this.realisticLightingPosition;
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  preUpdate(context) {
+    const cameraPosition = context.view.camera3D.position;
+    if (this.fog.enable) {
+      v.setFromMatrixPosition(context.view.tileLayer.object3d.matrixWorld);
+      const len = v.distanceTo(cameraPosition);
+      // Compute fog distance, this function makes it possible to have a shorter distance
+      // when the camera approaches the ground
+      this.fog.distance = mfogDistance * ((len - ellipsoidSizes.x * 0.99) * 0.25 / ellipsoidSizes.x) ** 1.5;
+    } else {
+      this.fog.distance = 10e10;
+    }
+    const renderer = context.view.mainLoop.gfxEngine.renderer;
+    // get altitude camera
+    coordCam.crs = context.view.referenceCrs;
+    coordCam.setFromVector3(cameraPosition).as('EPSG:4326', coordGeoCam);
+    const altitude = coordGeoCam.altitude;
+
+    // If the camera altitude is below limitAlti,
+    // we interpolate between the sky color and the space color
+    if (altitude < limitAlti) {
+      colorSky.copy(spaceColor).lerp(skyBaseColor, (limitAlti - altitude) / limitAlti);
+      renderer.setClearColor(colorSky, renderer.getClearAlpha());
+    } else {
+      renderer.setClearColor(spaceColor, renderer.getClearAlpha());
+    }
+  }
+
+  // default to non-realistic lightning
+  _initRealisticLighning() {
+    const atmosphere = this.realisticAtmosphereInitParams;
+    const uniformsAtmosphere = {
+      v3LightPosition: {
+        value: LIGHTING_POSITION.clone().normalize()
+      },
+      v3InvWavelength: {
+        value: new THREE.Vector3(1 / atmosphere.wavelength[0] ** 4, 1 / atmosphere.wavelength[1] ** 4, 1 / atmosphere.wavelength[2] ** 4)
+      },
+      fCameraHeight: {
+        value: 0.0
+      },
+      fCameraHeight2: {
+        value: 0.0
+      },
+      fInnerRadius: {
+        value: atmosphere.innerRadius
+      },
+      fInnerRadius2: {
+        value: atmosphere.innerRadius * atmosphere.innerRadius
+      },
+      fOuterRadius: {
+        value: atmosphere.outerRadius
+      },
+      fOuterRadius2: {
+        value: atmosphere.outerRadius * atmosphere.outerRadius
+      },
+      fKrESun: {
+        value: atmosphere.Kr * atmosphere.ESun
+      },
+      fKmESun: {
+        value: atmosphere.Km * atmosphere.ESun
+      },
+      fKr4PI: {
+        value: atmosphere.Kr * 4.0 * Math.PI
+      },
+      fKm4PI: {
+        value: atmosphere.Km * 4.0 * Math.PI
+      },
+      fScale: {
+        value: 1 / (atmosphere.outerRadius - atmosphere.innerRadius)
+      },
+      fScaleDepth: {
+        value: atmosphere.scaleDepth
+      },
+      fScaleOverScaleDepth: {
+        value: 1 / (atmosphere.outerRadius - atmosphere.innerRadius) / atmosphere.scaleDepth
+      },
+      g: {
+        value: atmosphere.g
+      },
+      g2: {
+        value: atmosphere.g * atmosphere.g
+      },
+      nSamples: {
+        value: 3
+      },
+      fSamples: {
+        value: 3.0
+      },
+      tDisplacement: {
+        value: new THREE.Texture()
+      },
+      tSkyboxDiffuse: {
+        value: new THREE.Texture()
+      },
+      fNightScale: {
+        value: 1.0
+      }
+    };
+    const geometryAtmosphereIn = new THREE.SphereGeometry(atmosphere.innerRadius, 50, 50);
+    const materialAtmosphereIn = new THREE.ShaderMaterial({
+      uniforms: uniformsAtmosphere,
+      vertexShader: groundVS,
+      fragmentShader: groundFS,
+      blending: THREE.AdditiveBlending,
+      transparent: true,
+      depthTest: false,
+      depthWrite: false
+    });
+    const ground = new THREE.Mesh(geometryAtmosphereIn, materialAtmosphereIn);
+    const geometryAtmosphereOut = new THREE.SphereGeometry(atmosphere.outerRadius, 196, 196);
+    const materialAtmosphereOut = new THREE.ShaderMaterial({
+      uniforms: uniformsAtmosphere,
+      vertexShader: skyVS,
+      fragmentShader: skyFS,
+      transparent: true,
+      side: THREE.BackSide
+    });
+    const sky = new THREE.Mesh(geometryAtmosphereOut, materialAtmosphereOut);
+    const skyDome = new Sky();
+    skyDome.frustumCulled = false;
+    this.realisticAtmosphere.add(ground);
+    this.realisticAtmosphere.add(sky);
+    this.realisticAtmosphere.add(skyDome);
+    const effectController = {
+      turbidity: 10,
+      reileigh: 2,
+      mieCoefficient: 0.005,
+      mieDirectionalG: 0.8,
+      luminance: 1,
+      inclination: 0.49,
+      // elevation / inclination
+      azimuth: 0.25,
+      // Facing front,
+      sun: !true
+    };
+    skyDome.material.uniforms.turbidity.value = effectController.turbidity;
+    skyDome.material.uniforms.reileigh.value = effectController.reileigh;
+    skyDome.material.uniforms.luminance.value = effectController.luminance;
+    skyDome.material.uniforms.mieCoefficient.value = effectController.mieCoefficient;
+    skyDome.material.uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
+    skyDome.material.uniforms.up.value = new THREE.Vector3(); // no more necessary, estimate normal from cam..
+  }
+  setRealisticOn(bool) {
+    if (bool) {
+      if (!this.realisticAtmosphere.children.length) {
+        this._initRealisticLighning();
+      }
+      this.realisticLightingPosition = CoordStars.getSunPositionInScene(new Date().getTime(), 48.85, 2.35).normalize();
+      this.realisticAtmosphere.children.forEach(obj => obj.material.uniforms.v3LightPosition.value.copy(this.realisticLightingPosition));
+    }
+    this.basicAtmosphere.visible = !bool;
+    this.realisticAtmosphere.visible = bool;
+  }
+}
+export default Atmosphere;

package/lib/Core/Prefab/Globe/GlobeLayer.js

@@ -0,0 +1,152 @@
+import * as THREE from 'three';
+import TiledGeometryLayer from "../../../Layer/TiledGeometryLayer.js";
+import { ellipsoidSizes } from '@itowns/geographic';
+import { globalExtentTMS, schemeTiles } from "../../Tile/TileGrid.js";
+import { GlobeTileBuilder } from "./GlobeTileBuilder.js";
+
+// matrix to convert sphere to ellipsoid
+const worldToScaledEllipsoid = new THREE.Matrix4();
+// camera's position in worldToScaledEllipsoid system
+const cameraPosition = new THREE.Vector3();
+let magnitudeSquared = 0.0;
+
+// vectors for operation purpose
+const scaledHorizonCullingPoint = new THREE.Vector3();
+
+/**
+ * @property {boolean} isGlobeLayer - Used to checkout whether this layer is a
+ * GlobeLayer. Default is true. You should not change this, as it is used
+ * internally for optimisation.
+ *
+ * @extends TiledGeometryLayer
+ */
+class GlobeLayer extends TiledGeometryLayer {
+  /**
+   * A {@link TiledGeometryLayer} to use with a {@link GlobeView}. It has
+   * specific method for updating and subdivising its grid.
+   *
+   * @param {string} id - The id of the layer, that should be unique. It is
+   * not mandatory, but an error will be emitted if this layer is added a
+   * {@link View} that already has a layer going by that id.
+   * @param {THREE.Object3D} [object3d=THREE.Group] - The object3d used to
+   * contain the geometry of the TiledGeometryLayer. It is usually a
+   * `THREE.Group`, but it can be anything inheriting from a `THREE.Object3d`.
+   * @param {Object} [config] - Optional configuration, all elements in it
+   * will be merged as is in the layer. For example, if the configuration
+   * contains three elements `name, protocol, extent`, these elements will be
+   * available using `layer.name` or something else depending on the property
+   * name.
+   * @param {number} [config.minSubdivisionLevel=2] - Minimum subdivision
+   * level for this tiled layer.
+   * @param {number} [config.maxSubdivisionLevel=18] - Maximum subdivision
+   * level for this tiled layer.
+   * @param {number} [config.sseSubdivisionThreshold=1] - Threshold level for
+   * the SSE.
+   *
+   * @throws {Error} `object3d` must be a valid `THREE.Object3d`.
+   */
+  constructor(id, object3d) {
+    let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    const {
+      minSubdivisionLevel = 2,
+      maxSubdivisionLevel = 19,
+      ...tiledConfig
+    } = config;
+
+    // Configure tiles
+    const scheme = schemeTiles.get('EPSG:4326');
+    const schemeTile = globalExtentTMS.get('EPSG:4326').subdivisionByScheme(scheme);
+
+    // Supported tile matrix set for color/elevation layer
+    const tileMatrixSets = ['EPSG:4326', 'EPSG:3857'];
+    const uvCount = tileMatrixSets.length;
+    const builder = new GlobeTileBuilder({
+      uvCount
+    });
+    super(id, object3d || new THREE.Group(), schemeTile, builder, {
+      tileMatrixSets,
+      ...tiledConfig
+    });
+    this.isGlobeLayer = true;
+    this.options.defaultPickingRadius = 5;
+    this.minSubdivisionLevel = minSubdivisionLevel;
+    this.maxSubdivisionLevel = maxSubdivisionLevel;
+    this.extent = this.schemeTile[0].clone();
+    for (let i = 1; i < this.schemeTile.length; i++) {
+      this.extent.union(this.schemeTile[i]);
+    }
+
+    // We're going to use the method described here:
+    //    https://cesiumjs.org/2013/04/25/Horizon-culling/
+    // This method assumes that the globe is a unit sphere at 0,0,0 so
+    // we setup a world-to-scaled-ellipsoid matrix4
+    worldToScaledEllipsoid.copy(this.object3d.matrixWorld).invert();
+    worldToScaledEllipsoid.premultiply(new THREE.Matrix4().makeScale(1 / ellipsoidSizes.x, 1 / ellipsoidSizes.y, 1 / ellipsoidSizes.z));
+  }
+  preUpdate(context, changeSources) {
+    // pre-horizon culling
+    cameraPosition.copy(context.camera.camera3D.position).applyMatrix4(worldToScaledEllipsoid);
+    magnitudeSquared = cameraPosition.lengthSq() - 1.0;
+    return super.preUpdate(context, changeSources);
+  }
+  countColorLayersTextures() {
+    let occupancy = 0;
+    for (var _len = arguments.length, layers = new Array(_len), _key = 0; _key < _len; _key++) {
+      layers[_key] = arguments[_key];
+    }
+    for (const layer of layers) {
+      const crs = layer.crs || layer.source.crs;
+      // 'EPSG:3857' occupies the maximum 3 textures on tiles
+      // 'EPSG:4326' occupies 1 textures on tile
+      occupancy += crs == 'EPSG:3857' ? 3 : 1;
+    }
+    return occupancy;
+  }
+  subdivision(context, layer, node) {
+    if (node.level == 5) {
+      const row = node.getExtentsByProjection('EPSG:4326')[0].row;
+      if (row == 31 || row == 0) {
+        // doesn't subdivise the pole
+        return false;
+      }
+    }
+    return super.subdivision(context, layer, node);
+  }
+  culling(node, camera) {
+    if (super.culling(node, camera)) {
+      return true;
+    }
+    if (node.level < this.minSubdivisionLevel) {
+      return false;
+    }
+    return GlobeLayer.horizonCulling(node.horizonCullingPointElevationScaled);
+  }
+  static horizonCulling(point) {
+    // see https://cesiumjs.org/2013/04/25/Horizon-culling/
+    scaledHorizonCullingPoint.copy(point).applyMatrix4(worldToScaledEllipsoid);
+    scaledHorizonCullingPoint.sub(cameraPosition);
+    const vtMagnitudeSquared = scaledHorizonCullingPoint.lengthSq();
+    const dot = -scaledHorizonCullingPoint.dot(cameraPosition);
+    const isOccluded = magnitudeSquared < 0 ? dot > 0 : magnitudeSquared < dot && magnitudeSquared < dot * dot / vtMagnitudeSquared;
+    return isOccluded;
+  }
+  computeTileZoomFromDistanceCamera(distance, camera) {
+    const preSinus = this.sizeDiagonalTexture * (this.sseSubdivisionThreshold * 0.5) / camera._preSSE / ellipsoidSizes.x;
+    let sinus = distance * preSinus;
+    let zoom = Math.log(Math.PI / (2.0 * Math.asin(sinus))) / Math.log(2);
+    const delta = Math.PI / 2 ** zoom;
+    const circleChord = 2.0 * ellipsoidSizes.x * Math.sin(delta * 0.5);
+    // adjust with bounding sphere rayon
+    sinus = (distance - circleChord * 0.5) * preSinus;
+    zoom = Math.log(Math.PI / (2.0 * Math.asin(sinus))) / Math.log(2);
+    return isNaN(zoom) ? 0 : Math.round(zoom);
+  }
+  computeDistanceCameraFromTileZoom(zoom, camera) {
+    const delta = Math.PI / 2 ** zoom;
+    const circleChord = 2.0 * ellipsoidSizes.x * Math.sin(delta * 0.5);
+    const radius = circleChord * 0.5;
+    const error = radius / this.sizeDiagonalTexture;
+    return camera._preSSE * error / (this.sseSubdivisionThreshold * 0.5) + radius;
+  }
+}
+export default GlobeLayer;

package/lib/Core/Prefab/Globe/GlobeTileBuilder.js

@@ -0,0 +1,110 @@
+import * as THREE from 'three';
+import { Coordinates, Extent } from '@itowns/geographic';
+const PI_OV_FOUR = Math.PI / 4;
+const INV_TWO_PI = 1.0 / (Math.PI * 2);
+const axisZ = new THREE.Vector3(0, 0, 1);
+const axisY = new THREE.Vector3(0, 1, 0);
+const quatToAlignLongitude = new THREE.Quaternion();
+const quatToAlignLatitude = new THREE.Quaternion();
+const quatNormalToZ = new THREE.Quaternion();
+
+/** Transforms a WGS84 latitude into a usable texture offset. */
+function WGS84ToOneSubY(latitude) {
+  return 1.0 - (0.5 - Math.log(Math.tan(PI_OV_FOUR + THREE.MathUtils.degToRad(latitude) * 0.5)) * INV_TWO_PI);
+}
+
+/** Specialized parameters for the [GlobeTileBuilder]. */
+
+/**
+ * TileBuilder implementation for the purpose of generating globe (or more
+ * precisely ellipsoidal) tile arrangements.
+ */
+export class GlobeTileBuilder {
+  static _crs = 'EPSG:4978';
+  static _computeExtraOffset(params) {
+    const t = WGS84ToOneSubY(params.coordinates.latitude) * params.nbRow;
+    return (!isFinite(t) ? 0 : t) - params.deltaUV1;
+  }
+
+  /**
+   * Buffer holding information about the tile/vertex currently being
+   * processed.
+   */
+
+  get crs() {
+    return GlobeTileBuilder._crs;
+  }
+  constructor(options) {
+    this._transform = {
+      coords: [new Coordinates('EPSG:4326', 0, 0), new Coordinates('EPSG:4326', 0, 0)],
+      position: new THREE.Vector3(),
+      dimension: new THREE.Vector2()
+    };
+
+    // UV: Normalized coordinates (from degree) on the entire tile
+    // EPSG:4326
+    // Offset: Float row coordinate from Pseudo mercator coordinates
+    // EPSG:3857
+    if (options.uvCount > 1) {
+      this.computeExtraOffset = GlobeTileBuilder._computeExtraOffset;
+    }
+  }
+  prepare(params) {
+    const nbRow = 2 ** (params.level + 1.0);
+    let st1 = WGS84ToOneSubY(params.extent.south);
+    if (!isFinite(st1)) {
+      st1 = 0;
+    }
+    const start = st1 % (1.0 / nbRow);
+    const newParams = {
+      nbRow,
+      deltaUV1: (st1 - start) * nbRow,
+      // transformation to align tile's normal to z axis
+      quatNormalToZ: quatNormalToZ.setFromAxisAngle(axisY, -(Math.PI * 0.5 - THREE.MathUtils.degToRad(params.extent.center().latitude))),
+      // let's avoid building too much temp objects
+      coordinates: new Coordinates(this.crs)
+    };
+    params.extent.planarDimensions(this._transform.dimension);
+    return {
+      ...params,
+      ...newParams
+    };
+  }
+  center(extent) {
+    return extent.center(this._transform.coords[0]).as(this.crs, this._transform.coords[1]).toVector3();
+  }
+  vertexPosition(coordinates) {
+    return this._transform.coords[0].setFromValues(coordinates.x, coordinates.y).as(this.crs, this._transform.coords[1]).toVector3(this._transform.position);
+  }
+  vertexNormal() {
+    return this._transform.coords[1].geodesicNormal;
+  }
+  uProject(u, extent) {
+    return extent.west + u * this._transform.dimension.x;
+  }
+  vProject(v, extent) {
+    return extent.south + v * this._transform.dimension.y;
+  }
+  computeShareableExtent(extent) {
+    // NOTE: It should be possible to take advantage of equatorial plane
+    // symmetry, for which we'd have to reverse the tile's UVs.
+    // This would halve the memory requirement when viewing a full globe,
+    // but that case is not that relevant for iTowns' usual use cases and
+    // the globe mesh memory usage is already inconsequential.
+    const sizeLongitude = Math.abs(extent.west - extent.east) / 2;
+    const shareableExtent = new Extent(extent.crs, -sizeLongitude, sizeLongitude, extent.south, extent.north);
+
+    // Compute rotation to transform the tile to position on the ellispoid.
+    // This transformation takes the parents' transformation into account.
+    const rotLon = THREE.MathUtils.degToRad(extent.west - shareableExtent.west);
+    const rotLat = THREE.MathUtils.degToRad(90 - extent.center(this._transform.coords[0]).latitude);
+    quatToAlignLongitude.setFromAxisAngle(axisZ, rotLon);
+    quatToAlignLatitude.setFromAxisAngle(axisY, rotLat);
+    quatToAlignLongitude.multiply(quatToAlignLatitude);
+    return {
+      shareableExtent,
+      quaternion: quatToAlignLongitude.clone(),
+      position: this.center(extent)
+    };
+  }
+}

package/lib/Core/Prefab/Globe/SkyShader.js

@@ -0,0 +1,78 @@
+/**
+ * @author zz85 / https://github.com/zz85
+ *
+ * Based on "A Practical Analytic Model for Daylight"
+ * aka The Preetham Model, the de facto standard analytic skydome model
+ * http://www.cs.utah.edu/~shirley/papers/sunsky/sunsky.pdf
+ *
+ * First implemented by Simon Wallner
+ * http://www.simonwallner.at/projects/atmospheric-scattering
+ *
+ * Improved by Martin Upitis
+ * http://blenderartists.org/forum/showthread.php?245954-preethams-sky-impementation-HDR
+ *
+ * Three.js integration by zz85 http://twitter.com/blurspline
+ */
+
+import * as THREE from 'three';
+const skyShader = {
+  uniforms: {
+    luminance: {
+      type: 'f',
+      value: 1
+    },
+    turbidity: {
+      type: 'f',
+      value: 2
+    },
+    reileigh: {
+      type: 'f',
+      value: 1
+    },
+    mieCoefficient: {
+      type: 'f',
+      value: 0.005
+    },
+    mieDirectionalG: {
+      type: 'f',
+      value: 0.8
+    },
+    v3LightPosition: {
+      type: 'v3',
+      value: new THREE.Vector3()
+    },
+    up: {
+      type: 'v3',
+      value: new THREE.Vector3(0.0, 1.0, 0.0)
+    }
+  },
+  vertexShader: ['varying vec3 vWorldPosition;', 'void main() {', 'vec4 worldPosition = modelMatrix *  vec4( cameraPosition + position, 1.0 );', 'vWorldPosition = worldPosition.xyz;', 'gl_Position = projectionMatrix * modelViewMatrix * vec4( cameraPosition + position, 1.0 );', '}'].join('\n'),
+  fragmentShader: ['uniform sampler2D skySampler;', 'uniform vec3 v3LightPosition;', 'uniform vec3 up;', 'varying vec3 vWorldPosition;',
+  // "vec3 cameraPos = cameraPosition; //vec3(0., 0., 0.);",
+  '// uniform sampler2D sDiffuse;', '// const float turbidity = 10.0; //', '// const float reileigh = 2.; //', '// const float luminance = 1.0; //', '// const float mieCoefficient = 0.005;', '// const float mieDirectionalG = 0.8;', 'uniform float luminance;', 'uniform float turbidity;', 'uniform float reileigh;', 'uniform float mieCoefficient;', 'uniform float mieDirectionalG;', '// constants for atmospheric scattering', 'const float e = 2.71828182845904523536028747135266249775724709369995957;', 'const float pi = 3.141592653589793238462643383279502884197169;', 'const float n = 1.0003; // refractive index of air', 'const float N = 2.545E25; // number of molecules per unit volume for air at', '// 288.15K and 1013mb (sea level -45 celsius)', 'const float pn = 0.035; // depolatization factor for standard air', '// wavelength of used primaries, according to preetham', 'const vec3 lambda = vec3(680E-9, 550E-9, 450E-9);', '// mie stuff', '// K coefficient for the primaries', 'const vec3 K = vec3(0.686, 0.678, 0.666);', 'const float v = 4.0;', '// optical length at zenith for molecules', 'const float rayleighZenithLength = 8.4E3;', 'const float mieZenithLength = 1.25E3;',
+  // "const vec3 up = vec3(0.0, 1.0, 0.0);",
+
+  'const float EE = 1000.0;', 'const float sunAngularDiameterCos = 0.999956676946448443553574619906976478926848692873900859324;', '// 66 arc seconds -> degrees, and the cosine of that', '// earth shadow hack', 'const float cutoffAngle = pi/1.95;', 'const float steepness = 1.5;', 'vec3 totalRayleigh(vec3 lambda)', '{', 'return (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn));', '}',
+  // see http://blenderartists.org/forum/showthread.php?321110-Shaders-and-Skybox-madness
+  '// A simplied version of the total Reayleigh scattering to works on browsers that use ANGLE', 'vec3 simplifiedRayleigh()', '{', 'return 0.0005 / vec3(94, 40, 18);',
+  // return 0.00054532832366 / (3.0 * 2.545E25 * pow(vec3(680E-9, 550E-9, 450E-9), vec3(4.0)) * 6.245);
+  '}', 'float rayleighPhase(float cosTheta)', '{ ', 'return (3.0 / (16.0*pi)) * (1.0 + pow(cosTheta, 2.0));', '// return (1.0 / (3.0*pi)) * (1.0 + pow(cosTheta, 2.0));', '// return (3.0 / 4.0) * (1.0 + pow(cosTheta, 2.0));', '}', 'vec3 totalMie(vec3 lambda, vec3 K, float T)', '{', 'float c = (0.2 * T ) * 10E-18;', 'return 0.434 * c * pi * pow((2.0 * pi) / lambda, vec3(v - 2.0)) * K;', '}', 'float hgPhase(float cosTheta, float g)', '{', 'return (1.0 / (4.0*pi)) * ((1.0 - pow(g, 2.0)) / pow(1.0 - 2.0*g*cosTheta + pow(g, 2.0), 1.5));', '}', 'float sunIntensity(float zenithAngleCos)', '{', 'return EE * max(0.0, 1.0 - exp(-((cutoffAngle - acos(zenithAngleCos))/steepness)));', '}', '// float logLuminance(vec3 c)', '// {', '//     return log(c.r * 0.2126 + c.g * 0.7152 + c.b * 0.0722);', '// }', '// Filmic ToneMapping http://filmicgames.com/archives/75', 'float A = 0.15;', 'float B = 0.50;', 'float C = 0.10;', 'float D = 0.20;', 'float E = 0.02;', 'float F = 0.30;', 'float W = 1000.0;', 'vec3 Uncharted2Tonemap(vec3 x)', '{', 'return ((x*(A*x+C*B)+D*E)/(x*(A*x+B)+D*F))-E/F;', '}', 'void main() ', '{', 'vec3 up2 = normalize(cameraPosition.xyz);', 'float sunfade = 1.0-clamp(1.0-exp((v3LightPosition.y/450000.0)),0.0,1.0);', 'float reileighCoefficient = reileigh - (1.0* (1.0-sunfade));', 'vec3 sunDirection = normalize(v3LightPosition);', 'float sunE = sunIntensity(dot(sunDirection, up2));', '// extinction (absorbtion + out scattering) ', '// rayleigh coefficients',
+  // "vec3 betaR = totalRayleigh(lambda) * reileighCoefficient;",
+  'vec3 betaR = simplifiedRayleigh() * reileighCoefficient;', '// mie coefficients', 'vec3 betaM = totalMie(lambda, K, turbidity) * mieCoefficient;', '// optical length', '// cutoff angle at 90 to avoid singularity in next formula.', 'float zenithAngle = acos(max(0.0, dot(up2, normalize(vWorldPosition - cameraPosition))));', 'float sR = rayleighZenithLength / (cos(zenithAngle) + 0.15 * pow(93.885 - ((zenithAngle * 180.0) / pi), -1.253));', 'float sM = mieZenithLength / (cos(zenithAngle) + 0.15 * pow(93.885 - ((zenithAngle * 180.0) / pi), -1.253));', '// combined extinction factor', 'vec3 Fex = exp(-(betaR * sR + betaM * sM));', '// in scattering', 'float cosTheta = dot(normalize(vWorldPosition - cameraPosition), sunDirection);', 'float rPhase = rayleighPhase(cosTheta*0.5+0.5);', 'vec3 betaRTheta = betaR * rPhase;', 'float mPhase = hgPhase(cosTheta, mieDirectionalG);', 'vec3 betaMTheta = betaM * mPhase;', 'vec3 Lin = pow(sunE * ((betaRTheta + betaMTheta) / (betaR + betaM)) * (1.0 - Fex),vec3(1.5));', 'Lin *= mix(vec3(1.0),pow(sunE * ((betaRTheta + betaMTheta) / (betaR + betaM)) * Fex,vec3(1.0/2.0)),clamp(pow(1.0-dot(up2, sunDirection),5.0),0.0,1.0));', '//nightsky', 'vec3 direction = normalize(vWorldPosition - cameraPosition);', 'float theta = acos(direction.y); // elevation --> y-axis, [-pi/2, pi/2]', 'float phi = atan(direction.z, direction.x); // azimuth --> x-axis [-pi/2, pi/2]', 'vec2 uv = vec2(phi, theta) / vec2(2.0*pi, pi) + vec2(0.5, 0.0);', '// vec3 L0 = texture2D(skySampler, uv).rgb+0.1 * Fex;', 'vec3 L0 = vec3(0.1) * Fex;', '// composition + solar disc', '//if (cosTheta > sunAngularDiameterCos)', 'float sundisk = smoothstep(sunAngularDiameterCos,sunAngularDiameterCos+0.00002,cosTheta);', '// if (normalize(vWorldPosition - cameraPosition).y>0.0)', 'L0 += (sunE * 19000.0 * Fex)*sundisk;', 'vec3 whiteScale = 1.0/Uncharted2Tonemap(vec3(W));', 'vec3 texColor = (Lin+L0);   ', 'texColor *= 0.04 ;', 'texColor += vec3(0.0,0.001,0.0025)*0.3;', 'float g_fMaxLuminance = 1.0;', 'float fLumScaled = 0.1 / luminance;     ', 'float fLumCompressed = (fLumScaled * (1.0 + (fLumScaled / (g_fMaxLuminance * g_fMaxLuminance)))) / (1.0 + fLumScaled); ', 'float ExposureBias = fLumCompressed;', 'vec3 curr = Uncharted2Tonemap((log2(2.0/pow(luminance,4.0)))*texColor);', 'vec3 color = curr*whiteScale;', 'vec3 retColor = pow(color,vec3(1.0/(1.2+(1.2*sunfade))));', 'gl_FragColor.rgb = retColor;', 'gl_FragColor.a = 1. - ( (length(cameraPosition) - 6400000.) / 1000.);', '}'].join('\n')
+};
+class Sky extends THREE.Mesh {
+  constructor() {
+    const skyUniforms = THREE.UniformsUtils.clone(skyShader.uniforms);
+    const skyMat = new THREE.ShaderMaterial({
+      fragmentShader: skyShader.fragmentShader,
+      vertexShader: skyShader.vertexShader,
+      uniforms: skyUniforms,
+      side: THREE.BackSide,
+      transparent: true,
+      depthWrite: false
+    });
+    const skyGeo = new THREE.SphereGeometry(40000, 32, 15);
+    super(skyGeo, skyMat);
+  }
+}
+export default Sky;