@reearth/core 0.0.1

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

@@ -0,0 +1,289 @@
+import composeRefs from "@seznam/compose-react-refs";
+import {
+  Cesium3DTileFeature,
+  Cesium3DTileset,
+  Color,
+  Entity as CesiumEntity,
+  Iso8601,
+  JulianDate,
+  PropertyBag,
+  TimeInterval as CesiumTimeInterval,
+  TimeIntervalCollection as CesiumTimeIntervalCollection,
+  DistanceDisplayCondition as CesiumDistanceDisplayCondition,
+  Model,
+  Cesium3DTilePointFeature,
+  ImageryLayer,
+  Primitive,
+  GroundPrimitive,
+} from "cesium";
+import md5 from "js-md5";
+import { pick } from "lodash-es";
+import {
+  ComponentProps,
+  ComponentType,
+  ForwardedRef,
+  forwardRef,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { type CesiumComponentRef, Entity } from "resium";
+
+import type {
+  AppearanceTypes,
+  ComputedFeature,
+  ComputedLayer,
+  FeatureComponentProps,
+  Geometry,
+  SceneProperty,
+} from "../..";
+import { Data, Layer, LayerSimple, TimeInterval } from "../../../mantle";
+import { FeatureIndex } from "../FeatureIndex";
+import type { InternalCesium3DTileFeature } from "../types";
+
+export type FeatureProps<P = any> = {
+  id: string;
+  property?: P;
+  isVisible?: boolean;
+  layer?: ComputedLayer;
+  feature?: ComputedFeature;
+  geometry?: Geometry;
+  sceneProperty?: SceneProperty;
+} & Omit<FeatureComponentProps, "layer">;
+
+export type FeatureComponent = ComponentType<FeatureProps>;
+
+export type FeatureComponentConfig = {
+  noLayer?: boolean;
+  noFeature?: boolean;
+};
+
+export type Tag = {
+  layerId?: string;
+  featureId?: string;
+  draggable?: boolean;
+  unselectable?: boolean;
+  legacyLocationPropertyKey?: string;
+  originalProperties?: any;
+  computedFeature?: ComputedFeature;
+  hideIndicator?: boolean;
+  appearanceType?: keyof AppearanceTypes;
+  featureIndex?: FeatureIndex;
+  isFeatureSelected?: boolean;
+};
+
+export const EntityExt = forwardRef(EntityExtComponent);
+
+function EntityExtComponent(
+  {
+    layerId,
+    featureId,
+    draggable,
+    unselectable,
+    legacyLocationPropertyKey,
+    hideIndicator,
+    ...props
+  }: ComponentProps<typeof Entity> & Tag,
+  ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
+) {
+  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
+
+  useLayoutEffect(() => {
+    attachTag(r.current?.cesiumElement, {
+      layerId: layerId || props.id,
+      featureId,
+      draggable,
+      unselectable,
+      legacyLocationPropertyKey,
+      hideIndicator,
+    });
+  }, [
+    draggable,
+    featureId,
+    layerId,
+    legacyLocationPropertyKey,
+    props.id,
+    unselectable,
+    hideIndicator,
+  ]);
+
+  return <Entity ref={composeRefs(ref, r)} {...props} />;
+}
+
+export function attachTag(
+  entity:
+    | CesiumEntity
+    | Cesium3DTileset
+    | InternalCesium3DTileFeature
+    | ImageryLayer
+    | Primitive
+    | GroundPrimitive
+    | null
+    | undefined,
+  tag: Tag,
+) {
+  if (!entity) return;
+
+  if (entity instanceof Cesium3DTileset) {
+    (entity as any)[tagKey] = tag;
+    return;
+  }
+
+  if (
+    entity instanceof Cesium3DTileFeature ||
+    entity instanceof Cesium3DTilePointFeature ||
+    entity instanceof Model ||
+    entity instanceof ImageryLayer
+  ) {
+    (entity as any)[tagKey] = tag;
+    return;
+  }
+
+  if (entity instanceof Primitive) {
+    (entity as any)[tagKey] = tag;
+    return;
+  }
+
+  if (entity instanceof GroundPrimitive) {
+    (entity as any)[tagKey] = tag;
+    return;
+  }
+
+  if (!entity.properties) {
+    entity.properties = new PropertyBag();
+  }
+  for (const k of tagKeys) {
+    if (!(k in tag) && entity.properties.hasProperty(`reearth_${k}`))
+      entity.properties.removeProperty(`reearth_${k}`);
+    else entity.properties[`reearth_${k}`] = tag[k];
+  }
+}
+
+export function getTag(
+  entity:
+    | CesiumEntity
+    | Cesium3DTileset
+    | Cesium3DTileFeature
+    | Cesium3DTilePointFeature
+    | Primitive
+    | GroundPrimitive
+    | Model
+    | ImageryLayer
+    | null
+    | undefined,
+): Tag | undefined {
+  if (!entity) return;
+
+  if (entity instanceof Cesium3DTileset) {
+    return (entity as any)[tagKey];
+  }
+
+  if (
+    entity instanceof Cesium3DTileFeature ||
+    entity instanceof Cesium3DTilePointFeature ||
+    entity instanceof Model ||
+    entity instanceof ImageryLayer
+  ) {
+    return (entity as any)[tagKey];
+  }
+
+  if (entity instanceof Primitive) {
+    return (entity as any)[tagKey];
+  }
+
+  if (entity instanceof GroundPrimitive) {
+    return (entity as any)[tagKey];
+  }
+
+  if (!entity.properties) return;
+
+  return Object.fromEntries(
+    Object.entries(entity.properties)
+      .map(([k, v]): readonly [PropertyKey, any] | null => {
+        if (!tagKeys.includes(k.replace("reearth_", "") as keyof Tag)) return null;
+        return [k.replace("reearth_", ""), v];
+      })
+      .filter((e): e is readonly [PropertyKey, any] => !!e),
+  );
+}
+
+const tagObj: { [k in keyof Tag]: 1 } = {
+  draggable: 1,
+  featureId: 1,
+  layerId: 1,
+  unselectable: 1,
+  originalProperties: 1,
+  computedFeature: 1,
+  hideIndicator: 1,
+  appearanceType: 1,
+  featureIndex: 1,
+  isFeatureSelected: 1,
+};
+
+const tagKeys = Object.keys(tagObj) as (keyof Tag)[];
+
+const tagKey = "__reearth_tag";
+
+export const extractSimpleLayer = (
+  layer: ComputedLayer | Layer | undefined,
+): LayerSimple | void => {
+  const l = layer && "layer" in layer ? layer.layer : layer;
+  if (l?.type !== "simple") {
+    return;
+  }
+  return l;
+};
+
+export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | undefined => {
+  return extractSimpleLayer(layer)?.data;
+};
+
+export const toColor = (c?: string) => {
+  if (!c || typeof c !== "string") return undefined;
+
+  // support alpha
+  const m = c.match(/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/);
+  if (!m) return Color.fromCssColorString(c);
+
+  const alpha = parseInt(m[4] ? m[4].repeat(2) : m[2], 16) / 255;
+  return Color.fromCssColorString(`#${m[1] ?? m[3]}`).withAlpha(alpha);
+};
+
+export const toTimeInterval = (
+  interval: TimeInterval | undefined,
+): CesiumTimeIntervalCollection | undefined => {
+  if (!interval) {
+    return;
+  }
+  return new CesiumTimeIntervalCollection([
+    new CesiumTimeInterval({
+      start: JulianDate.fromDate(interval[0]),
+      stop: interval[1] ? JulianDate.fromDate(interval[1]) : Iso8601.MAXIMUM_VALUE,
+    }),
+  ]);
+};
+
+export const toDistanceDisplayCondition = (
+  near: number | undefined,
+  far: number | undefined,
+): CesiumDistanceDisplayCondition | undefined => {
+  return typeof near === "number" || typeof far === "number"
+    ? new CesiumDistanceDisplayCondition(near ?? 0.0, far ?? Number.MAX_VALUE)
+    : undefined;
+};
+
+export const generateIDWithMD5 = (id: string) => {
+  const hash = md5.create();
+  hash.update(id);
+
+  return hash.hex();
+};
+
+export const usePick = <T extends object, U extends keyof T>(
+  o: T | undefined | null,
+  fields: readonly U[],
+): Pick<T, U> | undefined => {
+  const p = useMemo(() => (o ? pick(o, fields) : undefined), [o, fields]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => p, [JSON.stringify(p)]);
+};

package/src/engines/Cesium/FeatureIndex.ts

@@ -0,0 +1,15 @@
+// This is for indexing the feature to find the feature with less computation.
+// You can refer TilesetFeatureIndex to see the detail of implementation.
+export class FeatureIndex<Record = unknown, Feature = unknown> {
+  readonly records = new Map<string, Record[]>();
+
+  constructor() {}
+
+  has(key: string): boolean {
+    return this.records.has(key);
+  }
+
+  find(_key: string): Feature[] | undefined {
+    return;
+  }
+}

package/src/engines/Cesium/JapanSeaLevelEllipsoid.ts

@@ -0,0 +1,20 @@
+import { Ellipsoid } from "@cesium/engine";
+
+// See https://www.gsi.go.jp/sokuchikijun/datum-main.html#p2
+export const SEMI_MAJOR_RADIUS = 6378137;
+export const ECCENTRICITY = 1 / 298.257222101;
+export const SEMI_MINOR_RADIUS = (1 - ECCENTRICITY) * SEMI_MAJOR_RADIUS;
+
+// Geoidal height of Japanese datum of leveling.
+export const GEOIDAL_HEIGHT = 36.7071;
+
+// A shape offset from an ellipsoid is not an ellipsoid unless it's a sphere;
+// this is just an approximation.
+export const JapanSeaLevelEllipsoid = Object.assign(
+  new Ellipsoid(
+    SEMI_MAJOR_RADIUS + GEOIDAL_HEIGHT,
+    SEMI_MAJOR_RADIUS + GEOIDAL_HEIGHT,
+    SEMI_MINOR_RADIUS + GEOIDAL_HEIGHT,
+  ),
+  { geoidalHeight: GEOIDAL_HEIGHT },
+);

package/src/engines/Cesium/PostProcesses/README.md

@@ -0,0 +1 @@
+# Post processes

package/src/engines/Cesium/PostProcesses/hbao/AmbientOcclusion.tsx

@@ -0,0 +1,120 @@
+import { PerspectiveFrustum, type Scene, Math as CesiumMath } from "cesium";
+import { useState, type FC } from "react";
+import { useCesium } from "resium";
+
+import { useInstance } from "../../hooks/useInstance";
+import { usePreRender } from "../../hooks/useSceneEvent";
+
+import {
+  createAmbientOcclusionStage,
+  type AmbientOcclusionStageOptions,
+  type AmbientOcclusionStageUniforms,
+} from "./createAmbientOcclusionStage";
+
+export interface AmbientOcclusionProps
+  extends Omit<AmbientOcclusionStageOptions, "prefix">,
+    Partial<AmbientOcclusionStageUniforms> {
+  enabled?: boolean;
+}
+
+export const AmbientOcclusionStage = ({
+  enabled = true,
+  textureScale,
+  directions,
+  steps,
+  denoise,
+  accurateNormalReconstruction,
+  outputType,
+  useGlobeDepth,
+  ...uniforms
+}: AmbientOcclusionProps) => {
+  const { viewer } = useCesium();
+  const scene = viewer?.scene;
+  const stage = useInstance({
+    owner: scene?.postProcessStages,
+    keys: [
+      textureScale,
+      steps,
+      directions,
+      denoise,
+      accurateNormalReconstruction,
+      outputType,
+      useGlobeDepth,
+    ],
+    create: () => {
+      const stage = createAmbientOcclusionStage({
+        textureScale,
+        steps,
+        directions,
+        denoise,
+        accurateNormalReconstruction,
+        outputType,
+        useGlobeDepth,
+        // It's tricky to bind globe's depth texture to postprocess stage,
+        // because it is undefined for the first several frames, or when
+        // terrain is being reconstructed. Functional uniform value is invoked
+        // when this stage is actually being rendered.
+        getGlobeDepthTexture: () =>
+          (
+            scene as Scene & {
+              context: {
+                uniformState: {
+                  globeDepthTexture?: unknown;
+                };
+              };
+            }
+          ).context.uniformState.globeDepthTexture,
+        uniforms,
+      });
+      stage.enabled = enabled;
+      return stage;
+    },
+    transferOwnership: (stage, postProcessStages) => {
+      postProcessStages?.add(stage);
+      return () => {
+        postProcessStages?.remove(stage);
+      };
+    },
+  });
+
+  stage.enabled = enabled;
+  Object.assign(stage.uniforms, uniforms);
+  scene?.requestRender();
+
+  usePreRender(() => {
+    const frustum = scene?.camera.frustum;
+    if (frustum instanceof PerspectiveFrustum) {
+      const cotFovy = 1 / Math.tan(frustum.fovy / 2);
+      stage.uniforms.focalLength.x = cotFovy * frustum.aspectRatio;
+      stage.uniforms.focalLength.y = cotFovy;
+    }
+  });
+
+  return null;
+};
+
+export const AmbientOcclusion: FC<AmbientOcclusionProps> = props => {
+  const viewer = useCesium();
+  const [useGlobeDepth, setUseGlobeDepth] = useState(false);
+  usePreRender(() => {
+    const scene = viewer.scene;
+
+    setUseGlobeDepth(!scene?.globe.depthTestAgainstTerrain);
+
+    // ref: https://github.com/takram-design-engineering/plateau-view/blob/6669bea902c5e53c21b695d32ada5ca3121bc401/libs/view/src/containers/SceneCoordinator.tsx#L27-L41
+    // Increase the precision of the depth buffer which HBAO looks up to
+    // reconstruct normals.
+    const { globeHeight } = scene as Scene & { globeHeight?: number };
+    if (!scene || globeHeight == null) {
+      return;
+    }
+    // Screen-space camera controller should detect collision
+    const cameraHeight = scene.camera.positionCartographic.height - globeHeight;
+    const frustum = scene?.camera.frustum;
+    if (frustum instanceof PerspectiveFrustum) {
+      scene.camera.frustum.near =
+        CesiumMath.clamp(cameraHeight - 1, 1, 5) / Math.tan(frustum.fov / 2);
+    }
+  });
+  return <AmbientOcclusionStage {...props} useGlobeDepth={useGlobeDepth} />;
+};

package/src/engines/Cesium/PostProcesses/hbao/AmbientOcclusionOutputType.ts

@@ -0,0 +1,7 @@
+export const enum AmbientOcclusionOutputType {
+  Occlusion = 1,
+  Normal = 2,
+  Depth = 3,
+  Weight = 4,
+  Shade = 5,
+}

package/src/engines/Cesium/PostProcesses/hbao/README.md

@@ -0,0 +1,3 @@
+# HBAO post-processor
+
+An implementation forked from [takram-design-enginering/plateau-view](https://github.com/takram-design-engineering/plateau-view/tree/main/libs/cesium-hbao).

package/src/engines/Cesium/PostProcesses/hbao/config.ts

@@ -0,0 +1,29 @@
+export const AMBIENT_OCCLUSION_QUALITY: Record<
+  "low" | "medium" | "high" | "extreme",
+  { steps: number; directions: number; textureScale: number; maxRadius: number }
+> = {
+  low: {
+    directions: 4,
+    steps: 4,
+    textureScale: 0.5,
+    maxRadius: 30,
+  },
+  medium: {
+    directions: 4,
+    steps: 8,
+    textureScale: 0.5,
+    maxRadius: 40,
+  },
+  high: {
+    directions: 8,
+    steps: 8,
+    textureScale: 1,
+    maxRadius: 40,
+  },
+  extreme: {
+    directions: 16,
+    steps: 16,
+    textureScale: 1,
+    maxRadius: 40,
+  },
+};

package/src/engines/Cesium/PostProcesses/hbao/createAmbientOcclusionStage.ts

@@ -0,0 +1,173 @@
+import { Cartesian2, Color, PostProcessStage, PostProcessStageComposite } from "cesium";
+import { defaults, pick } from "lodash-es";
+
+import { createUniforms } from "../../helpers/createUniforms";
+
+import { type AmbientOcclusionOutputType } from "./AmbientOcclusionOutputType";
+import { createBilateralFilterStage } from "./createCrossBilateralFilterStage";
+import ambientOcclusionGenerate from "./shaders/ambientOcclusionGenerate.glsl?raw";
+import ambientOcclusionModulate from "./shaders/ambientOcclusionModulate.glsl?raw";
+import depth from "./shaders/depth.glsl?raw";
+import globeDepth from "./shaders/globeDepth.glsl?raw";
+import highPassRandom from "./shaders/highPassRandom.glsl?raw";
+import packing from "./shaders/packing.glsl?raw";
+import reconstructNormal from "./shaders/reconstructNormal.glsl?raw";
+import reconstructPosition from "./shaders/reconstructPosition.glsl?raw";
+import turboColorMap from "./shaders/turboColorMap.glsl?raw";
+
+interface PrivatePostProcessStage extends PostProcessStage {
+  _depthTexture: unknown;
+}
+
+export interface AmbientOcclusionStageUniforms {
+  intensity: number;
+  color: Color;
+  maxRadius: number;
+  frustumLength: number;
+  bias: number;
+  focalLength: Cartesian2;
+  blackPoint: number;
+  whitePoint: number;
+  gamma: number;
+  normalExponent?: number;
+  depthExponent?: number;
+}
+
+const defaultUniforms: Omit<AmbientOcclusionStageUniforms, "globeDepthTexture"> = {
+  intensity: 100,
+  color: Color.BLACK,
+  maxRadius: 30,
+  bias: 0.1,
+  frustumLength: 1e5,
+  focalLength: new Cartesian2(),
+  blackPoint: 0.05,
+  whitePoint: 0.9,
+  gamma: 2.5,
+};
+
+export interface AmbientOcclusionStageOptions {
+  prefix?: string;
+  textureScale?: number;
+  directions?: number;
+  steps?: number;
+  denoise?: boolean;
+  accurateNormalReconstruction?: boolean;
+  outputType?: AmbientOcclusionOutputType | null;
+  useGlobeDepth?: boolean;
+  getGlobeDepthTexture?: () => unknown | undefined;
+  uniforms?: Partial<AmbientOcclusionStageUniforms>;
+}
+
+export function createAmbientOcclusionStage({
+  prefix = "reearth",
+  textureScale = 1,
+  directions,
+  steps,
+  denoise = true,
+  accurateNormalReconstruction = true,
+  outputType = null,
+  useGlobeDepth = false,
+  getGlobeDepthTexture,
+  uniforms: uniformsOption = {},
+}: AmbientOcclusionStageOptions): PostProcessStageComposite {
+  const uniforms = defaults({}, uniformsOption, defaultUniforms);
+
+  const generate = new PostProcessStage({
+    name: `${prefix}_ambient_occlusion_generate`,
+    fragmentShader: `
+      ${directions != null ? `#define NUM_DIRECTIONS (${directions})` : ""}
+      ${steps != null ? `#define NUM_STEPS (${steps})` : ""}
+      ${accurateNormalReconstruction ? "#define USE_ACCURATE_NORMAL" : ""}
+      ${outputType != null ? `#define OUTPUT_TYPE (${outputType})` : ""}
+      ${useGlobeDepth ? globeDepth : depth}
+      ${packing}
+      ${highPassRandom}
+      ${reconstructPosition}
+      ${reconstructNormal}
+      ${ambientOcclusionGenerate}
+    `,
+    textureScale,
+    uniforms: {
+      textureScale,
+      ...pick(uniforms, ["intensity", "maxRadius", "bias", "frustumLength", "focalLength"]),
+      globeDepthTexture: () => {
+        return getGlobeDepthTexture?.() ?? (generate as PrivatePostProcessStage)._depthTexture;
+      },
+    },
+  });
+
+  const modulate = new PostProcessStage({
+    name: `${prefix}_ambient_occlusion_modulate`,
+    fragmentShader: `
+      ${outputType != null ? `#define OUTPUT_TYPE (${outputType})` : ""}
+      ${useGlobeDepth ? globeDepth : depth}
+      ${packing}
+      ${reconstructPosition}
+      ${turboColorMap}
+      ${ambientOcclusionModulate}
+    `,
+    uniforms: {
+      ...pick(uniforms, ["color", "frustumLength", "blackPoint", "whitePoint", "gamma"]),
+      globeDepthTexture: () =>
+        getGlobeDepthTexture?.() ?? (modulate as PrivatePostProcessStage)._depthTexture,
+    },
+  });
+
+  if (denoise) {
+    const filter = createBilateralFilterStage({
+      prefix,
+      outputType,
+      useGlobeDepth,
+      getGlobeDepthTexture,
+      uniforms: {
+        textureScale,
+        ...pick(uniforms, ["frustumLength", "normalExponent", "depthExponent"]),
+      },
+    });
+
+    const generateAndFilter = new PostProcessStageComposite({
+      name: `${prefix}_ambient_occlusion_generate_and_filter`,
+      stages: [generate, filter],
+    });
+
+    modulate.uniforms.ambientOcclusionTexture = generateAndFilter.name;
+
+    return new PostProcessStageComposite({
+      name: `${prefix}_ambient_occlusion`,
+      stages: [generateAndFilter, modulate],
+      inputPreviousStageTexture: false,
+      uniforms: createUniforms<AmbientOcclusionStageUniforms>([
+        {
+          stage: generate,
+          uniforms: ["intensity", "maxRadius", "bias", "frustumLength", "focalLength"],
+        },
+        {
+          stage: filter,
+          uniforms: ["frustumLength", "normalExponent", "depthExponent"],
+        },
+        {
+          stage: modulate,
+          uniforms: ["color", "blackPoint", "whitePoint", "gamma"],
+        },
+      ]),
+    });
+  } else {
+    modulate.uniforms.ambientOcclusionTexture = generate.name;
+
+    return new PostProcessStageComposite({
+      name: `${prefix}_ambient_occlusion`,
+      stages: [generate, modulate],
+      inputPreviousStageTexture: false,
+      uniforms: createUniforms<AmbientOcclusionStageUniforms>([
+        {
+          stage: generate,
+          uniforms: ["intensity", "maxRadius", "bias", "frustumLength", "focalLength"],
+        },
+        {
+          stage: modulate,
+          uniforms: ["color", "blackPoint", "whitePoint", "gamma"],
+        },
+      ]),
+    });
+  }
+}