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

package/color-isolation.js

@@ -0,0 +1,69 @@
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import ColorIsolationShader from './shaders/ColorIsolation.js';
+import Hsl from './shaders/Hsl.js';
+
+/**
+ * Color isolation: one hue keeps its color, the rest of the scene turns gray.
+ */
+export default class ColorIsolation extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{hue?: number, range?: number, strength?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.hue_ = options.hue ?? 0;
+    this.range_ = options.range ?? 60;
+    this.strength_ = options.strength ?? 1;
+  }
+
+  /** @override */
+  createStage_() {
+    return new PostProcessStage({
+      fragmentShader: Hsl + ColorIsolationShader,
+      uniforms: {
+        hue: () => this.hue_ / 360,
+        range: () => this.range_ / 360,
+        strength: () => this.strength_,
+      },
+    });
+  }
+
+  /**
+   * Hue kept in color, in degrees: 0 red, 60 yellow, 120 green, 180 cyan,
+   * 240 blue, 300 magenta.
+   */
+  get hue() {
+    return this.hue_;
+  }
+
+  set hue(value) {
+    this.hue_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Half width of the hues kept, in degrees.
+   */
+  get range() {
+    return this.range_;
+  }
+
+  set range(value) {
+    this.range_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How gray the rest turns, 0 to 1.
+   */
+  get strength() {
+    return this.strength_;
+  }
+
+  set strength(value) {
+    this.strength_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/depth-test.js

@@ -0,0 +1,37 @@
+// The post-process stages only get the depth of the terrain when it is depth tested. Several
+// effects may need it at once: the first one turns depth testing on, the last one restores it.
+
+/** @type {WeakMap<import('@cesium/engine').Globe, {count: number, previous: boolean}>} */
+const users = new WeakMap();
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ */
+export function acquireTerrainDepth(scene) {
+  const globe = scene.globe;
+  if (!globe) {
+    return;
+  }
+  const user = users.get(globe);
+  if (user) {
+    user.count++;
+    return;
+  }
+  users.set(globe, {count: 1, previous: globe.depthTestAgainstTerrain});
+  globe.depthTestAgainstTerrain = true;
+}
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ */
+export function releaseTerrainDepth(scene) {
+  const globe = scene.globe;
+  const user = globe && users.get(globe);
+  if (!globe || !user) {
+    return;
+  }
+  if (--user.count === 0) {
+    globe.depthTestAgainstTerrain = user.previous;
+    users.delete(globe);
+  }
+}

package/digital-video.js

@@ -0,0 +1,108 @@
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import {acquireFrames, releaseFrames} from './frame-clock.js';
+import DigitalVideoShader from './shaders/DigitalVideo.js';
+import Hash from './shaders/Hash.js';
+
+// digital FPV video runs at this rate
+const FRAME_RATE = 30;
+// at full breakup, a breakup starts on average every this many seconds
+const MIN_INTERVAL = 2;
+// length of a breakup, in seconds, and of its black screen
+const DURATION = [0.4, 1.5];
+const BLACKOUT = 0.25;
+
+/**
+ * A digital FPV video feed: clean, then at times broken by a weak signal
+ * into macroblocks, displaced blocks and strips and split colors, sometimes
+ * with a short black screen. While active the scene renders at 30 frames per
+ * second, also in requestRenderMode.
+ */
+export default class DigitalVideo extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{breakup?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.breakup_ = options.breakup ?? 0.5;
+    // the current breakup: start and length in seconds, and whether it goes black
+    /** @type {{start: number, duration: number, blackout: boolean} | undefined} */
+    this.episode_ = undefined;
+    // when the breakups were last updated, in seconds
+    this.updated_ = 0;
+    // the uniforms, updated once per frame
+    this.severity_ = 0;
+    this.blackout_ = 0;
+    this.onPreRender_ = () => this.update_();
+  }
+
+  /** @override */
+  createStage_() {
+    return new PostProcessStage({
+      fragmentShader: Hash + DigitalVideoShader,
+      uniforms: {
+        severity: () => this.severity_,
+        blackout: () => this.blackout_,
+        frame: () => Math.floor((performance.now() / 1000) * FRAME_RATE) % 100000,
+      },
+    });
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    this.updated_ = performance.now() / 1000;
+    scene.preRender.addEventListener(this.onPreRender_);
+    acquireFrames(scene, FRAME_RATE);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseFrames(scene, FRAME_RATE);
+    scene.preRender.removeEventListener(this.onPreRender_);
+    this.episode_ = undefined;
+  }
+
+  // before each render: end the finished breakup, start one with the chance of the time since the
+  // last update, so that breakups start at the same rate whatever the frame rate (at most a second,
+  // as a hidden page does not render), then how broken the picture is now: rising and falling over
+  // the breakup, black around its middle
+  update_() {
+    const now = performance.now() / 1000;
+    const elapsed = Math.min(now - this.updated_, 1);
+    this.updated_ = now;
+    if (this.episode_ && now > this.episode_.start + this.episode_.duration) {
+      this.episode_ = undefined;
+    }
+    if (!this.episode_ && Math.random() < 1 - Math.exp((-this.breakup_ / MIN_INTERVAL) * elapsed)) {
+      const duration = DURATION[0] + Math.random() * (DURATION[1] - DURATION[0]);
+      this.episode_ = {start: now, duration, blackout: Math.random() < 0.5 * this.breakup_};
+    }
+    const episode = this.episode_;
+    if (!episode) {
+      this.severity_ = 0;
+      this.blackout_ = 0;
+      return;
+    }
+    const t = (now - episode.start) / episode.duration;
+    this.severity_ = Math.max(0, Math.sin(Math.PI * Math.min(t, 1))) ** 0.7 * (0.4 + 0.6 * this.breakup_);
+    this.blackout_ = episode.blackout && Math.abs(t - 0.5) * episode.duration < BLACKOUT / 2 ? 1 : 0;
+  }
+
+  /**
+   * How often and how badly the signal breaks up, 0 to 1.
+   */
+  get breakup() {
+    return this.breakup_;
+  }
+
+  set breakup(value) {
+    this.breakup_ = value;
+  }
+}

package/drone-display.js

@@ -0,0 +1,170 @@
+import {Cartesian3, Math as CesiumMath} from '@cesium/core';
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import DroneDisplayShader from './shaders/DroneDisplay.js';
+
+// a 3S battery, full, empty, the seconds it takes to drain between them at the cruise throttle,
+// and how far its voltage sags at full throttle
+const FULL_VOLTS = 12.6;
+const EMPTY_VOLTS = 10.5;
+const DRAIN_SECONDS = 2400;
+const SAG_VOLTS = 0.4;
+// the throttle in percent at cruise, and more of it per m/s of climb
+const CRUISE_THROTTLE = 70;
+const CLIMB_THROTTLE = 5;
+// seconds for the speeds to get two thirds of the way to the camera's; after a pause longer than
+// the gap, as in requestRenderMode, the motion is not measured across it
+const SMOOTHING = 0.5;
+const GAP = 0.5;
+
+/**
+ * A fixed-wing plane's OSD as ArduPilot draws it on an HD video system, in the
+ * blocky white glyphs of an analog chip with some in color: an artificial
+ * horizon of dots following the camera's pitch and roll as ArduPilot's does,
+ * the flight mode, the heading, the altitude since the display turned on, the
+ * vertical speed and the air speed of the camera, the throttle following its
+ * climb, the battery voltage draining with the throttle, and a made-up link
+ * quality; and in failsafe while the control link is lost, the RTL mode and the
+ * FAILSAFE warning.
+ */
+export default class DroneDisplay extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{opacity?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.opacity_ = options.opacity ?? 1;
+    this.rxLoss_ = false;
+    // when the display turned on, and the camera's height then
+    this.startTime_ = 0;
+    this.startHeight_ = 0;
+    // the camera's speed and vertical speed in m/s, smoothed, from its position and height at the
+    // previous frame
+    this.speed_ = 0;
+    this.verticalSpeed_ = 0;
+    this.previousPosition_ = new Cartesian3();
+    this.previousHeight_ = 0;
+    this.previousTime_ = 0;
+    // the share of the battery drained
+    this.drained_ = 0;
+    this.onPostRender_ = () => this.measure_(false);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    return new PostProcessStage({
+      fragmentShader: DroneDisplayShader,
+      uniforms: {
+        opacity: () => this.opacity_,
+        pitch: () => CesiumMath.toDegrees(scene.camera.pitch),
+        roll: () => CesiumMath.toDegrees(CesiumMath.negativePiToPi(scene.camera.roll)),
+        heading: () => CesiumMath.toDegrees(scene.camera.heading),
+        altitude: () => scene.camera.positionCartographic.height - this.startHeight_,
+        verticalSpeed: () => this.verticalSpeed_,
+        speed: () => this.speed_ * 3.6,
+        voltage: () => this.voltage_(),
+        linkQuality: () => this.linkQuality_(),
+        throttle: () => this.throttle_(),
+        failsafe: () => (this.rxLoss_ ? 1 : 0),
+        // twice per second, as ArduPilot's blinking
+        blink: () => (Math.floor(performance.now() / 250) % 2 === 0 ? 1 : 0),
+      },
+    });
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    this.startTime_ = performance.now() / 1000;
+    this.startHeight_ = scene.camera.positionCartographic.height;
+    this.speed_ = 0;
+    this.verticalSpeed_ = 0;
+    this.drained_ = 0;
+    this.measure_(true);
+    scene.postRender.addEventListener(this.onPostRender_);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    scene.postRender.removeEventListener(this.onPostRender_);
+  }
+
+  /**
+   * Eases the speeds toward the camera's motion since the previous frame, and
+   * drains the battery at the throttle.
+   * @param {boolean} first whether there is no previous frame
+   */
+  measure_(first) {
+    const camera = this.viewer.scene.camera;
+    const time = performance.now() / 1000;
+    const height = camera.positionCartographic.height;
+    const dt = time - this.previousTime_;
+    if (!first && dt > 0 && dt < GAP) {
+      const ease = 1 - Math.exp(-dt / SMOOTHING);
+      this.speed_ += (Cartesian3.distance(camera.positionWC, this.previousPosition_) / dt - this.speed_) * ease;
+      this.verticalSpeed_ += ((height - this.previousHeight_) / dt - this.verticalSpeed_) * ease;
+    }
+    if (!first) {
+      this.drained_ += (dt / DRAIN_SECONDS) * (this.throttle_() / CRUISE_THROTTLE);
+    }
+    Cartesian3.clone(camera.positionWC, this.previousPosition_);
+    this.previousHeight_ = height;
+    this.previousTime_ = time;
+  }
+
+  // the battery drains over the flight, and sags under the throttle's load
+  voltage_() {
+    const drained = (FULL_VOLTS - EMPTY_VOLTS) * Math.min(this.drained_, 1);
+    return FULL_VOLTS - drained - (SAG_VOLTS * this.throttle_()) / 100;
+  }
+
+  // the link hovers in the nineties, with a deep dip once in a while
+  linkQuality_() {
+    const seconds = performance.now() / 1000 - this.startTime_;
+    const wander = 4 * Math.abs(Math.sin(seconds * 0.9) * Math.sin(seconds * 0.37));
+    const dip = Math.sin(seconds * 0.11) > 0.97 ? 35 : 0;
+    return Math.round(99 - wander - dip);
+  }
+
+  // the throttle holds the cruise, more of it climbing and less diving, wandering a little
+  throttle_() {
+    const seconds = performance.now() / 1000 - this.startTime_;
+    const wander = 2 * Math.sin(seconds * 0.3) * Math.sin(seconds * 0.13 + 1);
+    return Math.round(Math.min(Math.max(CRUISE_THROTTLE + CLIMB_THROTTLE * this.verticalSpeed_ + wander, 0), 100));
+  }
+
+  /**
+   * Opacity of the display, 0 to 1.
+   */
+  get opacity() {
+    return this.opacity_;
+  }
+
+  set opacity(value) {
+    this.opacity_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Whether the control link is lost: the mode turns to RTL, the link bar to
+   * red, and the FAILSAFE warning blinks below the middle. It blinks only while
+   * the scene renders.
+   */
+  get rxLoss() {
+    return this.rxLoss_;
+  }
+
+  set rxLoss(value) {
+    this.rxLoss_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/effect.js

@@ -0,0 +1,64 @@
+/**
+ * A screen-space effect: a post-process stage on a scene while active.
+ * Subclasses create their stage in `createStage_` and take their side effects
+ * in `activated_` and `deactivating_`.
+ */
+export default class Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   */
+  constructor(viewer) {
+    this.viewer = viewer;
+    /** @type {import('@cesium/engine').PostProcessStage | import('@cesium/engine').PostProcessStageComposite | undefined} */
+    this.stage_ = undefined;
+  }
+
+  get active() {
+    return this.stage_ !== undefined;
+  }
+
+  set active(active) {
+    const scene = this.viewer.scene;
+    if (active) {
+      if (this.stage_) {
+        return;
+      }
+      this.stage_ = this.createStage_(scene);
+      scene.postProcessStages.add(this.stage_);
+      this.activated_(scene);
+    } else {
+      if (!this.stage_) {
+        return;
+      }
+      this.deactivating_(scene);
+      // removing a stage also destroys it
+      scene.postProcessStages.remove(this.stage_);
+      this.stage_ = undefined;
+    }
+    scene.requestRender();
+  }
+
+  /**
+   * @param {import('@cesium/engine').Scene} _scene
+   * @return {import('@cesium/engine').PostProcessStage | import('@cesium/engine').PostProcessStageComposite}
+   */
+  createStage_(_scene) {
+    throw new Error(`${this.constructor.name} does not implement createStage_`);
+  }
+
+  /**
+   * Called once the stage is added to the scene.
+   * @param {import('@cesium/engine').Scene} _scene
+   */
+  activated_(_scene) {}
+
+  /**
+   * Called before the stage is removed from the scene.
+   * @param {import('@cesium/engine').Scene} _scene
+   */
+  deactivating_(_scene) {}
+
+  destroy() {
+    this.active = false;
+  }
+}

package/focus.js

@@ -0,0 +1,25 @@
+import {Cartesian3, Cartesian4, Matrix4} from '@cesium/core';
+
+/**
+ * What an effect focuses on: a position, a function called every frame for a moving target, or
+ * undefined for what is in the middle of the screen.
+ * @typedef {Cartesian3 | (() => Cartesian3 | undefined) | undefined} Focus
+ */
+
+const eyeScratch = new Cartesian3();
+
+/**
+ * The focus in eye coordinates, computed in double precision; w is 0 for the middle of the
+ * screen, which the shaders read from the depth texture.
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {Focus} focus
+ * @param {Cartesian4} result
+ */
+export function eyeFocus(scene, focus, result) {
+  const position = typeof focus === 'function' ? focus() : focus;
+  if (!position) {
+    return Cartesian4.fromElements(0, 0, 0, 0, result);
+  }
+  const eye = Matrix4.multiplyByPoint(scene.camera.viewMatrix, position, eyeScratch);
+  return Cartesian4.fromElements(eye.x, eye.y, eye.z, 1, result);
+}

package/frame-clock.js

@@ -0,0 +1,61 @@
+// Animated effects need the scene to render at their frame rate, also in requestRenderMode. With a
+// timer each, their render requests would not line up and would add up: one timer per scene
+// requests renders at the highest rate the active effects need.
+
+/** @type {WeakMap<import('@cesium/engine').Scene, {rates: number[], interval: ReturnType<typeof setInterval> | undefined}>} */
+const clocks = new WeakMap();
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {{rates: number[], interval: ReturnType<typeof setInterval> | undefined}} clock
+ */
+function restart(scene, clock) {
+  clearInterval(clock.interval);
+  clock.interval = clock.rates.length > 0 ? setInterval(() => tick(scene, clock), 1000 / Math.max(...clock.rates)) : undefined;
+}
+
+/**
+ * A render request; once the scene is destroyed, with effects left active, the clock stops: a
+ * destroyed scene throws on every call.
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {{rates: number[], interval: ReturnType<typeof setInterval> | undefined}} clock
+ */
+function tick(scene, clock) {
+  if (scene.isDestroyed()) {
+    clearInterval(clock.interval);
+    clocks.delete(scene);
+    return;
+  }
+  scene.requestRender();
+}
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {number} rate frames per second
+ */
+export function acquireFrames(scene, rate) {
+  let clock = clocks.get(scene);
+  if (!clock) {
+    clock = {rates: [], interval: undefined};
+    clocks.set(scene, clock);
+  }
+  clock.rates.push(rate);
+  restart(scene, clock);
+}
+
+/**
+ * @param {import('@cesium/engine').Scene} scene
+ * @param {number} rate the rate given to acquireFrames
+ */
+export function releaseFrames(scene, rate) {
+  const clock = clocks.get(scene);
+  const index = clock ? clock.rates.indexOf(rate) : -1;
+  if (!clock || index < 0) {
+    return;
+  }
+  clock.rates.splice(index, 1);
+  restart(scene, clock);
+  if (clock.rates.length === 0) {
+    clocks.delete(scene);
+  }
+}

package/height.js

@@ -0,0 +1,23 @@
+import {Cartesian3, Matrix4} from '@cesium/core';
+
+const upScratch = new Cartesian3();
+const surfaceScratch = new Cartesian3();
+
+/**
+ * The uniforms of Height.glsl: the camera's height, the local up direction in
+ * eye coordinates and the Earth's radius below the camera, in double precision.
+ * @param {import('@cesium/engine').Scene} scene
+ */
+export function heightUniforms(scene) {
+  return {
+    cameraHeight: () => scene.camera.positionCartographic.height,
+    up: () => {
+      const up = scene.ellipsoid.geodeticSurfaceNormal(scene.camera.positionWC, upScratch);
+      return Matrix4.multiplyByPointAsVector(scene.camera.viewMatrix, up, up);
+    },
+    radius: () => {
+      const surface = scene.ellipsoid.scaleToGeodeticSurface(scene.camera.positionWC, surfaceScratch);
+      return surface ? Cartesian3.magnitude(surface) : scene.ellipsoid.maximumRadius;
+    },
+  };
+}

package/infrared.js

@@ -0,0 +1,40 @@
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import Hsl from './shaders/Hsl.js';
+import InfraredShader from './shaders/Infrared.js';
+
+/**
+ * Black and white infrared film: bright foliage, dark sky and water.
+ */
+export default class Infrared extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{strength?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.strength_ = options.strength ?? 1;
+  }
+
+  /** @override */
+  createStage_() {
+    return new PostProcessStage({
+      fragmentShader: Hsl + InfraredShader,
+      uniforms: {
+        strength: () => this.strength_,
+      },
+    });
+  }
+
+  /**
+   * How far from the original colors, 0 to 1.
+   */
+  get strength() {
+    return this.strength_;
+  }
+
+  set strength(value) {
+    this.strength_ = value;
+    this.viewer.scene.requestRender();
+  }
+}