@reearth/core 0.0.7-alpha.6 → 0.0.7-alpha.61

package/src/engines/Cesium/helpers/getGeometryFromEntity.ts

@@ -0,0 +1,55 @@
+import { Cartesian3, Entity, JulianDate, PolygonHierarchy } from "cesium";
+
+import { Geometry } from "../../../mantle";
+
+export function getMarkerCoordinates(
+  entity: Entity,
+  currentTime: JulianDate,
+): [number, number, number] {
+  const position = entity.position?.getValue(currentTime) as Cartesian3 | undefined;
+  return [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0];
+}
+
+export function getGeometryFromEntity(currentTime: JulianDate, entity: Entity) {
+  if (entity.point || entity.billboard || entity.label) {
+    const coordinates = getMarkerCoordinates(entity, currentTime);
+
+    const geometry: Geometry = {
+      type: "Point",
+      coordinates,
+    };
+    return geometry;
+  }
+
+  if (entity.polyline) {
+    const positions = entity.polyline?.positions?.getValue(currentTime) as Cartesian3[];
+    const coordinates = positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+
+    const geometry: Geometry = {
+      type: "LineString",
+      coordinates,
+    };
+    return geometry;
+  }
+
+  if (entity.polygon) {
+    const hierarchy = entity.polygon?.hierarchy?.getValue(currentTime) as PolygonHierarchy;
+    const coordinates = hierarchy?.positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+
+    const geometry: Geometry = {
+      type: "Polygon",
+      coordinates: [coordinates],
+    };
+    return geometry;
+  }
+
+  return undefined;
+}

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

@@ -7,7 +7,7 @@ import { useCustomCompareCallback } from "use-custom-compare";
 
 import { EngineRef, ViewerProperty } from "../..";
 import { Camera } from "../../../mantle";
-import { FEATURE_FLAGS } from "../../../Visualizer";
+import { FEATURE_FLAGS } from "../../../shared/featureFlags";
 import { getCamera } from "../common";
 
 import { useCameraLimiter } from "./useCameraLimiter";
@@ -21,7 +21,7 @@ export default ({
   cameraForceHorizontalRoll = false,
   onCameraChange,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   property?: ViewerProperty;
   engineAPI: EngineRef;
   featureFlags: number;

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

@@ -20,7 +20,7 @@ const targetWidth = 1000000;
 const targetLength = 1000000;
 
 export function useCameraLimiter(
-  cesium: RefObject<CesiumComponentRef<CesiumViewer>>,
+  cesium: RefObject<CesiumComponentRef<CesiumViewer> | null>,
   camera: Camera | undefined,
   property: CameraLimiterProperty | undefined,
 ) {

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

@@ -32,8 +32,10 @@ import {
   cartesianToLatLngHeight,
   getExtrudedHeight,
   getOverriddenScreenSpaceCameraOptions,
+  getCredits,
 } from "../common";
 import { attachTag, getTag } from "../Feature";
+import { getGeometryFromEntity } from "../helpers/getGeometryFromEntity";
 import { PickedFeature, pickManyFromViewportAsFeature } from "../pickMany";
 import { createGeometry } from "../Sketch/createGeometry";
 import { CursorType } from "../types";
@@ -48,9 +50,9 @@ import {
 
 export default function useEngineRef(
   ref: Ref<EngineRef>,
-  cesium: RefObject<CesiumComponentRef<Cesium.Viewer>>,
+  cesium: RefObject<CesiumComponentRef<Cesium.Viewer> | null>,
 ): EngineRef {
-  const cancelCameraFlight = useRef<() => void>();
+  const cancelCameraFlight = useRef<() => void>(undefined);
   const mouseEventCallbacks = useRef<MouseEventCallbacks>({
     click: [],
     doubleClick: [],
@@ -107,7 +109,8 @@ export default function useEngineRef(
           if (
             calcViewSize &&
             cartesian &&
-            viewer.scene.camera.frustum instanceof Cesium.PerspectiveFrustum
+            viewer.scene.camera.frustum instanceof Cesium.PerspectiveFrustum &&
+            viewer.scene.camera.frustum.fov !== undefined
           ) {
             const distance = Cesium.Cartesian3.distance(viewer.scene.camera.positionWC, cartesian);
             viewSize = distance * Math.tan(viewer.scene.camera.frustum.fov / 2);
@@ -169,10 +172,11 @@ export default function useEngineRef(
       toWindowPosition: (position: [x: number, y: number, z: number]) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
-        const result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+        const result = Cesium.SceneTransforms.worldToWindowCoordinates(
           viewer.scene,
           Cesium.Cartesian3.fromElements(...position),
         );
+        if (!result) return;
         return [result.x, result.y];
       },
       // Calculate next positino from screen(window) offset.
@@ -259,15 +263,31 @@ export default function useEngineRef(
         }
         return;
       },
-      getExtrudedHeight: (position, windowPosition) => {
+      getExtrudedHeight: (position, windowPosition, allowNegative) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
         return getExtrudedHeight(
           viewer.scene,
           new Cesium.Cartesian3(position[0], position[1], position[2]),
           new Cesium.Cartesian2(windowPosition[0], windowPosition[1]),
+          allowNegative,
         );
       },
+      getExtrudedPoint: (position, extrudedHeight) => {
+        if (!position || !extrudedHeight) return;
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const point = new Cesium.Cartesian3(position[0], position[1], position[2]);
+        const cartesianScratch = new Cesium.Cartesian3();
+        const normal = viewer.scene?.globe.ellipsoid.geodeticSurfaceNormal(point, cartesianScratch);
+        if (!normal) return;
+        const extrudedPoint = Cesium.Cartesian3.add(
+          point,
+          Cesium.Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
+          cartesianScratch,
+        );
+        return [extrudedPoint.x, extrudedPoint.y, extrudedPoint.z];
+      },
       getSurfaceDistance: (point1, point2) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
@@ -831,6 +851,7 @@ export default function useEngineRef(
             tag.computedFeature ?? {
               type: "computedFeature",
               id: tag.featureId,
+              geometry: getGeometryFromEntity(viewer.clock.currentTime, entity),
               properties: convertEntityProperties(viewer.clock.currentTime, entity),
               metaData: {
                 description: convertEntityDescription(viewer.clock.currentTime, entity),
@@ -938,6 +959,32 @@ export default function useEngineRef(
         tickEventCallback.current = tickEventCallback.current.filter(c => c !== cb) || [];
       },
       tickEventCallback,
+      calcRectangleControlPoint: (p1: Position3d, p2: Position3d, p3: Position3d) => {
+        const pp1 = new Cesium.Cartesian3(...p1);
+        const pp2 = new Cesium.Cartesian3(...p2);
+        const pp3 = new Cesium.Cartesian3(...p3);
+        const cartesianScratch1 = new Cesium.Cartesian3();
+        const cartesianScratch2 = new Cesium.Cartesian3();
+        const projection = Cesium.Cartesian3.projectVector(
+          Cesium.Cartesian3.subtract(pp3, pp1, cartesianScratch1),
+          Cesium.Cartesian3.subtract(pp2, pp1, cartesianScratch2),
+          cartesianScratch1,
+        );
+        const offset = Cesium.Cartesian3.subtract(
+          pp3,
+          Cesium.Cartesian3.add(pp1, projection, cartesianScratch1),
+          cartesianScratch2,
+        );
+        const pp4 = Cesium.Cartesian3.midpoint(pp1, pp2, cartesianScratch1);
+        const pp5 = Cesium.Cartesian3.add(pp4, offset, cartesianScratch2);
+        const p5 = [pp5.x, pp5.y, pp5.z] as Position3d;
+        return [p1, p2, p5];
+      },
+      getCredits: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getCredits(viewer);
+      },
     };
   }, [cesium]);
 

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

@@ -12,7 +12,7 @@ export default ({
   shouldRender,
   property,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   isLayerDragging?: boolean;
   shouldRender?: boolean;
@@ -28,7 +28,7 @@ export default ({
     }
   }, [cesium, requestingRenderMode]);
 
-  const explicitRenderRef = useRef<() => void>();
+  const explicitRenderRef = useRef<() => void>(undefined);
 
   useEffect(() => {
     explicitRenderRef.current = explicitRender;

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

@@ -70,7 +70,7 @@ export function useInstance<T, Keys extends unknown[], Owner>(
   descriptor: InstanceDescriptor<T, () => DisallowPromise<T>, Keys, Owner>,
 ): T {
   const [state, setState] = useState<T>();
-  const ref = useRef<T>();
+  const ref = useRef<T>(undefined);
   if (ref.current == null) {
     ref.current = descriptor.create();
   }

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

@@ -1,5 +1,5 @@
 import { Cartesian3, Entity, Viewer } from "cesium";
-import CesiumDnD, { Context } from "cesium-dnd";
+import CesiumDnD, { type Context } from "cesium-dnd";
 import { RefObject, useCallback, useEffect, useRef } from "react";
 import { CesiumComponentRef } from "resium";
 
@@ -14,7 +14,7 @@ export default ({
   onLayerDrag,
   onLayerDrop,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   isLayerDraggable?: boolean;
   onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
   onLayerDrop?: (
@@ -54,7 +54,7 @@ export default ({
     [cesium, onLayerDrop],
   );
 
-  const cesiumDnD = useRef<CesiumDnD>();
+  const cesiumDnD = useRef<Context>(undefined);
   useEffect(() => {
     const viewer = cesium.current?.cesiumElement;
     if (!viewer || viewer.isDestroyed()) return;

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

@@ -9,7 +9,7 @@ import {
   LayerSelectWithRectMove,
   LayerSelectWithRectStart,
 } from "../../../Map";
-import { INTERACTION_MODES } from "../../../Visualizer/interactionMode";
+import { INTERACTION_MODES } from "../../../shared/interactionMode";
 import { makeMouseEventProps } from "../utils/mouse";
 
 export const useLayerSelectWithRect = ({
@@ -20,7 +20,7 @@ export const useLayerSelectWithRect = ({
   onLayerSelectWithRectMove,
   onLayerSelectWithRectEnd,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   engineAPI: EngineRef;
   featureFlags: number;
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;

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

@@ -41,28 +41,36 @@ const defaultMatcher = new StringMatcher()
       initialColor = u_initialColor;
     #endif
     vec4 color = computeDayColor(initialColor`,
-  )
-  .erase([
-    "#ifdef APPLY_MATERIAL",
-    "czm_materialInput materialInput;",
-    "materialInput.st = v_textureCoordinates.st;",
-    "materialInput.normalEC = normalize(v_normalEC);",
-    "materialInput.positionToEyeEC = -v_positionEC;",
-    "materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_normalEC));",
-    "materialInput.slope = v_slope;",
-    "materialInput.height = v_height;",
-    "materialInput.aspect = v_aspect;",
-    "czm_material material = czm_getMaterial(materialInput);",
-    "vec4 materialColor = vec4(material.diffuse, material.alpha);",
-    "color = alphaBlend(materialColor, color);",
-    "#endif",
-  ]);
+  );
+  // Note: Commented out erase() call as it's not needed for Cesium 1.118.x
+  // The replace() above already handles the material code modification
+  // .erase([
+  //   "#ifdef APPLY_MATERIAL",
+  //   "czm_materialInput materialInput;",
+  //   "materialInput.st = v_textureCoordinates.st;",
+  //   "materialInput.normalEC = normalize(v_normalEC);",
+  //   "materialInput.positionToEyeEC = -v_positionEC;",
+  //   "materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_normalEC));",
+  //   "materialInput.slope = v_slope;",
+  //   "materialInput.height = v_height;",
+  //   "materialInput.aspect = v_aspect;",
+  //   "czm_material material = czm_getMaterial(materialInput);",
+  //   "vec4 materialColor = vec4(material.diffuse, material.alpha);",
+  //   "color = alphaBlend(materialColor, color);",
+  //   "#endif",
+  // ]);
 
 function makeGlobeShadersDirty(globe: Globe): void {
   // Invoke the internal makeShadersDirty() by setting a material to globe to
   // 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 +81,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,
@@ -124,7 +144,7 @@ const useTerrainHeatmap = ({
   cesium,
   terrain,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   terrain: TerrainProperty | undefined;
 }) => {
   const {
@@ -184,6 +204,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,
@@ -193,7 +225,7 @@ export const useOverrideGlobeShader = ({
   enableLighting,
   terrain,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   sphericalHarmonicCoefficients?: Cartesian3[];
   globeShadowDarkness?: number;
   globeImageBasedLighting?: boolean;
@@ -201,6 +233,8 @@ export const useOverrideGlobeShader = ({
   enableLighting?: boolean;
   terrain: TerrainProperty | undefined;
 }) => {
+  const applyingRef = useRef(false);
+
   const { uniformMapForIBL, isIBLEnabled, shaderForIBL } = useIBL({
     sphericalHarmonicCoefficients,
     globeImageBasedLighting,
@@ -223,75 +257,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 +361,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/hooks/useViewerProperty.ts

@@ -9,7 +9,7 @@ export default ({
   cesium,
   property,
 }: {
-  cesium: RefObject<CesiumComponentRef<Viewer>>;
+  cesium: RefObject<CesiumComponentRef<Viewer> | null>;
   property?: ViewerProperty;
 }) => {
   const sceneLight = useMemo(() => {