diff --git a/src/scripts/components/main/globe/globe.tsx b/src/scripts/components/main/globe/globe.tsx index bb10ebed2..f1b3499e0 100644 --- a/src/scripts/components/main/globe/globe.tsx +++ b/src/scripts/components/main/globe/globe.tsx @@ -17,7 +17,10 @@ import { WebGlGlobe, WebGlGlobeEventMap } from '@ubilabs/esa-webgl-globe'; + import GLOBE_WORKER_URL from '@ubilabs/esa-webgl-globe/worker?url'; +import ATMOSPHERE_TEXTURE_URL from '@ubilabs/esa-webgl-globe/textures/atmosphere.png?url'; +import SHADING_TEXTURE_URL from '@ubilabs/esa-webgl-globe/textures/shading.png?url'; import {GlobeProjectionState} from '../../../types/globe-projection-state'; import {Layer} from '../../../types/layer'; @@ -38,6 +41,10 @@ type LayerLoadingStateChangedEvent = WebGlGlobeEventMap['layerLoadingStateChanged']; WebGlGlobe.setTileSelectorWorkerUrl(GLOBE_WORKER_URL); +WebGlGlobe.setTextureUrls({ + atmosphere: ATMOSPHERE_TEXTURE_URL, + shading: SHADING_TEXTURE_URL +}); interface Props { active: boolean; @@ -119,7 +126,15 @@ function useWebGlGlobe(view: CameraView) { return EMPTY_FUNCTION; } - const newGlobe = new WebGlGlobe(containerEl, {cameraView: view}); + const newGlobe = new WebGlGlobe(containerEl, { + cameraView: view, + renderOptions: { + atmosphereEnabled: true, + shadingEnabled: true, + atmosphereStrength: 0.8, + atmosphereColor: [0.58, 0.79, 1] // {r: 148, g: 201, b: 255} + } + }); if ('renderer' in newGlobe) { // @TODO: Remove this setting after globe controls have been refactored.