feat(web): visualizer supports shadow map (#524)

reearth · Jun 28, 2023 · 748d9db · 748d9db
1 parent fa30bc5
commit 748d9db
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 1 deletion.
diff --git a/web/src/beta/lib/core/Map/types/index.ts b/web/src/beta/lib/core/Map/types/index.ts
@@ -288,6 +288,9 @@ export type SceneProperty = {
     ground_atmosphere?: boolean;
     sky_atmosphere?: boolean;
     shadows?: boolean;
+    shadowResolution?: 1024 | 2048 | 4096;
+    softShadow?: boolean;
+    shadowDarkness?: number;
     fog?: boolean;
     fog_density?: number;
     brightness_shift?: number;

diff --git a/web/src/beta/lib/core/engines/Cesium/hooks.ts b/web/src/beta/lib/core/engines/Cesium/hooks.ts
@@ -12,7 +12,7 @@ import {
   SunLight,
   DirectionalLight,
 } from "cesium";
-import type { Viewer as CesiumViewer } from "cesium";
+import type { Viewer as CesiumViewer, ShadowMap } from "cesium";
 import CesiumDnD, { Context } from "cesium-dnd";
 import { isEqual } from "lodash-es";
 import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
@@ -132,6 +132,66 @@ export default ({
     property?.light?.lightIntensity,
   ]);
 
+  // shadow map
+  type ShadowMapBias = {
+    polygonOffsetFactor: number;
+    polygonOffsetUnits: number;
+    normalOffsetScale: number;
+    normalShading: boolean;
+    normalShadingSmooth: number;
+    depthBias: number;
+  };
+
+  useEffect(() => {
+    const shadowMap = cesium?.current?.cesiumElement?.shadowMap as
+      | (ShadowMap & {
+          _terrainBias: ShadowMapBias;
+          _pointBias: ShadowMapBias;
+          _primitiveBias: ShadowMapBias;
+        })
+      | undefined;
+    if (!shadowMap) return;
+    shadowMap.softShadows = property?.atmosphere?.softShadow ?? false;
+    shadowMap.darkness = property?.atmosphere?.shadowDarkness ?? 0.3;
+    shadowMap.size = property?.atmosphere?.shadowResolution ?? 2048;
+    shadowMap.fadingEnabled = true;
+    shadowMap.maximumDistance = 5000;
+    shadowMap.normalOffset = true;
+
+    // bias
+    const defaultTerrainBias: ShadowMapBias = {
+      polygonOffsetFactor: 1.1,
+      polygonOffsetUnits: 4.0,
+      normalOffsetScale: 0.5,
+      normalShading: true,
+      normalShadingSmooth: 0.3,
+      depthBias: 0.0001,
+    };
+    const defaultPrimitiveBias: ShadowMapBias = {
+      polygonOffsetFactor: 1.1,
+      polygonOffsetUnits: 4.0,
+      normalOffsetScale: 0.1 * 100,
+      normalShading: true,
+      normalShadingSmooth: 0.05,
+      depthBias: 0.00002 * 10,
+    };
+    const defaultPointBias: ShadowMapBias = {
+      polygonOffsetFactor: 1.1,
+      polygonOffsetUnits: 4.0,
+      normalOffsetScale: 0.0,
+      normalShading: true,
+      normalShadingSmooth: 0.1,
+      depthBias: 0.0005,
+    };
+    Object.assign(shadowMap._terrainBias, defaultTerrainBias);
+    Object.assign(shadowMap._primitiveBias, defaultPrimitiveBias);
+    Object.assign(shadowMap._pointBias, defaultPointBias);
+  }, [
+    property?.atmosphere?.softShadow,
+    property?.atmosphere?.shadowDarkness,
+    property?.atmosphere?.shadowResolution,
+  ]);
+
   useEffect(() => {
     engineAPI.changeSceneMode(property?.default?.sceneMode, 0);
   }, [property?.default?.sceneMode, engineAPI]);