Shadow Simulation Addon

apps/geoportal/public/data/wuppertal-mesh-2024.three-tiles.style.json

@@ -0,0 +1,28 @@
+{
+  "version": 8,
+  "name": "Wuppertal Mesh 2024",
+  "sources": {},
+  "layers": [],
+  "metadata": {
+    "carmaConf": {
+      "instant": true,
+      "layerInfo": {
+        "title": "Wuppertal Mesh 2024",
+        "description": "3D-Tiles-Mesh mit Clay-Material für die gemeinsame Three.js-Szene",
+        "keywords": []
+      },
+      "threeTiles": {
+        "url": "https://wupp-3d-data.cismet.de/mesh2024/tileset.json",
+        "origin": [7.15, 51.256],
+        "shader": {
+          "kind": "clay",
+          "color": "#d8d1c4",
+          "roughness": 0.92,
+          "metalness": 0
+        },
+        "errorTarget": 8,
+        "requestConcurrency": 2
+      }
+    }
+  }
+}

apps/geoportal/src/app/App.tsx

@@ -66,6 +66,7 @@ import { useManageLayers } from "./hooks/useManageLayers";
 import { useSyncToken } from "./hooks/useSyncToken";
 import { useKeyboardShortcuts } from "./hooks/useKeyboardShortcuts";
 import { useMeasurementLayerButton } from "./hooks/useMeasurementLayerButton";
+import { useShadowSimulationLayerButton } from "./hooks/useShadowSimulationLayerButton";
 import { useGeoportalAppSearchParams } from "./hooks/use-geoportal-app-search-params";
 import { useAdhocFeatureRehydrate } from "./hooks/use-adhoc-feature-rehydrate";
 
@@ -174,6 +175,11 @@ function MeasurementLayerSyncInner() {
   return null;
 }
 
+function ShadowSimulationLayerSyncInner() {
+  useShadowSimulationLayerButton();
+  return null;
+}
+
 function GeoportalAppSearchParamsIntegration() {
   useGeoportalAppSearchParams();
   return null;
@@ -276,6 +282,7 @@ function App({
                   >
                     <AnnotationProvider>
                       <MeasurementLayerSyncInner />
+                      <ShadowSimulationLayerSyncInner />
                       <ErrorBoundary FallbackComponent={AppErrorFallback}>
                         <AdhocFeatureRehydration />
                         <div className={TAILWIND_CLASSNAMES_FULLSCREEN_FIXED}>

apps/geoportal/src/app/components/GeoportalMap/geoportalBackgroundToLibreLayers.spec.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+
+import type { BackgroundLayer } from "@carma-mapping/layers";
+
+import { geoportalBackgroundToLibreLayers } from "./geoportalBackgroundToLibreLayers";
+
+const background = {
+  id: "karte",
+  title: "Stadtplan",
+  visible: true,
+  opacity: 0.8,
+  layers: "rvrGrundriss@100|amtlich@90|rvrSchriftNT@100",
+} as BackgroundLayer;
+
+describe("Geoportal shaded terrain background composition", () => {
+  it("replaces raster-labelled bases with a separable vector basemap", () => {
+    const layers = geoportalBackgroundToLibreLayers(
+      background,
+      {
+        amtlich: {
+          type: "tiles",
+          url: "https://example.test/city-map/{z}/{x}/{y}.png",
+        },
+        rvrGrundriss: {
+          type: "wmts",
+          url: "https://example.test/opaque-ground-plan",
+          layers: "ground-plan",
+        },
+        rvrSchriftNT: {
+          type: "wmts-nt",
+          url: "https://example.test/labels",
+          layers: "labels",
+          transparent: true,
+        },
+        basemap_relief: {
+          type: "vector",
+          style: "https://example.test/vector-basemap.json",
+        },
+      },
+      { shadowTerrainActive: true }
+    );
+
+    expect(layers).toHaveLength(1);
+    expect(
+      layers.some(
+        (layer) => "layers" in layer && layer.layers === "ground-plan"
+      )
+    ).toBe(false);
+    expect(layers).toEqual([
+      expect.objectContaining({
+        type: "vector",
+        name: "bg-basemap_relief",
+        style: "https://example.test/vector-basemap.json",
+        opacity: 0.8,
+      }),
+    ]);
+  });
+
+  it("keeps the authored background unchanged without shaded terrain", () => {
+    const layers = geoportalBackgroundToLibreLayers(background, {
+      amtlich: {
+        type: "tiles",
+        url: "https://example.test/city-map/{z}/{x}/{y}.png",
+      },
+      rvrGrundriss: {
+        type: "wmts",
+        url: "https://example.test/opaque-ground-plan",
+        layers: "ground-plan",
+      },
+      rvrSchriftNT: {
+        type: "wmts-nt",
+        url: "https://example.test/labels",
+        layers: "labels",
+        transparent: true,
+      },
+      basemap_relief: {
+        type: "vector",
+        style: "https://example.test/vector-basemap.json",
+      },
+    });
+
+    expect(layers).toHaveLength(3);
+    expect(
+      layers.some(
+        (layer) => "layers" in layer && layer.layers === "ground-plan"
+      )
+    ).toBe(true);
+  });
+});

apps/geoportal/src/app/components/GeoportalMap/geoportalBackgroundToLibreLayers.ts

@@ -13,6 +13,23 @@ type NamedLayerConfig = {
   maxNativeZoom?: number;
 };
 
+type GeoportalBackgroundLibreOptions = {
+  terrainMeshActive?: boolean;
+  shadowTerrainActive?: boolean;
+};
+
+// Raster bases bake place names into their ground pixels. Shaded terrain uses
+// the existing vector basemap instead so its ground can be projected while
+// point-based place names remain a separate symbol pass above Three.
+const TERRAIN_MESH_OVERLAY_LAYERS = "basemap_relief@100";
+const TERRAIN_MESH_REPLACED_LAYER_NAMES = new Set([
+  "amtlich",
+  "amtlichBasiskarte",
+  "rvrGrundriss",
+  "rvrSchriftNT",
+  "basemap_relief",
+]);
+
 const isTransparent = (value: unknown): boolean => {
   if (typeof value === "boolean") return value;
   if (typeof value === "string") return value.toLowerCase() === "true";
@@ -21,7 +38,8 @@ const isTransparent = (value: unknown): boolean => {
 
 export const geoportalBackgroundToLibreLayers = (
   backgroundLayer: BackgroundLayer | null | undefined,
-  extraNamedLayers?: Record<string, NamedLayerConfig>
+  extraNamedLayers?: Record<string, NamedLayerConfig>,
+  options: GeoportalBackgroundLibreOptions = {}
 ): LibreLayer[] => {
   if (!backgroundLayer || !backgroundLayer.visible) {
     return [];
@@ -34,11 +52,24 @@ export const geoportalBackgroundToLibreLayers = (
     ...extraNamedLayers,
   };
   const layerOpacity = backgroundLayer.opacity ?? 1;
+  const separateLocationLabels =
+    options.terrainMeshActive === true || options.shadowTerrainActive === true;
   // All named layers of a background spec belong to the single background
   // button, so they share one id and their loading states aggregate.
   const carmaLayerId = backgroundLayer.id;
 
-  for (const spec of backgroundLayer.layers.split("|")) {
+  const originalLayerSpecs = backgroundLayer.layers
+    .split("|")
+    .filter(
+      (spec) =>
+        !separateLocationLabels ||
+        !TERRAIN_MESH_REPLACED_LAYER_NAMES.has(spec.split("@")[0])
+    );
+  const layerSpecs = separateLocationLabels
+    ? [...originalLayerSpecs, ...TERRAIN_MESH_OVERLAY_LAYERS.split("|")]
+    : originalLayerSpecs;
+
+  for (const spec of layerSpecs) {
     const [name, opacityStr] = spec.split("@");
     const cfg = namedLayers[name];
     if (!cfg) {

apps/geoportal/src/app/components/GeoportalMap/geoportalLayersToLibreLayers.spec.ts

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+
+import type { Layer } from "@carma-mapping/layers";
+
+import {
+  geoportalLayersToLibreLayers,
+  layerProvidesTerrainMesh,
+  parseThreeTilesLayer,
+} from "./geoportalLayersToLibreLayers";
+
+const buildLayer = (threeTiles: unknown): Layer =>
+  ({
+    id: "custom:mesh-2024",
+    title: "Wuppertal Mesh 2024",
+    visible: true,
+    opacity: 0.75,
+    layerType: "vector",
+    conf: { threeTiles },
+    props: { style: { version: 8, sources: {}, layers: [] } },
+  } as unknown as Layer);
+
+describe("Geoportal 3D Tiles layer conversion", () => {
+  it("maps a declared clay shader into the shared Three.js layer contract", () => {
+    const layer = buildLayer({
+      url: "https://example.test/tileset.json",
+      origin: [7.15, 51.256],
+      shader: {
+        kind: "clay",
+        color: "#d8d1c4",
+        roughness: 0.92,
+        metalness: 0,
+      },
+      errorTarget: 8,
+      requestConcurrency: 2,
+    });
+
+    expect(geoportalLayersToLibreLayers([layer])).toEqual([
+      {
+        type: "three-tiles",
+        name: "Wuppertal Mesh 2024",
+        carmaLayerId: "custom:mesh-2024",
+        url: "https://example.test/tileset.json",
+        origin: [7.15, 51.256],
+        shader: {
+          kind: "clay",
+          color: "#d8d1c4",
+          roughness: 0.92,
+          metalness: 0,
+        },
+        errorTarget: 8,
+        requestConcurrency: 2,
+        opacity: 0.75,
+      },
+    ]);
+  });
+
+  it("rejects unknown shader contracts", () => {
+    expect(
+      parseThreeTilesLayer(
+        buildLayer({
+          url: "https://example.test/tileset.json",
+          shader: { kind: "custom-glsl", color: "#fff" },
+        })
+      )
+    ).toBeNull();
+  });
+
+  it("recognizes the remote photogrammetry mesh before its style is fetched", () => {
+    const layer = {
+      id: "mesh-2024",
+      title: "3D-MeshX 2024",
+      visible: true,
+      layerType: "vector",
+      props: {
+        style: "https://tiles.cismet.de/lod2/mesh2024.style.json",
+      },
+    } as Layer;
+
+    expect(layerProvidesTerrainMesh(layer)).toBe(true);
+    expect(layerProvidesTerrainMesh({ ...layer, visible: false })).toBe(false);
+  });
+
+  it("recognizes inline mesh metadata and direct terrain mesh declarations", () => {
+    const taggedLayer = {
+      id: "inline-mesh",
+      visible: true,
+      props: {
+        style: {
+          version: 8,
+          metadata: {
+            carmaConf: { layerInfo: { tags: ["Basis", "Mesh"] } },
+          },
+          sources: {},
+          layers: [],
+        },
+      },
+    } as unknown as Layer;
+    const directLayer = {
+      id: "direct-mesh",
+      visible: true,
+      conf: { threeTiles: { providesTerrain: true } },
+    } as unknown as Layer;
+
+    expect(layerProvidesTerrainMesh(taggedLayer)).toBe(true);
+    expect(layerProvidesTerrainMesh(directLayer)).toBe(true);
+  });
+});