@reearth/core 0.0.7-alpha.7 → 0.0.7-alpha.70

package/src/engines/Cesium/common.ts

@@ -35,11 +35,14 @@ import {
   Plane,
   CameraEventType,
   KeyboardEventModifier,
+  CreditDisplay,
+  Credit as CesiumCredit,
 } from "cesium";
-import { useCallback, MutableRefObject } from "react";
+import { MutableRefObject, useMemo } from "react";
 
 import type { Camera, Clock } from "..";
 import { ClassificationType } from "../../mantle";
+import { Credits } from "../../Map";
 import type {
   CameraOptions,
   FlyToDestination,
@@ -48,16 +51,16 @@ import type {
   OverideKeyboardEventModifier,
   ScreenSpaceCameraControllerOptions,
 } from "../../types";
-import { tweenInterval, useCanvas, useImage, LatLngHeight } from "../../utils";
+import { tweenInterval, useImage, LatLngHeight } from "../../utils";
 
 import { DEFAULT_SCREEN_SPACE_CAMERA_ASSIGNMENTS } from "./constants";
 
 export const layerIdField = `__reearth_layer_id`;
 
 const defaultImageSize = 50;
+const emptyCredites: Credits = { engine: {}, lightbox: [], screen: [] };
 
-export const drawIcon = (
-  c: HTMLCanvasElement,
+const drawIcon = (
   image: HTMLImageElement | undefined,
   w: number,
   h: number,
@@ -68,13 +71,14 @@ export const drawIcon = (
   shadowOffsetX = 0,
   shadowOffsetY = 0,
 ) => {
+  const c = document.createElement("canvas");
   const ctx = c.getContext("2d");
   if (!image || !ctx) return;
 
   ctx.save();
 
-  c.width = w + shadowBlur;
-  c.height = h + shadowBlur;
+  c.width = w + shadowBlur * 2;
+  c.height = h + shadowBlur * 2;
   ctx.shadowBlur = shadowBlur;
   ctx.shadowOffsetX = shadowOffsetX;
   ctx.shadowOffsetY = shadowOffsetY;
@@ -85,14 +89,14 @@ export const drawIcon = (
   if (crop === "circle") {
     ctx.fillStyle = "black";
     ctx.globalCompositeOperation = "destination-in";
-    ctx.arc(w / 2, h / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
+    ctx.arc(c.width / 2, c.height / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
     ctx.fill();
 
     if (shadow) {
       ctx.shadowColor = shadowColor;
       ctx.globalCompositeOperation = "destination-over";
       ctx.fillStyle = "black";
-      ctx.arc(w / 2, h / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
+      ctx.arc(c.width / 2, c.height / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
       ctx.fill();
     }
   } else if (shadow) {
@@ -104,6 +108,7 @@ export const drawIcon = (
   }
 
   ctx.restore();
+  return c.toDataURL();
 };
 
 export const useIcon = ({
@@ -138,13 +143,11 @@ export const useIcon = ({
       ? Math.floor(img.height * imageSize)
       : Math.floor((w / img.width) * img.height);
 
-  const draw = useCallback(
-    (can: HTMLCanvasElement) =>
-      drawIcon(can, img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
+  const canvas = useMemo(
+    () => drawIcon(img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
     [crop, h, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, w],
   );
-  const canvas = useCanvas(draw);
-  return [canvas, w, h];
+  return [canvas ?? "", w, h];
 };
 
 export const ho = (o: "left" | "center" | "right" | undefined): HorizontalOrigin | undefined =>
@@ -509,8 +512,9 @@ export const getCamera = (viewer: Viewer | CesiumWidget | undefined): Camera | u
   const lat = CesiumMath.toDegrees(latitude);
   const lng = CesiumMath.toDegrees(longitude);
   const { heading, pitch, roll } = camera;
-  const fov = camera.frustum instanceof PerspectiveFrustum ? camera.frustum.fov : 1;
-  const aspectRatio = camera.frustum instanceof PerspectiveFrustum ? camera.frustum.aspectRatio : 1;
+  const fov = camera.frustum instanceof PerspectiveFrustum ? (camera.frustum.fov ?? 1) : 1;
+  const aspectRatio =
+    camera.frustum instanceof PerspectiveFrustum ? (camera.frustum.aspectRatio ?? 1) : 1;
   return { lng, lat, height, heading, pitch, roll, fov, aspectRatio };
 };
 
@@ -545,7 +549,7 @@ export const colorBlendMode = (colorBlendMode?: "highlight" | "replace" | "mix"
   )[colorBlendMode || ""];
 
 export const colorBlendModeFor3DTile = (
-  colorBlendMode?: "highlight" | "replace" | "mix" | "default",
+  colorBlendMode: "highlight" | "replace" | "mix" = "highlight",
 ) =>
   (
     ({
@@ -553,7 +557,7 @@ export const colorBlendModeFor3DTile = (
       replace: Cesium3DTileColorBlendMode.REPLACE,
       mix: Cesium3DTileColorBlendMode.MIX,
     }) as { [key in string]?: Cesium3DTileColorBlendMode }
-  )[colorBlendMode || ""];
+  )[colorBlendMode];
 
 export const heightReference = (
   heightReference?: "none" | "clamp" | "relative",
@@ -852,6 +856,7 @@ export function getExtrudedHeight(
   scene: Scene,
   position: Cartesian3,
   windowPosition: Cartesian2,
+  allowNegative = false,
 ): number | undefined {
   const cartesianScratch = new Cartesian3();
   const normalScratch = new Cartesian3();
@@ -893,9 +898,41 @@ export function getExtrudedHeight(
       scene.globe.ellipsoid,
       cartographicScratch,
     ).height;
-    return Math.max(0, toHeight - fromHeight);
+    return allowNegative ? toHeight - fromHeight : Math.max(0, toHeight - fromHeight);
   } catch (error) {
     console.error(error);
   }
   return;
 }
+
+export function getCredits(viewer: Viewer) {
+  if (!viewer) return emptyCredites;
+  const creditDisplay = viewer.creditDisplay as
+    | (CreditDisplay & {
+        _currentFrameCredits: {
+          lightboxCredits: { _array: { credit?: CesiumCredit }[] };
+          screenCredits: { _array: { credit?: CesiumCredit }[] };
+        };
+        _currentCesiumCredit: CesiumCredit;
+      })
+    | undefined;
+
+  if (!creditDisplay) return emptyCredites;
+
+  const { lightboxCredits, screenCredits } = creditDisplay?._currentFrameCredits || {};
+  const cesiumCredits = creditDisplay._currentCesiumCredit;
+
+  const credits: Credits = {
+    engine: {
+      cesium: cesiumCredits?.html ? { html: cesiumCredits.html } : undefined,
+    },
+    lightbox: Array.from(lightboxCredits?._array ?? []).map(c => ({
+      html: c?.credit?.html,
+    })),
+    screen: Array.from(screenCredits?._array ?? []).map(c => ({
+      html: c?.credit?.html,
+    })),
+  };
+
+  return credits;
+}

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

@@ -1,5 +1,5 @@
 import { Clock as CesiumClock, ClockRange, ClockStep, JulianDate } from "cesium";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, type JSX } from "react";
 import { Clock } from "resium";
 
 import { TimelineManagerRef } from "../../../Map/useTimelineManager";

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

@@ -0,0 +1,69 @@
+import { useEffect, useMemo, useRef, type JSX } 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;
+        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,81 @@
+import {
+  CesiumTerrainProvider,
+  EllipsoidTerrainProvider,
+  IonResource,
+  TerrainProvider,
+} from "cesium";
+import { useMemo, useRef } from "react";
+
+import { TerrainProperty } from "../../..";
+import { AssetsCesiumProperty } from "../../../../Map";
+
+type TerrainType = NonNullable<TerrainProperty["type"]>;
+
+const REEARTH_TERRAIN_URL = "https://terrain.reearth.land/cesium-mesh/ellipsoid";
+
+type ProviderOpts = Pick<TerrainProperty, "normal"> &
+  AssetsCesiumProperty["terrain"] & {
+    terrain?: boolean;
+    terrainType?: TerrainType | null | undefined;
+    ionAccessToken?: string | undefined;
+  };
+
+export default function useTerrainProviderPromise(opts: ProviderOpts) {
+  const cacheRef = useRef(new Map<string, Promise<TerrainProvider>>());
+  const ellipsoidRef = useRef<TerrainProvider>(undefined);
+
+  return useMemo<Promise<TerrainProvider>>(() => {
+    if (!opts.terrain) {
+      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) {
+  const asset = opts.ionAsset ?? "";
+  const url = opts.ionUrl ?? "";
+  const ionToken = opts.ionAccessToken ?? "";
+  const normal = String(!!opts.normal);
+  return `${type}|asset:${asset}|url:${url}|ion:${ionToken}|normal:${normal}`;
+}
+
+function createProvider(type: TerrainType, opts: ProviderOpts): Promise<TerrainProvider> {
+  switch (type) {
+    case "reearth_terrain":
+      return CesiumTerrainProvider.fromUrl(REEARTH_TERRAIN_URL, {
+        requestVertexNormals: !!opts.normal,
+        requestWaterMask: false,
+      }) as Promise<TerrainProvider>;
+
+    case "cesium": {
+      return CesiumTerrainProvider.fromUrl(
+        IonResource.fromAssetId(1, { accessToken: opts.ionAccessToken }),
+        { requestVertexNormals: !!opts.normal, requestWaterMask: false },
+      ) as Promise<TerrainProvider>;
+    }
+
+    case "cesiumion": {
+      if (!opts.ionAsset && !opts.ionUrl) 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>;
+    }
+
+    default:
+      return Promise.resolve(new EllipsoidTerrainProvider());
+  }
+}