From c9a53956dc1c1b48e7615f7e712cb2c4a2097d0a Mon Sep 17 00:00:00 2001 From: gchoqueux Date: Wed, 16 Sep 2020 15:39:46 +0200 Subject: [PATCH] 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 | 2 +- examples/js/GUI/GuiTools.js | 2 +- examples/view_3d_map.html | 8 ++ package-lock.json | 2 +- test/functional/GlobeControls.js | 2 + utils/debug/Debug.js | 91 +++++++++++++---------- utils/debug/OBBHelper.js | 4 +- utils/debug/TileDebug.js | 8 +- utils/debug/charts/ChartConfig.js | 22 ++++++ utils/debug/charts/ThreeStatsChart.js | 18 ++--- utils/debug/charts/TileObjectChart.js | 18 ++--- utils/debug/charts/TileVisibilityChart.js | 18 ++--- 12 files changed, 112 insertions(+), 83 deletions(-) create mode 100644 utils/debug/charts/ChartConfig.js diff --git a/examples/css/example.css b/examples/css/example.css index f74cca83c4..727bc484bf 100644 --- a/examples/css/example.css +++ b/examples/css/example.css @@ -135,7 +135,7 @@ h3 { height: 100%; } -canvas { +#viewerDiv>canvas { position: absolute; top: 0; left: 0; diff --git a/examples/js/GUI/GuiTools.js b/examples/js/GUI/GuiTools.js index 29305e5f56..a925b40672 100644 --- a/examples/js/GUI/GuiTools.js +++ b/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) { diff --git a/examples/view_3d_map.html b/examples/view_3d_map.html index 810e3248dd..af709eb773 100644 --- a/examples/view_3d_map.html +++ b/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); diff --git a/package-lock.json b/package-lock.json index 198ae3ea9f..c7fd40bc32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11429,7 +11429,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "dev": true, "requires": { diff --git a/test/functional/GlobeControls.js b/test/functional/GlobeControls.js index dd41257c6d..da3c77b3a9 100644 --- a/test/functional/GlobeControls.js +++ b/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); diff --git a/utils/debug/Debug.js b/utils/debug/Debug.js index 549b3e0571..0d1276d60d 100644 --- a/utils/debug/Debug.js +++ b/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() { diff --git a/utils/debug/OBBHelper.js b/utils/debug/OBBHelper.js index 7d218b5ea6..1d1bd3e64a 100644 --- a/utils/debug/OBBHelper.js +++ b/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()); diff --git a/utils/debug/TileDebug.js b/utils/debug/TileDebug.js index 18ee119c28..ae7fa63e3e 100644 --- a/utils/debug/TileDebug.js +++ b/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; diff --git a/utils/debug/charts/ChartConfig.js b/utils/debug/charts/ChartConfig.js new file mode 100644 index 0000000000..a737a033ec --- /dev/null +++ b/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 {}; diff --git a/utils/debug/charts/ThreeStatsChart.js b/utils/debug/charts/ThreeStatsChart.js index 9f50177ac6..2618b2aa04 100644 --- a/utils/debug/charts/ThreeStatsChart.js +++ b/utils/debug/charts/ThreeStatsChart.js @@ -1,12 +1,13 @@ 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, @@ -14,14 +15,7 @@ export default function ThreeStatsChart(chartId, renderer) { }, options: { animation: { duration: 10 }, - scales: { - yAxes: [{ - display: true, - ticks: { - suggestedMin: 0, // minimum will be 0, unless there is a lower value. - }, - }], - }, + scales, }, }); diff --git a/utils/debug/charts/TileObjectChart.js b/utils/debug/charts/TileObjectChart.js index e496bcc372..2f86b247e0 100644 --- a/utils/debug/charts/TileObjectChart.js +++ b/utils/debug/charts/TileObjectChart.js @@ -1,12 +1,13 @@ 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, @@ -14,14 +15,7 @@ export default function TileObjectsChart(chartId, tileLayer) { }, options: { animation: { duration: 10 }, - scales: { - yAxes: [{ - display: true, - ticks: { - suggestedMin: 0, // minimum will be 0, unless there is a lower value. - }, - }], - }, + scales, }, }); diff --git a/utils/debug/charts/TileVisibilityChart.js b/utils/debug/charts/TileVisibilityChart.js index a3c252ca42..b0b5bb0ac9 100644 --- a/utils/debug/charts/TileVisibilityChart.js +++ b/utils/debug/charts/TileVisibilityChart.js @@ -1,10 +1,11 @@ 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, @@ -12,24 +13,17 @@ export default function TileVisibilityChart(chartId, tileLayer) { { 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, }, });