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

package/snow-line.js

@@ -0,0 +1,108 @@
+import {Math as CesiumMath} 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 Height from './shaders/Height.js';
+import Normal from './shaders/Normal.js';
+import SnowLineShader from './shaders/SnowLine.js';
+
+/**
+ * Snow above an altitude, on the slopes gentle enough to hold it, shaded by
+ * the sun.
+ */
+export default class SnowLine extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{altitude?: number, transition?: number, maxSlope?: number, coverage?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.altitude_ = options.altitude ?? 2000;
+    this.transition_ = options.transition ?? 200;
+    this.maxSlope_ = options.maxSlope ?? 50;
+    this.coverage_ = options.coverage ?? 1;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    return new PostProcessStage({
+      fragmentShader: EyeFromDepth + Height + Normal + SnowLineShader,
+      uniforms: {
+        ...heightUniforms(scene),
+        altitude: () => this.altitude_,
+        transition: () => this.transition_,
+        maxSlope: () => CesiumMath.toRadians(this.maxSlope_),
+        coverage: () => this.coverage_,
+      },
+    });
+  }
+
+  /**
+   * @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 snow line, in meters above the ellipsoid.
+   */
+  get altitude() {
+    return this.altitude_;
+  }
+
+  set altitude(value) {
+    this.altitude_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Height of the band around the altitude over which the snow thins out, in meters.
+   */
+  get transition() {
+    return this.transition_;
+  }
+
+  set transition(value) {
+    this.transition_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Steepest slope that holds snow, in degrees.
+   */
+  get maxSlope() {
+    return this.maxSlope_;
+  }
+
+  set maxSlope(value) {
+    this.maxSlope_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Opacity of the snow, 0 to 1.
+   */
+  get coverage() {
+    return this.coverage_;
+  }
+
+  set coverage(value) {
+    this.coverage_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/speed-lines.js

@@ -0,0 +1,71 @@
+import {Cartesian4} from '@cesium/core';
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import {eyeFocus} from './focus.js';
+import Hash from './shaders/Hash.js';
+import SpeedLinesShader from './shaders/SpeedLines.js';
+
+const focusScratch = new Cartesian4();
+
+/**
+ * Speed lines: a zoom blur toward the focus and streaks radiating from it.
+ * The streaks change with each frame the scene renders, and do not render it
+ * by themselves.
+ */
+export default class SpeedLines extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{focus?: import('./focus.js').Focus, strength?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.focus_ = options.focus;
+    this.strength_ = options.strength ?? 1;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    const stage = new PostProcessStage({
+      fragmentShader: Hash + SpeedLinesShader,
+      uniforms: {
+        focus: () => eyeFocus(scene, this.focus_, focusScratch),
+        strength: () => this.strength_,
+        time: () => performance.now() / 1000,
+      },
+    });
+    // no pass at all without strength
+    stage.enabled = this.strength_ > 0;
+    return stage;
+  }
+
+  /**
+   * What the lines converge on: a position, a function returning one, or
+   * undefined for the middle of the screen.
+   */
+  get focus() {
+    return this.focus_;
+  }
+
+  set focus(value) {
+    this.focus_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Strength of the blur and the streaks, 0 to 1.
+   */
+  get strength() {
+    return this.strength_;
+  }
+
+  set strength(value) {
+    this.strength_ = value;
+    if (this.stage_) {
+      this.stage_.enabled = value > 0;
+    }
+    this.viewer.scene.requestRender();
+  }
+}

package/spotlight.js

@@ -0,0 +1,193 @@
+import {Cartesian4, PixelDatatype} from '@cesium/core';
+import {PostProcessStage, PostProcessStageComposite} from '@cesium/engine';
+import {acquireTerrainDepth, releaseTerrainDepth} from './depth-test.js';
+import Effect from './effect.js';
+import {eyeFocus} from './focus.js';
+import {heightUniforms} from './height.js';
+import Beam from './shaders/Beam.js';
+import EyeFromDepth from './shaders/EyeFromDepth.js';
+import Filmic from './shaders/Filmic.js';
+import Hash from './shaders/Hash.js';
+import Noise from './shaders/Noise.js';
+import Normal from './shaders/Normal.js';
+import SpotlightShader from './shaders/Spotlight.js';
+import SpotlightBeam from './shaders/SpotlightBeam.js';
+import SpotlightBeamBlur from './shaders/SpotlightBeamBlur.js';
+import SpotlightCone from './shaders/SpotlightCone.js';
+
+const focusScratch = new Cartesian4();
+
+/**
+ * A searchlight above the focus, pointing down: it throws a pool of warm
+ * light on the scene, shades the relief under it and lights up the haze in
+ * its beam, the rest darkens.
+ */
+export default class Spotlight extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{focus?: import('./focus.js').Focus, power?: number, radius?: number, softness?: number, darkness?: number, beam?: number, beamAnisotropy?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.focus_ = options.focus;
+    this.power_ = options.power ?? 1;
+    this.radius_ = options.radius ?? 200;
+    this.softness_ = options.softness ?? 0.5;
+    this.darkness_ = options.darkness ?? 0.8;
+    this.beam_ = options.beam ?? 0.25;
+    this.beamAnisotropy_ = options.beamAnisotropy ?? 0.4;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    // SpotlightCone's uniforms, for all the passes
+    const cone = {
+      focus: () => eyeFocus(scene, this.focus_, focusScratch),
+      up: heightUniforms(scene).up,
+      radius: () => this.radius_,
+      softness: () => this.softness_,
+    };
+    // the beam is raymarched at half the resolution, then blurred at it
+    const beam = new PostProcessStage({
+      fragmentShader: EyeFromDepth + Hash + Noise + SpotlightCone + Beam + SpotlightBeam,
+      uniforms: {
+        ...cone,
+        beam: () => this.beam_,
+        beamAnisotropy: () => this.beamAnisotropy_,
+      },
+      textureScale: 0.5,
+      pixelDatatype: PixelDatatype.HALF_FLOAT,
+    });
+    const blurredBeam = new PostProcessStage({
+      fragmentShader: SpotlightBeamBlur,
+      uniforms: {beamTexture: beam.name},
+      textureScale: 0.5,
+      pixelDatatype: PixelDatatype.HALF_FLOAT,
+    });
+    return new PostProcessStageComposite({
+      stages: [
+        beam,
+        blurredBeam,
+        new PostProcessStage({
+          fragmentShader: EyeFromDepth + Normal + Filmic + SpotlightCone + SpotlightShader,
+          uniforms: {
+            ...cone,
+            beamTexture: blurredBeam.name,
+            darkness: () => this.darkness_,
+            beam: () => this.beam_,
+            power: () => this.power_,
+          },
+        }),
+      ],
+      // the light is drawn over the scene, not over the beam
+      inputPreviousStageTexture: false,
+    });
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    acquireTerrainDepth(scene);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseTerrainDepth(scene);
+  }
+
+  /**
+   * What to light: 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();
+  }
+
+  /**
+   * Brightness of the light, 1 for the searchlight: the pool on the scene
+   * and the beam in the air scale with it.
+   */
+  get power() {
+    return this.power_;
+  }
+
+  set power(value) {
+    this.power_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Radius of the pool of light on flat ground, in meters. The light hangs
+   * twice as high above the focus.
+   */
+  get radius() {
+    return this.radius_;
+  }
+
+  set radius(value) {
+    this.radius_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Width of the penumbra, as a fraction of the radius.
+   */
+  get softness() {
+    return this.softness_;
+  }
+
+  set softness(value) {
+    this.softness_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Darkening outside the light, 0 to 1.
+   */
+  get darkness() {
+    return this.darkness_;
+  }
+
+  set darkness(value) {
+    this.darkness_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Brightness of the beam in the air, 0 to 1.
+   */
+  get beam() {
+    return this.beam_;
+  }
+
+  set beam(value) {
+    this.beam_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Henyey-Greenstein asymmetry of the haze, 0 to 1: it scatters mostly
+   * forward, so the beam is brighter when looking toward the light.
+   */
+  get beamAnisotropy() {
+    return this.beamAnisotropy_;
+  }
+
+  set beamAnisotropy(value) {
+    this.beamAnisotropy_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/strikes.js

@@ -0,0 +1,30 @@
+// the strikes of a storm are few and short-lived: at most this many at once, each one over after this
+// many seconds
+export const MAX_STRIKES = 4;
+export const STRIKE_LIFE = 1;
+
+/**
+ * Drops the strikes that are over and, at random, starts a new one: a Poisson process of the given
+ * rate, whatever the time between the frames.
+ * @template {{start: number}} T
+ * @param {T[]} strikes
+ * @param {number} now seconds
+ * @param {number} dt seconds since the last call
+ * @param {number} rate strikes per second
+ * @param {() => number} random in [0, 1)
+ * @param {(now: number) => T | undefined} create
+ */
+export function advanceStrikes(strikes, now, dt, rate, random, create) {
+  for (let i = strikes.length - 1; i >= 0; i--) {
+    if (now - strikes[i].start > STRIKE_LIFE) {
+      strikes.splice(i, 1);
+    }
+  }
+  if (strikes.length < MAX_STRIKES && random() < 1 - Math.exp(-rate * dt)) {
+    // the create function declines a strike where it does not strike
+    const strike = create(now);
+    if (strike) {
+      strikes.push(strike);
+    }
+  }
+}

package/super8.js

@@ -0,0 +1,164 @@
+import {PostProcessStage, PostProcessStageComposite} from '@cesium/engine';
+import createBlur from './blur.js';
+import Effect from './effect.js';
+import {acquireFrames, releaseFrames} from './frame-clock.js';
+import Frame from './shaders/Frame.js';
+import Noise from './shaders/Noise.js';
+import Super8Shader from './shaders/Super8.js';
+
+// spread of the halation glow, the sigma and step of Cesium's blur stage, at half resolution:
+// a glow this wide does not need more
+const HALATION_SIGMA = 6;
+const HALATION_STEP = 1;
+const HALATION_SCALE = 0.5;
+// Super 8 runs at 18 frames per second, as in Super8.glsl
+const FRAME_RATE = 18;
+
+/**
+ * A Super 8 home movie: faded warm colors, halation, grain, gate weave,
+ * flicker, light leaks and the rounded corners of the camera gate. The film moves, so while
+ * active the scene renders at its 18 frames per second, also in requestRenderMode.
+ */
+export default class Super8 extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{fade?: number, halation?: number, grain?: number, weave?: number, flicker?: number, lightLeaks?: number, aspectRatio?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.fade_ = options.fade ?? 0.5;
+    this.halation_ = options.halation ?? 0.5;
+    this.grain_ = options.grain ?? 0.15;
+    this.weave_ = options.weave ?? 1.5;
+    this.flicker_ = options.flicker ?? 0.08;
+    this.lightLeaks_ = options.lightLeaks ?? 0.5;
+    this.aspectRatio_ = options.aspectRatio ?? 4 / 3;
+  }
+
+  /** @override */
+  createStage_() {
+    // a single level of composite: Cesium's texture cache hands the stage after a nested series
+    // of stages the output of that series instead of the scene
+    const blur = createBlur('czm_super8_halation', HALATION_SCALE);
+    const stage = new PostProcessStageComposite({
+      stages: [
+        blur,
+        new PostProcessStage({
+          fragmentShader: Frame + Noise + Super8Shader,
+          uniforms: {
+            blurTexture: blur.name,
+            time: () => performance.now() / 1000,
+            fade: () => this.fade_,
+            halation: () => this.halation_,
+            grain: () => this.grain_,
+            weave: () => this.weave_,
+            flicker: () => this.flicker_,
+            lightLeaks: () => this.lightLeaks_,
+            aspectRatio: () => this.aspectRatio_,
+          },
+        }),
+      ],
+      // both read the scene
+      inputPreviousStageTexture: false,
+      uniforms: blur.uniforms,
+    });
+    stage.uniforms.sigma = HALATION_SIGMA;
+    stage.uniforms.stepSize = HALATION_STEP;
+    return stage;
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    // a new picture only with each film frame, not with each frame of the display
+    acquireFrames(scene, FRAME_RATE);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseFrames(scene, FRAME_RATE);
+  }
+
+  /**
+   * Faded colors: less saturation, lifted blacks, a warm cast; 0 to 1.
+   */
+  get fade() {
+    return this.fade_;
+  }
+
+  set fade(value) {
+    this.fade_ = value;
+  }
+
+  /**
+   * Warm glow bleeding around the highlights, 0 to 1.
+   */
+  get halation() {
+    return this.halation_;
+  }
+
+  set halation(value) {
+    this.halation_ = value;
+  }
+
+  /**
+   * Film grain, 0 to 1.
+   */
+  get grain() {
+    return this.grain_;
+  }
+
+  set grain(value) {
+    this.grain_ = value;
+  }
+
+  /**
+   * Drift of the picture in the gate, in CSS pixels.
+   */
+  get weave() {
+    return this.weave_;
+  }
+
+  set weave(value) {
+    this.weave_ = value;
+  }
+
+  /**
+   * Change of brightness from frame to frame, 0 to 1.
+   */
+  get flicker() {
+    return this.flicker_;
+  }
+
+  set flicker(value) {
+    this.flicker_ = value;
+  }
+
+  /**
+   * Warm light leaks along the edge, 0 to 1.
+   */
+  get lightLeaks() {
+    return this.lightLeaks_;
+  }
+
+  set lightLeaks(value) {
+    this.lightLeaks_ = value;
+  }
+
+  /**
+   * Width over height of the visible frame, with rounded corners; 0 for the
+   * whole canvas.
+   */
+  get aspectRatio() {
+    return this.aspectRatio_;
+  }
+
+  set aspectRatio(value) {
+    this.aspectRatio_ = value;
+  }
+}

package/technicolor.js

@@ -0,0 +1,56 @@
+import {PostProcessStage} from '@cesium/engine';
+import Effect from './effect.js';
+import Frame from './shaders/Frame.js';
+import TechnicolorShader from './shaders/Technicolor.js';
+
+/**
+ * Three-strip Technicolor: dense, saturated primaries, as the films of the
+ * 1930s to 1950s.
+ */
+export default class Technicolor extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{strength?: number, aspectRatio?: number}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.strength_ = options.strength ?? 1;
+    this.aspectRatio_ = options.aspectRatio ?? 0;
+  }
+
+  /** @override */
+  createStage_() {
+    return new PostProcessStage({
+      fragmentShader: Frame + TechnicolorShader,
+      uniforms: {
+        strength: () => this.strength_,
+        aspectRatio: () => this.aspectRatio_,
+      },
+    });
+  }
+
+  /**
+   * How far from the original colors, 0 to 1.
+   */
+  get strength() {
+    return this.strength_;
+  }
+
+  set strength(value) {
+    this.strength_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * Width over height of the visible frame, black bars around it; 0 for the
+   * whole canvas. 1.37 is the Academy ratio of the era.
+   */
+  get aspectRatio() {
+    return this.aspectRatio_;
+  }
+
+  set aspectRatio(value) {
+    this.aspectRatio_ = value;
+    this.viewer.scene.requestRender();
+  }
+}