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

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/white-model.js

@@ -0,0 +1,105 @@
+import {Cartesian2} from '@cesium/core';
+import Toy from './toy.js';
+import WhiteModelShader from './shaders/WhiteModel.js';
+
+const valuesScratch = new Cartesian2();
+
+/**
+ * A white model's look, as an architect's plaster model or clay render: every color turned to its
+ * value, the values pressed into a narrow range of whites (the darkest left black: a section's
+ * poché), darker where surfaces meet, the edges lit and shaded and finely outlined as the toy's,
+ * the sky a pale gradient if asked. A `Toy` with another grading: its options and properties,
+ * `saturation` 0 (an accent's hue kept above it), `warm` the plaster's tint.
+ */
+export default class WhiteModel extends Toy {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{light?: number, shade?: number, bevel?: number, outline?: number, jump?: number, saturation?: number, warm?: [number, number, number], values?: [number, number], poche?: number, occlusion?: number, radius?: number, sky?: [import('@cesium/core').Color, import('@cesium/core').Color]}} [options]
+   */
+  constructor(viewer, options = {}) {
+    // the toy's options, each the white model's default when not given, or given as undefined
+    super(viewer, {
+      ...options,
+      light: options.light ?? 0.08,
+      shade: options.shade ?? 0.12,
+      outline: options.outline ?? 0.25,
+      saturation: options.saturation ?? 0,
+      warm: options.warm ?? [1, 0.995, 0.985],
+    });
+    this.values_ = options.values ?? [0.35, 0.97];
+    this.poche_ = options.poche ?? 0.1;
+    this.occlusion_ = options.occlusion ?? 0.35;
+    this.radius_ = options.radius ?? 1.5;
+  }
+
+  /**
+   * @override
+   * @protected
+   */
+  shader_() {
+    return WhiteModelShader;
+  }
+
+  /**
+   * @override
+   * @protected
+   */
+  uniforms_() {
+    return {
+      ...super.uniforms_(),
+      values: () => Cartesian2.fromArray(this.values_, 0, valuesScratch),
+      poche: () => this.poche_,
+      occlusion: () => this.occlusion_,
+      radius: () => this.radius_,
+    };
+  }
+
+  /**
+   * The darkest and the lightest values, from 0 to 1: the scene's black and its white.
+   */
+  get values() {
+    return this.values_;
+  }
+
+  set values(value) {
+    this.values_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The value under which a color keeps it rather than being pressed into the whites, fading into
+   * them about it: a section's poché, solid black; 0 to press every color.
+   */
+  get poche() {
+    return this.poche_;
+  }
+
+  set poche(value) {
+    this.poche_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How much darker the surfaces get where they meet, in a corner or at a wall's foot, 0 for none.
+   */
+  get occlusion() {
+    return this.occlusion_;
+  }
+
+  set occlusion(value) {
+    this.occlusion_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How wide the corners' shadow is, in meters, 48 pixels at the most.
+   */
+  get radius() {
+    return this.radius_;
+  }
+
+  set radius(value) {
+    this.radius_ = value;
+    this.viewer.scene.requestRender();
+  }
+}