@reearth/core 0.0.1

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

@@ -0,0 +1,200 @@
+// Draw clipping allows user clip 3dtiles with a polygon and top/bottom.
+
+import * as turf from "@turf/turf";
+import {
+  Cartesian3,
+  Cesium3DTileset,
+  ClippingPlane,
+  ClippingPlaneCollection,
+  Matrix4,
+  Plane,
+  Transforms,
+  Viewer,
+} from "cesium";
+import { MutableRefObject, useEffect, useMemo, useState } from "react";
+
+import { LatLng } from "../../..";
+import { sampleTerrainHeight } from "../../common";
+import { useContext } from "../context";
+
+import { ClippingPolygonStyle } from "./DrawClippingPolygon";
+
+type drawClippingProps = {
+  enabled?: boolean;
+  surfacePoints?: LatLng[];
+  direction?: "inside" | "outside";
+  top?: number;
+  bottom?: number;
+  visible?: boolean;
+  style?: ClippingPolygonStyle;
+  tilesetRef?: MutableRefObject<Cesium3DTileset | undefined>;
+  viewer?: Viewer;
+  clippingPlanes: ClippingPlaneCollection;
+  isTilesetReady: boolean;
+};
+
+export const useDrawClipping = ({
+  enabled,
+  surfacePoints,
+  direction = "inside",
+  top,
+  bottom,
+  visible = true,
+  style,
+  tilesetRef,
+  viewer,
+  clippingPlanes,
+  isTilesetReady,
+}: drawClippingProps) => {
+  const [baseHeight, setBaseHeight] = useState(0);
+  const appliedTop = useMemo(() => top ?? 100, [top]);
+  const appliedBottom = useMemo(() => bottom ?? 10, [bottom]);
+  const [ready, setReady] = useState(false);
+  const { requestRender } = useContext();
+
+  useEffect(() => {
+    const updateClippingPlanes = async () => {
+      if (!tilesetRef?.current || !isTilesetReady) return;
+
+      if (!enabled || !surfacePoints || surfacePoints?.length < 2) {
+        clippingPlanes.removeAll();
+        setBaseHeight(0);
+        requestRender?.();
+        return;
+      }
+
+      clippingPlanes.modelMatrix = Matrix4.IDENTITY.clone();
+
+      setReady(false);
+      const polygon = turf.polygon([surfacePoints.map(p => [p.lng, p.lat])]);
+      const center = turf.centroid(polygon);
+      const baseHeight = viewer?.scene
+        ? (await sampleTerrainHeight(
+            viewer?.scene,
+            center.geometry.coordinates[0],
+            center.geometry.coordinates[1],
+          )) ?? 0
+        : 0;
+      setBaseHeight(baseHeight);
+
+      const inverseTransform = Matrix4.inverse(
+        Transforms.eastNorthUpToFixedFrame(tilesetRef.current.boundingSphere.center),
+        new Matrix4(),
+      );
+
+      // making points count-clockwise
+      let sum = 0;
+      for (let i = 0; i < surfacePoints.length; i++) {
+        const p1 = surfacePoints[i];
+        const p2 = surfacePoints[(i + 1) % surfacePoints.length];
+        sum += (p2.lng - p1.lng) * (p2.lat + p1.lat);
+      }
+      if (sum > 0) {
+        surfacePoints.reverse();
+      }
+
+      clippingPlanes.removeAll();
+
+      // side planes
+      for (let i = 0; i < surfacePoints.length - 1; i++) {
+        const p1 = surfacePoints[i];
+        const p2 = surfacePoints[i + 1];
+        clippingPlanes.add(createSidePlane(p1, p2, inverseTransform, direction));
+      }
+
+      // top & bottom planes
+      clippingPlanes.add(
+        createHorizontalPlane(
+          surfacePoints[0],
+          baseHeight + appliedTop,
+          inverseTransform,
+          direction === "inside" ? 1 : -1,
+        ),
+      );
+      clippingPlanes.add(
+        createHorizontalPlane(
+          surfacePoints[0],
+          baseHeight - appliedBottom,
+          inverseTransform,
+          direction === "inside" ? -1 : 1,
+        ),
+      );
+
+      setReady(true);
+    };
+
+    updateClippingPlanes();
+  }, [
+    surfacePoints,
+    tilesetRef,
+    clippingPlanes,
+    appliedTop,
+    appliedBottom,
+    enabled,
+    direction,
+    viewer,
+    isTilesetReady,
+    requestRender,
+  ]);
+
+  useEffect(() => {
+    clippingPlanes.unionClippingRegions = direction === "outside";
+  }, [clippingPlanes, direction, enabled]);
+
+  const drawClippingEdgeProps = useMemo(
+    () => ({
+      coordiantes: surfacePoints?.map(p => [p.lng, p.lat]) ?? [],
+      top: baseHeight + appliedTop,
+      bottom: baseHeight - appliedBottom,
+      visible,
+      style,
+      ready,
+    }),
+    [surfacePoints, baseHeight, appliedTop, appliedBottom, visible, style, ready],
+  );
+
+  return {
+    drawClippingEnabled: enabled,
+    drawClippingEdgeProps,
+  };
+};
+
+const getOriginCoordinateSystemPoint = (
+  point: LatLng,
+  inverseTransform: Matrix4,
+  height?: number,
+) => {
+  const pos = Cartesian3.fromDegrees(point.lng, point.lat, height);
+  return Matrix4.multiplyByPoint(inverseTransform, pos, new Cartesian3());
+};
+
+const createSidePlane = (
+  p1: LatLng,
+  p2: LatLng,
+  inverseTransform: Matrix4,
+  direction: "inside" | "outside",
+) => {
+  const p1C3 = getOriginCoordinateSystemPoint(p1, inverseTransform);
+  const p2C3 = getOriginCoordinateSystemPoint(p2, inverseTransform);
+  const up = new Cartesian3(0, 0, 1);
+  const down = new Cartesian3(0, 0, -1);
+  const right = Cartesian3.subtract(p2C3, p1C3, new Cartesian3());
+  const normal =
+    direction === "inside"
+      ? Cartesian3.normalize(Cartesian3.cross(right, up, new Cartesian3()), new Cartesian3())
+      : Cartesian3.normalize(Cartesian3.cross(right, down, new Cartesian3()), new Cartesian3());
+  const plane = Plane.fromPointNormal(p1C3, normal);
+  return ClippingPlane.fromPlane(plane);
+};
+
+const createHorizontalPlane = (
+  point: LatLng,
+  height: number,
+  inverseTransform: Matrix4,
+  direction: number,
+) => {
+  const pC3 = getOriginCoordinateSystemPoint(point, inverseTransform, height);
+  const normal = new Cartesian3(0, 0, direction);
+  const plane = Plane.fromPointNormal(pC3, normal);
+  return ClippingPlane.fromPlane(plane);
+};

package/src/engines/Cesium/Feature/context.ts

@@ -0,0 +1,33 @@
+import { Cartesian3 } from "cesium";
+import { createContext, useContext as useReactContext } from "react";
+
+import type { Camera, LayerSelectionReason } from "../..";
+import { LayerEditEvent, LayerLoadEvent, LayerVisibilityEvent } from "../../../Map";
+import { TimelineManagerRef } from "../../../Map/useTimelineManager";
+import type { FlyTo } from "../../../types";
+
+export type Context = {
+  selectionReason?: LayerSelectionReason;
+  timelineManagerRef?: TimelineManagerRef;
+  getCamera?: () => Camera | undefined;
+  flyTo?: FlyTo;
+  onLayerEdit?: (e: LayerEditEvent) => void;
+  onLayerVisibility?: (e: LayerVisibilityEvent) => void;
+  onLayerLoad?: (e: LayerLoadEvent) => void;
+  requestRender?: () => void;
+  getSurfaceDistance?: (point1: Cartesian3, point2: Cartesian3) => number | undefined;
+  toXYZ?: (
+    lng: number,
+    lat: number,
+    height: number,
+    options?: { useGlobeEllipsoid?: boolean },
+  ) => [x: number, y: number, z: number] | undefined;
+  toWindowPosition?: (
+    position: [x: number, y: number, z: number],
+  ) => [x: number, y: number] | undefined;
+  isPositionVisible?: (position: [x: number, y: number, z: number]) => boolean;
+};
+
+export const context = createContext<Context>({});
+
+export const useContext = () => useReactContext(context);

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

@@ -0,0 +1,250 @@
+import LRUCache from "lru-cache";
+import { useEffect, useMemo } from "react";
+
+import type { AppearanceTypes, FeatureComponentProps, ComputedLayer } from "../..";
+import { ComputedFeature, DataType, guessType } from "../../../mantle";
+
+import Box, { config as boxConfig } from "./Box";
+import { useContext } from "./context";
+import Ellipse, { config as ellipseConfig } from "./Ellipse";
+import Ellipsoid, { config as ellipsoidConfig } from "./Ellipsoid";
+import Frustum, { config as frustumConfig } from "./Frustum";
+import HeatMap, { config as heatMapConfig } from "./HeatMap";
+import Marker, { config as markerConfig } from "./Marker";
+import Model, { config as modelConfig } from "./Model";
+import PhotoOverlay, { config as photoOverlayConfig } from "./PhotoOverlay";
+import Polygon, { config as polygonConfig } from "./Polygon";
+import Polyline, { config as polylineConfig } from "./Polyline";
+import Raster, { config as rasterConfig } from "./Raster";
+import Resource, { config as resourceConfig } from "./Resource";
+import Tileset, { config as tilesetConfig } from "./Tileset";
+import {
+  extractSimpleLayerData,
+  FeatureComponent,
+  FeatureComponentConfig,
+  generateIDWithMD5,
+} from "./utils";
+
+export * from "./utils";
+export { context, type Context } from "./context";
+export { getTag } from "./utils";
+
+const NON_RENDERABLE_APPEARANCE = ["transition"] satisfies (keyof AppearanceTypes)[];
+const isRenderableAppearance = (
+  k: keyof AppearanceTypes,
+): k is Exclude<keyof AppearanceTypes, (typeof NON_RENDERABLE_APPEARANCE)[number]> =>
+  !(NON_RENDERABLE_APPEARANCE as string[]).includes(k);
+
+const components: Record<
+  Exclude<keyof AppearanceTypes, (typeof NON_RENDERABLE_APPEARANCE)[number]>,
+  [FeatureComponent, FeatureComponentConfig]
+> = {
+  marker: [Marker, markerConfig],
+  polyline: [Polyline, polylineConfig],
+  polygon: [Polygon, polygonConfig],
+  ellipsoid: [Ellipsoid, ellipsoidConfig],
+  ellipse: [Ellipse, ellipseConfig],
+  model: [Model, modelConfig],
+  "3dtiles": [Tileset, tilesetConfig],
+  box: [Box, boxConfig],
+  photooverlay: [PhotoOverlay, photoOverlayConfig],
+  resource: [Resource, resourceConfig],
+  raster: [Raster, rasterConfig],
+  heatMap: [HeatMap, heatMapConfig],
+  frustum: [Frustum, frustumConfig],
+};
+
+// This indicates what component should render for file extension.
+const displayConfig: Record<DataType, (keyof typeof components)[] | "auto"> = {
+  geojson: "auto",
+  csv: "auto",
+  czml: ["resource"],
+  kml: ["resource"],
+  wms: ["raster"],
+  mvt: ["raster"],
+  tms: ["raster"],
+  "3dtiles": ["3dtiles"],
+  "osm-buildings": ["3dtiles"],
+  "google-photorealistic": ["3dtiles"],
+  gpx: "auto",
+  shapefile: "auto",
+  gtfs: "auto",
+  georss: [],
+  gml: [],
+  gltf: ["model"],
+  tiles: ["raster"],
+  heatMap: ["heatMap"],
+};
+
+// Some layer that is delegated data is not computed when layer is updated.
+// Feature's property of delegated data type is calculated when feature is loaded.
+// So in case of delegated data type, to attach property to layer, we need to use normal property before calculated.
+const PICKABLE_APPEARANCE: (keyof AppearanceTypes)[] = ["raster", "3dtiles"];
+const pickProperty = (k: keyof AppearanceTypes, layer: ComputedLayer) => {
+  if (!PICKABLE_APPEARANCE.includes(k)) {
+    return;
+  }
+  if (layer.layer.type !== "simple") {
+    return;
+  }
+  return layer.layer[k];
+};
+
+const CACHED_COMPONENTS = new LRUCache<string, JSX.Element>({ max: 10000 });
+const FEATURE_DELEGATE_THRESHOLD = 6000;
+
+export default function Feature({
+  layer,
+  isHidden,
+  ...props
+}: FeatureComponentProps): JSX.Element | null {
+  const data = extractSimpleLayerData(layer);
+
+  const ext = !data?.type || (data.type as string) === "auto" ? guessType(data?.url) : undefined;
+  let displayType = data?.type && displayConfig[ext ?? data.type];
+  if (layer.features?.length > FEATURE_DELEGATE_THRESHOLD || data?.geojson?.useAsResource) {
+    displayType = ["resource"];
+  }
+  const areAllDisplayTypeNoFeature =
+    Array.isArray(displayType) &&
+    displayType.every(k => components[k][1].noFeature && !components[k][1].noLayer);
+  const useTransition = !!layer?.transition?.useTransition;
+  const cacheable = !data?.updateInterval && !useTransition;
+  const urlMD5 = useMemo(() => (data?.url ? generateIDWithMD5(data.url) : ""), [data?.url]);
+
+  const { requestRender } = useContext();
+  // TODO: Find a way to wait updating the entity
+  useEffect(() => {
+    setTimeout(() => {
+      requestRender?.();
+    }, 300);
+  });
+
+  // Need to invoke requestRender when it's unmounted
+  useEffect(() => () => requestRender?.(), [requestRender]);
+
+  const renderComponent = (k: keyof AppearanceTypes, f?: ComputedFeature): JSX.Element | null => {
+    if (!isRenderableAppearance(k)) return null;
+
+    const useSceneSphericalHarmonicCoefficients =
+      !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
+    const useSceneSpecularEnvironmentMaps = !!props.sceneProperty?.light?.specularEnvironmentMaps;
+
+    const isVisible = layer.layer.visible !== false && !isHidden;
+
+    const componentId =
+      urlMD5 +
+      generateIDWithMD5(
+        `${layer.id}_${
+          f?.id ?? ""
+        }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${
+          JSON.stringify(f?.[k]) ?? ""
+        }_${JSON.stringify(layer.transition) ?? ""}`,
+      );
+
+    if (cacheable) {
+      const cachedComponent = CACHED_COMPONENTS.get(componentId);
+      if (cacheable && cachedComponent) {
+        return cachedComponent;
+      }
+    }
+
+    try {
+      const [C, config] = components[k] ?? [];
+      if (!C || (f && !f[k]) || (config.noLayer && !f) || (config.noFeature && f)) {
+        return null;
+      }
+
+      if (
+        (Array.isArray(displayType) && !displayType.includes(k)) ||
+        (!Array.isArray(displayType) && displayType !== "auto")
+      ) {
+        return null;
+      }
+
+      // Skip using the Resource component if the data layer type is geojson and it is considered as active
+      if (data?.type === "geojson" && displayType === "auto" && k === "resource") {
+        return null;
+      }
+
+      const component = (
+        <C
+          {...props}
+          key={!useTransition ? componentId : undefined}
+          id={!useTransition ? componentId : f?.id ?? layer.id}
+          property={f ? f[k] : layer[k] || pickProperty(k, layer)}
+          geometry={f?.geometry}
+          feature={f}
+          layer={layer}
+          isVisible={isVisible}
+        />
+      );
+
+      // Cache the component output
+      if (cacheable) {
+        CACHED_COMPONENTS.set(componentId, component);
+      }
+
+      return component;
+    } catch (e) {
+      // Log any errors that occur during rendering
+      console.error(`Error rendering component ${componentId}`, e);
+      return null;
+    }
+  };
+
+  const cachedNoFeatureComponents = useMemo(() => {
+    if (!areAllDisplayTypeNoFeature || !displayType || !Array.isArray(displayType)) {
+      return null;
+    }
+
+    return (
+      <>
+        {displayType.map(k => {
+          const [C] = components[k] ?? [];
+          const isVisible = layer.layer.visible !== false && !isHidden;
+          // NOTE: IBL for 3dtiles is not updated unless Tileset feature component is re-created.
+          const useSceneSphericalHarmonicCoefficients =
+            !!props.sceneProperty?.light?.sphericalHarmonicCoefficients;
+          const useSceneSpecularEnvironmentMaps =
+            !!props.sceneProperty?.light?.specularEnvironmentMaps;
+          const use3dtilesSphericalHarmonicCoefficients =
+            layer?.layer?.type === "simple" &&
+            !!layer?.layer?.["3dtiles"]?.sphericalHarmonicCoefficients;
+          const use3dtilesSpecularEnvironmentMaps =
+            layer?.layer?.type === "simple" && !!layer?.layer?.["3dtiles"]?.specularEnvironmentMaps;
+
+          // "noFeature" component should be recreated when the following value is changed.
+          // data.url, isVisible
+          const key =
+            urlMD5 +
+            generateIDWithMD5(
+              `${
+                layer?.id || ""
+              }_${k}_${isVisible}_${useSceneSphericalHarmonicCoefficients}_${useSceneSpecularEnvironmentMaps}_${use3dtilesSphericalHarmonicCoefficients}}_${use3dtilesSpecularEnvironmentMaps}`,
+            );
+
+          return (
+            <C
+              {...props}
+              key={key}
+              id={`${layer.id}_${k}`}
+              property={pickProperty(k, layer) || layer[k]}
+              layer={layer}
+              isVisible={isVisible}
+            />
+          );
+        })}
+      </>
+    );
+  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, urlMD5, props]);
+
+  return (
+    <>
+      {cachedNoFeatureComponents ||
+        [undefined, ...layer.features].flatMap(f =>
+          (Object.keys(components) as (keyof AppearanceTypes)[]).map(k => renderComponent(k, f)),
+        )}
+    </>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { expect, test } from "vitest";
+
+import { renderHook } from "../../../test/utils";
+
+import { usePick } from "./utils";
+
+test("usePick", () => {
+  const f = ["a", "b"] as const;
+  const p: { a?: number; b?: number; c?: number } = { a: 1, b: 2, c: 3 };
+  const { result, rerender } = renderHook(({ p }) => usePick(p, f), { initialProps: { p: p } });
+
+  expect(result.current).toEqual({ a: 1, b: 2 });
+  const first = result.current;
+
+  rerender({ p: { a: p.a, b: p.b, c: p.c } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { c: p.c, b: p.b, a: p.a } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { b: p.b, a: p.a } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { a: 10 } });
+  expect(result.current).not.toBe(first);
+  expect(result.current).toEqual({ a: 10 });
+});