@reearth/core 0.0.1

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

@@ -0,0 +1,13 @@
+vec3 reearth_calculateElevationMapForGlobe(vec4 colorToAlpha, vec3 color) {
+  if(greaterThan(colorToAlpha, vec4(0.9)) == bvec4(true)) {
+    float decodedValue = dot(color, vec3(16711680.0, 65280.0, 255.0));
+    float height = (decodedValue - 8388607.0) * 0.01;
+    float minHeight = czm_branchFreeTernary(logarithmic_3, pseudoLog(minHeight_1), minHeight_1);
+    float maxHeight = czm_branchFreeTernary(logarithmic_3, pseudoLog(maxHeight_2), maxHeight_2);
+    float value = czm_branchFreeTernary(logarithmic_3, pseudoLog(height), height);
+    float normalizedHeight = clamp((value - minHeight) / (maxHeight - minHeight), 0.0, 1.0);
+    vec4 mappedColor = texture(colorMap_0, vec2(normalizedHeight, 0.5));
+    return mappedColor.rgb;
+  }
+  return color;
+}

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

@@ -0,0 +1,57 @@
+// This file refers this implementation:
+// https://github.com/takram-design-engineering/plateau-view/blob/8ea8bf1d5ef64319d92d0eb05b936cca7f1a2e8f/libs/cesium/src/shaders/imageBasedLightingStage.glsl
+
+// Derived from:
+// 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 v = -positionEC;
+  vec3 n = normalEC;
+  vec3 l = normalize(lightDirectionEC);
+  vec3 h = normalize(v + l);
+  float NdotV = abs(dot(n, v)) + 0.001;
+  float VdotH = clamp(dot(v, h), 0.0, 1.0);
+
+  const mat3 yUpToZUp = mat3(-1.0, 0.0, 0.0, 0.0, 0.0, -1.0, 0.0, 1.0, 0.0);
+  // Reference frame matrix can be computed only by world position and normal.
+  mat3 referenceFrameMatrix =
+      czm_transpose(czm_eastNorthUpToEyeCoordinates(v_positionMC, normalEC));
+  vec3 cubeDir =
+      normalize(yUpToZUp * referenceFrameMatrix * normalize(reflect(-v, n)));
+  vec3 diffuseIrradiance =
+      czm_sphericalHarmonics(cubeDir, u_reearth_sphericalHarmonicCoefficients);
+
+  return pbrParameters.diffuseColor * diffuseIrradiance;
+}
+
+vec4 reearth_computeImageBasedLightingColor(vec4 color) {
+  if (u_reearth_globeImageBasedLighting) {
+    czm_pbrParameters pbrParameters;
+    pbrParameters.diffuseColor = 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) *
+                u_vertexShadowDarkness;
+
+#ifndef HDR
+    lighting = czm_acesTonemapping(lighting);
+    lighting = czm_linearToSrgb(lighting);
+#endif
+
+    return vec4(color.rgb * lighting, color.a);
+  } else {
+    float diffuseIntensity = clamp(
+        czm_getLambertDiffuse(czm_lightDirectionEC, normalize(v_normalEC)) *
+                u_lambertDiffuseMultiplier +
+            u_vertexShadowDarkness,
+        0.0, 1.0);
+    return vec4(color.rgb * czm_lightColor * diffuseIntensity, color.a);
+  }
+}

package/src/engines/Cesium/Shaders/OverriddenShaders/README.md

@@ -0,0 +1,13 @@
+# OverriddenShaders
+
+This is a set of shaders to override Cesium's shader.
+
+The structure have to be as follow.
+
+```
+ShaderName/
+  XXX.glsl ... Define your own custom functions
+  Definitions.glsl ... Definition for each variable or function.
+```
+
+You must set `reearth_` prefix to the name of the function like `reearth_own_function()`. Also you must set `reearth_` to the name of the uniform and attribute like `u_reearth_variable` or `v_reearth_variable`.

package/src/engines/Cesium/Sketch/ControlPoint.tsx

@@ -0,0 +1,67 @@
+import {
+  CallbackProperty,
+  HeightReference,
+  type Cartesian3,
+  type PositionProperty,
+  type Property,
+} from "@cesium/engine";
+import { useMemo, useRef, type FC } from "react";
+import { Entity } from "resium";
+import invariant from "tiny-invariant";
+
+import { useConstant } from "../../../utils";
+
+let image: HTMLCanvasElement | undefined;
+
+function getImage(): HTMLCanvasElement {
+  if (image != null) {
+    return image;
+  }
+  image = document.createElement("canvas");
+  image.width = 16;
+  image.height = 16;
+  const context = image.getContext("2d");
+  invariant(context != null);
+  context.fillStyle = "white";
+  context.fillRect(3, 3, 10, 10);
+  context.strokeStyle = "black";
+  context.lineWidth = 2;
+  context.strokeRect(3, 3, 10, 10);
+  return image;
+}
+
+export interface ControlPointProps {
+  position: Property | Cartesian3;
+  clampToGround?: boolean;
+}
+
+export const ControlPoint: FC<ControlPointProps> = ({ position, clampToGround = false }) => {
+  const positionRef = useRef(position);
+  positionRef.current = position;
+  const positionProperty = useConstant(
+    () =>
+      new CallbackProperty(
+        (time, result) =>
+          "getValue" in positionRef.current
+            ? positionRef.current.getValue(time, result)
+            : positionRef.current,
+        false,
+      ) as unknown as PositionProperty,
+  );
+
+  const options = useMemo(
+    () => ({
+      position: positionProperty,
+      billboard: {
+        image: getImage(),
+        width: 8,
+        height: 8,
+        heightReference: clampToGround ? HeightReference.CLAMP_TO_GROUND : HeightReference.NONE,
+        disableDepthTestDistance: Infinity,
+      },
+    }),
+    [clampToGround, positionProperty],
+  );
+
+  return <Entity {...options} />;
+};

package/src/engines/Cesium/Sketch/Entity.tsx

@@ -0,0 +1,43 @@
+import { Entity as CesiumEntity, type EntityCollection } from "@cesium/engine";
+import { omit } from "lodash-es";
+import { forwardRef, memo, useEffect, useState } from "react";
+import { useCesium } from "resium";
+
+import { assignForwardedRef } from "./utils";
+
+export interface EntityProps extends CesiumEntity.ConstructorOptions {
+  entities?: EntityCollection;
+}
+
+export const Entity = memo(
+  forwardRef<CesiumEntity, EntityProps>(({ entities: entitiesProp, ...options }, ref) => {
+    const { viewer } = useCesium();
+    const scene = viewer?.scene;
+    const defaultEntities = viewer?.entities;
+    const entities = entitiesProp ?? defaultEntities;
+    const [entity, setEntity] = useState(() => new CesiumEntity(options));
+
+    useEffect(() => {
+      setEntity(new CesiumEntity(options));
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [options.id]);
+
+    useEffect(() => {
+      entities?.add(entity);
+      return () => {
+        entities?.remove(entity);
+        scene?.requestRender();
+      };
+    }, [scene, entities, entity]);
+
+    useEffect(() => assignForwardedRef(ref, entity), [ref, entity]);
+
+    // Although it seems Entity.merge() is the way to merge with the new
+    // options, Object.assign() also works.
+    Object.assign(entity, omit(options, "id"));
+
+    scene?.requestRender();
+
+    return null;
+  }),
+);

package/src/engines/Cesium/Sketch/ExtrudedControlPoints.tsx

@@ -0,0 +1,51 @@
+import { Cartesian3, type Color } from "@cesium/engine";
+import { memo, type FC } from "react";
+import { useCesium } from "resium";
+import invariant from "tiny-invariant";
+
+import { ControlPoint } from "./ControlPoint";
+import { type GeometryOptions } from "./createGeometry";
+import { ExtrudedMeasurement } from "./ExtrudedMeasurement";
+
+export interface ExtrudedControlPointsProps {
+  geometryOptions: GeometryOptions;
+  extrudedHeight: number;
+  color?: Color;
+}
+
+const cartesianScratch = new Cartesian3();
+
+const ExtrudedControlPoints: FC<ExtrudedControlPointsProps> = memo(
+  ({ geometryOptions: { controlPoints }, extrudedHeight, color }) => {
+    const { viewer } = useCesium();
+    const controlPoint = controlPoints[controlPoints.length - 1];
+    const normal = viewer?.scene?.globe.ellipsoid.geodeticSurfaceNormal(
+      controlPoint,
+      cartesianScratch,
+    );
+
+    invariant(normal !== undefined);
+    const extrudedPoint = Cartesian3.add(
+      controlPoint,
+      Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
+      cartesianScratch,
+    );
+
+    return (
+      <>
+        <ControlPoint position={controlPoint} clampToGround />
+        <ControlPoint position={extrudedPoint} />
+        <ExtrudedMeasurement
+          a={controlPoint}
+          b={extrudedPoint}
+          extrudedHeight={extrudedHeight}
+          color={color}
+        />
+      </>
+    );
+  },
+);
+
+ExtrudedControlPoints.displayName = "ExtrudedControlPoints";
+
+export default ExtrudedControlPoints;

package/src/engines/Cesium/Sketch/ExtrudedMeasurement.tsx

@@ -0,0 +1,70 @@
+import {
+  CallbackProperty,
+  Cartesian3,
+  PolylineDashMaterialProperty,
+  type Color,
+  type PositionProperty,
+} from "@cesium/engine";
+import { useMemo, useRef, type FC } from "react";
+
+import { useConstant } from "../../../utils";
+
+import { Entity, type EntityProps } from "./Entity";
+import { MeasurementText } from "./MeasurementText";
+import ScreenSpaceElement from "./ScreenSpaceElement";
+
+const MeasurementLine: FC<{
+  a: Cartesian3;
+  b: Cartesian3;
+  color?: Color;
+}> = ({ a, b, color }) => {
+  const controlPointsRef = useRef([a, b]);
+  controlPointsRef.current = [a, b];
+  const positionsProperty = useConstant(
+    () =>
+      new CallbackProperty(() => controlPointsRef.current, false) as unknown as PositionProperty,
+  );
+
+  const options = useMemo((): EntityProps => {
+    return {
+      polyline: {
+        positions: positionsProperty,
+        width: 1.5,
+        material: new PolylineDashMaterialProperty({
+          color,
+          dashLength: 8,
+        }),
+      },
+    };
+  }, [color, positionsProperty]);
+
+  return <Entity {...options} />;
+};
+
+export interface ExtrudedMeasurementProps {
+  a: Cartesian3;
+  b: Cartesian3;
+  extrudedHeight: number;
+  color?: Color;
+}
+
+export const ExtrudedMeasurement: FC<ExtrudedMeasurementProps> = ({
+  a,
+  b,
+  extrudedHeight,
+  color,
+}) => {
+  const position = useConstant(() => new Cartesian3());
+  return (
+    <>
+      <ScreenSpaceElement position={Cartesian3.midpoint(a, b, position)}>
+        <MeasurementText>
+          {extrudedHeight < 1000
+            ? `${extrudedHeight.toFixed(1)} m`
+            : `${(extrudedHeight / 1000).toFixed(1)} km`}
+        </MeasurementText>
+      </ScreenSpaceElement>
+      <MeasurementLine a={a} b={b} color={color} />
+    </>
+  );
+};

package/src/engines/Cesium/Sketch/ExtrudedPolygonEntity.tsx

@@ -0,0 +1,75 @@
+import {
+  CallbackProperty,
+  ClassificationType,
+  ColorMaterialProperty,
+  HeightReference,
+  ShadowMode,
+  type Color,
+  type PolygonHierarchy,
+} from "@cesium/engine";
+import { useMemo, useRef, type FC } from "react";
+
+import { useConstant } from "../../../utils";
+import { useContext } from "../Feature/context";
+
+import { Entity, type EntityProps } from "./Entity";
+
+export interface ExtrudedPolygonEntityProps {
+  dynamic?: boolean;
+  id?: string;
+  hierarchy: PolygonHierarchy;
+  extrudedHeight: number;
+  color?: Color;
+  disableShadow?: boolean;
+  enableRelativeHeight?: boolean;
+}
+
+export const ExtrudedPolygonEntity: FC<ExtrudedPolygonEntityProps> = ({
+  dynamic = false,
+  id,
+  hierarchy: hierarchyProp,
+  extrudedHeight: extrudedHeightProp,
+  color,
+  disableShadow = false,
+  enableRelativeHeight = false,
+}) => {
+  const hierarchyRef = useRef(hierarchyProp);
+  hierarchyRef.current = hierarchyProp;
+  const hierarchyProperty = useConstant(
+    () => new CallbackProperty(() => hierarchyRef.current, false),
+  );
+  const hierarchy = dynamic ? hierarchyProperty : hierarchyProp;
+
+  const extrudedHeightRef = useRef(extrudedHeightProp);
+  extrudedHeightRef.current = extrudedHeightProp;
+  const extrudedHeightProperty = useConstant(
+    () => new CallbackProperty(() => extrudedHeightRef.current, false),
+  );
+  const extrudedHeight = dynamic ? extrudedHeightProperty : extrudedHeightProp;
+
+  const options = useMemo(
+    (): EntityProps => ({
+      polygon: {
+        hierarchy,
+        extrudedHeight,
+        extrudedHeightReference: HeightReference.RELATIVE_TO_GROUND,
+        fill: true,
+        outline: true,
+        outlineWidth: 1,
+        outlineColor: color?.withAlpha(1),
+        material: new ColorMaterialProperty(color),
+        classificationType: ClassificationType.TERRAIN,
+        shadows: disableShadow ? ShadowMode.DISABLED : ShadowMode.ENABLED,
+        ...(enableRelativeHeight
+          ? { height: 0, heightReference: HeightReference.RELATIVE_TO_GROUND }
+          : undefined),
+      },
+    }),
+    [extrudedHeight, disableShadow, hierarchy, color, enableRelativeHeight],
+  );
+
+  const { requestRender } = useContext();
+  requestRender?.();
+
+  return <Entity id={id} {...options} />;
+};

package/src/engines/Cesium/Sketch/MeasurementText.tsx

@@ -0,0 +1,13 @@
+import { FC, ReactNode } from "react";
+
+const textStyle = {
+  padding: "5px",
+  color: "#fff",
+  backgroundColor: "#000",
+  borderRadius: "5px",
+  lineHeight: 1,
+};
+
+export const MeasurementText: FC<{ children: ReactNode }> = ({ children }) => {
+  return <div style={textStyle}>{children}</div>;
+};

package/src/engines/Cesium/Sketch/PolygonEntity.tsx

@@ -0,0 +1,48 @@
+import {
+  CallbackProperty,
+  ClassificationType,
+  type Color,
+  type PolygonHierarchy,
+} from "@cesium/engine";
+import { useMemo, useRef, type FC } from "react";
+
+import { useConstant } from "../../../utils";
+import { useContext } from "../Feature/context";
+
+import { Entity, type EntityProps } from "./Entity";
+
+export interface PolygonEntityProps {
+  dynamic?: boolean;
+  hierarchy?: PolygonHierarchy;
+  color?: Color;
+}
+
+export const PolygonEntity: FC<PolygonEntityProps> = ({
+  dynamic = false,
+  hierarchy: hierarchyProp,
+  color,
+}) => {
+  const hierarchyRef = useRef(hierarchyProp);
+  hierarchyRef.current = hierarchyProp;
+  const hierarchyProperty = useConstant(
+    () => new CallbackProperty(() => hierarchyRef.current, false),
+  );
+  const hierarchy = dynamic ? hierarchyProperty : hierarchyProp;
+
+  const options = useMemo(
+    (): EntityProps => ({
+      polygon: {
+        hierarchy,
+        fill: true,
+        material: color?.withAlpha(0.5),
+        classificationType: ClassificationType.TERRAIN,
+      },
+    }),
+    [color, hierarchy],
+  );
+
+  const { requestRender } = useContext();
+  requestRender?.();
+
+  return <Entity {...options} />;
+};

package/src/engines/Cesium/Sketch/PolylineEntity.tsx

@@ -0,0 +1,44 @@
+import { CallbackProperty, ClassificationType, type Cartesian3, type Color } from "@cesium/engine";
+import { useMemo, useRef, type FC } from "react";
+
+import { useConstant } from "../../../utils";
+import { useContext } from "../Feature/context";
+
+import { Entity, type EntityProps } from "./Entity";
+
+export interface PolylineEntityProps {
+  dynamic?: boolean;
+  positions: Cartesian3[];
+  color?: Color;
+}
+
+export const PolylineEntity: FC<PolylineEntityProps> = ({
+  dynamic = false,
+  positions: positionsProp,
+  color,
+}) => {
+  const positionsRef = useRef(positionsProp);
+  positionsRef.current = positionsProp;
+  const positionsProperty = useConstant(
+    () => new CallbackProperty(() => positionsRef.current, !dynamic),
+  );
+  const positions = dynamic ? positionsProperty : positionsProp;
+
+  const options = useMemo(
+    (): EntityProps => ({
+      polyline: {
+        positions,
+        width: 1.5,
+        material: color,
+        classificationType: ClassificationType.TERRAIN,
+        clampToGround: true,
+      },
+    }),
+    [color, positions],
+  );
+
+  const { requestRender } = useContext();
+  requestRender?.();
+
+  return <Entity {...options} />;
+};

package/src/engines/Cesium/Sketch/ScreenSpaceElement.tsx

@@ -0,0 +1,87 @@
+import { Cartesian2, Cartesian3, Ellipsoid, EllipsoidalOccluder } from "@cesium/engine";
+import { motion, useMotionValue } from "framer-motion";
+import { forwardRef, useRef, type ComponentPropsWithRef } from "react";
+import { useMergeRefs } from "use-callback-ref";
+
+import { useConstant } from "../../../utils";
+import { useContext } from "../Feature/context";
+import { usePreRender } from "../hooks/useSceneEvent";
+
+export interface ScreenSpaceElementProps extends ComponentPropsWithRef<typeof motion.div> {
+  position?: Cartesian3;
+  children?: React.ReactNode;
+}
+
+const occluder = new EllipsoidalOccluder(Ellipsoid.WGS84, Cartesian3.ZERO);
+
+const ScreenSpaceElement = forwardRef<HTMLDivElement, ScreenSpaceElementProps>(
+  ({ position: positionProp, children, ...props }, forwardedRef) => {
+    const position = useConstant(() => new Cartesian3());
+    positionProp?.clone(position);
+
+    const motionTransform = useMotionValue("");
+    const motionDisplay = useMotionValue("none");
+
+    const { toWindowPosition, getCamera, toXYZ, isPositionVisible } = useContext();
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    usePreRender(() => {
+      if (ref.current == null) {
+        return;
+      }
+      let windowPosition;
+      try {
+        const pos = toWindowPosition?.([position.x, position.y, position.z]);
+        windowPosition = new Cartesian2(pos?.[0], pos?.[1]);
+      } catch (error) {
+        motionDisplay.set("none");
+        return;
+      }
+
+      const camera = getCamera?.();
+      if (!camera) return;
+      const xyz = toXYZ?.(camera?.lng, camera?.lat, camera?.height);
+      if (!xyz) return;
+      occluder.cameraPosition = new Cartesian3(xyz[0], xyz[1], xyz[2]);
+      if (
+        windowPosition == null ||
+        windowPosition.x < 0 ||
+        windowPosition.y < 0 ||
+        windowPosition.x > window.innerWidth ||
+        windowPosition.y > window.innerHeight ||
+        !isPositionVisible?.([position.x, position.y, position.z])
+      ) {
+        motionDisplay.set("none");
+        return;
+      }
+      const x = `calc(${windowPosition.x}px - 50%)`;
+      const y = `calc(${windowPosition.y}px - 50%)`;
+      motionTransform.set(`translate(${x}, ${y})`);
+      motionDisplay.set("block");
+    });
+
+    const mergedRef = useMergeRefs([ref, forwardedRef]);
+
+    return (
+      <motion.div
+        ref={mergedRef}
+        {...props}
+        style={{
+          ...props.style,
+          transform: motionTransform,
+          display: motionDisplay,
+          position: "absolute",
+          pointerEvents: "none",
+          left: 0,
+          top: 0,
+        }}>
+        {children}
+      </motion.div>
+    );
+  },
+);
+
+ScreenSpaceElement.displayName = "ScreenSpaceElement";
+
+export default ScreenSpaceElement;

package/src/engines/Cesium/Sketch/SurfaceControlPoints.tsx

@@ -0,0 +1,67 @@
+import { Cartesian3, type Color } from "@cesium/engine";
+import { memo, type FC } from "react";
+
+import { ControlPoint } from "./ControlPoint";
+import { type GeometryOptions } from "./createGeometry";
+import { SurfaceMeasurement } from "./SurfaceMeasurement";
+
+export interface SurfaceControlPointsProps {
+  geometryOptions: GeometryOptions;
+  color?: Color;
+}
+
+const cartesianScratch1 = new Cartesian3();
+const cartesianScratch2 = new Cartesian3();
+
+const SurfaceControlPoints: FC<SurfaceControlPointsProps> = memo(
+  ({ geometryOptions: { type, controlPoints: controlPointsProp }, color }) => {
+    let controlPoints = [...controlPointsProp];
+    let measurementPoints: [Cartesian3, Cartesian3] | undefined;
+    let showLine = false;
+
+    if (type === "rectangle" && controlPoints.length === 3) {
+      const [p1, p2, p3] = controlPoints;
+      const projection = Cartesian3.projectVector(
+        Cartesian3.subtract(p3, p1, cartesianScratch1),
+        Cartesian3.subtract(p2, p1, cartesianScratch2),
+        cartesianScratch1,
+      );
+      const offset = Cartesian3.subtract(
+        p3,
+        Cartesian3.add(p1, projection, cartesianScratch1),
+        cartesianScratch2,
+      );
+      const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
+      const p5 = Cartesian3.add(p4, offset, cartesianScratch2);
+      controlPoints = [p1, p2, p5];
+      measurementPoints = [p4, p5];
+      showLine = true;
+    } else if (type === "marker") {
+      measurementPoints = undefined;
+      controlPoints = [];
+    } else if (controlPoints.length >= 2) {
+      measurementPoints = controlPoints.slice(-2) as [Cartesian3, Cartesian3];
+      showLine = type === "circle";
+    }
+
+    return (
+      <>
+        {controlPoints.map((controlPoint, index) => (
+          <ControlPoint key={index} position={controlPoint} clampToGround />
+        ))}
+        {measurementPoints != undefined && (
+          <SurfaceMeasurement
+            a={measurementPoints[0]}
+            b={measurementPoints[1]}
+            color={color}
+            showLine={showLine}
+          />
+        )}
+      </>
+    );
+  },
+);
+
+SurfaceControlPoints.displayName = "SurfaceControlPoints";
+
+export default SurfaceControlPoints;