SkyController: refactoring, new simple sky mode, improvements and bug fixes

examples/3dtiles_loader.html

@@ -81,7 +81,7 @@
             const isEmbedded = window.self !== window.top;
 
             window.gui = new dat.GUI();
-            
+
 
             // ---- Create a GlobeView ----
 
@@ -96,7 +96,6 @@
 
             // Create a GlobeView
             const view = new GlobeView(viewerDiv, placement, {
-                realisticLighting: true,
                 shadows: true,
                 controls: {
                     minDistance: 100,
@@ -179,6 +178,7 @@
                 window.layer = new OGC3DTilesLayer('3DTiles', {
                     source,
                     pntsSizeMode: PNTS_SIZE_MODE.ATTENUATED,
+                    sseThreshold: 2,
                 });
 
                 // Add an event for picking the 3D Tiles layer and displaying
@@ -200,25 +200,8 @@
                     .then(() => debug.createOGC3DTilesDebugUI(gui, view, window.layer));
             }
 
-            // ---------- DATE/TIME CONTROLS ----------
-
-            // Add date/time controls to adjust sun position
-            const dateFolder = gui.addFolder('Date/Time');
-            const date = view.date;
-            dateFolder.add(
-                { month: 1 + date.getMonth() }, 'month', 1, 12, 1
-            ).onChange((v) => {
-                date.setMonth(v - 1);
-                view.notifyChange(view.sunLightLayer);
-            }).name('month (1-12)');
-            dateFolder.add(
-                { hour: date.getHours() }, 'hour', 0, 24, 0.1
-            ).onChange((v) => {
-                const hours = Math.floor(v);
-                const minutes = (v - hours) * 60;
-                date.setHours(hours, minutes);
-                view.notifyChange(view.sunLightLayer);
-            }).name('hour (24h)');
+            // ---------- Realistic lighting & DATE/TIME CONTROLS ----------
+            debug.createRealisticLightingDebugUI(gui,view);
 
             function loadLyon() {
                 setUrl("https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/refs/heads/master/3DTiles/lyon1-4978/tileset.json");
@@ -232,9 +215,6 @@
                 setUrl("https://webimaging.lillemetropole.fr/externe/maillage/2020_mel_5cm/tileset.json");
             }
 
-
-
-
             const readUrlButton = document.getElementById('readURLButton');
 
             const loadLyonButton = document.getElementById('loadLyonButton');

examples/demo/src/Views/ImmersiveView.ts

@@ -50,10 +50,8 @@ class ImmersiveView extends View {
         // @ts-expect-error camera3D updateProjectionMatrix method undefined
         this.view.camera3D.updateProjectionMatrix();
 
-        const view = this.view as itowns.GlobeView & { skyManager: { enabled: boolean } };
-        if (view.skyManager && view.skyManager.enabled) {
-            view.skyManager.enabled = false;
-        }
+        const view = this.view as itowns.GlobeView & { realisticLighting: boolean };
+        view.realisticLighting = false;
 
         setupLoadingScreen(this.viewerDiv, view);
 

examples/demo/src/Views/View3D.ts

@@ -35,8 +35,8 @@ class View3D extends View {
         const view = this.view as itowns.GlobeView;
 
         this.atmosphereFrameRequester = () => {
-            if (view.skyManager) {
-                view.skyManager.enabled =
+            if (view.skyController) {
+                view.realisticLighting =
                     view.getDistanceFromCamera() > Config.ATMOSPHERE_THRESHOLD;
             }
         };

examples/mars.html

@@ -33,6 +33,20 @@
             import * as THREE from 'three';
             import * as itowns from 'itowns';
             import * as debug from 'debug';
+
+            const marsRealisticParams = {
+                rayleighScattering: new THREE.Vector3(0.00199, 0.00092, 0.00045),
+                mieScattering: new THREE.Vector3(0.003, 0.002, 0.0015),
+                mieExtinction: new THREE.Vector3(0.0033, 0.0022, 0.00165),
+                miePhaseFunctionG: 0.7,
+            };
+
+            const marsSimpleParams = {
+                skyAltitude: 100000, // Closer to ground
+                skyColor: 0xd99b75, // Orange sky
+                fogColor: 0xd6ad9a, // Beige fog
+            }
+
             import * as itowns_widgets from 'itowns_widgets';
             // # Simple Globe viewer
             // Define initial camera position
@@ -51,18 +65,13 @@
 
             // Instanciate iTowns GlobeView*
             var view = new itowns.GlobeView(viewerDiv, placement, {
-                atmosphere: {
-                    Kr: 0.0025,
-                    Km: 0.0015,
-                    ESun: 15.0,
-                    g: -0.950,
-                    innerRadius: 6400000,
-                    outerRadius: 6600000,
-                    wavelength: [0.350, 0.470, 0.575],
-                    scaleDepth: 0.38,
-                },
+                realisticSky: marsRealisticParams,
+                simpleSky: marsSimpleParams,
                 realisticLighting: true,
+                farFactor: 0.6, // Less aggressive horizon scaling for this ellipsoid-based demo
             });
+
+            view.skyController.realisticSky.sky.material.moon = false;
             setupLoadingScreen(viewerDiv, view);
 
             // Add a tms imagery source
@@ -97,10 +106,7 @@
 
             var menuGlobe = new GuiTools('menuDiv', view);
 
-            const cRL = menuGlobe.addGUI('RealisticLighting', true, function (v) {
-                view.skyManager.enabled = v;
-            });
-
+            debug.createRealisticLightingDebugUI(menuGlobe.gui, view);
             debug.createTileDebugUI(menuGlobe.gui, view);
             window.view = view;
             window.itowns = itowns;

examples/plugins_pyramidal_tiff.html

@@ -74,7 +74,6 @@
                 var layer = new itowns.ElevationLayer(config.id, config);
                 view.addLayer(layer).then(function _(layer) {
                     layer.scale = 10000;
-                    view.tileLayer.attachedLayers[0].visible = false;
                     menuGlobe.addLayerGUI(layer);
                     menuGlobe.elevationGui.open();
                     menuGlobe.elevationGui.__folders.GEOIDMNT.open();

examples/view_3d_map.html

@@ -49,7 +49,7 @@
 
             // Create a GlobeView
             const view = new itowns.GlobeView(viewerDiv, placement, {
-                realisticLighting: true,
+                realisticLighting: false,
             });
 
             // Setup loading screen and debug menu
@@ -142,21 +142,8 @@
                 position: 'top-right',
             });
 
-
-
-            // ---------- DISPLAY ATMOSPHERIC LIGHTING : ----------
-
-            view.skyManager.enabled = !view.isDebugMode;
-
-
-
             // ---------- DEBUG TOOLS : ----------
-
-            // Toggle atmospheric lighting on/off.
-            const cRL = debugMenu.addGUI('RealisticLighting', !view.isDebugMode, function (v) {
-                view.skyManager.enabled = v;
-            });
-
+            const cRL = debug.createRealisticLightingDebugUI(debugMenu.gui, view);
             debug.createTileDebugUI(debugMenu.gui, view);
 
             window.view = view;

examples/view_3d_mns_map.html

@@ -150,16 +150,14 @@
 
             // ---------- DISPLAY ATMOSPHERIC LIGHTING : ----------
 
-            view.skyManager.enabled = !view.isDebugMode;
+            view.realisticLighting = !view.isDebugMode;
 
 
 
             // ---------- DEBUG TOOLS : ----------
 
             // Toggle atmospheric lighting on/off.
-            const cRL = debugMenu.addGUI('RealisticLighting', !view.isDebugMode, function (v) {
-                view.skyManager.enabled = v;
-            });
+            debug.createRealisticLightingDebugUI(debugMenu.gui, view);
 
             debug.createTileDebugUI(debugMenu.gui, view);
 

packages/Debug/src/Debug.js

@@ -147,11 +147,6 @@ function Debug(view, datDebugTool, chartDivContainer) {
     debugCamera.updateProjectionMatrix();
     const g = view.mainLoop.gfxEngine;
     const r = g.renderer;
-    let fogDistance = 10e10;
-    const layerAtmosphere = view.getLayerById('atmosphere');
-    if (layerAtmosphere) {
-        fogDistance = layerAtmosphere.fog.distance;
-    }
     helper.visible = false;
     view.scene.add(helper);
 
@@ -162,12 +157,6 @@ function Debug(view, datDebugTool, chartDivContainer) {
     view.scene.add(displayedTilesObb);
     view.scene.add(displayedTilesObbHelper);
 
-    function updateFogDistance(obj) {
-        if (obj.material && fogDistance) {
-            obj.material.setUniform('fogDistance', fogDistance);
-        }
-    }
-
     const clearColor = new Color();
     const lookAtCameraDebug = new Vector3();
     function renderCameraDebug() {
@@ -206,14 +195,11 @@ function Debug(view, datDebugTool, chartDivContainer) {
 
             helper.update();
 
+            const distToTarget = debugCamera.position.distanceTo(lookAtCameraDebug);
+            debugCamera.near = distToTarget * 0.01;
+            debugCamera.far = distToTarget * 100;
+
             debugCamera.updateProjectionMatrix();
-            if (layerAtmosphere) {
-                layerAtmosphere.object3d.visible = false;
-                fogDistance = 10e10;
-                for (const obj of tileLayer.level0Nodes) {
-                    obj.traverseVisible(updateFogDistance);
-                }
-            }
 
             const deltaY = state.displayCharts ? Math.round(parseFloat(chartDivContainer.style.height.replace('%', '')) * g.height / 100) + 3 : 0;
             helper.visible = true;
@@ -224,22 +210,24 @@ function Debug(view, datDebugTool, chartDivContainer) {
             r.setScissorTest(true);
             r.setClearColor(backgroundChartDiv);
             r.clear();
+
+            const skyEnabled = view.skyController && view.skyController.enabled;
+            if (skyEnabled) {
+                view.skyController.enabled = false;
+            }
+
             r.render(view.scene, debugCamera);
+
+            if (skyEnabled) {
+                view.skyController.enabled = true;
+            }
+
             r.setScissorTest(false);
             r.setClearColor(clearColor);
             r.setViewport(0, 0, g.width, g.height);
 
             helper.visible = false;
             displayedTilesObbHelper.visible = false;
-            if (layerAtmosphere) {
-                layerAtmosphere.object3d.visible = true;
-            }
-            if (layerAtmosphere) {
-                fogDistance = layerAtmosphere.fog.distance;
-                for (const obj of tileLayer.level0Nodes) {
-                    obj.traverseVisible(updateFogDistance);
-                }
-            }
         }
     }
 }

packages/Debug/src/Main.js

@@ -3,5 +3,6 @@ export { default as PointCloudDebug } from 'PointCloudDebug';
 export { default as createTileDebugUI } from 'TileDebug';
 export { default as create3dTilesDebugUI } from '3dTilesDebug';
 export { default as createOGC3DTilesDebugUI } from 'OGC3DTilesDebug';
+export { createRealisticLightingDebugUI, createDateTimeUI } from 'RealisticLightingDebug';
 export { default as GeometryDebug } from 'GeometryDebug';
 export { default as GuiTools } from 'GuiTools';

packages/Debug/src/RealisticLightingDebug.js

@@ -0,0 +1,49 @@
+export function createRealisticLightingDebugUI(gui, view) {
+    if (view.realisticLighting === undefined) {
+        console.error('Failed to create realistic lighting debug UI. The view does not expose realisticLighting');
+        return;
+    }
+    if (view.skyController === undefined) {
+        console.error('Failed to create debug UI. The view does not expose skyController');
+        return;
+    }
+    const realisticLightingFolder = gui.addFolder('Realistic lighting');
+    const realisticLightingProperty = realisticLightingFolder.add(view, 'realisticLighting');
+    const forceDayTimeProperty = realisticLightingFolder.add(view.skyController, 'forceDaytime');
+    const dateTimeFolder = createDateTimeUI(realisticLightingFolder, view);
+
+    function toggleDateTimeFolder() {
+        if (!view.realisticLighting || view.skyController.forceDaytime) {
+            dateTimeFolder.hide();
+        } else {
+            dateTimeFolder.show();
+            dateTimeFolder.open();
+        }
+    }
+
+    toggleDateTimeFolder();
+    forceDayTimeProperty.onChange(() => toggleDateTimeFolder());
+    realisticLightingProperty.onChange(() => toggleDateTimeFolder());
+    return realisticLightingFolder;
+}
+
+export function createDateTimeUI(gui, view) {
+    const date = view.date;
+    const dateTimeFolder = gui.addFolder('Date/Time');
+    dateTimeFolder.add(
+        { month: 1 + date.getMonth() }, 'month', 1, 12, 1,
+    ).onChange((v) => {
+        date.setMonth(v - 1);
+        view.notifyChange(view.camera3D);
+    }).name('month (1-12)');
+
+    dateTimeFolder.add(
+        { hour: date.getHours() }, 'hour', 0, 24, 0.1,
+    ).onChange((v) => {
+        const hours = Math.floor(v);
+        const minutes = (v - hours) * 60;
+        date.setHours(hours, minutes);
+        view.notifyChange(view.camera3D);
+    }).name('hour (24h)');
+    return dateTimeFolder;
+}