@reearth/core 0.0.7-alpha.5 → 0.0.7-beta.1

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

@@ -5,15 +5,16 @@ import {
   IonResource,
   TerrainProvider,
 } from "cesium";
+import { pick } from "lodash-es";
 import { useMemo } from "react";
 import { Globe as CesiumGlobe } from "resium";
 
-import type { ViewerProperty, TerrainProperty } from "../..";
-import { AssetsCesiumProperty } from "../../../Map";
+import type { SceneProperty, TerrainProperty } from "../..";
+import { objKeys } from "../../../utils";
 import { toColor } from "../common";
 
 export type Props = {
-  property?: ViewerProperty;
+  property?: SceneProperty;
   cesiumIonAccessToken?: string;
 };
 
@@ -21,67 +22,93 @@ export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.El
   const terrainProperty = useMemo(
     (): TerrainProperty => ({
       ...property?.terrain,
+      ...pick(property?.default, terrainPropertyKeys),
     }),
-    [property?.terrain],
+    [property?.terrain, property?.default],
   );
 
   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,
+      terrain: terrainProperty?.terrain,
+      terrainType: terrainProperty?.terrainType,
+      terrainNormal: terrainProperty?.terrainNormal,
+      terrainCesiumIonAccessToken:
+        terrainProperty?.terrainCesiumIonAccessToken || cesiumIonAccessToken,
+      terrainCesiumIonAsset: terrainProperty?.terrainCesiumIonAsset,
+      terrainCesiumIonUrl: terrainProperty?.terrainCesiumIonUrl,
     };
     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,
+    terrainProperty?.terrain,
+    terrainProperty?.terrainType,
+    terrainProperty?.terrainCesiumIonAccessToken,
+    terrainProperty?.terrainCesiumIonAsset,
+    terrainProperty?.terrainCesiumIonUrl,
+    terrainProperty?.terrainNormal,
     cesiumIonAccessToken,
   ]);
 
   const baseColor = useMemo(
-    () => toColor(property?.globe?.baseColor),
-    [property?.globe?.baseColor],
+    () => toColor(property?.atmosphere?.globeBaseColor),
+    [property?.atmosphere?.globeBaseColor],
   );
 
   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}
+      enableLighting={
+        !!(property?.atmosphere?.enable_lighting ?? property?.globeLighting?.globeLighting)
+      }
+      showGroundAtmosphere={
+        property?.atmosphere?.ground_atmosphere ??
+        property?.globeAtmosphere?.globeAtmosphere ??
+        true
+      }
+      atmosphereLightIntensity={property?.globeAtmosphere?.globeAtmosphereIntensity}
+      atmosphereSaturationShift={property?.atmosphere?.surturation_shift}
+      atmosphereHueShift={property?.atmosphere?.hue_shift}
+      atmosphereBrightnessShift={property?.atmosphere?.brightness_shift}
       terrainProvider={terrainProvider}
-      depthTestAgainstTerrain={!!property?.globe?.depthTestAgainstTerrain}
+      depthTestAgainstTerrain={!!terrainProperty.depthTestAgainstTerrain}
     />
   );
 }
 
+const terrainPropertyKeys = objKeys<TerrainProperty>({
+  terrain: 0,
+  terrainType: 0,
+  terrainExaggeration: 0,
+  terrainExaggerationRelativeHeight: 0,
+  depthTestAgainstTerrain: 0,
+  terrainCesiumIonAsset: 0,
+  terrainCesiumIonAccessToken: 0,
+  terrainCesiumIonUrl: 0,
+  terrainUrl: 0,
+});
+
 const defaultTerrainProvider = new EllipsoidTerrainProvider();
 
 const terrainProviders: {
-  [k in NonNullable<TerrainProperty["type"]>]:
+  [k in NonNullable<TerrainProperty["terrainType"]>]:
     | TerrainProvider
     | ((
-        opts: Pick<TerrainProperty, "normal"> & AssetsCesiumProperty["terrain"],
+        opts: Pick<
+          TerrainProperty,
+          | "terrainCesiumIonAccessToken"
+          | "terrainCesiumIonAsset"
+          | "terrainCesiumIonUrl"
+          | "terrainNormal"
+        >,
       ) => Promise<TerrainProvider> | TerrainProvider | null);
 } = {
-  cesium: ({ ionAccessToken, normal }) =>
+  cesium: ({ terrainCesiumIonAccessToken, terrainNormal }) =>
     CesiumTerrainProvider.fromUrl(
       IonResource.fromAssetId(1, {
-        accessToken: ionAccessToken,
+        accessToken: terrainCesiumIonAccessToken,
       }),
       {
-        requestVertexNormals: normal,
+        requestVertexNormals: terrainNormal,
         requestWaterMask: false,
       },
     ),
@@ -89,15 +116,20 @@ const terrainProviders: {
     ArcGISTiledElevationTerrainProvider.fromUrl(
       "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
     ),
-  cesiumion: ({ ionAccessToken, ionAsset, ionUrl, normal }) =>
-    ionAsset
+  cesiumion: ({
+    terrainCesiumIonAccessToken,
+    terrainCesiumIonAsset,
+    terrainCesiumIonUrl,
+    terrainNormal,
+  }) =>
+    terrainCesiumIonAsset
       ? CesiumTerrainProvider.fromUrl(
-          ionUrl ||
-            IonResource.fromAssetId(parseInt(ionAsset, 10), {
-              accessToken: ionAccessToken,
+          terrainCesiumIonUrl ||
+            IonResource.fromAssetId(parseInt(terrainCesiumIonAsset, 10), {
+              accessToken: terrainCesiumIonAccessToken,
             }),
           {
-            requestVertexNormals: normal,
+            requestVertexNormals: terrainNormal,
           },
         )
       : null,

package/src/engines/Cesium/core/Imagery.test.ts

@@ -14,7 +14,7 @@ test("useImageryProviders", () => {
         presets,
         cesiumIonAccessToken,
       }),
-    { initialProps: { tiles: [{ id: "1", type: "default" }] } },
+    { initialProps: { tiles: [{ id: "1", tile_type: "default" }] } },
   );
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
@@ -23,14 +23,14 @@ test("useImageryProviders", () => {
   const prevImageryProvider = result.current.providers["1"][2];
 
   // re-render with same tiles
-  rerender({ tiles: [{ id: "1", type: "default" }] });
+  rerender({ tiles: [{ id: "1", tile_type: "default" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
   expect(provider).toBeCalledTimes(1);
 
   // update a tile URL
-  rerender({ tiles: [{ id: "1", type: "default", url: "a" }] });
+  rerender({ tiles: [{ id: "1", tile_type: "default", tile_url: "a" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
   expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
@@ -42,8 +42,8 @@ test("useImageryProviders", () => {
   // add a tile with URL
   rerender({
     tiles: [
-      { id: "2", type: "default" },
-      { id: "1", type: "default", url: "a" },
+      { id: "2", tile_type: "default" },
+      { id: "1", tile_type: "default", tile_url: "a" },
     ],
   });
 
@@ -58,8 +58,8 @@ test("useImageryProviders", () => {
   // sort tiles
   rerender({
     tiles: [
-      { id: "1", type: "default", url: "a" },
-      { id: "2", type: "default" },
+      { id: "1", tile_type: "default", tile_url: "a" },
+      { id: "2", tile_type: "default" },
     ],
   });
 
@@ -73,7 +73,7 @@ test("useImageryProviders", () => {
 
   // delete a tile
   rerender({
-    tiles: [{ id: "1", type: "default", url: "a" }],
+    tiles: [{ id: "1", tile_type: "default", tile_url: "a" }],
     cesiumIonAccessToken: "a",
   });
 
@@ -86,7 +86,7 @@ test("useImageryProviders", () => {
 
   // update a tile type
   rerender({
-    tiles: [{ id: "1", type: "foobar", url: "u" }],
+    tiles: [{ id: "1", tile_type: "foobar", tile_url: "u" }],
     cesiumIonAccessToken: "a",
   });
 

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

@@ -20,11 +20,11 @@ export type ImageryLayerData = {
 
 export type Tile = {
   id: string;
-  url?: string;
-  type?: string;
-  opacity?: number;
-  zoomLevel?: number[];
-  zoomLevelForURL?: number[];
+  tile_url?: string;
+  tile_type?: string;
+  tile_opacity?: number;
+  tile_zoomLevel?: number[];
+  tile_zoomLevelForURL?: number[];
   heatmap?: boolean;
 };
 
@@ -55,13 +55,13 @@ export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
           id,
           provider: providers[id]?.[2],
         }))
-        .map(({ id, opacity, zoomLevel, provider, heatmap }, i) =>
+        .map(({ id, tile_opacity: opacity, tile_zoomLevel, provider, heatmap }, i) =>
           provider ? (
             <ImageryLayer
               key={`${id}_${i}_${counter}`}
               imageryProvider={provider}
-              minimumTerrainLevel={zoomLevel?.[0]}
-              maximumTerrainLevel={zoomLevel?.[1]}
+              minimumTerrainLevel={tile_zoomLevel?.[0]}
+              maximumTerrainLevel={tile_zoomLevel?.[1]}
               alpha={opacity}
               index={i}
               colorToAlpha={heatmap ? Color.WHITE : undefined}
@@ -89,17 +89,17 @@ export function useImageryProviders({
       url?: string;
       cesiumIonAccessToken?: string;
       heatmap?: boolean;
-      zoomLevel?: number[];
+      tile_zoomLevel?: number[];
     }) => Promise<ImageryProvider> | ImageryProvider | null;
   };
 }): { providers: Providers; updated: boolean } {
   const newTile = useCallback(
     (t: Tile, ciat?: string) =>
-      presets[t.type || "default"]({
-        url: t.url,
+      presets[t.tile_type || "default"]({
+        url: t.tile_url,
         cesiumIonAccessToken: ciat,
         heatmap: t.heatmap,
-        zoomLevel: t.zoomLevelForURL,
+        tile_zoomLevel: t.tile_zoomLevelForURL,
       }),
     [presets],
   );
@@ -152,10 +152,10 @@ export function useImageryProviders({
               : [
                   key,
                   added ||
-                  prevType !== tile.type ||
-                  prevUrl !== tile.url ||
-                  (isCesiumAccessTokenUpdated && (!tile.type || tile.type === "default"))
-                    ? [tile.type, tile.url, newTile(tile, cesiumIonAccessToken)]
+                  prevType !== tile.tile_type ||
+                  prevUrl !== tile.tile_url ||
+                  (isCesiumAccessTokenUpdated && (!tile.tile_type || tile.tile_type === "default"))
+                    ? [tile.tile_type, tile.tile_url, newTile(tile, cesiumIonAccessToken)]
                     : [prevType, prevUrl, prevProvider],
                 ],
         )
@@ -169,7 +169,9 @@ export function useImageryProviders({
       !!added.length ||
       !!isCesiumAccessTokenUpdated ||
       !isEqual(prevTileKeys.current, tileKeys) ||
-      rawProviders.some(p => p.tile && (p.prevType !== p.tile.type || p.prevUrl !== p.tile.url));
+      rawProviders.some(
+        p => p.tile && (p.prevType !== p.tile.tile_type || p.prevUrl !== p.tile.tile_url),
+      );
 
     prevTileKeys.current = tileKeys;
     prevCesiumIonAccessToken.current = cesiumIonAccessToken;

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

@@ -4,7 +4,7 @@ import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2, JulianDate } f
 import { useEffect, useState } from "react";
 import { useCesium } from "resium";
 
-import type { ViewerProperty } from "../../..";
+import type { SceneProperty } from "../../..";
 import { TimelineManagerRef } from "../../../../Map/useTimelineManager";
 import { useIcon } from "../../common";
 
@@ -12,7 +12,7 @@ import Crosshair from "./crosshair.svg?react";
 
 export type Props = {
   className?: string;
-  property?: ViewerProperty;
+  property?: SceneProperty;
   timelineManagerRef?: TimelineManagerRef;
 };
 
@@ -29,17 +29,17 @@ export default function Indicator({
     mountOnEnter: true,
     unmountOnExit: true,
   });
-  const { type, image, imageScale } = property?.indicator ?? {};
-  const [img, w, h] = useIcon({ image: image, imageSize: imageScale });
+  const { indicator_type, indicator_image, indicator_image_scale } = property?.indicator ?? {};
+  const [img, w, h] = useIcon({ image: indicator_image, imageSize: indicator_image_scale });
 
   useEffect(() => {
-    !(!type || type === "default")
+    !(!indicator_type || indicator_type === "default")
       ? viewer?.selectionIndicator.viewModel.selectionIndicatorElement.setAttribute(
           "hidden",
           "true",
         )
       : viewer?.selectionIndicator.viewModel.selectionIndicatorElement.removeAttribute("hidden");
-  }, [type, viewer, viewer?.selectionIndicator]);
+  }, [indicator_type, viewer, viewer?.selectionIndicator]);
 
   useEffect(() => {
     if (!viewer) return;
@@ -90,7 +90,7 @@ export default function Indicator({
   }, [viewer, timelineManagerRef]);
 
   return transition !== "unmounted" && pos ? (
-    type === "crosshair" ? (
+    indicator_type === "crosshair" ? (
       <div
         className={className}
         style={{
@@ -109,7 +109,7 @@ export default function Indicator({
         }}>
         <Crosshair />
       </div>
-    ) : type === "custom" ? (
+    ) : indicator_type === "custom" ? (
       <img
         src={img}
         width={w}