@geoblocks/cesium-post-process 0.0.0-stage → 0.1.1

package/tilt-shift.js

@@ -0,0 +1,124 @@
+import {Cartesian4} from '@cesium/core';
+import {PostProcessStage, PostProcessStageComposite} from '@cesium/engine';
+import createBlur from './blur.js';
+import {acquireTerrainDepth, releaseTerrainDepth} from './depth-test.js';
+import Effect from './effect.js';
+import {eyeFocus} from './focus.js';
+import EyeFromDepth from './shaders/EyeFromDepth.js';
+import TiltShiftShader from './shaders/TiltShift.js';
+
+const focusScratch = new Cartesian4();
+
+/**
+ * Tilt-shift: a narrow depth of field around the focus, which makes the scene
+ * look like a scale model.
+ */
+export default class TiltShift extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{focus?: import('./focus.js').Focus, range?: number, blur?: number, saturation?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.focus_ = options.focus;
+    this.range_ = options.range ?? 0.3;
+    this.blur_ = options.blur ?? 4;
+    this.saturation_ = options.saturation ?? 0.3;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    const blur = createBlur('czm_tilt_shift_blur');
+    const stage = new PostProcessStageComposite({
+      stages: [
+        blur,
+        new PostProcessStage({
+          fragmentShader: EyeFromDepth + TiltShiftShader,
+          uniforms: {
+            blurTexture: blur.name,
+            focus: () => eyeFocus(scene, this.focus_, focusScratch),
+            range: () => this.range_,
+            saturation: () => this.saturation_,
+          },
+        }),
+      ],
+      // both read the scene
+      inputPreviousStageTexture: false,
+      uniforms: blur.uniforms,
+    });
+    stage.uniforms.sigma = this.blur_;
+    return stage;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    acquireTerrainDepth(scene);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseTerrainDepth(scene);
+  }
+
+  /**
+   * What to focus on: a position, a function returning one, or undefined for
+   * what is in the middle of the screen.
+   */
+  get focus() {
+    return this.focus_;
+  }
+
+  set focus(value) {
+    this.focus_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Width of the sharp band, in factors of two of the focal distance; with an orthographic camera,
+   * in shares of the view's height.
+   */
+  get range() {
+    return this.range_;
+  }
+
+  set range(value) {
+    this.range_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Blur away from the focus, the sigma of Cesium's blur stage.
+   */
+  get blur() {
+    return this.blur_;
+  }
+
+  set blur(value) {
+    this.blur_ = value;
+    if (this.stage_) {
+      this.stage_.uniforms.sigma = value;
+    }
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Color and contrast boost, 0 to 1.
+   */
+  get saturation() {
+    return this.saturation_;
+  }
+
+  set saturation(value) {
+    this.saturation_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/toy.js

@@ -0,0 +1,192 @@
+import {Cartesian3, Cartesian4} from '@cesium/core';
+import {PostProcessStage} from '@cesium/engine';
+import {acquireTerrainDepth, releaseTerrainDepth} from './depth-test.js';
+import Effect from './effect.js';
+import DepthEdges from './shaders/DepthEdges.js';
+import EyeFromDepth from './shaders/EyeFromDepth.js';
+import ToyShader from './shaders/Toy.js';
+
+const NO_SKY = new Cartesian4(0, 0, 0, 0);
+const warmScratch = new Cartesian3();
+const skyTopScratch = new Cartesian4();
+const skyBottomScratch = new Cartesian4();
+
+/**
+ * A toy's look, as an isometric game's: the edges lit where the surface bends
+ * outward and shaded where it bends inward, rounded close up, the silhouettes
+ * outlined in a darker shade of their color, the colors a little richer and
+ * warmer, the sky a soft gradient if asked.
+ */
+export default class Toy extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{light?: number, shade?: number, bevel?: number, outline?: number, jump?: number, saturation?: number, warm?: [number, number, number], sky?: [import('@cesium/core').Color, import('@cesium/core').Color]}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.light_ = options.light ?? 0.22;
+    this.shade_ = options.shade ?? 0.18;
+    this.bevel_ = options.bevel ?? 0;
+    this.outline_ = options.outline ?? 0.4;
+    this.jump_ = options.jump ?? 20;
+    this.saturation_ = options.saturation ?? 1.04;
+    this.warm_ = options.warm ?? [1.03, 1, 0.95];
+    this.sky_ = options.sky;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} _scene
+   */
+  createStage_(_scene) {
+    return new PostProcessStage({fragmentShader: EyeFromDepth + DepthEdges + this.shader_(), uniforms: this.uniforms_()});
+  }
+
+  /**
+   * The look's shader, after DepthEdges.
+   * @protected
+   * @return {string}
+   */
+  shader_() {
+    return ToyShader;
+  }
+
+  /**
+   * The shader's uniforms.
+   * @protected
+   * @return {Object<string, () => any>}
+   */
+  uniforms_() {
+    const color = (/** @type {import('@cesium/core').Color} */ c, /** @type {Cartesian4} */ result) => Cartesian4.fromElements(c.red, c.green, c.blue, 1, result);
+    return {
+      light: () => this.light_,
+      shade: () => this.shade_,
+      bevel: () => this.bevel_,
+      outline: () => this.outline_,
+      jump: () => this.jump_,
+      saturation: () => this.saturation_,
+      warm: () => Cartesian3.fromArray(this.warm_, 0, warmScratch),
+      skyTop: () => this.sky_ ? color(this.sky_[0], skyTopScratch) : NO_SKY,
+      skyBottom: () => this.sky_ ? color(this.sky_[1], skyBottomScratch) : NO_SKY,
+    };
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    acquireTerrainDepth(scene);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseTerrainDepth(scene);
+  }
+
+  /**
+   * How much brighter a convex edge gets, 0 for none.
+   */
+  get light() {
+    return this.light_;
+  }
+
+  set light(value) {
+    this.light_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How much darker a concave edge gets, 0 for none.
+   */
+  get shade() {
+    return this.shade_;
+  }
+
+  set shade(value) {
+    this.shade_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The edges' bevel, in meters: close up, their light and shade fade over that width, as a molded
+   * plastic edge's; a pixel at the least, 8 at the most; 0, the default, for a pixel. Next to a small
+   * step (a frame proud of a wall), which it cannot tell from a fold, it lights a patch of the face
+   * behind.
+   */
+  get bevel() {
+    return this.bevel_;
+  }
+
+  set bevel(value) {
+    this.bevel_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How much darker the outline along the silhouettes gets, a pixel wide, a darker shade of their
+   * color; 0 for none.
+   */
+  get outline() {
+    return this.outline_;
+  }
+
+  set outline(value) {
+    this.outline_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How far the depth jumps, in pixels' sizes, to be a silhouette, outlined, rather than a crease,
+   * lit or shaded: 20 by default, for a city's buildings, their eaves lit; lower close up, where a
+   * thin thing standing on the ground (a chair's leg) would light its foot.
+   */
+  get jump() {
+    return this.jump_;
+  }
+
+  set jump(value) {
+    this.jump_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The colors' saturation, 1 to keep it.
+   */
+  get saturation() {
+    return this.saturation_;
+  }
+
+  set saturation(value) {
+    this.saturation_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * A factor each of red, green and blue; [1, 1, 1] to keep the colors.
+   */
+  get warm() {
+    return this.warm_;
+  }
+
+  set warm(value) {
+    this.warm_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The sky's gradient, its color at the top of the screen and at its bottom;
+   * undefined to keep the sky.
+   */
+  get sky() {
+    return this.sky_;
+  }
+
+  set sky(value) {
+    this.sky_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/valley-fog.js

@@ -0,0 +1,105 @@
+import {Color} from '@cesium/core';
+import {PostProcessStage} from '@cesium/engine';
+import {acquireTerrainDepth, releaseTerrainDepth} from './depth-test.js';
+import Effect from './effect.js';
+import {heightUniforms} from './height.js';
+import EyeFromDepth from './shaders/EyeFromDepth.js';
+import Fog from './shaders/Fog.js';
+import Height from './shaders/Height.js';
+import ValleyFogShader from './shaders/ValleyFog.js';
+
+/**
+ * Fog filling the valleys below an altitude: from above, a sea of fog with the
+ * peaks standing out; from inside, the visibility drops with the distance.
+ */
+export default class ValleyFog extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{top?: number, density?: number, softness?: number, color?: Color}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.top_ = options.top ?? 1500;
+    this.density_ = options.density ?? 0.005;
+    this.softness_ = options.softness ?? 100;
+    this.color_ = options.color ?? new Color(0.85, 0.88, 0.92, 1);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    return new PostProcessStage({
+      fragmentShader: EyeFromDepth + Height + Fog + ValleyFogShader,
+      uniforms: {
+        ...heightUniforms(scene),
+        top: () => this.top_,
+        density: () => this.density_,
+        softness: () => this.softness_,
+        color: () => this.color_,
+      },
+    });
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    acquireTerrainDepth(scene);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseTerrainDepth(scene);
+  }
+
+  /**
+   * Altitude of the top of the fog, in meters above the ellipsoid.
+   */
+  get top() {
+    return this.top_;
+  }
+
+  set top(value) {
+    this.top_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Density of the fog, per meter: about 1 / visibility.
+   */
+  get density() {
+    return this.density_;
+  }
+
+  set density(value) {
+    this.density_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Height of the band under the top over which the fog thins out, in meters.
+   */
+  get softness() {
+    return this.softness_;
+  }
+
+  set softness(value) {
+    this.softness_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  get color() {
+    return this.color_;
+  }
+
+  set color(value) {
+    this.color_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/weather-map.js

@@ -0,0 +1,290 @@
+import {Cartesian4} from '@cesium/core';
+// @ts-expect-error the engine exports its textures, but does not type them
+import {Texture} from '@cesium/engine';
+
+const TWO_PI = 2 * Math.PI;
+// the max map's texels are blocks of this many pixels of the map across
+const POOL = 4;
+
+/**
+ * Where it rains: an image whose red channel is the local intensity, 0 to 1,
+ * over a rectangle of longitudes and latitudes, north up, not crossing the
+ * antimeridian. Outside the rectangle there is none, so the image should
+ * fade to 0 at its edges.
+ * @typedef {{image: HTMLCanvasElement | ImageData | {width: number, height: number, data: Uint8ClampedArray}, rectangle: import('@cesium/core').Rectangle}} WeatherMapOptions
+ */
+
+/**
+ * The pixels of an image, read once.
+ * @param {WeatherMapOptions['image']} image
+ */
+export function imageData(image) {
+  return 'data' in image ? image : image.getContext('2d', {willReadFrequently: true})?.getImageData(0, 0, image.width, image.height);
+}
+
+/**
+ * A texture's source from an image: a canvas or an ImageData as it is, other pixels as an array,
+ * which Cesium flips as it flips an image.
+ * @param {HTMLCanvasElement | ImageData | {width: number, height: number, data: Uint8ClampedArray}} image
+ */
+function textureSource(image) {
+  if (!('data' in image) || (typeof ImageData !== 'undefined' && image instanceof ImageData)) {
+    return image;
+  }
+  const {width, height, data} = image;
+  return {width, height, arrayBufferView: new Uint8Array(data.buffer, data.byteOffset, data.length)};
+}
+
+/**
+ * The highest value of each channel of an image, 0 to 1.
+ * @param {{data: Uint8ClampedArray} | undefined} data
+ */
+function highest(data) {
+  const max = [0, 0, 0, 0];
+  const values = data?.data ?? [];
+  for (let i = 0; i < values.length; i += 4) {
+    for (let channel = 0; channel < 4; channel++) {
+      max[channel] = Math.max(max[channel], values[i + channel]);
+    }
+  }
+  return max.map((value) => value / 255);
+}
+
+/**
+ * The highest value of each channel of images of the same size around each block of POOL x POOL
+ * pixels: in the block and its 8 neighbors, as RGBA bytes. A ray sampled less than a block apart
+ * then finds every cell of rain it passes, however small.
+ * @param {Array<{width: number, height: number, data: Uint8ClampedArray} | undefined>} images
+ */
+function maxPool(images) {
+  const {width, height} = /** @type {{width: number, height: number}} */ (images[0]);
+  const w = Math.ceil(width / POOL);
+  const h = Math.ceil(height / POOL);
+  const pooled = new Uint8Array(w * h * 4);
+  for (const image of images) {
+    if (!image) {
+      continue;
+    }
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const i = 4 * (Math.floor(y / POOL) * w + Math.floor(x / POOL));
+        for (let channel = 0; channel < 4; channel++) {
+          pooled[i + channel] = Math.max(pooled[i + channel], image.data[4 * (y * width + x) + channel]);
+        }
+      }
+    }
+  }
+  const data = new Uint8Array(w * h * 4);
+  for (let y = 0; y < h; y++) {
+    for (let x = 0; x < w; x++) {
+      for (let channel = 0; channel < 4; channel++) {
+        let max = 0;
+        for (let dy = Math.max(y - 1, 0); dy <= Math.min(y + 1, h - 1); dy++) {
+          for (let dx = Math.max(x - 1, 0); dx <= Math.min(x + 1, w - 1); dx++) {
+            max = Math.max(max, pooled[4 * (dy * w + dx) + channel]);
+          }
+        }
+        data[4 * (y * w + x) + channel] = max;
+      }
+    }
+  }
+  return {width: w, height: h, data};
+}
+
+/**
+ * A map of the rain for the shaders, WeatherMap.glsl's uniforms, and its
+ * intensity at a point on the CPU, bilinear as the shaders sample it. Without
+ * a map, the intensity everywhere is the empty value: 1 for rain everywhere,
+ * 0 for none. A next map, over the same rectangle and of the same size, crossfades from the map to
+ * it by the blend, as the radar from one hour to the next.
+ */
+export default class WeatherMap {
+  /**
+   * @param {number} empty the intensity everywhere without a map
+   */
+  constructor(empty) {
+    this.empty_ = empty;
+    /** @type {WeatherMapOptions | undefined} */
+    this.map_ = undefined;
+    /** @type {{width: number, height: number, data: Uint8ClampedArray} | undefined} */
+    this.data_ = undefined;
+    /** @type {WeatherMapOptions | undefined} */
+    this.nextMap_ = undefined;
+    /** @type {{width: number, height: number, data: Uint8ClampedArray} | undefined} */
+    this.nextData_ = undefined;
+    /**
+     * From the map, 0, to the next one, 1.
+     */
+    this.blend = 0;
+    /**
+     * The rectangle in the ellipsoid's texture coordinates: its west and
+     * south, and one over its width and height; the whole globe without a map.
+     */
+    this.bounds = new Cartesian4(0, 0, 1, 1);
+    /**
+     * The highest intensity on the map, 0 to 1: the empty value without a map; and the highest
+     * value of each of its channels.
+     */
+    this.maxIntensity = empty;
+    this.maxValues = [empty, empty, empty, empty];
+    // made when the shaders first need it: a stage given an image makes its texture a frame after
+    // it is set, and draws without one in between
+    /** @type {any} */
+    this.texture_ = undefined;
+    /** @type {any} */
+    this.nextTexture_ = undefined;
+    /** @type {{width: number, height: number, data: Uint8Array} | undefined} */
+    this.maxImage_ = undefined;
+    /** @type {any} */
+    this.maxTexture_ = undefined;
+  }
+
+  get map() {
+    return this.map_;
+  }
+
+  set map(value) {
+    this.map_ = value;
+    if (!value) {
+      this.data_ = undefined;
+      Cartesian4.fromElements(0, 0, 1, 1, this.bounds);
+      this.maxIntensity = this.empty_;
+    } else {
+      const {image, rectangle} = value;
+      this.data_ = imageData(image);
+      Cartesian4.fromElements(
+        rectangle.west / TWO_PI + 0.5,
+        rectangle.south / Math.PI + 0.5,
+        TWO_PI / (rectangle.east - rectangle.west),
+        Math.PI / (rectangle.north - rectangle.south),
+        this.bounds,
+      );
+    }
+    this.updateMaxIntensity_();
+    // made again from the new image when the shaders next need it
+    this.texture_ = this.texture_?.destroy();
+    this.clearMaxImage_();
+  }
+
+  get nextMap() {
+    return this.nextMap_;
+  }
+
+  set nextMap(value) {
+    this.nextMap_ = value;
+    this.nextData_ = value && imageData(value.image);
+    this.updateMaxIntensity_();
+    this.nextTexture_ = this.nextTexture_?.destroy();
+    this.clearMaxImage_();
+  }
+
+  clearMaxImage_() {
+    this.maxImage_ = undefined;
+    this.maxTexture_ = this.maxTexture_?.destroy();
+  }
+
+  /**
+   * The highest intensity around each block of the map's pixels, over the map and the next one,
+   * made when first needed: undefined without a map.
+   */
+  maxImage() {
+    if (this.map_ && !this.maxImage_) {
+      this.maxImage_ = maxPool([this.data_, this.nextData_]);
+    }
+    return this.maxImage_;
+  }
+
+  updateMaxIntensity_() {
+    const map = highest(this.data_);
+    const next = highest(this.nextMap_ ? this.nextData_ : undefined);
+    this.maxValues = this.map_ ? map.map((value, channel) => Math.max(value, next[channel])) : [this.empty_, this.empty_, this.empty_, this.empty_];
+    this.maxIntensity = this.maxValues[0];
+  }
+
+  /**
+   * The intensity at a point, 0 to 1, bilinear as the shaders sample it: the
+   * empty value without a map, 0 outside its rectangle.
+   * @param {number} longitude radians
+   * @param {number} latitude radians
+   */
+  intensityAt(longitude, latitude) {
+    if (!this.map_ || !this.data_) {
+      return this.empty_;
+    }
+    const {west, south, east, north} = this.map_.rectangle;
+    const u = (longitude - west) / (east - west);
+    const v = (latitude - south) / (north - south);
+    if (u < 0 || u > 1 || v < 0 || v > 1) {
+      return 0;
+    }
+    const intensity = this.sample_(this.data_, u, v);
+    if (!this.nextData_) {
+      return intensity;
+    }
+    return intensity + (this.sample_(this.nextData_, u, v) - intensity) * this.blend;
+  }
+
+  /**
+   * An image's intensity, bilinear, at a point of its rectangle, 0 to 1 from its west and south.
+   * @param {{width: number, height: number, data: Uint8ClampedArray}} image
+   * @param {number} u
+   * @param {number} v
+   */
+  sample_(image, u, v) {
+    const {width, height, data} = image;
+    // the image's rows go down from the north
+    const x = Math.min(Math.max(u * width - 0.5, 0), width - 1);
+    const y = Math.min(Math.max((1 - v) * height - 0.5, 0), height - 1);
+    const x0 = Math.floor(x);
+    const y0 = Math.floor(y);
+    const x1 = Math.min(x0 + 1, width - 1);
+    const y1 = Math.min(y0 + 1, height - 1);
+    const red = (/** @type {number} */ column, /** @type {number} */ row) => data[4 * (row * width + column)] / 255;
+    const upper = red(x0, y0) + (red(x1, y0) - red(x0, y0)) * (x - x0);
+    const lower = red(x0, y1) + (red(x1, y1) - red(x0, y1)) * (x - x0);
+    return upper + (lower - upper) * (y - y0);
+  }
+
+  /**
+   * The map's texture, a pixel of the empty value without a map.
+   * @param {any} context the scene's context
+   */
+  texture(context) {
+    if (!this.texture_) {
+      const value = 255 * this.empty_;
+      this.texture_ = new Texture({context, source: textureSource(this.map_?.image ?? new ImageData(new Uint8ClampedArray([value, value, value, 255]), 1, 1))});
+    }
+    return this.texture_;
+  }
+
+  /**
+   * The next map's texture, the map's without one.
+   * @param {any} context the scene's context
+   */
+  nextTexture(context) {
+    if (!this.nextMap_) {
+      return this.texture(context);
+    }
+    this.nextTexture_ ??= new Texture({context, source: textureSource(this.nextMap_.image)});
+    return this.nextTexture_;
+  }
+
+  /**
+   * The max map's texture, a pixel of the empty value without a map.
+   * @param {any} context the scene's context
+   */
+  maxTexture(context) {
+    if (!this.maxTexture_) {
+      const value = 255 * this.empty_;
+      const {width, height, data} = this.maxImage() ?? {width: 1, height: 1, data: new Uint8Array([value, value, value, 255])};
+      this.maxTexture_ = new Texture({context, source: {width, height, arrayBufferView: data}});
+    }
+    return this.maxTexture_;
+  }
+
+  destroy() {
+    this.texture_ = this.texture_?.destroy();
+    this.nextTexture_ = this.nextTexture_?.destroy();
+    this.maxTexture_ = this.maxTexture_?.destroy();
+  }
+}