@reearth/core 0.0.7-alpha.44 → 0.0.7-alpha.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.44",
+  "version": "0.0.7-alpha.46",
   "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/engines/Cesium/Feature/Tileset/hooks.ts

@@ -187,6 +187,7 @@ const useFeature = ({
   onComputedFeatureFetch,
   shouldUseFeatureIndex,
   isTilesetReady,
+  useExternalStyle,
 }: {
   id?: string;
   tilesetRef: MutableRefObject<Cesium3DTileset | undefined>;
@@ -199,6 +200,7 @@ const useFeature = ({
   selectedFeatureIdsRef: MutableRefObject<string[]>;
   shouldUseFeatureIndex?: boolean;
   isTilesetReady: boolean;
+  useExternalStyle?: boolean;
 }) => {
   const cachedFeaturesRef = useRef<CachedFeature[]>([]);
   const cachedCalculatedLayerRef = useRef(layer);
@@ -220,49 +222,51 @@ const useFeature = ({
 
         const computedFeature = evalFeature(layer, { ...feature?.feature, properties });
 
-        const style = computedFeature?.["3dtiles"];
+        if (!useExternalStyle) {
+          const style = computedFeature?.["3dtiles"];
 
-        COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
-          const val = convertStyle(style?.[name], convert);
-
-          if (name === "color") {
-            // Reset color to default so that new style could update all.
-            raw.color = DEFAULT_FEATURE_COLOR;
+          COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+            const val = convertStyle(style?.[name], convert);
 
-            // Apply color from style.
-            if (val !== undefined) {
-              raw.color = val;
+            if (name === "color") {
+              // Reset color to default so that new style could update all.
+              raw.color = DEFAULT_FEATURE_COLOR;
+
+              // Apply color from style.
+              if (val !== undefined) {
+                raw.color = val;
+              }
+
+              // Apply color for selected feature.
+              if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
+                raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
+              }
+            } else {
+              if (val !== undefined) {
+                raw[name] = val;
+              }
             }
+          });
 
-            // Apply color for selected feature.
-            if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
-              raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
-            }
-          } else {
-            if (val !== undefined) {
-              raw[name] = val;
-            }
+          if (raw instanceof Cesium3DTilePointFeature) {
+            POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+              const val = convertStyle(style?.[name], convert);
+              if (val !== undefined) {
+                raw[name] = val;
+              }
+            });
           }
-        });
-
-        if (raw instanceof Cesium3DTilePointFeature) {
-          POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
-            const val = convertStyle(style?.[name], convert);
-            if (val !== undefined) {
-              raw[name] = val;
-            }
-          });
-        }
 
-        if ("style" in raw) {
-          raw.style = new Cesium3DTileStyle(
-            // TODO: Convert value if it's necessary
-            MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
-              const val = convertStyle(style?.[name as keyof typeof style], convert);
-              if (val === undefined) return res;
-              return { ...res, [name]: val };
-            }, {}),
-          );
+          if ("style" in raw) {
+            raw.style = new Cesium3DTileStyle(
+              // TODO: Convert value if it's necessary
+              MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
+                const val = convertStyle(style?.[name as keyof typeof style], convert);
+                if (val === undefined) return res;
+                return { ...res, [name]: val };
+              }, {}),
+            );
+          }
         }
 
         attachTag(feature.raw, {
@@ -276,7 +280,7 @@ const useFeature = ({
       }
       return;
     },
-    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef],
+    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef, useExternalStyle],
   );
 
   const handleTilesetLoad = useCallback(
@@ -615,6 +619,7 @@ export const useHooks = ({
     selectedFeatureIdsRef,
     shouldUseFeatureIndex,
     isTilesetReady,
+    useExternalStyle: !!styleUrl,
   });
 
   const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
@@ -730,11 +735,23 @@ export const useHooks = ({
     }
     (async () => {
       const res = await fetch(styleUrl);
-      if (!res.ok) return;
-      setStyle(new Cesium3DTileStyle(await res.json()));
+      if (!res.ok) {
+        console.warn("Failed to fetch style from:", styleUrl);
+        return;
+      }
+      const styleData = await res.json();
+      const newStyle = new Cesium3DTileStyle(styleData);
+      setStyle(newStyle);
     })();
   }, [styleUrl]);
 
+  // Apply style to tileset when both external style and tileset are ready
+  useEffect(() => {
+    if (style && tilesetRef.current && isTilesetReady) {
+      tilesetRef.current.style = style;
+    }
+  }, [style, isTilesetReady]);
+
   const googleMapPhotorealisticResource = useMemo(() => {
     if (type !== "google-photorealistic" || !isVisible) return null;
 

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,
-};