fix: unexpected uniform undefined error (#25)

reearth · Jun 7, 2024 · af93656 · af93656
1 parent 0009a10
commit af93656
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 8 deletions.
diff --git a/example/App.tsx b/example/App.tsx
@@ -2,13 +2,17 @@ import { useCallback, useRef, useState } from "react";
 
 import { CoreVisualizer, MapRef } from "@reearth/core";
 
+import { SCENE } from "./scene";
 import { TEST_LAYERS } from "./testLayers";
+import { CESIUM_ION_ACCESS_TOKEN } from "./token";
 
 function App() {
   const ref = useRef<MapRef>(null);
   const [isReady, setIsReady] = useState(false);
   const handleMount = useCallback(() => {
-    setIsReady(true);
+    requestAnimationFrame(() => {
+      setIsReady(true);
+    });
   }, []);
 
   // TODO: use onLayerSelect props (core should export a type for selection).
@@ -29,14 +33,11 @@ function App() {
         onMount={handleMount}
         onLayerSelect={handleSelect}
         engine="cesium"
-        sceneProperty={{
-          tiles: [
-            {
-              id: "default",
-              tile_type: "default",
-            },
-          ],
+        meta={{
+          cesiumIonAccessToken: CESIUM_ION_ACCESS_TOKEN || undefined,
         }}
+        // FIXME: Terrain isn't rendered in initial render.
+        sceneProperty={isReady ? SCENE : undefined}
         layers={[
           {
             id: "marker",

diff --git a/example/scene.ts b/example/scene.ts
@@ -0,0 +1,59 @@
+import { SceneProperty } from "@reearth/core";
+
+// Ref: https://github.com/eukarya-inc/PLATEAU-VIEW-3.0/blob/cfcb4b6a444fc9695b4089c8224016d9650cf2b7/extension/src/shared/reearth/scene/Scene.tsx#L13
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const debugSphericalHarmonicCoefficients: [x: number, y: number, z: number][] = [
+  [0.499745965003967, 0.499196201562881, 0.500154078006744], // L00, irradiance, pre-scaled base
+  [0.265826553106308, -0.266099184751511, 0.265922993421555], // L1-1, irradiance, pre-scaled base
+  [0.243236944079399, 0.266723394393921, -0.265380442142487], // L10, irradiance, pre-scaled base
+  [-0.266895800828934, 0.265416264533997, 0.266921550035477], // L11, irradiance, pre-scaled base
+  [0.000195000306121, -0.000644546060357, -0.000383183418307], // L2-2, irradiance, pre-scaled base
+  [-0.000396036746679, -0.000622032093816, 0.000262127199676], // L2-1, irradiance, pre-scaled base
+  [-0.000214280473301, 0.00004872302452, -0.000059724134189], // L20, irradiance, pre-scaled base
+  [0.000107143961941, -0.000126510843984, -0.000425444566645], // L21, irradiance, pre-scaled base
+  [-0.000069071611506, 0.000134039684781, -0.000119135256682], // L22, irradiance, pre-scaled base
+];
+
+// Ref: https://github.com/eukarya-inc/PLATEAU-VIEW-3.0/blob/cfcb4b6a444fc9695b4089c8224016d9650cf2b7/extension/src/prototypes/view/environments/SatelliteEnvironment.tsx#L10
+const sphericalHarmonicCoefficients: [x: number, y: number, z: number][] = [
+  [1.221931219100952, 1.266084671020508, 1.019550442695618],
+  [0.800345599651337, 0.841745376586914, 0.723761379718781],
+  [0.912390112876892, 0.922998011112213, 0.649103164672852],
+  [-0.843475937843323, -0.853787302970886, -0.601324439048767],
+  [-0.495116978883743, -0.5034259557724, -0.360104471445084],
+  [0.497776478528976, 0.507052302360535, 0.364346027374268],
+  [0.082192525267601, 0.082608506083488, 0.056836795061827],
+  [-0.925247848033905, -0.940086245536804, -0.678709805011749],
+  [0.114833705127239, 0.114355310797691, 0.067587599158287],
+];
+
+export const SCENE: SceneProperty = {
+  tiles: [
+    {
+      id: "default",
+      tile_type: "open_street_map",
+    },
+  ],
+  atmosphere: {
+    enable_lighting: true,
+    globeImageBasedLighting: true,
+  },
+  camera: {
+    camera: {
+      fov: 1.0471975511965976,
+      heading: 6.075482442126033,
+      height: 4065.852019268935,
+      lat: 35.608034008903225,
+      lng: 139.7728554580092,
+      pitch: -0.45804512978428535,
+      roll: 6.2830631767616465,
+    },
+  },
+  terrain: {
+    terrain: true,
+    terrainNormal: true,
+  },
+  light: {
+    sphericalHarmonicCoefficients,
+  },
+};
diff --git a/example/token.ts b/example/token.ts
@@ -0,0 +1,2 @@
+// Ref: https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Core/Ion.js#L7
+export const CESIUM_ION_ACCESS_TOKEN = "";
diff --git a/src/engines/Cesium/Shaders/OverriddenShaders/GlobeFS/IBL.glsl b/src/engines/Cesium/Shaders/OverriddenShaders/GlobeFS/IBL.glsl
@@ -1,3 +1,4 @@
+#ifdef ENABLE_VERTEX_LIGHTING
 // This file refers this implementation:
 // https://github.com/takram-design-engineering/plateau-view/blob/8ea8bf1d5ef64319d92d0eb05b936cca7f1a2e8f/libs/cesium/src/shaders/imageBasedLightingStage.glsl
 
@@ -55,3 +56,4 @@ vec4 reearth_computeImageBasedLightingColor(vec4 color) {
     return vec4(color.rgb * czm_lightColor * diffuseIntensity, color.a);
   }
 }
+#endif