@reearth/core 0.0.1

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

@@ -0,0 +1,49 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { engine } from "../..";
+import { Map, Props } from "../../../../Map";
+
+export default {
+  component: Map,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: StoryFn<Props> = args => <Map {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [0, 0, 1000],
+          },
+        },
+      },
+      frustum: {
+        zoom: 1,
+        color: "#ffffff",
+        length: 10000,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};

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

@@ -0,0 +1,163 @@
+// Ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/pedestrian/src/StreetViewFrustum.tsx
+
+import {
+  Cartesian3,
+  Math as CesiumMath,
+  FrustumGeometry,
+  PerspectiveFrustum,
+  Quaternion,
+  GeometryInstance,
+  ComponentDatatype,
+  GeometryAttribute,
+  Primitive as CesiumPrimitive,
+  HeadingPitchRoll,
+  Transforms,
+  Cartesian2,
+  Matrix4,
+} from "cesium";
+import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { CesiumComponentRef, Primitive, useCesium } from "resium";
+
+import { FrustumAppearance } from "../../../../mantle";
+import { usePreRender } from "../../hooks/useSceneEvent";
+import { useContext } from "../context";
+import { toColor } from "../utils";
+import { attachTag, type FeatureComponentConfig, type FeatureProps } from "../utils";
+
+import { FrustumColorAppearance } from "./FrustumColorAppearance";
+import { getFieldOfViewSeparate } from "./getFieldOfView";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = FrustumAppearance;
+
+const colorGeometryAttribute = new GeometryAttribute({
+  componentDatatype: ComponentDatatype.UNSIGNED_BYTE,
+  componentsPerAttribute: 3,
+  normalize: true,
+  values: new Uint8Array(
+    // Colors of vertices adjacent to the near plane are 255. 0 otherwise.
+    [
+      0xff, 0xff, 0xff, 0xff, 0, 0, 0, 0, 0, 0xff, 0xff, 0, 0, 0xff, 0xff, 0, 0xff, 0, 0, 0xff,
+      0xff, 0, 0, 0xff,
+    ].flatMap(value => [value, value, value]),
+  ),
+});
+
+const scaleScratch = new Cartesian3();
+const fovScratch = new Cartesian2();
+
+const TAN_PI_OVER_FOUR = Math.tan(CesiumMath.PI_OVER_FOUR);
+
+export default function Frustum({ isVisible, property, geometry, layer, feature }: Props) {
+  const { viewer } = useCesium();
+  const {
+    color,
+    show = true,
+    opacity = 1,
+    zoom = 1,
+    aspectRatio = 3 / 2,
+    length = 200,
+  } = property || {};
+  const { requestRender } = useContext();
+  const primitiveRef = useRef<CesiumComponentRef<CesiumPrimitive>>(null);
+
+  const { translate, rotate } = layer?.transition ?? {};
+  const translatedCoords = useMemo(
+    () => (translate ? Cartesian3.fromDegrees(...translate) : undefined),
+    [translate],
+  );
+
+  const coordinates = useMemo(
+    () => (geometry?.type === "Point" ? geometry.coordinates : undefined),
+    [geometry?.coordinates, geometry?.type],
+  );
+  const position = useMemo(() => {
+    return coordinates
+      ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+      : Cartesian3.ZERO;
+  }, [coordinates]);
+
+  const geometryInstance = useMemo(() => {
+    const geometry = FrustumGeometry.createGeometry(
+      new FrustumGeometry({
+        frustum: new PerspectiveFrustum({
+          fov: CesiumMath.PI_OVER_TWO,
+          aspectRatio: 1,
+          near: 0.0001,
+          far: 1,
+        }),
+        origin: Cartesian3.ZERO,
+        orientation: Quaternion.IDENTITY,
+        vertexFormat: FrustumColorAppearance.VERTEX_FORMAT,
+      }),
+    );
+
+    if (!geometry) return;
+
+    geometry.attributes.color = colorGeometryAttribute;
+    return new GeometryInstance({ geometry });
+  }, []);
+
+  const appearance = useMemo(
+    () =>
+      new FrustumColorAppearance({
+        color: toColor(color),
+      }),
+    [color],
+  );
+
+  useEffect(() => {
+    if (!primitiveRef.current || primitiveRef.current.cesiumElement?.isDestroyed()) return;
+    requestRender?.();
+  });
+
+  useLayoutEffect(() => {
+    if (!primitiveRef.current || primitiveRef.current.cesiumElement?.isDestroyed()) return;
+    attachTag(primitiveRef.current.cesiumElement, {
+      layerId: layer?.id,
+      featureId: feature?.id,
+    });
+  }, [layer?.id, feature?.id]);
+
+  usePreRender(() => {
+    const primitive = primitiveRef.current?.cesiumElement;
+    if (!primitive || primitive.isDestroyed() || !viewer) return;
+
+    primitive.appearance.material.uniforms.opacity = opacity;
+
+    const origin = translatedCoords ?? position;
+    const rotation = Transforms.headingPitchRollQuaternion(
+      origin,
+      new HeadingPitchRoll(
+        CesiumMath.toRadians(rotate?.[0] ?? 0) + CesiumMath.PI_OVER_TWO,
+        CesiumMath.PI_OVER_TWO - CesiumMath.toRadians(rotate?.[1] ?? 0),
+        CesiumMath.toRadians(rotate?.[2] ?? 0),
+      ),
+    );
+    const fov = getFieldOfViewSeparate(viewer.scene.camera, zoom, fovScratch);
+    const farWidth = (Math.tan(fov.x / 2) / TAN_PI_OVER_FOUR) * length;
+    scaleScratch.x = (opacity * farWidth) / aspectRatio;
+    scaleScratch.y = opacity * farWidth;
+    scaleScratch.z = opacity * length;
+    Matrix4.fromTranslationQuaternionRotationScale(
+      origin,
+      rotation,
+      scaleScratch,
+      primitive.modelMatrix,
+    );
+  });
+
+  return !feature || !isVisible || !show ? null : (
+    <Primitive
+      ref={primitiveRef}
+      geometryInstances={geometryInstance}
+      asynchronous={false}
+      appearance={appearance}
+    />
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};

package/src/engines/Cesium/Feature/Frustum/shaders/frustumAppearance.frag.glsl

@@ -0,0 +1,31 @@
+in vec3 v_positionEC;
+in vec3 v_normalEC;
+in vec3 v_tangentEC;
+in vec3 v_bitangentEC;
+in vec2 v_st;
+in vec4 v_color;
+
+void main() {
+  vec3 positionToEyeEC = -v_positionEC;
+  mat3 tangentToEyeMatrix = czm_tangentToEyeSpaceMatrix(
+    v_normalEC,
+    v_tangentEC,
+    v_bitangentEC
+  );
+  vec3 normalEC = normalize(v_normalEC);
+
+  // TODO: Make volumetric.
+  czm_materialInput materialInput;
+  materialInput.normalEC = normalEC;
+  materialInput.tangentToEyeMatrix = tangentToEyeMatrix;
+  materialInput.positionToEyeEC = positionToEyeEC;
+  materialInput.st = v_st;
+  czm_material material = czm_getMaterial(materialInput);
+  material.alpha *= v_color.r;
+
+  out_FragColor = czm_phong(
+    normalize(positionToEyeEC),
+    material,
+    czm_lightDirectionEC
+  );
+}

package/src/engines/Cesium/Feature/Frustum/shaders/frustumAppearance.vert.glsl

@@ -0,0 +1,29 @@
+in vec3 position3DHigh;
+in vec3 position3DLow;
+in vec3 normal;
+in vec3 normal;
+in vec3 tangent;
+in vec3 bitangent;
+in vec2 st;
+in vec4 color;
+in float batchId;
+
+out vec3 v_positionEC;
+out vec3 v_normalEC;
+out vec3 v_tangentEC;
+out vec3 v_bitangentEC;
+out vec2 v_st;
+out vec4 v_color;
+
+void main() {
+  vec4 p = czm_computePosition();
+
+  v_positionEC = (czm_modelViewRelativeToEye * p).xyz;
+  v_normalEC = czm_normal * normal;
+  v_tangentEC = czm_normal * tangent;
+  v_bitangentEC = czm_normal * bitangent;
+  v_st = st;
+  v_color = color;
+
+  gl_Position = czm_modelViewProjectionRelativeToEye * p;
+}

package/src/engines/Cesium/Feature/HeatMap/HeatmapMesh.tsx

@@ -0,0 +1,186 @@
+// ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/heatmap/src/HeatmapMesh.tsx
+
+import {
+  ArcType,
+  BoundingSphere,
+  EllipsoidSurfaceAppearance,
+  GeometryInstance,
+  GroundPrimitive,
+  PolygonGeometry,
+} from "cesium";
+import { type MultiPolygon, type Polygon } from "geojson";
+import { pick } from "lodash-es";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useMemo,
+  useLayoutEffect,
+  memo,
+} from "react";
+import { useCesium } from "resium";
+
+import { ComputedFeature, ComputedLayer } from "../../../../mantle";
+import { useConstant } from "../../../../utils";
+import { convertPolygonToHierarchyArray } from "../../utils/polygon";
+import { attachTag } from "../utils";
+
+import { createColorMapImage } from "./colorMap";
+import { viridisColorMapLUT } from "./constants";
+import { type MeshImageData } from "./createMeshImageData";
+import { createHeatmapMeshMaterial, type HeatmapMeshMaterialOptions } from "./HeatmapMeshMaterial";
+
+export type HeatmapMeshHandle = {
+  bringToFront: () => void;
+  sendToBack: () => void;
+};
+
+export type HeatmapMeshProps = Omit<HeatmapMeshMaterialOptions, "image"> & {
+  layer?: ComputedLayer;
+  feature?: ComputedFeature;
+  boundingSphere: BoundingSphere;
+  meshImageData: MeshImageData;
+  geometry: Polygon | MultiPolygon;
+};
+
+export const HeatmapMesh = memo(
+  forwardRef<HeatmapMeshHandle, HeatmapMeshProps>(
+    (
+      {
+        layer,
+        feature,
+        boundingSphere,
+        meshImageData,
+        geometry,
+        colorMapLUT,
+        bound,
+        cropBound,
+        ...props
+      },
+      ref,
+    ) => {
+      const { scene } = useCesium();
+      const groundPrimitives = scene?.groundPrimitives;
+      const primitiveRef = useRef<GroundPrimitive>();
+
+      const material = useConstant(() =>
+        createHeatmapMeshMaterial({
+          image: meshImageData.image,
+          width: meshImageData.width,
+          height: meshImageData.height,
+          bound,
+          cropBound,
+        }),
+      );
+
+      const geometryInstances = useMemo(() => {
+        return convertPolygonToHierarchyArray(geometry).map(polygonHierarchy => {
+          const instance = new GeometryInstance({
+            geometry: new PolygonGeometry({
+              polygonHierarchy,
+              arcType: ArcType.GEODESIC,
+              vertexFormat: EllipsoidSurfaceAppearance.VERTEX_FORMAT,
+            }),
+            id: layer?.id,
+          });
+
+          return instance;
+        });
+      }, [geometry, layer?.id]);
+
+      // Since we expect a single feature, we directly access the first one
+      const geometryInstance = geometryInstances[0];
+
+      useEffect(() => {
+        if (groundPrimitives?.isDestroyed()) {
+          return;
+        }
+        const primitive =
+          // TODO: Needs trapezoidal texture projection to accurately map the
+          // data. See also: https://github.com/CesiumGS/cesium/issues/4164
+          new GroundPrimitive({
+            geometryInstances: geometryInstance,
+            appearance: new EllipsoidSurfaceAppearance({
+              material,
+            }),
+          });
+        groundPrimitives?.add(primitive);
+        primitiveRef.current = primitive;
+
+        return () => {
+          if (!groundPrimitives?.isDestroyed()) {
+            groundPrimitives?.remove(primitive);
+          }
+          primitiveRef.current = undefined;
+        };
+      }, [geometryInstance, groundPrimitives, material]);
+
+      useLayoutEffect(() => {
+        // Code for attaching tag
+        if (!primitiveRef.current || primitiveRef.current?.isDestroyed()) return;
+        attachTag(primitiveRef.current, {
+          layerId: layer?.id,
+          featureId: feature?.id,
+          originalProperties: boundingSphere,
+        });
+      }, [layer?.id, feature?.id, boundingSphere]);
+
+      useEffect(() => {
+        material.uniforms.image = meshImageData.image;
+      }, [meshImageData.image, material]);
+
+      Object.assign(material.uniforms, pick(meshImageData, ["width", "height"]));
+
+      useEffect(() => {
+        material.uniforms.colorMap =
+          colorMapLUT != null
+            ? createColorMapImage(colorMapLUT)
+            : createColorMapImage(viridisColorMapLUT);
+      }, [colorMapLUT, material]);
+
+      Object.assign(
+        material.uniforms,
+        pick(props, [
+          "minValue",
+          "maxValue",
+          "opacity",
+          "contourSpacing",
+          "contourThickness",
+          "contourAlpha",
+          "logarithmic",
+        ]),
+      );
+
+      useImperativeHandle(
+        ref,
+        () => ({
+          bringToFront: () => {
+            if (groundPrimitives?.isDestroyed()) {
+              return;
+            }
+
+            if (groundPrimitives?.contains(primitiveRef)) {
+              groundPrimitives?.raiseToTop(primitiveRef);
+            }
+          },
+          sendToBack: () => {
+            if (groundPrimitives?.isDestroyed()) {
+              return;
+            }
+
+            if (groundPrimitives?.contains(primitiveRef)) {
+              groundPrimitives?.lowerToBottom(primitiveRef);
+            }
+          },
+        }),
+        [groundPrimitives],
+      );
+
+      scene?.requestRender();
+      return null;
+    },
+  ),
+);
+
+HeatmapMesh.displayName = "HeatmapMesh";

package/src/engines/Cesium/Feature/HeatMap/HeatmapMeshMaterial.ts

@@ -0,0 +1,81 @@
+// ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/heatmap/src/HeatmapMeshMaterial.ts
+
+import { Cartesian2, Material, Rectangle } from "cesium";
+
+import { Bound, LUT } from "../../../../mantle";
+
+import { createColorMapImage } from "./colorMap";
+import { viridisColorMapLUT } from "./constants";
+import heatmapMeshMaterial from "./shaders/heatmapMeshMaterial.glsl?raw";
+import makeContour from "./shaders/makeContour.glsl?raw";
+import sampleBicubic from "./shaders/sampleBicubic.glsl?raw";
+
+export type HeatmapMeshMaterialOptions = {
+  image: string | HTMLCanvasElement;
+  width: number;
+  height: number;
+  minValue?: number;
+  maxValue?: number;
+  bound?: Bound;
+  cropBound?: Bound;
+  colorMapLUT?: LUT;
+  opacity?: number;
+  contourSpacing?: number;
+  contourThickness?: number;
+  contourAlpha?: number;
+  logarithmic?: boolean;
+};
+
+export function createHeatmapMeshMaterial({
+  image,
+  width,
+  height,
+  minValue = 0,
+  maxValue = 100,
+  bound,
+  cropBound,
+  colorMapLUT = viridisColorMapLUT,
+  opacity = 1,
+  contourSpacing = 10,
+  contourThickness = 1,
+  contourAlpha = 0.2,
+  logarithmic = false,
+}: HeatmapMeshMaterialOptions): Material {
+  const imageScale = new Cartesian2(1, 1);
+  const imageOffset = new Cartesian2();
+  const cropRectangle = new Rectangle(
+    cropBound?.west,
+    cropBound?.south,
+    cropBound?.east,
+    cropBound?.north,
+  );
+  const rectangle = new Rectangle(bound?.west, bound?.south, bound?.east, bound?.north);
+  if (cropBound != null && rectangle != null && cropRectangle != null) {
+    imageScale.x = cropRectangle.width / rectangle.width;
+    imageScale.y = cropRectangle.height / rectangle.height;
+    imageOffset.x = (cropRectangle.west - rectangle.west) / rectangle.width;
+    imageOffset.y = (cropRectangle.south - rectangle.south) / rectangle.height;
+  }
+
+  return new Material({
+    fabric: {
+      type: "HeatmapMesh",
+      uniforms: {
+        colorMap: createColorMapImage(colorMapLUT),
+        image,
+        imageScale,
+        imageOffset,
+        width,
+        height,
+        minValue,
+        maxValue,
+        opacity,
+        contourSpacing,
+        contourThickness,
+        contourAlpha,
+        logarithmic,
+      },
+      source: [sampleBicubic, makeContour, heatmapMeshMaterial].join("\n"),
+    },
+  });
+}

package/src/engines/Cesium/Feature/HeatMap/colorMap.ts

@@ -0,0 +1,47 @@
+// ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/color-maps/src/ColorMap.ts
+
+import { interpolate, quantize, rgb, scaleLinear, type ScaleLinear } from "d3";
+import invariant from "tiny-invariant";
+
+import type { ColorTuple, LUT } from "../../../../mantle";
+
+export type ColorMapType = "sequential" | "diverging";
+
+function createScaleLinear(lut: LUT): ScaleLinear<ColorTuple, ColorTuple> {
+  invariant(lut.length > 1);
+  return scaleLinear<ColorTuple>()
+    .domain(quantize(interpolate(0, 1), lut.length))
+    .range(lut)
+    .clamp(true);
+}
+
+export function linearColorMap(lut: LUT, value: number): ColorTuple {
+  const scaleLinear = createScaleLinear(lut);
+  const result = scaleLinear(value);
+  invariant(result != null);
+  return result;
+}
+
+export function countColorMap(lut: LUT): number {
+  return lut.length;
+}
+
+export function quantizeColorMap(lut: LUT, count: number): ColorTuple[] {
+  invariant(count > 1);
+  return [...Array(count)].map((_, index) => {
+    return linearColorMap(lut, index / (count - 1));
+  });
+}
+
+export function createColorMapImage(lut: LUT): HTMLCanvasElement {
+  const canvas = document.createElement("canvas");
+  canvas.width = lut.length;
+  canvas.height = 1;
+  const context = canvas.getContext("2d");
+  invariant(context != null);
+  lut.forEach(([r, g, b], index) => {
+    context.fillStyle = rgb(r * 255, g * 255, b * 255).toString();
+    context.fillRect(index, 0, 1, 1);
+  });
+  return canvas;
+}