fix(debug): fix debug gui tools.

- fix charts div position;
- fix charts bug with labels;
- fix debug event;
- fix position camera debug;
- refactor style charts;

examples/css/example.css

@@ -135,7 +135,7 @@ h3 {
     height: 100%;
 }
 
-canvas {
+#viewerDiv>canvas {
     position: absolute;
     top: 0;
     left: 0;

examples/js/GUI/GuiTools.js

@@ -131,7 +131,7 @@ GuiTools.prototype.removeLayersGUI = function removeLayersGUI(nameLayer) {
 
 GuiTools.prototype.addGUI = function addGUI(name, value, callback) {
     this[name] = value;
-    this.gui.add(this, name).onChange(callback);
+    return this.gui.add(this, name).onChange(callback);
 };
 
 GuiTools.prototype.colorLayerFolder = function colorLayerFolder(nameLayer, value) {

examples/view_3d_map.html

@@ -116,6 +116,14 @@
                 updateScaleWidget();
             });
 
+            const atmosphere = view.getLayerById('atmosphere');
+            atmosphere.setRealisticOn(!view.isDebugMode);
+
+            const cRL = menuGlobe.addGUI('RealisticLighting', !view.isDebugMode, function (v) {
+                atmosphere.setRealisticOn(v);
+                view.notifyChange(atmosphere);
+            });
+
             window.addEventListener('resize', updateScaleWidget);
 
             debug.createTileDebugUI(menuGlobe.gui, view);

test/functional/GlobeControls.js

@@ -26,6 +26,8 @@ describe('GlobeControls with globe example', function _() {
 
                     return target;
                 };
+
+            menuGlobe.gui.remove(cRL);
         });
 
         middleWidth = await page.evaluate(() => window.innerWidth / 2);

utils/debug/Debug.js

@@ -3,6 +3,7 @@ import Coordinates from 'Core/Geographic/Coordinates';
 import { MAIN_LOOP_EVENTS } from 'Core/MainLoop';
 import OBB from 'Renderer/OBB';
 import ThreeStatsChart from './charts/ThreeStatsChart';
+import { backgroundChartDiv, color_blue } from './charts/ChartConfig';
 import OBBHelper from './OBBHelper';
 
 /**
@@ -20,19 +21,23 @@ function Debug(view, datDebugTool, chartDivContainer) {
     if (!chartDivContainer) {
         chartDivContainer = document.createElement('div');
         chartDivContainer.id = 'chart-div';
-        chartDivContainer.style.cssText = 'position: absolute; bottom: 0; left: 0; width: 100vw; height: 20rem; background-color: white; display: none';
+        chartDivContainer.style.cssText = `z-index: 10; position: absolute; bottom: 0; left: 0; width: 100vw; height: 30%; background-color: ${backgroundChartDiv}; display: none`;
         document.body.appendChild(chartDivContainer);
     }
 
     this.chartDivContainer = chartDivContainer;
-    this.createChartContainer('three-info');
+    const canvas = this.createChartContainer('three-info');
+
+    var ctx = canvas.getContext('2d');
 
     this.charts = [];
 
-    this.charts.push(new ThreeStatsChart('three-info', view.mainLoop.gfxEngine.renderer));
+    this.charts.push(new ThreeStatsChart(ctx, view.mainLoop.gfxEngine.renderer));
 
     const charts = this.charts;
     const tileLayer = view.tileLayer;
+    const initialPosition = new Coordinates(view.referenceCrs, 0.0, 0.0, 0.0);
+    const geoPosition = new Coordinates('EPSG:4326', 0.0, 0.0, 0.0);
 
     function debugChartUpdate(updateDuration) {
         const displayed = chartDivContainer.style.display != 'none';
@@ -70,6 +75,7 @@ function Debug(view, datDebugTool, chartDivContainer) {
             view.removeFrameRequester(MAIN_LOOP_EVENTS.UPDATE_END, endChart);
             chartDivContainer.style.display = 'none';
         }
+        this.updateChartDivSize();
         view.notifyChange();
     });
 
@@ -87,37 +93,43 @@ function Debug(view, datDebugTool, chartDivContainer) {
         view.notifyChange();
     });
 
-    gui.add(state, 'eventsDebug').name('Debug event').onChange((() => {
-        let eventFolder;
-        return (newValue) => {
-            const controls = view.controls;
-            const listeners = [];
-            if (newValue) {
-                eventFolder = gui.addFolder('Events');
-
-                // camera-target-updated event
-                const initialPosition = new Coordinates(view.referenceCrs, controls.getCameraTargetPosition()).as('EPSG:4326');
-                const roundedLat = Math.round(initialPosition.latitude() * 10000) / 10000;
-                const roundedLon = Math.round(initialPosition.longitude() * 10000) / 10000;
-                state.cameraTargetUpdated = `lat: ${roundedLat} lon: ${roundedLon}`;
-                const cameraTargetUpdatedController = eventFolder.add(state, 'cameraTargetUpdated').name('camera-target-changed');
-                const cameraTargetListener = (ev) => {
-                    const positionGeo = ev.new.cameraTarget.as('EPSG:4326');
-                    const roundedLat = Math.round(positionGeo.latitude() * 10000) / 10000;
-                    const roundedLon = Math.round(positionGeo.longitude() * 10000) / 10000;
-                    state.cameraTargetUpdated = `lat: ${roundedLat} lon: ${roundedLon}`;
-                    cameraTargetUpdatedController.updateDisplay();
-                };
-                controls.addEventListener('camera-target-changed', cameraTargetListener);
-                listeners.push({ type: 'camera-target-changed', stateName: 'cameraTargetUpdated', fn: cameraTargetListener });
-            } else {
-                for (const listener of listeners) {
-                    controls.removeEventListener(listener.type, listener.fn);
-                    delete state[listener.stateName];
-                }
-                gui.removeFolder('Events');
+    // camera-target-updated event
+    let LatController;
+    let LongController;
+    let eventFolder;
+    const controls = view.controls;
+    initialPosition.crs = view.referenceCrs;
+
+    const getCenter = (controls && controls.getCameraTargetPosition) ? controls.getCameraTargetPosition : () => view.camera.camera3D.position;
+    const cameraTargetListener = () => {
+        initialPosition.setFromVector3(getCenter()).as('EPSG:4326', geoPosition);
+        state.latitude = `${geoPosition.y.toFixed(6)}`;
+        state.longitude = `${geoPosition.x.toFixed(6)}`;
+        LatController.updateDisplay();
+        LongController.updateDisplay();
+    };
+
+    gui.add(state, 'eventsDebug').name('Debug event').onChange((() => (newValue) => {
+        const listeners = [];
+        if (newValue) {
+            eventFolder = gui.addFolder('Events');
+            eventFolder.open();
+
+            initialPosition.setFromVector3(getCenter()).as('EPSG:4326', geoPosition);
+            state.latitude = `${geoPosition.y.toFixed(6)}`;
+            state.longitude = `${geoPosition.x.toFixed(6)}`;
+            LatController = eventFolder.add(state, 'latitude');
+            LongController = eventFolder.add(state, 'longitude');
+
+            view.addFrameRequester(MAIN_LOOP_EVENTS.UPDATE_END, cameraTargetListener);
+            listeners.push({ type: MAIN_LOOP_EVENTS.UPDATE_END, stateName: 'cameraTargetUpdated', fn: cameraTargetListener });
+        } else {
+            for (const listener of listeners) {
+                controls.removeFrameRequester(listener.type, listener.fn);
+                delete state[listener.stateName];
             }
-        };
+            gui.removeFolder('Events');
+        }
     })());
 
     // Camera debug
@@ -137,7 +149,7 @@ function Debug(view, datDebugTool, chartDivContainer) {
 
     // Displayed tiles boundind box
     const displayedTilesObb = new OBB();
-    const displayedTilesObbHelper = new OBBHelper(displayedTilesObb);
+    const displayedTilesObbHelper = new OBBHelper(displayedTilesObb, '', new Color(color_blue));
     displayedTilesObbHelper.visible = false;
     view.scene.add(displayedTilesObb);
     view.scene.add(displayedTilesObbHelper);
@@ -190,13 +202,15 @@ function Debug(view, datDebugTool, chartDivContainer) {
                     obj.traverseVisible(updateFogDistance);
                 }
             }
+
+            const deltaY = state.displayCharts ? Math.round(parseFloat(chartDivContainer.style.height.replace('%', '')) * g.height / 100) + 3 : 0;
             helper.visible = true;
             helper.updateMatrixWorld(true);
             bClearColor.copy(r.getClearColor());
-            r.setViewport(g.width - size.x, 0, size.x, size.y);
-            r.setScissor(g.width - size.x, 0, size.x, size.y);
+            r.setViewport(g.width - size.x, deltaY, size.x, size.y);
+            r.setScissor(g.width - size.x, deltaY, size.x, size.y);
             r.setScissorTest(true);
-            r.setClearColor(0xeeeeee);
+            r.setClearColor(backgroundChartDiv);
             r.clear();
             r.render(view.scene, debugCamera);
             r.setScissorTest(false);
@@ -221,13 +235,14 @@ function Debug(view, datDebugTool, chartDivContainer) {
 
 Debug.prototype.createChartContainer = function createChartContainer(chartId) {
     const div = document.createElement('div');
-    div.style.cssText = 'width: 100%; height: 100%; background-color: white;';
+    div.style.cssText = `background-color: ${backgroundChartDiv}; flex: auto;`;
     this.chartDivContainer.appendChild(div);
 
     const chartCanvas = document.createElement('canvas');
     chartCanvas.height = '20rem';
     chartCanvas.id = chartId;
     div.appendChild(chartCanvas);
+    return chartCanvas;
 };
 
 Debug.prototype.updateChartDivSize = function updateChartDivSize() {

utils/debug/OBBHelper.js

@@ -7,8 +7,8 @@ const font = new THREE.Font(JSON.parse(fontJS));
 const matText = new THREE.MeshBasicMaterial({ color: new THREE.Color(1, 0, 0) });
 
 class OBBHelper extends THREE.Box3Helper {
-    constructor(OBB, text) {
-        const color = new THREE.Color(Math.random(), Math.random(), Math.random());
+    constructor(OBB, text, color) {
+        color = color || new THREE.Color(Math.random(), Math.random(), Math.random());
 
         super(OBB.box3D, color.getHex());
 

utils/debug/TileDebug.js

@@ -60,12 +60,12 @@ export default function createTileDebugUI(datDebugTool, view, layer, debugInstan
     const gui = GeometryDebug.createGeometryDebugUI(datDebugTool, view, layer);
 
     const objectChardId = `${layer.id}-nb-objects`;
-    debugInstance.createChartContainer(objectChardId);
+    const canvasObjectChardId = debugInstance.createChartContainer(objectChardId);
     const visibleChardId = `${layer.id}-nb-visible`;
-    debugInstance.createChartContainer(visibleChardId);
+    const canvasVisibleChardId = debugInstance.createChartContainer(visibleChardId);
 
-    debugInstance.charts.push(new TileObjectChart(objectChardId, layer));
-    debugInstance.charts.push(new TileVisibilityChart(visibleChardId, layer));
+    debugInstance.charts.push(new TileObjectChart(canvasObjectChardId.getContext('2d'), layer));
+    debugInstance.charts.push(new TileVisibilityChart(canvasVisibleChardId.getContext('2d'), layer));
 
     layer.showOutline = false;
     layer.wireframe = false;

utils/debug/charts/ChartConfig.js

@@ -0,0 +1,22 @@
+import Chart from 'chart.js';
+
+Chart.defaults.global.defaultFontColor = '#b0b0b0';
+
+export const scales =  {
+    yAxes: [{
+        display: true,
+        ticks: {
+            suggestedMin: 0, // minimum will be 0, unless there is a lower value.
+        },
+        gridLines: {
+            color: '#606060',
+            zeroLineColor: '#606060',
+        },
+    }],
+};
+
+export const color_rose = '#e7c9e5';
+export const color_blue = '#64a6bd';
+export const backgroundChartDiv = '#404040';
+
+export default {};

utils/debug/charts/ThreeStatsChart.js

@@ -1,27 +1,21 @@
 import Chart from 'chart.js';
+import { scales, color_rose, color_blue } from './ChartConfig';
 
-export default function ThreeStatsChart(chartId, renderer) {
+export default function ThreeStatsChart(ctx, renderer) {
     let lastValidCompareIndex = -1;
     const timestamp = Date.now();
-    const textureDataset = { label: 'texture count', data: [{ x: 0, y: 0 }] };
-    const geometryDataset = { label: 'geometry count', data: [{ x: 0, y: 0 }], borderColor: 'rgba(75,192,192,1)' };
+    const textureDataset = { label: 'texture count', data: [{ x: 0, y: 0 }], borderColor: color_rose, borderWidth: 1.5, pointRadius: 1 };
+    const geometryDataset = { label: 'geometry count', data: [{ x: 0, y: 0 }], borderColor: color_blue, borderWidth: 1.5, pointRadius: 1 };
     const label = ['0s'];
-    const chart = new Chart(chartId, {
+    const chart = new Chart(ctx, {
         type: 'line',
         data: {
             labels: label,
             datasets: [textureDataset, geometryDataset],
         },
         options: {
             animation: { duration: 10 },
-            scales: {
-                yAxes: [{
-                    display: true,
-                    ticks: {
-                        suggestedMin: 0, // minimum will be 0, unless there is a lower value.
-                    },
-                }],
-            },
+            scales,
         },
     });
 

utils/debug/charts/TileObjectChart.js

@@ -1,27 +1,21 @@
 import Chart from 'chart.js';
+import { scales, color_rose, color_blue } from './ChartConfig';
 
-export default function TileObjectsChart(chartId, tileLayer) {
+export default function TileObjectsChart(ctx, tileLayer) {
     let lastValidCompareIndex = 0;
     const timestamp = Date.now();
-    const viewLevelStartDataset = { label: 'Update 1st level', data: [{ x: 0, y: 0 }] };
-    const viewUpdateDurationDataset = { label: 'Update duration (ms)', data: [{ x: 0, y: 0 }], borderColor: 'rgba(75,192,192,1)' };
+    const viewLevelStartDataset = { label: 'Update 1st level', data: [{ x: 0, y: 0 }], borderColor: color_rose, borderWidth: 1.5, pointRadius: 1  };
+    const viewUpdateDurationDataset = { label: 'Update duration (ms)', data: [{ x: 0, y: 0 }], borderColor: color_blue, borderWidth: 1.5, pointRadius: 1 };
     const label = ['0s'];
-    const nbObjectsChart = new Chart(chartId, {
+    const nbObjectsChart = new Chart(ctx, {
         type: 'line',
         data: {
             labels: label,
             datasets: [viewLevelStartDataset, viewUpdateDurationDataset],
         },
         options: {
             animation: { duration: 10 },
-            scales: {
-                yAxes: [{
-                    display: true,
-                    ticks: {
-                        suggestedMin: 0, // minimum will be 0, unless there is a lower value.
-                    },
-                }],
-            },
+            scales,
         },
     });
 

utils/debug/charts/TileVisibilityChart.js

@@ -1,35 +1,29 @@
 import Chart from 'chart.js';
+import { scales, color_rose, color_blue } from './ChartConfig';
 
-export default function TileVisibilityChart(chartId, tileLayer) {
+export default function TileVisibilityChart(ctx, tileLayer) {
     const nbVisibleLabels = [];
     const nbVisibleData = [];
     const nbDisplayedData = [];
-    const nbVisibleChart = new Chart(chartId, {
+    const nbVisibleChart = new Chart(ctx, {
         type: 'bar',
         data: {
             labels: nbVisibleLabels,
             datasets: [
                 {
                     label: 'Visible node per level',
                     data: nbVisibleData,
-                    backgroundColor: 'rgba(75, 192, 192, 1)',
+                    backgroundColor: color_rose,
                 },
                 {
                     label: 'Diplayed node per level',
                     data: nbDisplayedData,
-                    backgroundColor: 'rgba(153, 102, 255, 1)',
+                    backgroundColor: color_blue,
                 },
             ],
         },
         options: {
-            scales: {
-                yAxes: [{
-                    display: true,
-                    ticks: {
-                        suggestedMin: 0, // minimum will be 0, unless there is a lower value.
-                    },
-                }],
-            },
+            scales,
         },
     });