PB-2234: disable custom Cesium post-processing

eslint.config.mjs

@@ -6,7 +6,7 @@ import {
     defineConfigWithVueTs,
     vueTsConfigs,
 } from '@vue/eslint-config-typescript'
-import pluginCypress from 'eslint-plugin-cypress/flat'
+import pluginCypress from 'eslint-plugin-cypress'
 import mocha from 'eslint-plugin-mocha'
 import perfectionist from 'eslint-plugin-perfectionist'
 import pluginVue from 'eslint-plugin-vue'
@@ -70,7 +70,7 @@ export default defineConfigWithVueTs(
                 { type: 'alphabetical', internalPattern: ['^@/.*'] },
             ],
             'vue/html-indent': ['error', 4],
-            'no-useless-assignment': 'off'
+            'no-useless-assignment': 'off',
         },
     },
     {

packages/mapviewer/src/modules/map/components/cesium/CesiumInteractions.vue

@@ -1,15 +1,8 @@
 <script setup>
 import { WEBMERCATOR, WGS84 } from '@geoadmin/coordinates'
 import log from '@geoadmin/log'
-import { bbox } from '@turf/turf'
-import { centroid } from '@turf/turf'
-import {
-    Cartesian2,
-    Cartographic,
-    Math,
-    PostProcessStageLibrary,
-    ScreenSpaceEventType,
-} from 'cesium'
+import { bbox, centroid } from '@turf/turf'
+import { Cartographic, Math, PostProcessStageLibrary, ScreenSpaceEventType } from 'cesium'
 import GeoJSON from 'ol/format/GeoJSON'
 import { LineString, Point, Polygon } from 'ol/geom'
 import proj4 from 'proj4'
@@ -107,19 +100,22 @@ function initialize3dHighlights() {
     clickedHighlightPostProcessor.uniforms.length = 0
     clickedHighlightPostProcessor.selected = []
 }
-function getCoordinateAtScreenCoordinate(x, y) {
-    const cartesian = getViewer()?.scene.pickPosition(new Cartesian2(x, y))
-    let coordinates = []
+
+/**
+ * @param {Cartesian2} position
+ * @returns {SingleCoordinate | undefined}
+ */
+function getCoordinateAtScreenCoordinate(position) {
+    const cartesian = getViewer()?.scene.pickPosition(position)
     if (cartesian) {
         const cartCoords = Cartographic.fromCartesian(cartesian)
-        coordinates = proj4(WGS84.epsg, projection.value.epsg, [
+        return proj4(WGS84.epsg, projection.value.epsg, [
             (cartCoords.longitude * 180) / Math.PI,
             (cartCoords.latitude * 180) / Math.PI,
         ])
-    } else {
-        log.error('no coordinate found at this screen coordinates', [x, y])
     }
-    return coordinates
+    log.error('no coordinate found at this screen coordinates', position)
+    return undefined
 }
 
 function getlayerIdFrom3dFeature(feature) {
@@ -182,7 +178,7 @@ function onClick(event) {
     const viewer = getViewer()
     unhighlightGroup(viewer)
     const features = []
-    let coordinates = getCoordinateAtScreenCoordinate(event.position.x, event.position.y)
+    let coordinates = getCoordinateAtScreenCoordinate(event.position)
 
     const objects = viewer.scene.drillPick(event.position)
 
@@ -228,7 +224,7 @@ function onClick(event) {
 
     handleClickHighlight(features, coordinates)
 
-    if (!coordinates.length && features.length) {
+    if (!coordinates && features.length) {
         const featureCoords = Array.isArray(features[0].coordinates[0])
             ? features[0].coordinates[0]
             : features[0].coordinates
@@ -313,10 +309,9 @@ function create3dKmlFeature(viewer, kmlFeature, kmlLayer) {
 }
 
 function onContextMenu(event) {
-    const coordinates = getCoordinateAtScreenCoordinate(event.position.x, event.position.y)
     store.dispatch('click', {
         clickInfo: new ClickInfo({
-            coordinate: coordinates,
+            coordinate: getCoordinateAtScreenCoordinate(event.position),
             pixelCoordinate: [event.position.x, event.position.y],
             clickType: ClickType.CONTEXTMENU,
         }),

packages/mapviewer/src/modules/map/components/cesium/CesiumMap.vue

@@ -2,13 +2,7 @@
 import '@geoblocks/cesium-compass'
 import { WEBMERCATOR } from '@geoadmin/coordinates'
 import log from '@geoadmin/log'
-import {
-    CesiumTerrainProvider,
-    Color,
-    PostProcessStageCollection,
-    ShadowMode,
-    Viewer,
-} from 'cesium'
+import { CesiumTerrainProvider, Color, ShadowMode, Viewer } from 'cesium'
 import {
     computed,
     onBeforeMount,
@@ -123,11 +117,7 @@ async function createViewer() {
     scene.pickTranslucentDepth = true
     scene.backgroundColor = Color.TRANSPARENT
 
-    const postProcessStages = new PostProcessStageCollection()
-    postProcessStages.ambientOcclusion.enabled = true
-    postProcessStages.bloom.enabled = false
-    postProcessStages.fxaa.enabled = true
-    scene.postProcessStages = postProcessStages
+    // no custom post-processing since Cesium >1.119.0, as it creates visual artifacts on the terrain
 
     const globe = scene.globe
     globe.baseColor = Color.WHITE
@@ -175,7 +165,7 @@ provide('getViewer', () => viewer)
             <cesium-compass
                 v-show="isDesktopMode"
                 ref="compassElement"
-                class="position-absolute start-50 translate-middle-x cesium-compass"
+                class="position-absolute translate-middle-x cesium-compass start-50"
             />
         </template>
     </div>

packages/mapviewer/src/modules/map/components/cesium/CesiumVectorLayer.vue

@@ -3,6 +3,7 @@ import { Cesium3DTileset } from 'cesium'
 import { computed, inject, toRef } from 'vue'
 
 import GeoAdmin3DLayer from '@/api/layers/GeoAdmin3DLayer.class'
+import { CESIUM_BUILDING_LAYER_ID, CESIUM_LABELS_LAYER_ID } from '@/config/cesium.config'
 import useAddPrimitiveLayer from '@/modules/map/components/cesium/utils/useAddPrimitiveLayer.composable'
 
 const { layerConfig } = defineProps({
@@ -30,9 +31,17 @@ const url = computed(() => {
     return `${baseUrl.value}${rootFolder}${layerId.value}${timeFolder}/tileset.json`
 })
 
-useAddPrimitiveLayer(getViewer(), Cesium3DTileset.fromUrl(url.value), toRef(opacity), {
-    withEnhancedLabelStyle: layerId.value === 'ch.swisstopo.swissnames3d.3d',
-})
+useAddPrimitiveLayer(
+    getViewer(),
+    Cesium3DTileset.fromUrl(url.value, {
+        // with default value 16 we do not load a lot of building tiles (leading to gaps)
+        maximumScreenSpaceError: layerId.value === CESIUM_BUILDING_LAYER_ID ? 10 : 16,
+    }),
+    toRef(opacity),
+    {
+        withEnhancedLabelStyle: layerId.value === CESIUM_LABELS_LAYER_ID,
+    }
+)
 </script>
 
 <template>

packages/mapviewer/src/store/modules/cesium.store.js

@@ -68,7 +68,7 @@ export default {
          */
         showConstructions: true,
         /**
-         * Flag telling if the 3D viewer should show the labels ()
+         * Flag telling if the 3D viewer should show the labels (ch.swisstopo.swissnames3d.3d)
          *
          * @type Boolean
          */

packages/mapviewer/tests/cypress/tests-e2e/3d/click.cy.js

@@ -18,7 +18,7 @@ describe('Testing click', () => {
             sr: WEBMERCATOR.epsgNumber,
         })
         cy.waitUntilCesiumTilesLoaded()
-        cy.get('[data-cy="cesium-map"] .cesium-viewer').click()
+        cy.get('[data-cy="cesium-map"]').click()
         cy.readStoreValue('state.map.clickInfo').then((clickInfo) => {
             expect(clickInfo.clickType).to.equal(
                 ClickType.LEFT_SINGLECLICK,

packages/mapviewer/tests/cypress/tests-e2e/3d/featureSelection.cy.js

@@ -12,19 +12,16 @@ function expectLayerCountToBe(viewer, layerCount) {
 }
 describe('Testing the feature selection in 3D', () => {
     context('Feature identification on the cesium map', () => {
-        it('can select a KML feature', () => {
-            const FEATURE_COUNT = 11
-            // Import KML file
-            cy.log('Importing KML file')
-            const fileName = 'external-kml-file.kml'
-            const localKmlFile = `import-tool/${fileName}`
+        it('can select features in a WMS and a KML', () => {
             cy.goToMapView({
                 '3d': true,
                 layers: 'test.wms.layer',
             })
             cy.waitUntilCesiumTilesLoaded()
 
-
+            cy.log('Importing KML file')
+            const fileName = 'external-kml-file.kml'
+            const localKmlFile = `import-tool/${fileName}`
             cy.openMenuIfMobile()
             cy.get('[data-cy="menu-tray-tool-section"]:visible').click()
             cy.get('[data-cy="menu-advanced-tools-import-file"]:visible').click()
@@ -40,21 +37,26 @@ describe('Testing the feature selection in 3D', () => {
 
             cy.get('[data-cy="file-input-text"]').should('contain.value', fileName)
             cy.get('[data-cy="import-file-close-button"]:visible').click()
-            cy.readStoreValue('state.layers.activeLayers.length').should('eq', 2)
-            cy.readStoreValue('getters.visibleLayers.length').should('eq', 2)
-
             cy.closeMenuIfMobile()
 
             cy.log('Verifying that the KML layer is loaded')
-            cy.readWindowValue('cesiumViewer').then((viewer) => {
+            cy.readStoreValue('state.layers.activeLayers.length').should('eq', 2)
+            cy.readStoreValue('getters.visibleLayers.length').should('eq', 2)
+
+            cy.readWindowValue('cesiumViewer').should((viewer) => {
                 expectLayerCountToBe(viewer, 2)
                 expect(viewer.dataSources.length).to.eq(1)
                 const kmlLayer = viewer.dataSources.get(0)
                 expect(kmlLayer.show).to.eq(true)
             })
+            // The KML has not been centered on the view yet, and I could not find an event or anything like that to wait upon.
+            // So we wait for an arbitrary amount of time here.
+            // eslint-disable-next-line cypress/no-unnecessary-waiting
+            cy.wait(2500)
 
             cy.log('Selecting a feature')
-            cy.get('[data-cy="cesium-map"] .cesium-viewer').click(160, 270)
+            const FEATURE_COUNT = 11
+            cy.get('[data-cy="cesium-map"]').click(160, 270)
             cy.wait('@identify')
             cy.wait(`@htmlPopup`)
             cy.get('[data-cy="highlighted-features"]')