@reearth/core 0.0.1

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

@@ -0,0 +1,108 @@
+import { quantile } from "d3";
+
+export type MeshImageData = {
+  image: HTMLCanvasElement;
+  width: number;
+  height: number;
+  maxValue?: number;
+  minValue?: number;
+  outlierThreshold?: number;
+};
+
+export async function fetchImageAndCreateMeshImageData(
+  url: string,
+  reversingImageNeeded?: boolean,
+): Promise<MeshImageData> {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return Promise.reject("Failed to create canvas context");
+  }
+
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      const imageData = ctx.getImageData(0, 0, img.width, img.height).data;
+      const { minValue, maxValue, outlierThreshold } = reversingImageNeeded
+        ? reverseMeshDataAndComputeValues(imageData, img.width, img.height)
+        : {
+            minValue: 0,
+            maxValue: 100,
+            outlierThreshold: 100,
+          };
+
+      resolve({
+        image: canvas,
+        width: img.width,
+        height: img.height,
+        minValue,
+        maxValue,
+        outlierThreshold,
+      });
+    };
+    img.onerror = reject;
+
+    if (url.startsWith("data:image")) {
+      img.src = url;
+    } else {
+      fetch(url)
+        .then(response => response.blob())
+        .then(blob => {
+          img.src = URL.createObjectURL(blob);
+        })
+        .catch(reject);
+    }
+  });
+}
+
+function computeOutlierThreshold(values: number[]): number {
+  return (
+    quantile(
+      values.filter(value => value > 0),
+      0.999,
+    ) ?? 0
+  );
+}
+
+function reverseMeshDataAndComputeValues(
+  data: Uint8ClampedArray,
+  width: number,
+  height: number,
+  scale = 1,
+): Omit<MeshImageData, "image" | "width" | "height"> {
+  let minValue = Infinity;
+  let maxValue = -Infinity;
+  const valuesForOutlierCalculation = [];
+
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const i = (y * width + x) * 4;
+      const r = data[i];
+      const g = data[i + 1];
+      const b = data[i + 2];
+
+      let originalValue = ((((r << 16) >>> 0) + ((g << 8) >>> 0) + b) >>> 0) - 0x800000;
+
+      if (scale !== 1) {
+        originalValue /= scale;
+      }
+
+      minValue = Math.min(minValue, originalValue);
+      maxValue = Math.max(maxValue, originalValue);
+
+      valuesForOutlierCalculation.push(Math.abs(originalValue));
+    }
+  }
+
+  const outlierThreshold = computeOutlierThreshold(valuesForOutlierCalculation);
+
+  return {
+    minValue,
+    maxValue,
+    outlierThreshold,
+  };
+}

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

@@ -0,0 +1,169 @@
+import * as turf from "@turf/turf";
+import { BoundingSphere, Intersect, PerspectiveFrustum, Rectangle, Cartesian3 } from "cesium";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useCesium } from "resium";
+import invariant from "tiny-invariant";
+
+import { HeatMapAppearance } from "../../../../mantle";
+import { usePreRender } from "../../hooks/useSceneEvent";
+import { useContext } from "../context";
+import { FeatureComponentConfig, FeatureProps } from "../utils";
+
+import { flareColorMapLUT } from "./constants";
+import { fetchImageAndCreateMeshImageData, MeshImageData } from "./createMeshImageData";
+import { HeatmapMesh, HeatmapMeshHandle } from "./HeatmapMesh";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = HeatMapAppearance;
+
+export default memo(function HeatMap({ property, isVisible, layer, feature }: Props) {
+  const {
+    valueMap,
+    colorMap = flareColorMapLUT,
+    width,
+    height,
+    bounds,
+    cropBounds,
+    minValue,
+    maxValue,
+    opacity = 0.8,
+    contourThickness = 1,
+    contourAlpha = 0.2,
+    logarithmic = false,
+  } = property ?? {};
+  const { scene } = useCesium();
+
+  const ctx = useContext();
+
+  // Bounds is nested object, and this cause unnecessary render frequently, so wrap with useMemo.
+  const boudsRef = useMemo(
+    () => [bounds?.west ?? 0, bounds?.south ?? 0, bounds?.east ?? 0, bounds?.north ?? 0] as const,
+    [bounds?.west, bounds?.south, bounds?.east, bounds?.north],
+  );
+
+  const boundingSphere = useMemo(
+    () => BoundingSphere.fromRectangle3D(Rectangle.fromDegrees(...boudsRef)),
+    [boudsRef],
+  );
+
+  const [visible, setVisible] = useState(false);
+
+  const checkVisiblity = (): boolean => {
+    if (scene && !scene.camera) {
+      return false;
+    }
+
+    const camera = scene?.camera;
+    const frustum = camera?.frustum;
+    invariant(
+      frustum instanceof PerspectiveFrustum,
+      "Frustum should be a PerspectiveFrustum instance",
+    );
+
+    const cullingVolume = frustum.computeCullingVolume(
+      camera?.position || Cartesian3.ONE,
+      camera?.direction || Cartesian3.ONE,
+      camera?.up || Cartesian3.ONE,
+    );
+    return cullingVolume.computeVisibility(boundingSphere) !== Intersect.OUTSIDE;
+  };
+
+  const heatmapMeshRef = useRef<HeatmapMeshHandle>(null);
+
+  useEffect(() => {
+    if (heatmapMeshRef.current) {
+      heatmapMeshRef.current.sendToBack();
+    }
+  }, []);
+
+  usePreRender(() => {
+    const currentVisibility = checkVisiblity();
+    if (currentVisibility !== visible) {
+      setVisible(currentVisibility);
+      if (ctx?.onLayerVisibility && layer?.id) {
+        ctx.onLayerVisibility({ layerId: layer.id });
+      }
+    }
+  });
+
+  useEffect(() => {
+    return () => {
+      if (!scene?.isDestroyed()) {
+        scene?.requestRender();
+      }
+    };
+  }, [scene]);
+
+  const [meshImageData, setMeshImageData] = useState<MeshImageData>();
+  const reversingImageNeeded = property?.maxValue == null && property?.minValue == null;
+  useEffect(() => {
+    if (!visible || !valueMap) return;
+    fetchImageAndCreateMeshImageData(valueMap, reversingImageNeeded)
+      .then(meshImageData => {
+        setMeshImageData(meshImageData);
+      })
+      .catch(() => {});
+  }, [reversingImageNeeded, valueMap, visible]);
+
+  const hasBounds = !!bounds;
+
+  const geometry = useMemo(
+    () =>
+      meshImageData != null && hasBounds
+        ? turf.bboxPolygon([boudsRef[0], boudsRef[1], boudsRef[2], boudsRef[3]]).geometry
+        : undefined,
+    [hasBounds, boudsRef, meshImageData],
+  );
+
+  if (!scene) {
+    return null;
+  }
+
+  const {
+    contourSpacing = maxValue != null
+      ? Math.max(10, maxValue / 20)
+      : Math.max(10, (meshImageData?.outlierThreshold || 0) / 20),
+  } = property ?? {};
+
+  const colorRange =
+    minValue != null && maxValue != null
+      ? [minValue, maxValue]
+      : extendRange([0, 100], [0, meshImageData?.outlierThreshold || 0]);
+
+  if (!isVisible || meshImageData == null || geometry == null) {
+    return null;
+  }
+  return (
+    <HeatmapMesh
+      layer={layer}
+      feature={feature}
+      boundingSphere={boundingSphere}
+      meshImageData={meshImageData}
+      geometry={geometry}
+      colorMapLUT={colorMap}
+      opacity={opacity}
+      minValue={colorRange[0]}
+      maxValue={colorRange[1]}
+      contourSpacing={contourSpacing}
+      contourThickness={contourThickness}
+      contourAlpha={contourAlpha}
+      bound={bounds}
+      ref={heatmapMeshRef}
+      cropBound={cropBounds}
+      logarithmic={logarithmic}
+      width={width || meshImageData.width}
+      height={height || meshImageData.height}
+    />
+  );
+});
+
+function extendRange(a: number[], b: number[]): [number, number] {
+  invariant(a.length === 2);
+  invariant(b.length === 2);
+  return [Math.min(a[0], b[0]), Math.max(a[1], b[1])];
+}
+
+export const config: FeatureComponentConfig = {
+  noFeature: true,
+};

package/src/engines/Cesium/Feature/HeatMap/shaders/heatmapMeshMaterial.glsl

@@ -0,0 +1,78 @@
+// ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/heatmap/src/shaders/heatmapMeshMaterial.glsl
+
+uniform sampler2D colorMap;
+uniform sampler2D image;
+uniform vec2 imageScale;
+uniform vec2 imageOffset;
+uniform float width;
+uniform float height;
+uniform float opacity;
+uniform float contourSpacing;
+uniform float contourThickness;
+uniform float contourAlpha;
+uniform bool logarithmic;
+
+#define LOG_10 (2.302585092994046)
+
+float pseudoLog(float value) {
+  return value > 10.0
+    ? log(value) / LOG_10
+    : value < -10.0
+      ? -log(-value) / LOG_10
+      : value / 10.0;
+}
+
+czm_material czm_getMaterial(czm_materialInput materialInput) {
+  vec2 texSize = vec2(width, height);
+  vec2 texelSize = 1.0 / texSize;
+  vec2 pair = sampleBicubic(
+    image,
+    // TODO: Derive geographic coordinates from UV and unproject them to find
+    // non-linear sampling coordinates.
+    materialInput.st * imageScale + imageOffset,
+    texSize,
+    texelSize
+  );
+  float value = pair.x;
+  float alpha = pair.y;
+
+  float scaledMinValue = czm_branchFreeTernary(
+    logarithmic,
+    pseudoLog(minValue),
+    minValue
+  );
+  float scaledMaxValue = czm_branchFreeTernary(
+    logarithmic,
+    pseudoLog(maxValue),
+    maxValue
+  );
+  float scaledValue = czm_branchFreeTernary(
+    logarithmic,
+    pseudoLog(value),
+    value
+  );
+
+  float normalizedValue = clamp(
+    (scaledValue - scaledMinValue) / (scaledMaxValue - scaledMinValue),
+    0.0,
+    1.0
+  );
+  vec3 color = texture(colorMap, vec2(normalizedValue, 0.5)).rgb;
+  color = czm_gammaCorrect(color);
+
+  float contour = makeContour(
+    value - minValue,
+    contourSpacing,
+    contourThickness
+  );
+  color = mix(
+    color,
+    vec3(step(dot(color, vec3(0.299, 0.587, 0.114)), 0.5)),
+    contour * contourAlpha
+  );
+
+  czm_material material = czm_getDefaultMaterial(materialInput);
+  material.diffuse = color;
+  material.alpha = opacity * alpha;
+  return material;
+}

package/src/engines/Cesium/Feature/HeatMap/shaders/makeContour.glsl

@@ -0,0 +1,13 @@
+// ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/heatmap/src/shaders/makeContour.glsl
+// Reference: https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Shaders/Materials/ElevationContourMaterial.glsl
+
+float makeContour(float value, float spacing, float width) {
+  if (value < spacing) {
+    return 0.0;
+  }
+  float distanceToContour = mod(value + 0.5, spacing);
+  float dx = abs(dFdx(value));
+  float dy = abs(dFdy(value));
+  float f = max(dx, dy) * czm_pixelRatio * width;
+  return step(distanceToContour, f);
+}

package/src/engines/Cesium/Feature/HeatMap/shaders/sampleBicubic.glsl

@@ -0,0 +1,57 @@
+// ref: https://github.com/takram-design-engineering/plateau-view/blob/main/libs/heatmap/src/shaders/sampleBicubic.glsl
+
+vec2 unpack(vec4 value) {
+  return vec2(
+    dot(value.rgb, vec3(16711680.0, 65280.0, 255.0)) - 8388608.0,
+    (value.a - 0.5) * 2.0
+  );
+}
+
+vec2 sampleBilinear(
+  sampler2D image,
+  vec2 texCoord,
+  vec2 texSize,
+  vec2 texelSize
+) {
+  vec2 unnormTexCoord = texCoord * texSize - 0.5;
+  vec2 uv = (floor(unnormTexCoord) + 0.5) / texSize;
+  vec2 f = fract(unnormTexCoord);
+  vec2 s1 = unpack(texture(image, uv));
+  vec2 s2 = unpack(texture(image, uv + vec2(texelSize.x, 0.0)));
+  vec2 s3 = unpack(texture(image, uv + vec2(0.0, texelSize.y)));
+  vec2 s4 = unpack(texture(image, uv + texelSize));
+  return mix(mix(s1, s2, f.x), mix(s3, s4, f.x), f.y);
+}
+
+// Reference: https://jvm-gaming.org/t/glsl-simple-fast-bicubic-filtering-shader-function/52549
+vec4 cubic(float v) {
+  vec4 n = vec4(1.0, 2.0, 3.0, 4.0) - v;
+  vec4 s = n * n * n;
+  float x = s.x;
+  float y = s.y - 4.0 * s.x;
+  float z = s.z - 4.0 * s.y + 6.0 * s.x;
+  float w = 6.0 - x - y - z;
+  return vec4(x, y, z, w) * (1.0 / 6.0);
+}
+
+vec2 sampleBicubic(
+  sampler2D image,
+  vec2 texCoord,
+  vec2 texSize,
+  vec2 texelSize
+) {
+  vec2 unnormTexCoord = texCoord * texSize - 0.5;
+  vec2 f = fract(unnormTexCoord);
+  vec4 cubicX = cubic(f.x);
+  vec4 cubicY = cubic(f.y);
+  vec4 c = (unnormTexCoord - f).xxyy + vec2(-0.5, 1.5).xyxy;
+  vec4 s = vec4(cubicX.xz + cubicX.yw, cubicY.xz + cubicY.yw);
+  vec4 offset = (c + vec4(cubicX.yw, cubicY.yw) / s) * texelSize.xxyy;
+  vec2 s1 = sampleBilinear(image, offset.xz, texSize, texelSize);
+  vec2 s2 = sampleBilinear(image, offset.yz, texSize, texelSize);
+  vec2 s3 = sampleBilinear(image, offset.xw, texSize, texelSize);
+  vec2 s4 = sampleBilinear(image, offset.yw, texSize, texelSize);
+  float sx = s.x / (s.x + s.y);
+  float sy = s.z / (s.z + s.w);
+  return mix(mix(s4, s3, sx), mix(s2, s1, sx), sy);
+}