@geoblocks/cesium-post-process 0.1.0 → 0.1.1

package/cloud-cover.js

@@ -0,0 +1,49 @@
+// Seen from above, Clouds draws the clouds over the rain under them, which Precipitation then
+// leaves to them: the scenes where clouds are drawn, by the active Clouds, with their shadow maps,
+// through which Precipitation lights its haze.
+
+/**
+ * A shadow map of the clouds: its texture, undefined until it is drawn, the ground point it is
+ * centered on, its side, and the base and the top of the slab it covers.
+ * @typedef {{texture: () => any, center: import('@cesium/core').Cartesian3, extent: () => number, base: () => number, top: () => number}} CloudShadow
+ */
+
+/** @type {WeakMap<import('@cesium/engine').Scene, CloudShadow[]>} */
+const covers = new WeakMap();
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {CloudShadow} shadow
+ */
+export function acquireCloudCover(scene, shadow) {
+  covers.set(scene, [...(covers.get(scene) ?? []), shadow]);
+}
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {CloudShadow} shadow
+ */
+export function releaseCloudCover(scene, shadow) {
+  const shadows = (covers.get(scene) ?? []).filter((other) => other !== shadow);
+  if (shadows.length > 0) {
+    covers.set(scene, shadows);
+  } else {
+    covers.delete(scene);
+  }
+}
+
+/**
+ * Whether clouds are drawn in the scene.
+ * @param {import('@cesium/engine').Scene} scene
+ */
+export function hasCloudCover(scene) {
+  return covers.has(scene);
+}
+
+/**
+ * The shadow map of the clouds drawn in the scene, the last activated's, or undefined without.
+ * @param {import('@cesium/engine').Scene} scene
+ */
+export function cloudShadow(scene) {
+  return covers.get(scene)?.at(-1);
+}

package/cloud-map.js

@@ -0,0 +1,122 @@
+import {imageData} from './weather-map.js';
+
+// The clouds' map, from a map of the rain: a radar sees the rain, "not the small cloud droplets and
+// ice crystals that make up the rest of the cloud" (UBC ATSC 201), so the clouds are derived from
+// it rather than drawn where it rains. Red is the rain, as it is; green is the coverage, the rain
+// spread into a cloud shield wider than it; blue is the type of the clouds, from a flat deck over
+// drizzle to towers over heavy rain, the precipitation turning the map "to cumulonimbus clouds"
+// (Schneider 2015).
+
+// the cloud shield reaches this far beyond the rain, in meters, its edge soft over about as much: 5
+// to 15 km wide
+const SHIELD_SPREAD = 5000;
+// the rain rate, in mm/h, at intensity 1, the map's intensity being sqrt(R / RAIN_RATE), as
+// RainHaze.glsl's
+const RAIN_RATE = 10;
+// the deck at this rain rate and below, in mm/h, towers at this one and above, about 40 dBZ (UBC
+// ATSC 201): the type is remap(log(R), log(0.5), log(10), 0, 1)
+const DECK_RATE = 0.5;
+const TOWER_RATE = 10;
+// meters, for the size of the map's pixels
+const EARTH_RADIUS = 6371000;
+// a Gaussian is approximated by this many box blurs, each a running sum whatever its width
+const BOXES = 3;
+
+/** @type {WeakMap<object, import('./weather-map.js').WeatherMapOptions>} */
+const cloudMaps = new WeakMap();
+
+/**
+ * Blurs values in place along rows (step 1) or columns (step width) by a box of a radius, a running
+ * sum, the edges held.
+ * @param {Float32Array} values
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
+ * @param {boolean} rows
+ */
+function boxBlur(values, width, height, radius, rows) {
+  const [count, length, step, stride] = rows ? [height, width, 1, width] : [width, height, width, 1];
+  const line = new Float32Array(length);
+  for (let i = 0; i < count; i++) {
+    const start = i * stride;
+    for (let j = 0; j < length; j++) {
+      line[j] = values[start + j * step];
+    }
+    let sum = 0;
+    for (let j = -radius; j <= radius; j++) {
+      sum += line[Math.min(Math.max(j, 0), length - 1)];
+    }
+    for (let j = 0; j < length; j++) {
+      values[start + j * step] = sum / (2 * radius + 1);
+      sum += line[Math.min(j + radius + 1, length - 1)] - line[Math.max(j - radius, 0)];
+    }
+  }
+}
+
+/**
+ * Dilates values in place along rows or columns: the highest within a radius.
+ * @param {Float32Array} values
+ * @param {number} width
+ * @param {number} height
+ * @param {number} radius
+ * @param {boolean} rows
+ */
+function dilate(values, width, height, radius, rows) {
+  const [count, length, step, stride] = rows ? [height, width, 1, width] : [width, height, width, 1];
+  const line = new Float32Array(length);
+  for (let i = 0; i < count; i++) {
+    const start = i * stride;
+    for (let j = 0; j < length; j++) {
+      line[j] = values[start + j * step];
+    }
+    for (let j = 0; j < length; j++) {
+      let max = 0;
+      for (let k = Math.max(j - radius, 0); k <= Math.min(j + radius, length - 1); k++) {
+        max = Math.max(max, line[k]);
+      }
+      values[start + j * step] = max;
+    }
+  }
+}
+
+/**
+ * The clouds' map of a map of the rain, over the same rectangle, made once for each image.
+ * @param {import('./weather-map.js').WeatherMapOptions} map
+ * @returns {import('./weather-map.js').WeatherMapOptions}
+ */
+export default function createCloudMap(map) {
+  const known = cloudMaps.get(map.image);
+  if (known) {
+    return known;
+  }
+  const {width, height, data} = /** @type {{width: number, height: number, data: Uint8ClampedArray}} */ (imageData(map.image));
+  const {west, south, east, north} = map.rectangle;
+  const pixel = 0.5 * EARTH_RADIUS * (((east - west) * Math.cos(0.5 * (south + north))) / width + (north - south) / height);
+  // the rain dilated by the spread, in pixels, then softened by a Gaussian of half of it, the
+  // radius of each box for its standard deviation
+  const spread = Math.max(Math.round(SHIELD_SPREAD / pixel), 1);
+  const sigma = 0.5 * spread;
+  const radius = Math.max(Math.round(0.5 * (Math.sqrt((12 * sigma * sigma) / BOXES + 1) - 1)), 1);
+  const shield = new Float32Array(width * height);
+  for (let i = 0; i < width * height; i++) {
+    shield[i] = data[4 * i] > 0 ? 1 : 0;
+  }
+  dilate(shield, width, height, spread, true);
+  dilate(shield, width, height, spread, false);
+  for (let box = 0; box < BOXES; box++) {
+    boxBlur(shield, width, height, radius, true);
+    boxBlur(shield, width, height, radius, false);
+  }
+  const cloud = new Uint8ClampedArray(width * height * 4);
+  for (let i = 0; i < width * height; i++) {
+    const intensity = data[4 * i] / 255;
+    const rate = RAIN_RATE * intensity * intensity;
+    cloud[4 * i] = data[4 * i];
+    cloud[4 * i + 1] = Math.round(255 * shield[i]);
+    cloud[4 * i + 2] = rate > DECK_RATE ? Math.round((255 * Math.log(rate / DECK_RATE)) / Math.log(TOWER_RATE / DECK_RATE)) : 0;
+    cloud[4 * i + 3] = 255;
+  }
+  const cloudMap = {image: {width, height, data: cloud}, rectangle: map.rectangle};
+  cloudMaps.set(map.image, cloudMap);
+  return cloudMap;
+}

package/cloud-noise.js

@@ -0,0 +1,229 @@
+// The clouds' noise, made once on the CPU: a cube of voxels that tiles in every direction, for
+// CloudsMarch.glsl to read instead of computing noise for each sample. Red is the base shape,
+// Perlin-Worley noise: billows of inverted Worley noise, broken up by gradient noise, as in
+// Schneider's "The Real-Time Volumetric Cloudscapes of Horizon Zero Dawn" (2015); green and blue
+// are inverted Worley noise at twice and four times its frequency, the details that erode the
+// edges. And a square of texels that tiles over the clouds' map, for CloudsDensity.glsl to read
+// once rather than compute noise at each sample: red and green jitter the map's lookup, blue varies
+// its coverage. Each channel is stretched over the bytes' range.
+
+// cells of the base shape across the cube
+const BASE_CELLS = 4;
+// the map noise's square spans this many cells of the map, its jitter varying over this many of
+// them, its coverage over this many: whole periods across the square, for it to tile
+const MAP_TILE_CELLS = 64;
+const JITTER_CELLS = 2;
+const COVERAGE_CELLS = 8;
+
+/**
+ * A hash of a lattice point, 0 to 1.
+ * @param {number} x
+ * @param {number} y
+ * @param {number} z
+ * @param {number} seed
+ */
+function hash(x, y, z, seed) {
+  let h = Math.imul(x, 374761393) ^ Math.imul(y, 668265263) ^ Math.imul(z, 1440662683) ^ Math.imul(seed, 2246822519);
+  h = Math.imul(h ^ (h >>> 13), 1274126177);
+  h ^= h >>> 16;
+  return (h >>> 0) / 4294967296;
+}
+
+/**
+ * @param {number} a
+ * @param {number} n
+ */
+function wrap(a, n) {
+  return ((a % n) + n) % n;
+}
+
+/**
+ * Gradient noise that repeats every `period` cells, about -1 to 1, with the random directions of
+ * its lattice points computed once.
+ * @param {number} period
+ * @param {number} seed
+ */
+function perlin(period, seed) {
+  const gradients = new Float32Array(period ** 3 * 3);
+  for (let c = 0; c < period ** 3; c++) {
+    const cx = c % period;
+    const cy = Math.floor(c / period) % period;
+    const cz = Math.floor(c / period ** 2);
+    const theta = 2 * Math.PI * hash(cx, cy, cz, seed);
+    const cosPhi = 2 * hash(cx, cy, cz, seed + 1) - 1;
+    const sinPhi = Math.sqrt(1 - cosPhi * cosPhi);
+    gradients.set([sinPhi * Math.cos(theta), sinPhi * Math.sin(theta), cosPhi], 3 * c);
+  }
+  const fade = (/** @type {number} */ t) => t * t * t * (t * (t * 6 - 15) + 10);
+  // the corners of a voxel's cell are within one cell of it, so their wrapped index is a lookup
+  const wrapped = Int32Array.from({length: period + 1}, (_, i) => wrap(i, period));
+  /**
+   * @param {number} x in cells
+   * @param {number} y
+   * @param {number} z
+   */
+  return (x, y, z) => {
+    const ix = Math.floor(x);
+    const iy = Math.floor(y);
+    const iz = Math.floor(z);
+    const fx = x - ix;
+    const fy = y - iy;
+    const fz = z - iz;
+    const x0 = wrapped[ix];
+    const x1 = wrapped[ix + 1];
+    const y0 = period * wrapped[iy];
+    const y1 = period * wrapped[iy + 1];
+    const z0 = period * period * wrapped[iz];
+    const z1 = period * period * wrapped[iz + 1];
+    const dot = (/** @type {number} */ c, /** @type {number} */ dx, /** @type {number} */ dy, /** @type {number} */ dz) =>
+      gradients[3 * c] * dx + gradients[3 * c + 1] * dy + gradients[3 * c + 2] * dz;
+    const u = fade(fx);
+    const v = fade(fy);
+    const w = fade(fz);
+    const a = dot(x0 + y0 + z0, fx, fy, fz);
+    const b = dot(x1 + y0 + z0, fx - 1, fy, fz);
+    const c = dot(x0 + y1 + z0, fx, fy - 1, fz);
+    const d = dot(x1 + y1 + z0, fx - 1, fy - 1, fz);
+    const e = dot(x0 + y0 + z1, fx, fy, fz - 1);
+    const f = dot(x1 + y0 + z1, fx - 1, fy, fz - 1);
+    const g = dot(x0 + y1 + z1, fx, fy - 1, fz - 1);
+    const h = dot(x1 + y1 + z1, fx - 1, fy - 1, fz - 1);
+    const lower = a + (b - a) * u + (c + (d - c) * u - a - (b - a) * u) * v;
+    const upper = e + (f - e) * u + (g + (h - g) * u - e - (f - e) * u) * v;
+    return 2 * (lower + (upper - lower) * w);
+  };
+}
+
+/**
+ * The distance to the nearest of one random point in each of `cells` cells across, repeating
+ * every `cells`, 0 to about 1, in cells, with the points computed once.
+ * @param {number} cells
+ * @param {number} seed
+ */
+function worley(cells, seed) {
+  const points = new Float32Array(cells ** 3 * 3);
+  for (let c = 0; c < cells ** 3; c++) {
+    const cx = c % cells;
+    const cy = Math.floor(c / cells) % cells;
+    const cz = Math.floor(c / cells ** 2);
+    points.set([hash(cx, cy, cz, seed), hash(cx, cy, cz, seed + 1), hash(cx, cy, cz, seed + 2)], 3 * c);
+  }
+  // the cells around a voxel are within one of its cell, so their wrapped index is a lookup
+  const wrapped = Int32Array.from({length: cells + 2}, (_, i) => wrap(i - 1, cells));
+  /**
+   * @param {number} x in cells
+   * @param {number} y
+   * @param {number} z
+   */
+  return (x, y, z) => {
+    const ix = Math.floor(x);
+    const iy = Math.floor(y);
+    const iz = Math.floor(z);
+    let nearest = Infinity;
+    for (let dz = -1; dz <= 1; dz++) {
+      const wz = cells * cells * wrapped[iz + dz + 1];
+      for (let dy = -1; dy <= 1; dy++) {
+        const wy = wz + cells * wrapped[iy + dy + 1];
+        for (let dx = -1; dx <= 1; dx++) {
+          const p = 3 * (wy + wrapped[ix + dx + 1]);
+          const px = ix + dx + points[p] - x;
+          const py = iy + dy + points[p + 1] - y;
+          const pz = iz + dz + points[p + 2] - z;
+          const d = px * px + py * py + pz * pz;
+          if (d < nearest) {
+            nearest = d;
+          }
+        }
+      }
+    }
+    return nearest < 1 ? Math.sqrt(nearest) : 1;
+  };
+}
+
+/**
+ * The noise as RGBA bytes, x fastest, then y, then z.
+ * @param {number} [size] voxels along each side
+ */
+export default function createCloudNoise(size = 64) {
+  const channels = [new Float32Array(size ** 3), new Float32Array(size ** 3), new Float32Array(size ** 3)];
+  const gradients = [0, 1, 2].map((octave) => perlin(BASE_CELLS * 2 ** octave, 10 + octave));
+  const [billowCells, shapeDetail, fineShapeDetail, detail, fineDetail] = [
+    worley(BASE_CELLS, 20),
+    worley(2 * BASE_CELLS, 30),
+    worley(4 * BASE_CELLS, 40),
+    worley(4 * BASE_CELLS, 50),
+    worley(8 * BASE_CELLS, 60),
+  ];
+  let i = 0;
+  for (let z = 0; z < size; z++) {
+    for (let y = 0; y < size; y++) {
+      for (let x = 0; x < size; x++) {
+        // the voxel's center, in the base shape's cells
+        const bx = ((x + 0.5) / size) * BASE_CELLS;
+        const by = ((y + 0.5) / size) * BASE_CELLS;
+        const bz = ((z + 0.5) / size) * BASE_CELLS;
+        let gradient = 0;
+        for (let octave = 0; octave < 3; octave++) {
+          const scale = 2 ** octave;
+          gradient += gradients[octave](bx * scale, by * scale, bz * scale) / scale;
+        }
+        const billows = 1 - billowCells(bx, by, bz);
+        // the billows, raised where the gradient noise is high
+        channels[0][i] = billows + (0.5 + 0.35 * gradient) * (1 - billows);
+        channels[1][i] = 1 - (0.7 * shapeDetail(2 * bx, 2 * by, 2 * bz) + 0.3 * fineShapeDetail(4 * bx, 4 * by, 4 * bz));
+        channels[2][i] = 1 - (0.7 * detail(4 * bx, 4 * by, 4 * bz) + 0.3 * fineDetail(8 * bx, 8 * by, 8 * bz));
+        i++;
+      }
+    }
+  }
+  return toBytes(channels);
+}
+
+/**
+ * Channels of values as RGBA bytes, each stretched over the bytes' range, alpha opaque.
+ * @param {Float32Array[]} channels
+ */
+function toBytes(channels) {
+  const bytes = new Uint8Array(channels[0].length * 4);
+  channels.forEach((values, channel) => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const value of values) {
+      min = Math.min(min, value);
+      max = Math.max(max, value);
+    }
+    for (let j = 0; j < values.length; j++) {
+      bytes[4 * j + channel] = Math.round((255 * (values[j] - min)) / (max - min));
+    }
+  });
+  for (let j = 3; j < bytes.length; j += 4) {
+    bytes[j] = 255;
+  }
+  return bytes;
+}
+
+/**
+ * The noise over the clouds' map as RGBA bytes, x fastest: a square that tiles, MAP_TILE_CELLS
+ * cells of the map across, with gradient noise over JITTER_CELLS in red and green and over
+ * COVERAGE_CELLS in blue.
+ * @param {number} [size] texels along each side
+ */
+export function createMapNoise(size = 256) {
+  const noises = [
+    [perlin(MAP_TILE_CELLS / JITTER_CELLS, 70), JITTER_CELLS],
+    [perlin(MAP_TILE_CELLS / JITTER_CELLS, 80), JITTER_CELLS],
+    [perlin(MAP_TILE_CELLS / COVERAGE_CELLS, 90), COVERAGE_CELLS],
+  ];
+  const channels = noises.map(() => new Float32Array(size * size));
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      // the texel's center, in the map's cells
+      const cx = ((x + 0.5) / size) * MAP_TILE_CELLS;
+      const cy = ((y + 0.5) / size) * MAP_TILE_CELLS;
+      noises.forEach(([noise, cells], channel) => {
+        channels[channel][y * size + x] = /** @type {Function} */ (noise)(cx / /** @type {number} */ (cells), cy / /** @type {number} */ (cells), 0);
+      });
+    }
+  }
+  return toBytes(channels);
+}