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

package/src/Visualizer/index.tsx

@@ -5,7 +5,7 @@ import { ComputedFeature } from "../mantle";
 import {
   Map,
   type MapRef,
-  type ViewerProperty,
+  type SceneProperty,
   type Layer,
   type LayerSelectionReason,
   type Camera,
@@ -33,10 +33,9 @@ export type CoreVisualizerProps = {
   engine?: EngineType;
   isBuilt?: boolean;
   isEditable?: boolean;
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: SceneProperty;
   layers?: Layer[];
   clusters?: Cluster[]; // TODO: remove completely from beta core
-  time?: string | Date;
   camera?: Camera;
   interactionMode?: InteractionModeType;
   shouldRender?: boolean;
@@ -68,14 +67,13 @@ export const CoreVisualizer = memo(
         engine,
         isBuilt,
         isEditable,
-        viewerProperty,
+        sceneProperty,
         layers,
         clusters,
         small,
         ready,
         hiddenLayers,
         camera: initialCamera,
-        time,
         interactionMode,
         shouldRender,
         meta,
@@ -99,6 +97,7 @@ export const CoreVisualizer = memo(
         selectedFeature,
         camera,
         featureFlags,
+        overriddenSceneProperty,
         isLayerDragging,
         timelineManagerRef,
         cursor,
@@ -122,8 +121,8 @@ export const CoreVisualizer = memo(
         {
           camera: initialCamera,
           interactionMode,
+          sceneProperty,
           zoomedLayerId,
-          viewerProperty,
           onLayerSelect,
           onCameraChange,
           onZoomToLayer,
@@ -155,8 +154,7 @@ export const CoreVisualizer = memo(
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
-                property={viewerProperty}
-                time={time}
+                property={overriddenSceneProperty}
                 small={small}
                 ready={ready}
                 timelineManagerRef={timelineManagerRef}

package/src/engines/Cesium/Feature/Ellipse/index.stories.tsx

@@ -41,7 +41,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Frustum/index.stories.tsx

@@ -42,7 +42,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Model/index.stories.tsx

@@ -41,7 +41,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Model/index.tsx

@@ -39,7 +39,7 @@ export default function Model({
   id,
   isVisible,
   property,
-  viewerProperty,
+  sceneProperty,
   geometry,
   layer,
   feature,
@@ -120,19 +120,18 @@ export default function Model({
     if (
       !property?.specularEnvironmentMaps &&
       !property?.sphericalHarmonicCoefficients &&
-      !viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps &&
-      !viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients
+      !sceneProperty?.light?.specularEnvironmentMaps &&
+      !sceneProperty?.light?.sphericalHarmonicCoefficients
     )
       return ibl;
 
     const specularEnvironmentMaps =
-      property?.specularEnvironmentMaps ??
-      viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
+      property?.specularEnvironmentMaps ?? sceneProperty?.light?.specularEnvironmentMaps;
     const imageBasedLightIntensity =
-      property?.imageBasedLightIntensity ?? viewerProperty?.scene?.imageBasedLighting?.intensity;
+      property?.imageBasedLightIntensity ?? sceneProperty?.light?.imageBasedLightIntensity;
     const sphericalHarmonicCoefficients = arrayToCartecian3(
       property?.sphericalHarmonicCoefficients ??
-        viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
+        sceneProperty?.light?.sphericalHarmonicCoefficients,
       imageBasedLightIntensity,
     );
 
@@ -147,9 +146,9 @@ export default function Model({
     property?.specularEnvironmentMaps,
     property?.sphericalHarmonicCoefficients,
     property?.imageBasedLightIntensity,
-    viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps,
-    viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
-    viewerProperty?.scene?.imageBasedLighting?.intensity,
+    sceneProperty?.light?.specularEnvironmentMaps,
+    sceneProperty?.light?.sphericalHarmonicCoefficients,
+    sceneProperty?.light?.imageBasedLightIntensity,
   ]);
 
   const { viewer } = useCesium();

package/src/engines/Cesium/Feature/Polygon/index.stories.tsx

@@ -58,7 +58,7 @@ Basic.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },
@@ -113,7 +113,7 @@ Excluded.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },
@@ -162,15 +162,13 @@ ClampToGround.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
-    globe: {
-      depthTestAgainstTerrain: true,
-    },
     terrain: {
-      enabled: true,
-      type: "cesium",
+      terrain: true,
+      terrainType: "cesium",
+      depthTestAgainstTerrain: true,
     },
   },
 };

package/src/engines/Cesium/Feature/Raster/index.stories.tsx

@@ -35,7 +35,7 @@ WMS.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },
@@ -70,7 +70,7 @@ MVT.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Resource/index.stories.tsx

@@ -39,7 +39,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },

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

@@ -32,7 +32,7 @@ import type {
   ComputedLayer,
   Feature,
   EvalFeature,
-  ViewerProperty,
+  SceneProperty,
   Cesium3DTilesAppearance,
 } from "../../..";
 import { useRefValue } from "../../../../hooks";
@@ -429,7 +429,7 @@ export const useHooks = ({
   boxId,
   isVisible,
   property,
-  viewerProperty,
+  sceneProperty,
   layer,
   meta,
   evalFeature,
@@ -440,7 +440,7 @@ export const useHooks = ({
   boxId: string;
   isVisible?: boolean;
   property?: Property;
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: SceneProperty;
   layer?: ComputedLayer;
   feature?: ComputedFeature;
   meta?: Record<string, unknown>;
@@ -738,20 +738,19 @@ export const useHooks = ({
     if (
       !property?.specularEnvironmentMaps &&
       !property?.sphericalHarmonicCoefficients &&
-      !viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps &&
-      !viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients
+      !sceneProperty?.light?.specularEnvironmentMaps &&
+      !sceneProperty?.light?.sphericalHarmonicCoefficients
     )
       return;
 
     const ibl = new ImageBasedLighting();
     const specularEnvironmentMaps =
-      property?.specularEnvironmentMaps ??
-      viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
+      property?.specularEnvironmentMaps ?? sceneProperty?.light?.specularEnvironmentMaps;
     const imageBasedLightIntensity =
-      property?.imageBasedLightIntensity ?? viewerProperty?.scene?.imageBasedLighting?.intensity;
+      property?.imageBasedLightIntensity ?? sceneProperty?.light?.imageBasedLightIntensity;
     const sphericalHarmonicCoefficients = arrayToCartecian3(
       property?.sphericalHarmonicCoefficients ??
-        viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
+        sceneProperty?.light?.sphericalHarmonicCoefficients,
       imageBasedLightIntensity,
     );
 
@@ -766,9 +765,9 @@ export const useHooks = ({
     property?.specularEnvironmentMaps,
     property?.sphericalHarmonicCoefficients,
     property?.imageBasedLightIntensity,
-    viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps,
-    viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
-    viewerProperty?.scene?.imageBasedLighting?.intensity,
+    sceneProperty?.light?.specularEnvironmentMaps,
+    sceneProperty?.light?.sphericalHarmonicCoefficients,
+    sceneProperty?.light?.imageBasedLightIntensity,
   ]);
 
   const handleReady = useCallback(

package/src/engines/Cesium/Feature/Tileset/index.stories.tsx

@@ -34,7 +34,7 @@ Default.args = {
     tiles: [
       {
         id: "default",
-        type: "default",
+        tile_type: "default",
       },
     ],
   },

package/src/engines/Cesium/Feature/Tileset/index.tsx

@@ -26,7 +26,7 @@ function Tileset({
   property,
   layer,
   feature,
-  viewerProperty,
+  sceneProperty,
   meta,
   evalFeature,
   onComputedFeatureFetch,
@@ -53,7 +53,7 @@ function Tileset({
     layer,
     feature,
     property,
-    viewerProperty,
+    sceneProperty,
     meta,
     evalFeature,
     onComputedFeatureFetch,
@@ -95,7 +95,7 @@ function Tileset({
         <Box
           {...props}
           id={boxId}
-          viewerProperty={viewerProperty}
+          sceneProperty={sceneProperty}
           property={boxProperty as any}
           geometry={builtinBoxProps.geometry}
           feature={feature}
@@ -117,7 +117,7 @@ export default memo(
     prev.isVisible === next.isVisible &&
     prev.property === next.property &&
     prev.layer?.layer === next.layer?.layer &&
-    prev.viewerProperty === next.viewerProperty &&
+    prev.sceneProperty === next.sceneProperty &&
     prev.meta === next.meta &&
     prev.evalFeature === next.evalFeature &&
     prev.onComputedFeatureFetch === next.onComputedFeatureFetch &&

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

@@ -411,16 +411,7 @@ export const useClippingBox = ({
     eventHandler.setInputAction(handleMouseUp, ScreenSpaceEventType.LEFT_UP);
   }, [eventHandler, handleMouseDown, handleRawMouseMove, handleMouseUp]);
 
-  useEffect(
-    () => () => {
-      requestAnimationFrame(() => {
-        if (!eventHandler.isDestroyed()) {
-          eventHandler.destroy();
-        }
-      });
-    },
-    [eventHandler],
-  );
+  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
 
   const boxProperty = useMemo(
     () => ({ ...boxState, ...dimensions, allowEnterGround }),

package/src/engines/Cesium/Feature/index.tsx

@@ -127,9 +127,8 @@ export default function Feature({
     if (!isRenderableAppearance(k)) return null;
 
     const useSceneSphericalHarmonicCoefficients =
-      !!props.viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients;
-    const useSceneSpecularEnvironmentMaps =
-      !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
+      !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
+    const useSceneSpecularEnvironmentMaps = !!props.sceneProperty?.light?.specularEnvironmentMaps;
 
     const isVisible = layer.layer.visible !== false && !isHidden;
 
@@ -206,9 +205,9 @@ export default function Feature({
           const isVisible = layer.layer.visible !== false && !isHidden;
           // NOTE: IBL for 3dtiles is not updated unless Tileset feature component is re-created.
           const useSceneSphericalHarmonicCoefficients =
-            !!props.viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients;
+            !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
           const useSceneSpecularEnvironmentMaps =
-            !!props.viewerProperty?.scene?.imageBasedLighting?.specularEnvironmentMaps;
+            !!props.sceneProperty?.light?.specularEnvironmentMaps;
           const use3dtilesSphericalHarmonicCoefficients =
             layer?.layer?.type === "simple" &&
             !!layer?.layer?.["3dtiles"]?.sphericalHarmonicCoefficients;

package/src/engines/Cesium/Feature/utils.tsx

@@ -35,7 +35,7 @@ import type {
   ComputedLayer,
   FeatureComponentProps,
   Geometry,
-  ViewerProperty,
+  SceneProperty,
 } from "../..";
 import { Data, Layer, LayerSimple, TimeInterval } from "../../../mantle";
 import { FeatureIndex } from "../FeatureIndex";
@@ -48,7 +48,7 @@ export type FeatureProps<P = any> = {
   layer?: ComputedLayer;
   feature?: ComputedFeature;
   geometry?: Geometry;
-  viewerProperty?: ViewerProperty;
+  sceneProperty?: SceneProperty;
 } & Omit<FeatureComponentProps, "layer">;
 
 export type FeatureComponent = ComponentType<FeatureProps>;
@@ -105,7 +105,6 @@ function EntityExtComponent(
     props.id,
     unselectable,
     hideIndicator,
-    r.current?.cesiumElement,
   ]);
 
   return <Entity ref={composeRefs(ref, r)} {...props} />;

package/src/engines/Cesium/Shaders/OverriddenShaders/GlobeFS/IBL.glsl

@@ -6,8 +6,7 @@
 // https://github.com/CesiumGS/cesium/blob/1.106/packages/engine/Source/Shaders/Model/ImageBasedLightingStageFS.glsl
 // Specular term was removed, as I never apply it on terrain.
 vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
-                                     vec3 lightDirectionEC, vec3 lightColorHdr,
-                                     czm_pbrParameters pbrParameters) {
+                                     vec3 lightDirectionEC, czm_modelMaterial material) {
   vec3 v = -positionEC;
   vec3 n = normalEC;
   vec3 l = normalize(lightDirectionEC);
@@ -24,21 +23,18 @@ vec3 reearth_imageBasedLightingStage(vec3 positionEC, vec3 normalEC,
   vec3 diffuseIrradiance =
       czm_sphericalHarmonics(cubeDir, u_reearth_sphericalHarmonicCoefficients);
 
-  return pbrParameters.diffuseColor * diffuseIrradiance;
+  return material.diffuse * diffuseIrradiance;
 }
 
 vec4 reearth_computeImageBasedLightingColor(vec4 color) {
   if (u_reearth_globeImageBasedLighting) {
-    czm_pbrParameters pbrParameters;
-    pbrParameters.diffuseColor = color.rgb;
+    czm_modelMaterial material;
+    material.diffuse = color.rgb;
 
     vec3 normalEC = normalize(v_normalEC);
     vec3 lighting =
-        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC,
-                        czm_lightColorHdr, pbrParameters);
-    lighting += reearth_imageBasedLightingStage(
-                    v_positionEC, normalEC, czm_lightDirectionEC,
-                    czm_lightColorHdr, pbrParameters) *
+        czm_pbrLighting(v_positionEC, normalEC, czm_lightDirectionEC, material) * czm_lightColorHdr;
+    lighting += reearth_imageBasedLightingStage(v_positionEC, normalEC, czm_lightDirectionEC, material) *
                 u_vertexShadowDarkness;
 
 #ifndef HDR

package/src/engines/Cesium/{hooks/useOverrideGlobeShader/VertexTerrainElevationMaterial.ts → VertexTerrainElevationMaterial.ts}

@@ -1,8 +1,7 @@
 import { Ellipsoid, Material } from "cesium";
 
-import { createColorMapImage } from "../../Feature/HeatMap/colorMap";
-import { turboColorMap } from "../../Feature/HeatMap/constants";
-
+import { createColorMapImage } from "./Feature/HeatMap/colorMap";
+import { turboColorMap } from "./Feature/HeatMap/constants";
 import { JapanSeaLevelEllipsoid } from "./JapanSeaLevelEllipsoid";
 import source from "./vertexTerrainElevationMaterial.glsl?raw";
 

package/src/engines/Cesium/{hooks/useCameraLimiter.ts → cameraLimiter.ts}

@@ -12,9 +12,10 @@ import type { Viewer as CesiumViewer } from "cesium";
 import { useEffect, useMemo, useState, RefObject } from "react";
 import { CesiumComponentRef } from "resium";
 
-import { CameraLimiterProperty } from "../../../Map";
-import { Camera } from "../../../utils";
-import { getCamera } from "../common";
+import type { SceneProperty } from "..";
+import { Camera } from "../../utils";
+
+import { getCamera } from "./common";
 
 const targetWidth = 1000000;
 const targetLength = 1000000;
@@ -22,30 +23,44 @@ const targetLength = 1000000;
 export function useCameraLimiter(
   cesium: RefObject<CesiumComponentRef<CesiumViewer>>,
   camera: Camera | undefined,
-  property: CameraLimiterProperty | undefined,
+  property: SceneProperty["cameraLimiter"] | undefined,
 ) {
   const geodesic = useMemo(() => {
     const viewer = cesium.current?.cesiumElement;
     if (
       !viewer ||
       viewer.isDestroyed() ||
-      !property?.enabled ||
-      !property.targetArea?.lng ||
-      !property.targetArea.lat
+      !property?.cameraLimitterEnabled ||
+      !property.cameraLimitterTargetArea?.lng ||
+      !property.cameraLimitterTargetArea.lat
     ) {
       return undefined;
     }
 
-    return getGeodesic(viewer, property.targetArea.lng, property.targetArea.lat);
-  }, [cesium, property?.enabled, property?.targetArea?.lng, property?.targetArea?.lat]);
+    return getGeodesic(
+      viewer,
+      property.cameraLimitterTargetArea.lng,
+      property.cameraLimitterTargetArea.lat,
+    );
+  }, [
+    cesium,
+    property?.cameraLimitterEnabled,
+    property?.cameraLimitterTargetArea?.lng,
+    property?.cameraLimitterTargetArea?.lat,
+  ]);
 
   // calculate inner limiter dimensions
   const limiterDimensions = useMemo((): InnerLimiterDimensions | undefined => {
     if (!geodesic) return undefined;
 
-    const width = typeof property?.targetWidth === "number" ? property.targetWidth : targetWidth;
+    const width =
+      typeof property?.cameraLimitterTargetWidth === "number"
+        ? property.cameraLimitterTargetWidth
+        : targetWidth;
     const length =
-      typeof property?.targetLength === "number" ? property.targetLength : targetLength;
+      typeof property?.cameraLimitterTargetLength === "number"
+        ? property.cameraLimitterTargetLength
+        : targetLength;
 
     const { cartesianArray, cartographicDimensions } = calcBoundaryBox(
       geodesic,
@@ -57,7 +72,7 @@ export function useCameraLimiter(
       cartographicDimensions,
       cartesianArray,
     };
-  }, [property?.targetWidth, property?.targetLength, geodesic]);
+  }, [property?.cameraLimitterTargetWidth, property?.cameraLimitterTargetLength, geodesic]);
 
   // calculate maximum camera view (outer boundaries)
   const [cameraViewOuterBoundaries, setCameraViewOuterBoundaries] = useState<
@@ -66,19 +81,19 @@ export function useCameraLimiter(
 
   useEffect(() => {
     const viewer = cesium.current?.cesiumElement;
-    if (!viewer || viewer.isDestroyed() || !property?.targetArea || !geodesic) return;
+    if (!viewer || viewer.isDestroyed() || !property?.cameraLimitterTargetArea || !geodesic) return;
 
     const camera = new CesiumCamera(viewer.scene);
     camera.setView({
       destination: Cartesian3.fromDegrees(
-        property.targetArea.lng,
-        property.targetArea.lat,
-        property.targetArea.height,
+        property.cameraLimitterTargetArea.lng,
+        property.cameraLimitterTargetArea.lat,
+        property.cameraLimitterTargetArea.height,
       ),
       orientation: {
-        heading: property?.targetArea.heading,
-        pitch: property?.targetArea.pitch,
-        roll: property?.targetArea.roll,
+        heading: property?.cameraLimitterTargetArea.heading,
+        pitch: property?.cameraLimitterTargetArea.pitch,
+        roll: property?.cameraLimitterTargetArea.roll,
         up: camera.up,
       },
     });
@@ -88,8 +103,10 @@ export function useCameraLimiter(
     const rectangleHalfWidth = Rectangle.computeWidth(computedViewRectangle) * Math.PI * 1000000;
     const rectangleHalfHeight = Rectangle.computeHeight(computedViewRectangle) * Math.PI * 1000000;
 
-    const { targetWidth: width = targetWidth, targetLength: length = targetLength } =
-      property ?? {};
+    const {
+      cameraLimitterTargetWidth: width = targetWidth,
+      cameraLimitterTargetLength: length = targetLength,
+    } = property ?? {};
 
     const { cartesianArray } = calcBoundaryBox(
       geodesic,
@@ -104,7 +121,13 @@ export function useCameraLimiter(
   useEffect(() => {
     const viewer = cesium?.current?.cesiumElement;
     const camera = getCamera(cesium?.current?.cesiumElement);
-    if (!viewer || viewer.isDestroyed() || !camera || !property?.enabled || !limiterDimensions)
+    if (
+      !viewer ||
+      viewer.isDestroyed() ||
+      !camera ||
+      !property?.cameraLimitterEnabled ||
+      !limiterDimensions
+    )
       return;
     viewer.camera.setView({
       destination: getAllowedCameraDestination(camera, limiterDimensions),