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

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/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();
+  }
+}

package/jello.js

@@ -0,0 +1,146 @@
+import {Cartesian4} from '@cesium/core';
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import {acquireFrames, releaseFrames} from './frame-clock.js';
+import JelloShader from './shaders/Jello.js';
+
+// the shake renders at this rate, like a video camera
+const FRAME_RATE = 30;
+// the shake's sinusoids, as multiples of the frequency, and their share of the amount, so that
+// it looks like noise rather than a single wave
+const HARMONICS = [1, 1.37, 2.11, 3.07];
+const WEIGHTS = [1, 0.6, 0.35, 0.2];
+// the most the sinusoids reach together, as multiples of the first one's amplitude
+const PEAK = WEIGHTS.reduce((sum, weight) => sum + weight, 0);
+// at full amount: shift in picture heights, rotation in radians
+const MAX_SHIFT = 0.015;
+const MAX_ROTATION = 0.008;
+// amplitude of the first sinusoid at full amount, per axis: x, y, rotation
+const MAX_AMPLITUDES = [MAX_SHIFT, 0.5 * MAX_SHIFT, MAX_ROTATION];
+
+const TAU = 2 * Math.PI;
+/** @type {('x' | 'y' | 'z' | 'w')[]} one sinusoid per component */
+const COMPONENTS = ['x', 'y', 'z', 'w'];
+
+/**
+ * The jello of a vibrating camera with a rolling shutter: straight edges
+ * wobble as each row of the sensor is read at a different moment of the
+ * shake. The camera moves, so while active with an amount the scene renders
+ * at 30 frames per second, also in requestRenderMode.
+ */
+export default class Jello extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{amount?: number, frequency?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.amount_ = options.amount ?? 0.1;
+    this.frequency_ = options.frequency ?? 30;
+    // a random starting phase for each sinusoid and axis
+    this.offsets_ = HARMONICS.map(() => [Math.random(), Math.random(), Math.random()].map((r) => r * TAU));
+    // the uniforms, updated when the amount or the frequency change (the shape) and
+    // once per frame (the phases)
+    this.shakeHz_ = new Cartesian4();
+    this.amplitudes_ = [new Cartesian4(), new Cartesian4(), new Cartesian4()];
+    this.zoom_ = 1;
+    this.phases_ = [new Cartesian4(), new Cartesian4(), new Cartesian4()];
+    this.updateShape_();
+    // the phases of the sinusoids at the frame's time, reduced in double precision:
+    // a float would lose the time's fraction of a second
+    this.onPreRender_ = () => {
+      const seconds = performance.now() / 1000;
+      HARMONICS.forEach((h, i) => {
+        const phase = TAU * ((h * this.frequency_ * seconds) % 1);
+        this.phases_.forEach((phases, axis) => {
+          phases[COMPONENTS[i]] = (phase + this.offsets_[i][axis]) % TAU;
+        });
+      });
+    };
+  }
+
+  /** @override */
+  createStage_() {
+    const stage = new PostProcessStage({
+      fragmentShader: JelloShader,
+      uniforms: {
+        shakeHz: () => this.shakeHz_,
+        phaseX: () => this.phases_[0],
+        phaseY: () => this.phases_[1],
+        phaseRotation: () => this.phases_[2],
+        amplitudeX: () => this.amplitudes_[0],
+        amplitudeY: () => this.amplitudes_[1],
+        amplitudeRotation: () => this.amplitudes_[2],
+        zoom: () => this.zoom_,
+      },
+    });
+    // no pass, and no frames, without an amount
+    stage.enabled = this.amount_ > 0;
+    return stage;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    scene.preRender.addEventListener(this.onPreRender_);
+    if (this.amount_ > 0) {
+      acquireFrames(scene, FRAME_RATE);
+    }
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    if (this.amount_ > 0) {
+      releaseFrames(scene, FRAME_RATE);
+    }
+    scene.preRender.removeEventListener(this.onPreRender_);
+  }
+
+  updateShape_() {
+    HARMONICS.forEach((h, i) => {
+      this.shakeHz_[COMPONENTS[i]] = h * this.frequency_;
+      this.amplitudes_.forEach((amplitudes, axis) => {
+        amplitudes[COMPONENTS[i]] = WEIGHTS[i] * MAX_AMPLITUDES[axis] * this.amount_;
+      });
+    });
+    // enough to hide the edges when all the sinusoids peak together: the shift, and the
+    // rotation of the corners, about a picture height from the middle
+    this.zoom_ = 1 + 2 * PEAK * this.amount_ * (MAX_SHIFT + MAX_ROTATION);
+  }
+
+  /**
+   * Strength of the shake, 0 to 1.
+   */
+  get amount() {
+    return this.amount_;
+  }
+
+  set amount(value) {
+    const shaking = this.amount_ > 0;
+    this.amount_ = value;
+    this.updateShape_();
+    if (this.stage_ && shaking !== value > 0) {
+      this.stage_.enabled = value > 0;
+      (value > 0 ? acquireFrames : releaseFrames)(this.viewer.scene, FRAME_RATE);
+    }
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Frequency of the vibration, in Hz: the rows read over the 20 ms readout
+   * see a fifth of a wave at 10 Hz, more than a whole one at 60 Hz.
+   */
+  get frequency() {
+    return this.frequency_;
+  }
+
+  set frequency(value) {
+    this.frequency_ = value;
+    this.updateShape_();
+  }
+}

package/lens-distortion.js

@@ -0,0 +1,68 @@
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import LensDistortionShader from './shaders/LensDistortion.js';
+
+/**
+ * The barrel distortion and dark corners of a wide-angle lens, like those of
+ * FPV cameras.
+ */
+export default class LensDistortion extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{distortion?: number, vignette?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.distortion_ = options.distortion ?? 0.5;
+    this.vignette_ = options.vignette ?? 0.5;
+  }
+
+  /** @override */
+  createStage_() {
+    const stage = new PostProcessStage({
+      fragmentShader: LensDistortionShader,
+      uniforms: {
+        distortion: () => this.distortion_,
+        vignette: () => this.vignette_,
+      },
+    });
+    // no pass at all without distortion or vignette
+    stage.enabled = this.enabled_();
+    return stage;
+  }
+
+  enabled_() {
+    return this.distortion_ > 0 || this.vignette_ > 0;
+  }
+
+  /**
+   * Bending of straight lines toward the edges, 0 to 1.
+   */
+  get distortion() {
+    return this.distortion_;
+  }
+
+  set distortion(value) {
+    this.distortion_ = value;
+    this.update_();
+  }
+
+  /**
+   * Darkening of the corners, 0 to 1.
+   */
+  get vignette() {
+    return this.vignette_;
+  }
+
+  set vignette(value) {
+    this.vignette_ = value;
+    this.update_();
+  }
+
+  update_() {
+    if (this.stage_) {
+      this.stage_.enabled = this.enabled_();
+    }
+    this.viewer.scene.requestRender();
+  }
+}