@baidumap/mapv-three 1.0.0

package/dist/devtool/panel.js

@@ -0,0 +1,515 @@
+import * as dat from 'dat.gui';
+import * as THREE from 'three';
+let mapvthree = null;
+export const createGui = mt => {
+    mapvthree = mt;
+    return new dat.GUI();
+};
+
+function updateUrlParam(paramName, paramValue) {
+    // 创建 URL 对象解析当前页面地址‌:ml-citation{ref="3,4" data="citationList"}
+    const url = new URL(window.location.href);
+    // 通过 URLSearchParams 管理查询参数‌:ml-citation{ref="3,4" data="citationList"}
+    const searchParams = new URLSearchParams(url.search);
+    // 自动覆盖已有参数或添加新参数‌:ml-citation{ref="3,4" data="citationList"}
+    searchParams.set(paramName, paramValue);
+    // 重构完整URL(保留路径和哈希)‌:ml-citation{ref="3,4" data="citationList"}
+    const newSearch = searchParams.toString();
+    const newUrl = `${url.pathname}${newSearch ? '?' + newSearch : ''}${url.hash}`;
+    window.location.href = newUrl;
+}
+export const createEngineConfigs = (gui, engine) => {
+    const requestRender = () => engine.requestRender();
+    const rendering = engine.rendering;
+
+    const config = {
+        printStats: () => {
+            console.log(rendering.stats.printString());
+        },
+        forceLoseAndRestoreContext: () => {
+            engine.renderer.forceContextLoss();
+            setTimeout(() => {
+                engine.renderer.forceContextRestore();
+            }, 1000);
+        },
+        projection: '',
+    };
+
+    if (gui.__folders && Object.keys(gui.__folders).includes('rendering')) {
+        gui.removeFolder(gui.__folders.rendering);
+    }
+    const folderRendering = gui.addFolder('rendering');
+
+    const folderPrimary = folderRendering.addFolder('primary');
+    folderPrimary.add(rendering, 'useMrt').onChange(requestRender);
+    folderPrimary.add(rendering, 'useHighPrecisionBuffer').onChange(requestRender);
+    folderPrimary.add(rendering, 'autoOffsetRelativeCenter').onChange(requestRender);
+    folderPrimary.add(rendering, 'clampCameraNearFar').onChange(requestRender);
+    folderPrimary.add(rendering.renderer, 'outputColorSpace', ['srgb-linear', 'srgb']).onChange(requestRender);
+    folderPrimary.add(rendering.renderer, 'toneMapping', [
+        THREE.NoToneMapping,
+        THREE.LinearToneMapping,
+        THREE.ReinhardToneMapping,
+        THREE.CineonToneMapping,
+        THREE.ACESFilmicToneMapping,
+    ]).listen().onChange(v => {
+        rendering.renderer.toneMapping = parseInt(v, 10);
+    });
+    folderPrimary.add(engine.renderer, 'toneMappingExposure', 0.0, 10.0).listen().onChange(requestRender);
+    folderPrimary.add(rendering.main, 'useFastEmissiveMethod').onChange(requestRender);
+
+    const folderAnimation = folderRendering.addFolder('animation');
+    folderAnimation.add(rendering, 'enableAnimationLoop').onChange(requestRender);
+    folderAnimation.add(rendering, 'animationLoopFrameTime', 16, 1000).onChange(requestRender);
+
+    const folderFeatures = folderRendering.addFolder('features');
+
+    const folderAntialias = folderFeatures.addFolder('antialias');
+    folderAntialias.add(rendering.features.antialias, 'enabled').onChange(requestRender);
+    folderAntialias.add(rendering.features.antialias, 'method', ['msaa', 'fxaa', 'smaa', 'taa'])
+        .onChange(requestRender);
+
+    const folderAo = folderFeatures.addFolder('ao');
+    folderAo.add(rendering.features.ao, 'enabled').onChange(requestRender);
+    folderAo.add(rendering.features.ao, 'method', ['ssao', 'sao']).onChange(requestRender);
+    folderAo.add(rendering.features.ao, 'ssaoIntensity').onChange(requestRender);
+    folderAo.add(rendering.features.ao, 'ssaoMinDistance').onChange(requestRender);
+    folderAo.add(rendering.features.ao, 'ssaoMaxDistance').onChange(requestRender);
+    folderAo.add(rendering.features.ao, 'ssaoKernelRadius').onChange(requestRender);
+
+    const folderReflection = folderFeatures.addFolder('reflection');
+    folderReflection.add(rendering.features.reflection, 'enabled').onChange(requestRender);
+    folderReflection.add(rendering.features.reflection, 'method', ['ssr']).onChange(requestRender);
+
+    const folderShadow = folderFeatures.addFolder('shadow');
+    folderShadow.add(rendering.shadow, 'enabled').onChange(requestRender);
+    folderShadow.add(rendering.shadow, 'method', ['default', 'csm']).onChange(requestRender);
+    // folderShadow.add(rendering.shadow._csmShadow, 'shadowBias').onChange(requestRender);
+    // folderShadow.add(rendering.shadow._csmShadow, 'showHelper').onChange(requestRender);
+
+    const folderBloom = folderFeatures.addFolder('bloom');
+    folderBloom.add(rendering.bloom, 'enabled').onChange(requestRender);
+    folderBloom.add(rendering.bloom, 'strength', 0.0, 10.0).onChange(requestRender);
+    folderBloom.add(rendering.bloom, 'threshold', 0.0, 3.0, 0.05).onChange(requestRender);
+    folderBloom.add(rendering.bloom, 'radius', 0.0, 1.0).onChange(requestRender);
+
+    const folderColorAdjustment = folderFeatures.addFolder('colorAdjustment');
+    folderColorAdjustment.add(rendering.colorAdjustment, 'enabled').onChange(requestRender);
+    folderColorAdjustment.add(rendering.colorAdjustment, 'saturation', -1.0, 1.0, 0.05).onChange(requestRender);
+    folderColorAdjustment.add(rendering.colorAdjustment, 'brightness', -1.0, 1.0, 0.05).onChange(requestRender);
+    folderColorAdjustment.add(rendering.colorAdjustment, 'contrast', -1.0, 1.0, 0.05).onChange(requestRender);
+
+    const folderPicking = folderRendering.addFolder('picking');
+    folderPicking.add(rendering.picking, 'useDepthPicking').onChange(requestRender);
+
+    const folderHDR = folderFeatures.addFolder('hdr');
+    folderHDR.add(rendering.features.hdr, 'enabled').onChange(requestRender);
+    folderHDR.add(rendering.features.hdr, 'exposure', 0.0, 10.0).onChange(requestRender);
+
+    const folderMap = folderRendering.addFolder('map');
+    const map = engine.map;
+    if (map.map.isBlankMap) {
+        folderMap.add(map.map, 'far').onChange(requestRender);
+
+        folderMap.add(map.map.control, 'minPitch', 0, 180).onChange(requestRender);
+        folderMap.add(map.map.control, 'maxPitch', 0, 180).onChange(requestRender);
+        folderMap.add(map.map.control, 'zoomSpeed', 0, 0.02).onChange(requestRender);
+    }
+
+    const debugFolder = folderRendering.addFolder('debug');
+    debugFolder.add(rendering, 'debugMode', [0, 1, 2, 3, 4]).onChange(requestRender);
+    debugFolder.add(rendering, 'wireframe').onChange(requestRender);
+    const infoFolder = debugFolder.addFolder('info');
+    infoFolder.add(engine.rendering.renderer.info.render, 'frame').listen();
+    infoFolder.add(engine.rendering.renderer.info.memory, 'geometries').listen();
+    infoFolder.add(engine.rendering.renderer.info.memory, 'textures').listen();
+    infoFolder.add(engine.rendering.renderer.info.programs, 'length').name('programs').listen();
+    infoFolder.add(engine.rendering.renderer.info.render, 'lines').listen();
+    infoFolder.add(engine.rendering.renderer.info.render, 'points').listen();
+    infoFolder.add(engine.rendering.renderer.info.render, 'calls').listen();
+    infoFolder.add(engine.rendering.renderer.info.render, 'triangles').listen();
+
+    debugFolder.add(config, 'projection', [
+        'EPSG:3857',
+        'EPSG:4326',
+        'EPSG:4978',
+        'EPSG:8857',
+        'EPSG:32650',
+    ]).onChange(value => {
+        updateUrlParam('projection', value);
+    });
+
+    debugFolder.add(config, 'forceLoseAndRestoreContext');
+    debugFolder.add(config, 'printStats');
+    debugFolder.add(rendering, 'showCurrentViewFrustum');
+    debugFolder.add(rendering, 'removeCurrentViewFrustum');
+    debugFolder.add(rendering.features.stats, 'enabled').name('stats').onChange(requestRender);
+    debugFolder.add(rendering.features.bufferView, 'enabled').name('bufferView').onChange(requestRender);
+    debugFolder.add(rendering.features.bufferView, 'offset').name('bufferOffset').onChange(requestRender);
+
+    return folderRendering;
+};
+
+export const createSkyConfigs = (gui, engine) => {
+    const requestRender = () => engine.requestRender();
+    const sky = engine.rendering.sky;
+    if (!sky) {
+        return;
+    }
+    const config = {
+        groundColor: '#FFFFFF',
+    };
+    if (gui.__folders && Object.keys(gui.__folders).includes('sky')) {
+        gui.removeFolder(gui.__folders.sky);
+    }
+    const folderSky = gui.addFolder('sky');
+    folderSky.add(sky, 'time', 0, 86400).onChange(requestRender);
+    folderSky.add(sky, 'timeAnimation').onChange(requestRender);
+    folderSky.add(sky, 'timeAnimationSpeed', 0.1, 20).onChange(requestRender);
+    folderSky.add(sky, 'sunLightIntensity', 0.0, 100.0, 0.1).listen().onChange(requestRender);
+    folderSky.add(sky, 'skyLightIntensity', 0.0, 10.0).onChange(requestRender);
+    folderSky.add(sky, 'envLightIntensity').onChange(requestRender);
+    folderSky.add(sky, 'affectWorld').onChange(requestRender);
+
+    if (sky instanceof mapvthree.DynamicSky) {
+        // folderSky.add(sky, 'shaderIndex', [
+        //     0, 1, 2, 3,
+        // ]).onChange(requestRender);
+        folderSky.add(sky, 'clipUnderground').onChange(requestRender);
+        // folderSky.addColor(config, 'groundColor').onChange(value => {
+        //     sky.groundColor = new THREE.Color(value);
+        //     requestRender();
+        // });
+        // folderSky.add(sky, 'cloudIntensity', 0, 1.0).onChange(requestRender);
+        // folderSky.add(sky, 'rayleighFactor').onChange(requestRender);
+        // folderSky.add(sky, 'mieFactor').onChange(requestRender);
+        // folderSky.add(sky, 'miePhase').onChange(requestRender);
+        // folderSky.add(sky, 'dynamicCloud').onChange(requestRender);
+        folderSky.add(sky, 'enablePostPass').onChange(requestRender);
+        folderSky.add(sky, 'enableVolumetricClouds').onChange(requestRender);
+        folderSky.add(sky, 'useVolumetricClouds').onChange(requestRender);
+        folderSky.add(sky, 'cloudCoverage', 0, 1, 0.01).onChange(requestRender);
+        folderSky.add(sky, 'cloudDensity', 0, 1).onChange(requestRender);
+        folderSky.add(sky, 'cloudSpeed', 0, 100., 0.1).onChange(requestRender);
+        folderSky.add(sky, 'cloudShapeBaseScale').onChange(requestRender);
+        folderSky.add(sky, 'cloudShapeDetailScale').onChange(requestRender);
+        folderSky.add(sky, 'cloudMarchSteps').onChange(requestRender);
+        folderSky.add(sky, 'cloudSelfShadowSteps').onChange(requestRender);
+        // folderSky.add(sky, 'envMapType', [
+        //     1,
+        //     2,
+        // ]).onChange(requestRender);
+        // folderSky.add(sky, 'updateStaticEnvMap').onChange(requestRender);
+    }
+};
+
+export const createWeatherConfigs = (gui, engine) => {
+    const requestRender = () => engine.requestRender();
+    const weather = engine.rendering.weather;
+    // const config
+    if (gui.__folders && Object.keys(gui.__folders).includes('weather')) {
+        gui.removeFolder(gui.__folders.weather);
+    }
+    const folderWeather = gui.addFolder('weather');
+    folderWeather.add(weather, 'weather', [
+        'clear',
+        'partlyCloudy',
+        'cloudy',
+        'overcast',
+        'foggy',
+        'rainy',
+        'snowy',
+    ]).onChange(requestRender);
+
+    if (weather._sky.isDynamicSky || weather._sky.isDynamicSky) {
+        folderWeather.add(weather, 'cloudIntensity', 0.0, 3.0).listen().onChange(requestRender);
+        folderWeather.add(weather, 'mixGrayFactor', 0.0, 1.0).listen().onChange(requestRender);
+        // folderWeather.add(weather, 'sunIntensityScale', 0.0, 2.0).listen().onChange(requestRender);
+        folderWeather.add(weather, 'skyLightIntensity', 0.0, 2.0).listen().onChange(requestRender);
+        folderWeather.add(weather, 'coverageIntensity', 0.0, 2.0).listen().onChange(requestRender);
+    }
+};
+
+export const createCesium3DTilesConfigs = (gui, engine, tiles, name) => {
+    const requestRender = () => engine.requestRender();
+    if (gui.__folders && Object.keys(gui.__folders).includes(name || '3DTiles')) {
+        gui.removeFolder(gui.__folders[name || '3DTiles']);
+    }
+    const folderTiles = gui.addFolder(name || '3DTiles');
+    const config = {
+        zoomTo: () => {
+            engine.map.zoomTo(tiles);
+        },
+    };
+    folderTiles.add(config, 'zoomTo');
+    folderTiles.add(tiles, 'visible').onChange(requestRender);
+
+    const statsFolder = folderTiles.addFolder('Stats');
+    statsFolder.add(tiles.statistics, 'selected').listen();
+    statsFolder.add(tiles.statistics, 'numberOfLoadedTilesTotal').listen();
+    statsFolder.add(tiles.statistics, 'numberOfPendingRequests').listen();
+    statsFolder.add(tiles.statistics, 'numberOfTilesCulledWithChildrenUnion').listen();
+    statsFolder.add(tiles.statistics, 'numberOfTilesTotal').listen();
+    statsFolder.add(tiles.statistics, 'totalByteLength').listen();
+
+    const debugFolder = folderTiles.addFolder('Debug');
+    debugFolder.add(tiles, 'debug').onChange(requestRender);
+    debugFolder.add(tiles, 'displayBoxBounds').onChange(requestRender);
+    debugFolder.add(tiles, 'displayRegionBounds').onChange(requestRender);
+};
+
+export const create3DTilesConfigs = (gui, engine, tiles, name) => {
+    const requestRender = () => engine.requestRender();
+    if (gui.__folders && Object.keys(gui.__folders).includes(name || '3DTiles')) {
+        gui.removeFolder(gui.__folders[name || '3DTiles']);
+    }
+    const folderTiles = gui.addFolder(name || '3DTiles');
+    const config = {
+        material: 'realistic',
+        zoomTo: () => {
+            engine.map.zoomTo(tiles);
+        },
+    };
+    folderTiles.add(config, 'zoomTo');
+    folderTiles.add(tiles, 'visible').onChange(requestRender);
+    folderTiles.add(config, 'material', [
+        'default',
+        'realistic',
+        'identity',
+        'wireframe',
+        'randomColor',
+    ]).onChange(value => {
+        if (value === 'realistic') {
+            tiles.materialManager = new mapvthree.Realistic3DTilesMaterialManager();
+        }
+        else if (value === 'wireframe') {
+            tiles.materialManager = new mapvthree.Wireframe3DTilesMaterialManager();
+        }
+        else if (value === 'identity') {
+            tiles.materialManager = new mapvthree.Identity3DTilesMaterialManager();
+        }
+        else if (value === 'randomColor') {
+            tiles.materialManager = new mapvthree.RandomColor3DTilesMaterialManager();
+        }
+        else {
+            tiles.materialManager = null;
+        }
+        requestRender();
+    });
+
+    // folderTiles.add(tiles, 'identityType', [
+    //     1,
+    //     2,
+    // ]).onChange(requestRender);
+
+    if (tiles.materialManager && tiles.materialManager.isRealistic3DTilesMaterialManager) {
+        folderTiles.add(tiles.materialManager, 'autoTimingLight').onChange(requestRender);
+        folderTiles.add(tiles.materialManager, 'nightLightDensity', 0, 1).onChange(requestRender);
+    }
+
+    folderTiles.add(tiles, 'castShadow').onChange(requestRender);
+    folderTiles.add(tiles, 'receiveShadow').onChange(requestRender);
+    folderTiles.add(tiles, 'raycastMethod', [0, 1, 2]).onChange(requestRender);
+    folderTiles.add(tiles, 'forceUnlit').onChange(requestRender);
+
+    if (tiles.isHDMap3DTiles) {
+        const editFolder = folderTiles.addFolder('Edit');
+        editFolder.add(tiles.edit, 'enabled').onChange(requestRender);
+    }
+
+    const instanceFolder = folderTiles.addFolder('Instance');
+    // instanceFolder.add(tiles.instancedElementManager, 'treeEnabled').onChange(requestRender);
+    // instanceFolder.add(tiles.instancedElementManager, 'labelEnabled').onChange(requestRender);
+
+    const debugFolder = folderTiles.addFolder('Debug');
+    debugFolder.add(tiles, 'freezeUpdate').onChange(requestRender);
+    // debugFolder.add(tiles, 'viewFar').onChange(requestRender);
+    debugFolder.add(tiles, 'loadSiblings').onChange(requestRender);
+    // debugFolder.add(tiles, 'displayActiveTiles').onChange(requestRender);
+    // debugFolder.add(tiles, 'autoDisableRendererCulling').onChange(requestRender);
+    debugFolder.add(tiles, 'errorTarget').onChange(requestRender);
+    debugFolder.add(tiles, 'showDebug').onChange(requestRender);
+    // debugFolder.add(tiles, 'checkIntersectByBox').onChange(requestRender);
+    debugFolder.add(tiles, 'lockCameraViewport').onChange(requestRender);
+    debugFolder.add(tiles, 'releaseCameraViewport').onChange(requestRender);
+    // debugFolder.add(tiles, 'enabledSchedule').onChange(requestRender);
+    // debugFolder.add(tiles, 'deferOutSideFrustum').onChange(requestRender);
+    // debugFolder.add(tiles, 'deferLoadDepth').onChange(requestRender);
+    debugFolder.add(tiles, 'cullWithChildrenBounds').onChange(requestRender);
+    debugFolder.add(tiles, 'cullRequestsWhileMoving').onChange(requestRender);
+    debugFolder.add(tiles, 'cullRequestsWhileMovingMultiplier').onChange(requestRender);
+    debugFolder.add(tiles, 'dynamicScreenSpaceError').onChange(requestRender);
+    debugFolder.add(tiles, 'dynamicScreenSpaceErrorFactor').onChange(requestRender);
+    debugFolder.add(tiles, 'dynamicScreenSpaceErrorHeightFalloff').onChange(requestRender);
+    debugFolder.add(tiles, 'dynamicScreenSpaceHeightScale').onChange(requestRender);
+    debugFolder.add(tiles, 'dynamicScreenSpaceErrorDensity').onChange(requestRender);
+    debugFolder.add(tiles, 'foveatedScreenSpaceError').onChange(requestRender);
+    debugFolder.add(tiles, 'foveatedConeSize').onChange(requestRender);
+    // debugFolder.add(tiles, 'cacheDepth').onChange(requestRender);
+    // debugFolder.add(tiles, 'maxCacheChildren').onChange(requestRender);
+
+    return folderTiles;
+};
+
+
+export const createWaterConfigs = (gui, engine, waterMaterial, name = 'water') => {
+    const config = {
+        sunColor: '#ffffff',
+        waterColor: '#001e0f',
+        reflectionColor: '#001e0f',
+        finalColor: '#bfd9ff',
+    };
+    const requestRender = () => engine.requestRender();
+    if (gui.__folders && Object.keys(gui.__folders).includes(name)) {
+        gui.removeFolder(gui.__folders[name]);
+    }
+    const folderWater = gui.addFolder(name);
+    folderWater.add(waterMaterial, 'autoScale').onChange(requestRender);
+    folderWater.add(waterMaterial, 'size').onChange(requestRender);
+    folderWater.add(waterMaterial, 'distortionScale').onChange(requestRender);
+    folderWater.add(waterMaterial, 'timeScaleFactor').onChange(requestRender);
+    folderWater.add(waterMaterial, 'alpha').onChange(requestRender);
+    folderWater.addColor(config, 'sunColor').onChange(value => {
+        waterMaterial.uniforms.sunColor.value.set(value);
+        requestRender();
+    });
+    folderWater.addColor(config, 'waterColor').onChange(value => {
+        waterMaterial.uniforms.waterColor.value.set(value);
+        requestRender();
+    });
+    folderWater.addColor(config, 'reflectionColor').onChange(value => {
+        waterMaterial.uniforms.reflectionColor.value.set(value);
+        requestRender();
+    });
+    folderWater.addColor(config, 'finalColor').onChange(value => {
+        waterMaterial.uniforms.finalColor.value.set(value);
+        requestRender();
+    });
+    folderWater.add(waterMaterial, 'style', ['river', 'lake', 'ocean']).onChange(requestRender);
+};
+
+export const createHeightMaterialConfigs = (gui, engine, material, name = 'heightMaterial') => {
+    const requestRender = () => engine.requestRender();
+
+    if (gui.__folders && Object.keys(gui.__folders).includes(name)) {
+        gui.removeFolder(gui.__folders[name]);
+    }
+    const folderWater = gui.addFolder(name);
+
+    folderWater.add(material, 'minAltitude').onChange(requestRender);
+    folderWater.add(material, 'maxAltitude').onChange(requestRender);
+    folderWater.add(material, 'noiseUvScale').onChange(requestRender);
+    folderWater.add(material, 'noiseScale').onChange(requestRender);
+    folderWater.add(material, 'noiseBais').onChange(requestRender);
+};
+
+export const createTerrainConfigs = (gui, engine, terrain, name = 'terrain') => {
+    const requestRender = () => engine.requestRender();
+    const folderTerrain = gui.addFolder(name);
+
+    folderTerrain.add(terrain, 'visible').onChange(requestRender);
+    folderTerrain.add(terrain.mapView.lod, 'lodOffset').onChange(requestRender);
+
+    if (terrain.mapView.overrideMaterial && terrain.mapView.overrideMaterial.isMeshHeightMaterial) {
+        createHeightMaterialConfigs(folderTerrain, engine, terrain.mapView.overrideMaterial);
+    }
+    return folderTerrain;
+};
+
+
+export const createQuadMapConfigs = (gui, engine, quadMap) => {
+    const requestRender = () => engine.requestRender();
+    if (gui.__folders && Object.keys(gui.__folders).includes('QuadMap')) {
+        gui.removeFolder(gui.__folders.QuadMap);
+    }
+    const folderQuadMap = gui.addFolder('QuadMap');
+    folderQuadMap.add(quadMap, 'visible').onChange(requestRender);
+    folderQuadMap.add(quadMap, 'lodScaleFactor').onChange(requestRender);
+    folderQuadMap.add(quadMap, 'cameraFarRatio').onChange(requestRender);
+
+    // const tileManagerFolder = folderQuadMap.addFolder('TileManager');
+    // tileManagerFolder.add(quadMap.tileManager, 'maxDisplaySize').onChange(requestRender);
+    // tileManagerFolder.add(quadMap.tileManager, 'displayTileAfterAllSiblingsReady').onChange(requestRender);
+    // tileManagerFolder.add(quadMap.tileManager, 'displayParentTileWhileNotAllSiblingsReady').onChange(requestRender);
+    // tileManagerFolder.add(quadMap.tileManager, 'maxCacheSize').onChange(requestRender);
+
+    // const debugFolder = folderQuadMap.addFolder('Debug');
+    // debugFolder.add(quadMap, 'freezeUpdate').onChange(requestRender);
+    // debugFolder.add(quadMap, 'showDebugGrid').onChange(requestRender);
+
+    // const infoFolder = folderQuadMap.addFolder('info');
+    // infoFolder.add(quadMap.statistics, 'visited').listen();
+    // infoFolder.add(quadMap.statistics, 'selected').listen();
+    // infoFolder.add(quadMap.statistics, 'rendered').listen();
+
+    return folderQuadMap;
+};
+
+export const createMapViewConfigs = (gui, engine, mapView) => {
+    const requestRender = () => engine.requestRender();
+    if (gui.__folders && Object.keys(gui.__folders).includes('MapView')) {
+        gui.removeFolder(gui.__folders.MapView);
+    }
+    const folderMapView = gui.addFolder('MapView');
+    folderMapView.add(mapView, 'visible').onChange(requestRender);
+    // folderMapView.add(mapView, 'printSurfacesStatistics');
+
+    const debugFolder = folderMapView.addFolder('Debug');
+    debugFolder.add(mapView, 'freezeUpdate').onChange(requestRender);
+    debugFolder.add(mapView, 'printSurfacesStatistics').onChange(requestRender);
+    debugFolder.add(mapView, 'showCameraFrustum').onChange(requestRender);
+    debugFolder.add(mapView, 'destroyCameraHelper').onChange(requestRender);
+
+    const surfaces = mapView.surfaces;
+    for (let i = 0; i < surfaces.length; i++) {
+        const surface = surfaces[i];
+        const surfaceFolder = folderMapView.addFolder(`Surface ${i}`);
+        surfaceFolder.add(surface, 'visible').onChange(requestRender);
+        surfaceFolder.add(surface, 'freezeUpdate').onChange(requestRender);
+        surfaceFolder.add(surface, 'loadSiblings').onChange(requestRender);
+        surfaceFolder.add(surface, 'showTileBoundingBox').onChange(requestRender);
+        surfaceFolder.add(surface, 'showTileDebugLabel').onChange(requestRender);
+        surfaceFolder.add(surface, 'enableHorizonCulling').onChange(requestRender);
+        surfaceFolder.add(surface, '_lodScaleFactor').onChange(requestRender);
+        surfaceFolder.add(surface, 'sseFactor').onChange(requestRender);
+        surfaceFolder.add(surface, 'showLoadLogInOneFrame').onChange(requestRender);
+        surfaceFolder.add(surface, 'showGroundWireframe').onChange(requestRender);
+        surfaceFolder.add(surface.statistics, 'visited').listen();
+        surfaceFolder.add(surface.statistics, 'used').listen();
+        surfaceFolder.add(surface.statistics, 'rendered').listen();
+        surfaceFolder.add(surface.statistics, 'request').listen();
+        surfaceFolder.add(surface.tileManager, 'pendingCount').listen();
+
+        if (surface.isMapVectorSurface) {
+            const vectorSurface = surface;
+            const vectorSurfaceFolder = surfaceFolder.addFolder('VectorSurface');
+
+        }
+        else if (surface.isMapRasterSurface) {
+            const rasterSurface = surface;
+            const terrainProvider = rasterSurface.terrainProvider;
+            if (terrainProvider) {
+                const terrainProviderFolder = surfaceFolder.addFolder('TerrainProvider');
+                terrainProviderFolder.add(terrainProvider, 'maxParallelRequestNum').onChange(requestRender);
+                terrainProviderFolder.add(terrainProvider, 'cacheMaxSize').onChange(requestRender);
+                terrainProviderFolder.add(terrainProvider, 'enablePeriodRequestLog').onChange(requestRender);
+
+            }
+            const imageryProviders = rasterSurface.imageryProviders;
+            for (let i = 0, last = imageryProviders.length; i < last; i++) {
+                const imageryProvider = imageryProviders[i];
+                const imageryProviderFolder = surfaceFolder.addFolder(`ImageryProvider_${i}`);
+                imageryProviderFolder.add(imageryProvider, 'opacity').onChange(requestRender);
+                imageryProviderFolder.add(imageryProvider, 'randomColorTint').onChange(requestRender);
+                imageryProviderFolder.add(imageryProvider, 'maxParallelRequestNum').onChange(requestRender);
+                imageryProviderFolder.add(imageryProvider, 'cacheMaxSize').onChange(requestRender);
+                imageryProviderFolder.add(imageryProvider, 'enablePeriodRequestLog').onChange(requestRender);
+                imageryProviderFolder.add(imageryProvider.statistics, 'loading').listen();
+                imageryProviderFolder.add(imageryProvider.statistics, 'cached').listen();
+            }
+
+        }
+    }
+
+    return folderMapView;
+};