@reearth/core 0.0.7-alpha.43 → 0.0.7-alpha.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.43",
+  "version": "0.0.7-alpha.45",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/Visualizer/hooks.ts

@@ -82,7 +82,7 @@ export default function useHooks(
       info: SelectedFeatureInfo | undefined,
     ) => {
       const isSketchLayer =
-        selectedLayer.layer?.layer.type === "simple" &&
+        selectedLayer.layer?.layer?.type === "simple" &&
         selectedLayer.layer?.layer?.data?.isSketchLayer;
       // Sketch layer feature has a fixed featureId, we need to exclude it from the skip condition
       if (

package/src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -177,7 +177,7 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 
 const useFeature = ({
   id,
-  tileset,
+  tilesetRef,
   idProperty,
   layer,
   viewer,
@@ -189,7 +189,7 @@ const useFeature = ({
   isTilesetReady,
 }: {
   id?: string;
-  tileset: MutableRefObject<Cesium3DTileset | undefined>;
+  tilesetRef: MutableRefObject<Cesium3DTileset | undefined>;
   idProperty?: string;
   layer?: ComputedLayer;
   viewer?: Viewer;
@@ -327,10 +327,10 @@ const useFeature = ({
   handleTilesetLoadRef.current = handleTilesetLoad;
   useEffect(
     () =>
-      tileset.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
         handleTilesetLoadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   const handleTilesetUnload = useCallback(
@@ -346,10 +346,10 @@ const useFeature = ({
   handleTilesetUnloadRef.current = handleTilesetUnload;
   useEffect(
     () =>
-      tileset.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
         handleTilesetUnloadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   useEffect(() => {
@@ -487,6 +487,8 @@ export const useHooks = ({
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
+  const [isTilesetCompReady, setIsTilesetCompReady] = useState(false);
+  const [isTilesetRefReady, setIsTilesetRefReady] = useState(false);
 
   const prevPlanes = useRef(_planes);
   const planes = useMemo(() => {
@@ -566,6 +568,7 @@ export const useHooks = ({
         (tileset?.cesiumElement as any)[layerIdField] = layer.id;
       }
       tilesetRef.current = tileset?.cesiumElement;
+      setIsTilesetRefReady(!!tileset?.cesiumElement);
     },
     [id, layer?.id, featureIndex, shouldUseFeatureIndex],
   );
@@ -602,7 +605,7 @@ export const useHooks = ({
 
   useFeature({
     id,
-    tileset: tilesetRef,
+    tilesetRef,
     layer,
     idProperty,
     viewer,
@@ -806,13 +809,18 @@ export const useHooks = ({
 
   const handleReady = useCallback(
     (tileset: Cesium3DTileset) => {
-      setIsTilesetReady(true);
+      setIsTilesetCompReady(true);
       onLayerFetch?.({ properties: tileset.properties });
       onLayerLoad?.({ layerId: layerIdRef.current });
     },
     [onLayerFetch, onLayerLoad],
   );
 
+  useEffect(() => {
+    if (!isTilesetCompReady || !isTilesetRefReady) return;
+    setIsTilesetReady(true);
+  }, [isTilesetCompReady, isTilesetRefReady]);
+
   useEffect(() => {
     updateCredits?.();
     return () => {

package/src/engines/Cesium/core/Globe/index.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Globe as CesiumGlobe } from "resium";
+
+import type { ViewerProperty } from "../../..";
+import { toColor } from "../../common";
+
+import useTerrainProviderPromise from "./useTerrainProviderPromise";
+
+export type Props = {
+  property?: ViewerProperty;
+  cesiumIonAccessToken?: string;
+  onTerrainProviderChange?: () => void;
+};
+
+export default function Globe({
+  property,
+  cesiumIonAccessToken,
+  onTerrainProviderChange,
+}: Props): JSX.Element | null {
+  const providerPromise = useTerrainProviderPromise({
+    terrain: property?.terrain?.enabled,
+    terrainType: property?.terrain?.type,
+    normal: property?.terrain?.normal,
+    ionAccessToken: property?.assets?.cesium?.terrain?.ionAccessToken || cesiumIonAccessToken,
+    ionAsset: property?.assets?.cesium?.terrain?.ionAsset,
+    ionUrl: property?.assets?.cesium?.terrain?.ionUrl,
+  });
+
+  const baseColor = useMemo(
+    () => toColor(property?.globe?.baseColor),
+    [property?.globe?.baseColor],
+  );
+
+  const lastResolvedProviderRef = useRef<any>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    providerPromise
+      .then(resolvedProvider => {
+        if (isCancelled) return;
+
+        // Only trigger callback if the resolved provider is actually different
+        if (lastResolvedProviderRef.current !== resolvedProvider) {
+          lastResolvedProviderRef.current = resolvedProvider;
+          onTerrainProviderChange?.();
+        }
+      })
+      .catch(error => {
+        if (!isCancelled) {
+          console.warn("Terrain provider failed to load:", error);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [providerPromise, onTerrainProviderChange]);
+
+  return (
+    <CesiumGlobe
+      baseColor={baseColor}
+      enableLighting={!!property?.globe?.enableLighting}
+      showGroundAtmosphere={property?.globe?.atmosphere?.enabled ?? true}
+      atmosphereLightIntensity={property?.globe?.atmosphere?.lightIntensity}
+      atmosphereSaturationShift={property?.globe?.atmosphere?.saturationShift}
+      atmosphereHueShift={property?.globe?.atmosphere?.hueShift}
+      atmosphereBrightnessShift={property?.globe?.atmosphere?.brightnessShift}
+      terrainProvider={providerPromise}
+      depthTestAgainstTerrain={!!property?.globe?.depthTestAgainstTerrain}
+    />
+  );
+}

package/src/engines/Cesium/core/Globe/useTerrainProviderPromise.ts

@@ -0,0 +1,79 @@
+import {
+  ArcGISTiledElevationTerrainProvider,
+  CesiumTerrainProvider,
+  EllipsoidTerrainProvider,
+  IonResource,
+  TerrainProvider,
+} from "cesium";
+import { useMemo, useRef } from "react";
+
+import { TerrainProperty } from "../../..";
+import { AssetsCesiumProperty } from "../../../../Map";
+
+type TerrainType = NonNullable<TerrainProperty["type"]>;
+
+type ProviderOpts = Pick<TerrainProperty, "normal"> &
+  AssetsCesiumProperty["terrain"] & {
+    terrain?: boolean;
+    terrainType?: TerrainType | null | undefined;
+    ionAccessToken?: string | undefined;
+  };
+
+export default function useTerrainProviderPromise(opts: ProviderOpts) {
+  // Cache promises so we don’t recreate providers on every toggle
+  const cacheRef = useRef(new Map<string, Promise<TerrainProvider>>());
+  const ellipsoidRef = useRef<TerrainProvider>();
+
+  return useMemo<Promise<TerrainProvider>>(() => {
+    if (!opts.terrain) {
+      // single shared ellipsoid provider
+      if (!ellipsoidRef.current) ellipsoidRef.current = new EllipsoidTerrainProvider();
+      return Promise.resolve(ellipsoidRef.current);
+    }
+
+    const kind = (opts.terrainType ?? "cesium") as TerrainType;
+    const key = makeKey(kind, opts);
+    let p = cacheRef.current.get(key);
+    if (!p) {
+      p = createProvider(kind, opts);
+      cacheRef.current.set(key, p);
+    }
+    return p;
+  }, [opts]);
+}
+
+function makeKey(type: TerrainType, opts: ProviderOpts) {
+  // Key should change when output provider would differ
+  const asset = opts.ionAsset ?? "";
+  const url = opts.ionUrl ?? "";
+  const normal = String(!!opts.normal);
+  return `${type}|asset:${asset}|url:${url}|normal:${normal}`;
+}
+
+function createProvider(type: TerrainType, opts: ProviderOpts): Promise<TerrainProvider> {
+  switch (type) {
+    case "cesium":
+      return CesiumTerrainProvider.fromUrl(
+        IonResource.fromAssetId(1, { accessToken: opts.ionAccessToken }),
+        { requestVertexNormals: !!opts.normal, requestWaterMask: false },
+      ) as Promise<TerrainProvider>;
+
+    case "arcgis":
+      return ArcGISTiledElevationTerrainProvider.fromUrl(
+        "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+      ) as Promise<TerrainProvider>;
+
+    case "cesiumion":
+      if (!opts.ionAsset && !opts.ionUrl) {
+        // Fallback to ellipsoid when misconfigured
+        return Promise.resolve(new EllipsoidTerrainProvider());
+      }
+      return CesiumTerrainProvider.fromUrl(
+        opts.ionUrl ??
+          IonResource.fromAssetId(parseInt(String(opts.ionAsset), 10), {
+            accessToken: opts.ionAccessToken,
+          }),
+        { requestVertexNormals: !!opts.normal },
+      ) as Promise<TerrainProvider>;
+  }
+}

package/src/engines/Cesium/hooks/useOverrideGlobeShader/useOverrideGlobeShader.ts

@@ -63,6 +63,12 @@ function makeGlobeShadersDirty(globe: Globe): void {
   // reset surface shader source to the initial state (assuming that we never
   // use custom material on globe).
   // ref: https://github.com/CesiumGS/cesium/blob/1.106/packages/engine/Source/Scene/Globe.js#L562-L572
+
+  // Safety check: ensure globe's internal properties exist before manipulation
+  if (!globe || globe.isDestroyed() || !(globe as any)._surface) {
+    return;
+  }
+
   const material = globe.material;
   if (material == null) {
     globe.material = Material.fromType("Color");
@@ -73,6 +79,18 @@ function makeGlobeShadersDirty(globe: Globe): void {
   }
 }
 
+function withUniforms(globe: PrivateCesiumGlobe, add?: Record<string, () => any>) {
+  if (!globe._surface?._tileProvider) return;
+  const mm = (globe._surface._tileProvider as any)?.materialUniformMap ?? {};
+  (globe._surface._tileProvider as any).materialUniformMap = { ...mm, ...(add ?? {}) };
+}
+
+function removeUniforms(globe: PrivateCesiumGlobe, keys: string[]) {
+  const tp = globe._surface?._tileProvider as any;
+  if (!tp?.materialUniformMap) return;
+  for (const k of keys) delete tp.materialUniformMap[k];
+}
+
 const useIBL = ({
   sphericalHarmonicCoefficients,
   globeImageBasedLighting,
@@ -184,6 +202,18 @@ const useTerrainHeatmap = ({
   return { isCustomHeatmapEnabled, shaderForTerrainHeatmap };
 };
 
+async function waitTerrainReady(scene: any) {
+  const t = scene.terrain;
+  if (t?.ready) return;
+  await new Promise<void>(resolve => {
+    if (!t) return resolve();
+    const off = t.readyEvent.addEventListener(() => {
+      off();
+      resolve();
+    });
+  });
+}
+
 export const useOverrideGlobeShader = ({
   cesium,
   sphericalHarmonicCoefficients,
@@ -201,6 +231,8 @@ export const useOverrideGlobeShader = ({
   enableLighting?: boolean;
   terrain: TerrainProperty | undefined;
 }) => {
+  const applyingRef = useRef(false);
+
   const { uniformMapForIBL, isIBLEnabled, shaderForIBL } = useIBL({
     sphericalHarmonicCoefficients,
     globeImageBasedLighting,
@@ -223,75 +255,85 @@ export const useOverrideGlobeShader = ({
 
   const needUpdateGlobeRef = useRef(false);
 
-  const handleGlobeShader = useCallback(() => {
+  const handleGlobeShader = useCallback(async () => {
     // NOTE: Support the spherical harmonic coefficient only when the terrain normal is enabled.
     // Because it's difficult to control the shader for the entire globe.
     // ref: https://github.com/CesiumGS/cesium/blob/af4e2bebbef25259f049b05822adf2958fce11ff/packages/engine/Source/Shaders/GlobeFS.glsl#L408
     if (!cesium.current?.cesiumElement || !needUpdateGlobeRef.current) return;
 
-    const globe = cesium.current.cesiumElement.scene.globe as PrivateCesiumGlobe;
+    if (applyingRef.current) return;
+    applyingRef.current = true;
 
-    const surfaceShaderSet = globe._surfaceShaderSet;
-    if (!surfaceShaderSet) {
-      if (import.meta.env.DEV) {
-        throw new Error("`globe._surfaceShaderSet` could not found");
-      }
-      return;
-    }
+    try {
+      const { scene } = cesium.current.cesiumElement;
+      await waitTerrainReady(scene);
 
-    const baseFragmentShaderSource = surfaceShaderSet.baseFragmentShaderSource;
+      const globe = cesium.current.cesiumElement.scene.globe as PrivateCesiumGlobe;
 
-    const GlobeFS = baseFragmentShaderSource?.sources[baseFragmentShaderSource.sources.length - 1];
+      // Reset shaders first so we patch the freshest base
+      makeGlobeShadersDirty(globe);
 
-    if (!GlobeFS || !baseFragmentShaderSource) {
-      if (import.meta.env.DEV) {
-        throw new Error("GlobeFS could not find.");
+      const surfaceShaderSet = globe._surfaceShaderSet;
+      if (!surfaceShaderSet) {
+        if (import.meta.env.DEV) {
+          throw new Error("`globe._surfaceShaderSet` could not found");
+        }
+        return;
       }
-      return;
-    }
 
-    const matchers: StringMatcher[] = [];
-    const shaders: string[] = [];
-    if (isIBLEnabled && globe.enableLighting && globe.terrainProvider.hasVertexNormals) {
-      matchers.push(shaderForIBL);
-      shaders.push(IBLFS);
-    }
+      const baseFragmentShaderSource = surfaceShaderSet.baseFragmentShaderSource;
+      const GlobeFS =
+        baseFragmentShaderSource?.sources[baseFragmentShaderSource.sources.length - 1];
 
-    if (isCustomHeatmapEnabled) {
-      // This will log the variables needed in the shader below.
-      // we need the minHeight, maxHeight and logarithmic
-      matchers.push(shaderForTerrainHeatmap);
-      shaders.push(HeatmapForTerrainFS);
-    }
+      if (!GlobeFS || !baseFragmentShaderSource) {
+        if (import.meta.env.DEV) {
+          throw new Error("GlobeFS could not find.");
+        }
+        return;
+      }
 
-    // This means there is no overridden shader.
-    if (!matchers.length) return;
+      const matchers: StringMatcher[] = [];
+      const shaders: string[] = [];
+      const terrainHasNormals = !!(globe.terrainProvider as any)?.hasVertexNormals;
 
-    needUpdateGlobeRef.current = false;
+      if (isIBLEnabled && globe.enableLighting && terrainHasNormals) {
+        matchers.push(shaderForIBL);
+        shaders.push(IBLFS);
+      }
 
-    if (!globe?._surface?._tileProvider) {
-      if (import.meta.env.DEV) {
-        throw new Error("`globe._surface._tileProvider.materialUniformMap` could not found");
+      if (isCustomHeatmapEnabled && terrainHasNormals) {
+        // This will log the variables needed in the shader below.
+        // we need the minHeight, maxHeight and logarithmic
+        matchers.push(shaderForTerrainHeatmap);
+        shaders.push(HeatmapForTerrainFS);
       }
-      return;
-    }
 
-    makeGlobeShadersDirty(globe);
+      // This means there is no overridden shader.
+      if (!matchers.length) return;
 
-    const replacedGlobeFS = defaultMatcher.concat(...matchers).execute(GlobeFS);
+      needUpdateGlobeRef.current = false;
 
-    globe._surface._tileProvider.materialUniformMap = {
-      ...(globe._surface._tileProvider.materialUniformMap ?? {}),
-      ...uniformMapForIBL,
-    };
+      if (!globe?._surface?._tileProvider) {
+        if (import.meta.env.DEV) {
+          throw new Error("`globe._surface._tileProvider.materialUniformMap` could not found");
+        }
+        return;
+      }
 
-    surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({
-      sources: [
-        ...baseFragmentShaderSource.sources.slice(0, -1),
-        GlobeFSDefinitions + replacedGlobeFS + shaders.join(""),
-      ],
-      defines: baseFragmentShaderSource.defines,
-    });
+      const replacedGlobeFS = defaultMatcher.concat(...matchers).execute(GlobeFS);
+
+      withUniforms(globe, isIBLEnabled ? uniformMapForIBL : undefined);
+
+      surfaceShaderSet.baseFragmentShaderSource = new ShaderSource({
+        sources: [
+          ...baseFragmentShaderSource.sources.slice(0, -1),
+          GlobeFSDefinitions + replacedGlobeFS + shaders.join(""),
+        ],
+        defines: baseFragmentShaderSource.defines,
+      });
+    } finally {
+      applyingRef.current = false;
+    }
   }, [
     cesium,
     isCustomHeatmapEnabled,
@@ -317,6 +359,10 @@ export const useOverrideGlobeShader = ({
 
     return () => {
       if (!globe.isDestroyed()) {
+        removeUniforms(globe, [
+          "u_reearth_sphericalHarmonicCoefficients",
+          "u_reearth_globeImageBasedLighting",
+        ]);
         // Reset customized shader to default
         makeGlobeShadersDirty(globe);
       }

package/src/engines/Cesium/core/Globe.tsx

@@ -1,113 +0,0 @@
-import {
-  ArcGISTiledElevationTerrainProvider,
-  CesiumTerrainProvider,
-  EllipsoidTerrainProvider,
-  IonResource,
-  TerrainProvider,
-} from "cesium";
-import { useEffect, useMemo } from "react";
-import { Globe as CesiumGlobe } from "resium";
-
-import type { ViewerProperty, TerrainProperty } from "../..";
-import { AssetsCesiumProperty } from "../../../Map";
-import { toColor } from "../common";
-
-export type Props = {
-  property?: ViewerProperty;
-  cesiumIonAccessToken?: string;
-  onTerrainProviderChange?: () => void;
-};
-
-export default function Globe({
-  property,
-  cesiumIonAccessToken,
-  onTerrainProviderChange,
-}: Props): JSX.Element | null {
-  const terrainProperty = useMemo(
-    (): TerrainProperty => ({
-      ...property?.terrain,
-    }),
-    [property?.terrain],
-  );
-
-  const terrainProvider = useMemo((): Promise<TerrainProvider> | TerrainProvider | undefined => {
-    const opts = {
-      terrain: terrainProperty?.enabled,
-      terrainType: terrainProperty?.type,
-      normal: terrainProperty?.normal,
-      ionAccessToken: property?.assets?.cesium?.terrain?.ionAccessToken || cesiumIonAccessToken,
-      ionAsset: property?.assets?.cesium?.terrain?.ionAsset,
-      ionUrl: property?.assets?.cesium?.terrain?.ionUrl,
-    };
-    const provider = opts.terrain ? terrainProviders[opts.terrainType || "cesium"] : undefined;
-    return (typeof provider === "function" ? provider(opts) : provider) ?? defaultTerrainProvider;
-  }, [
-    terrainProperty?.enabled,
-    terrainProperty?.type,
-    terrainProperty?.normal,
-    property?.assets?.cesium?.terrain?.ionAccessToken,
-    property?.assets?.cesium?.terrain?.ionAsset,
-    property?.assets?.cesium?.terrain?.ionUrl,
-    cesiumIonAccessToken,
-  ]);
-
-  const baseColor = useMemo(
-    () => toColor(property?.globe?.baseColor),
-    [property?.globe?.baseColor],
-  );
-
-  useEffect(() => {
-    onTerrainProviderChange?.();
-  }, [terrainProvider, onTerrainProviderChange]);
-
-  return (
-    <CesiumGlobe
-      baseColor={baseColor}
-      enableLighting={!!property?.globe?.enableLighting}
-      showGroundAtmosphere={property?.globe?.atmosphere?.enabled ?? true}
-      atmosphereLightIntensity={property?.globe?.atmosphere?.lightIntensity}
-      atmosphereSaturationShift={property?.globe?.atmosphere?.saturationShift}
-      atmosphereHueShift={property?.globe?.atmosphere?.hueShift}
-      atmosphereBrightnessShift={property?.globe?.atmosphere?.brightnessShift}
-      terrainProvider={terrainProvider}
-      depthTestAgainstTerrain={!!property?.globe?.depthTestAgainstTerrain}
-    />
-  );
-}
-
-const defaultTerrainProvider = new EllipsoidTerrainProvider();
-
-const terrainProviders: {
-  [k in NonNullable<TerrainProperty["type"]>]:
-    | TerrainProvider
-    | ((
-        opts: Pick<TerrainProperty, "normal"> & AssetsCesiumProperty["terrain"],
-      ) => Promise<TerrainProvider> | TerrainProvider | null);
-} = {
-  cesium: ({ ionAccessToken, normal }) =>
-    CesiumTerrainProvider.fromUrl(
-      IonResource.fromAssetId(1, {
-        accessToken: ionAccessToken,
-      }),
-      {
-        requestVertexNormals: normal,
-        requestWaterMask: false,
-      },
-    ),
-  arcgis: () =>
-    ArcGISTiledElevationTerrainProvider.fromUrl(
-      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
-    ),
-  cesiumion: ({ ionAccessToken, ionAsset, ionUrl, normal }) =>
-    ionAsset
-      ? CesiumTerrainProvider.fromUrl(
-          ionUrl ||
-            IonResource.fromAssetId(parseInt(ionAsset, 10), {
-              accessToken: ionAccessToken,
-            }),
-          {
-            requestVertexNormals: normal,
-          },
-        )
-      : null,
-};