@geoblocks/cesium-post-process 0.1.3 → 0.2.0

package/README.md

@@ -18,7 +18,7 @@ Each effect is inactive after construction. Every option is also a property, app
 
 ```javascript
 import {Color, Rectangle} from '@cesium/engine';
-import {AnalogVideo, Clouds, ColorIsolation, DigitalVideo, DroneDisplay, Infrared, Jello, LensDistortion, Lightning, MotionBlur, Precipitation, SnowLine, SpeedLines, Spotlight, Super8, Technicolor, TiltShift, Toy, ValleyFog, WhiteModel} from '@geoblocks/cesium-post-process';
+import {AnalogVideo, Clouds, ColorIsolation, DigitalVideo, DroneDisplay, Dufour, Infrared, Jello, LensDistortion, Lightning, MotionBlur, Precipitation, SnowLine, SpeedLines, Spotlight, Super8, Technicolor, TiltShift, Toy, ValleyFog, WhiteModel} from '@geoblocks/cesium-post-process';
 
 const snowLine = new SnowLine(viewer, {
   altitude: 2000,  // meters above the ellipsoid where the snow is half covering
@@ -112,6 +112,17 @@ const whiteModel = new WhiteModel(viewer, {
 });
 whiteModel.active = true;
 
+// or, in Toy's place, the Dufour map's hachures
+const dufour = new Dufour(viewer, {
+  spacing: 3.5,       // the strokes' spacing on the screen, in pixels
+  strokeLength: 14,   // a stroke's length between its breaks, in spacings, on average
+  weight: 1,          // 1 for Lehmann's scale stretched for the Alps: the ink's share grows with the slope, all of it at 60 degrees
+  oblique: 0.8,       // how much thinner the strokes facing the north-west light, and thicker away from it, 0 to 1
+  flatSlope: 4,       // the slope under which the ground is left blank, in degrees
+  outline: 0.8,       // how dark the silhouettes' outline; 0 for none
+});
+dufour.active = true;
+
 const tiltShift = new TiltShift(viewer, {
   focus,
   range: 0.3,      // width of the sharp band, in factors of two of the focal distance (an orthographic camera: shares of the view's height)
@@ -197,18 +208,33 @@ super8.grain = 0.3;
 super8.destroy();
 ```
 
-### Shader chunk
+### Shader chunks
 
 `EyeFromDepth` is the GLSL chunk the depth-based effects prepend to their fragment shaders: `vec4 eyeAt(sampler2D depthTexture, vec2 uv)` gives a pixel's eye coordinates from the depth texture, with `w` 0 for the sky, with or without a logarithmic depth buffer. It is exported for effects of your own, and for `@geoblocks/cesium-flyto`'s depth of field.
 
+`Height`, prepended after it, gives heights above the ellipsoid: `float heightAt(vec3 eye)` of a point in eye coordinates, relative to the camera so that single precision keeps it to the centimeter, and `vec2 belowHeight(vec3 rayEnd, float height)`, the part of the ray from the camera to a point below a height, as shares of it. Its uniforms, the camera's height, the local up direction and the Earth's radius, come from `heightUniforms(scene)` in double precision:
+
+```js
+import {EyeFromDepth, Height, heightUniforms} from '@geoblocks/cesium-post-process';
+
+const stage = new PostProcessStage({
+  fragmentShader: EyeFromDepth + Height + myShader, // myShader calls eyeAt and heightAt
+  uniforms: {...heightUniforms(scene), myUniform: () => value},
+});
+```
+
+`Normal`, also prepended after `EyeFromDepth`, gives a pixel's normal in eye coordinates from the depth of its neighbors, facing the camera: `vec3 normalAt(sampler2D depthTexture, vec2 uv, vec3 center, float distance)`, with `center` the pixel's eye coordinates and the neighbors `distance` pixels away, on each axis the nearer side so that the scene's edges do not bend it; and `vec3 smoothNormalAt(sampler2D depthTexture, vec2 uv, vec3 center)`, averaged over two distances so that the terrain's flat triangles blend into a smoother surface. It needs no uniforms.
+
 ### Order of the effects
 
-Cesium runs the stages in the order they are added and cannot insert one elsewhere. Activate the effects in this order: `SnowLine`, `ValleyFog`, `Spotlight`, `Clouds`, `Precipitation`, `Lightning`, `Toy` or `WhiteModel`, `TiltShift`, `MotionBlur`, `SpeedLines`, `ColorIsolation`, `Infrared`, `Technicolor`, `Super8`, `LensDistortion`, `Jello`, `DroneDisplay`, `AnalogVideo` or `DigitalVideo`. The snow is then under the fog, the clouds behind the rain and the lightning in front of them, the rain or the falling snow in the scene, the lens effects apply to the whole scene, and the film looks apply to everything, their black bars included. The drone camera comes last, in the order of a real one: its lens bends the picture, its sensor reads it with the jello of its shake, its display is drawn over the picture and stays straight, and the video signal, analog or digital, disturbs both. To activate an effect later, deactivate and activate again the active effects that come after it.
+Cesium runs the stages in the order they are added and cannot insert one elsewhere. Activate the effects in this order: `SnowLine`, `ValleyFog`, `Spotlight`, `Clouds`, `Precipitation`, `Lightning`, `Toy`, `WhiteModel` or `Dufour`, `TiltShift`, `MotionBlur`, `SpeedLines`, `ColorIsolation`, `Infrared`, `Technicolor`, `Super8`, `LensDistortion`, `Jello`, `DroneDisplay`, `AnalogVideo` or `DigitalVideo`. The snow is then under the fog, the clouds behind the rain and the lightning in front of them, the rain or the falling snow in the scene, the lens effects apply to the whole scene, and the film looks apply to everything, their black bars included. The drone camera comes last, in the order of a real one: its lens bends the picture, its sensor reads it with the jello of its shake, its display is drawn over the picture and stays straight, and the video signal, analog or digital, disturbs both. To activate an effect later, deactivate and activate again the active effects that come after it.
 
 ### Notes
 
 `WhiteModel` is the look of an architect's plaster model or white render: the colors turned to their value and pressed into a narrow range of whites, so the light and the shapes alone tell the surfaces apart; lower `values` for more contrast, a `saturation` above 0 to keep an accent (the project in a color, the context white). The darkest colors, under `poche` (a tenth by default), keep their value, fading into the whites about it: a section's poché stays solid black; give 0 if deep shadows or a dusk scene should stay gray. An accent's hue is scaled down rather than clipped where a channel would pass 1. It is a `Toy` with another grading and shares its edges, found in the depth (`DepthEdges`, a shader chunk both prepend): the creases lit and shaded, the outline on the near side of a jump. Where surfaces meet it adds an occlusion, the Alchemy ambient obscurance ("The Alchemy Screen-Space Ambient Obscurance Algorithm", McGuire et al., HPG 2011): each pixel's normal from the depth's slopes, then the share of 12 samples on a spiral in a disc of `radius` meters that rise above its surface, each the more as it rises steeper and none beyond the radius, the spiral turned from pixel to pixel. A corner's foot gets about a half, a flat floor none. Zoomed out, when the disc is under a few pixels wide, the occlusion fades out: its samples would fall within the depth's noise. Each pixel then reads the depth about 20 times. For the whitest model, give the scene's materials light colors too: the grading keeps their differences in value.
 
+`Dufour` draws the terrain as the hachures of the Dufour map (1845-1864), black ink on white paper: strokes down the steepest slope, each a straight line broken every `strokeLength` spacings or so, its breaks staggered from the next stroke's, so that no line runs across them. A stroke covers more of the spacing as the slope is steeper, on Lehmann's scale (1799) stretched for the Alps, the ink's share growing from none on the flat to all of it at 60 degrees rather than his 45, but never more than 45 % of the spacing, so that the paper shows between the strokes, and more on the slopes away from a light from the north-west, as Dufour's: the steep ground and the slopes in the shade are darker, the flat ground under `flatSlope` is blank, the strokes fading in over 2 degrees above it, so that the terrain's slightly tilted triangles do not show as patches. The slope comes from the depth's normals, averaged over 4, 12 and 24 pixels, and the way down from one averaged wider, over 32 pixels, snapped to one of 12 directions, the two nearest blended over a narrow band: the strokes are straight and parallel on a slope rather than turning with each pixel's normal, which drew swirls close up. The strokes are fixed to the ground, in a frame of east and north on the ground below the camera, which follows it once it has moved 20 km, where the strokes jump. Their spacing is a power of two of meters, chosen for each direction from the ground a pixel covers across its strokes, far more than its width where a slope is seen at a grazing angle, the next power faded in as they grow closer than `spacing` pixels: they stay about as far apart on the screen at any distance and angle; where they still grow too close to tell apart, they fade to the share of the paper they cover. The lakes, flat, are left blank.
+
 `ColorIsolation`, `Infrared`, `Technicolor` and `Super8` work on display colors, after Cesium's tone mapping. `ColorIsolation`, `Infrared` and `Technicolor` follow prod80's [ReShade shaders](https://github.com/prod80/prod80-ReShade-Repository) (MIT). `Technicolor` imitates the three-strip process: the scene is split into red, green and blue records, each printed with its complementary dye, which gives its dense, saturated primaries. `Super8` blurs the highlights into a red-orange halation, as light scattered back through the film base, draws its grain as clumps a few pixels wide that differ slightly between the dye layers, and moves at 18 frames per second (grain, weave and flicker change with each film frame, light leaks drift slowly), so while it is active the scene renders 18 times per second, also with `requestRenderMode`.
 
 `MotionBlur` blurs each pixel along its motion on the screen since the previous frame, over the exposure time, with the depth-weighted gathering of "A Reconstruction Filter for Plausible Motion Blur" (McGuire et al., I3D 2012). Only the camera moves: each pixel's motion follows from its depth and the previous frame's view, written once per pixel into a velocity buffer at half resolution rather than recomputed for each sample, and the samples are weighted by depth so that near terrain and far ridges or sky do not smear into each other. Without the paper's neighborhood velocity pass, a pixel only gathers along its own motion: the blur of moving terrain does not spill over a background that does not move, such as the sky, and its outline stays sharp there. The exposure is scaled by the time between frames, so the blur is the same whatever the frame rate; after a pause in `requestRenderMode`, that time is taken as at most a tenth of a second. At strength 0 its stage is disabled.
@@ -231,7 +257,7 @@ Its `snow`, from 0 to 1, turns the rain to snow in one population, so that nothi
 
 `SnowLine` and `ValleyFog` compute each pixel's height relative to the camera, in double precision on the CPU for the camera, so they stay accurate far from the origin. The snow's slope comes from the normal rebuilt from the neighboring pixels. The fog is lit by the sun like Cesium's own fog: its color during the day, a moonlit blue at night, as bright as `scene.fog.minimumBrightness`. Both work in 3D only.
 
-`SnowLine`, `ValleyFog`, `Precipitation`, `Clouds`, `Lightning`, `Toy`, `WhiteModel`, `TiltShift`, `Spotlight` and `MotionBlur` read the depth buffer. The post-process stages only get the terrain's depth when it is depth tested, so `globe.depthTestAgainstTerrain` is on while any of them is active and restored when the last one is deactivated: billboards and labels that show through the terrain can be hidden by it meanwhile.
+`SnowLine`, `ValleyFog`, `Precipitation`, `Clouds`, `Lightning`, `Toy`, `WhiteModel`, `Dufour`, `TiltShift`, `Spotlight` and `MotionBlur` read the depth buffer. The post-process stages only get the terrain's depth when it is depth tested, so `globe.depthTestAgainstTerrain` is on while any of them is active and restored when the last one is deactivated: billboards and labels that show through the terrain can be hidden by it meanwhile.
 
 The depth they read is the nearest of Cesium's frustums': with `scene.logarithmicDepthBuffer` off, Cesium splits the view into frustums of `farToNearRatio` (1000 by default) from the near plane, and only the nearest one's depth reaches the stages. What lies past the split has no depth there: `Toy` and `WhiteModel` paint their sky over it and draw no edge on it, `TiltShift` blurs it as the far background, `SnowLine` and `ValleyFog` take it for sky. Keep the logarithmic depth buffer on, or set `camera.frustum.near` so that one frustum holds the scene (a near plane of 0.3 m reaches 300 m).
 

package/cesium-post-process.js

@@ -2,6 +2,7 @@ export {default as AnalogVideo} from './analog-video.js';
 export {default as Clouds} from './clouds.js';
 export {default as ColorIsolation} from './color-isolation.js';
 export {default as DigitalVideo} from './digital-video.js';
+export {default as Dufour} from './dufour.js';
 export {default as DroneDisplay} from './drone-display.js';
 export {default as Infrared} from './infrared.js';
 export {default as Jello} from './jello.js';
@@ -19,5 +20,8 @@ export {default as Toy} from './toy.js';
 export {default as ValleyFog} from './valley-fog.js';
 export {default as WhiteModel} from './white-model.js';
 
-// the shader chunk the depth-based effects share, for effects of your own
+// the shader chunks the depth-based effects share, and the uniforms of Height, for effects of your own
 export {default as EyeFromDepth} from './shaders/EyeFromDepth.js';
+export {default as Height} from './shaders/Height.js';
+export {heightUniforms} from './height.js';
+export {default as Normal} from './shaders/Normal.js';

package/dufour.js

@@ -0,0 +1,225 @@
+import {Cartesian3, Color, FixedFrameTransforms, Math as CesiumMath, Matrix3, Matrix4} 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 DepthEdges from './shaders/DepthEdges.js';
+import DufourShader from './shaders/Dufour.js';
+import EyeFromDepth from './shaders/EyeFromDepth.js';
+import Hash from './shaders/Hash.js';
+import Height from './shaders/Height.js';
+import Normal from './shaders/Normal.js';
+
+// how far the camera moves over the ground, in meters, before the hachures' frame follows it: they jump then
+const REBASE = 20000;
+
+const originECScratch = new Cartesian3();
+const eastScratch = new Cartesian3();
+const northScratch = new Cartesian3();
+const surfaceScratch = new Cartesian3();
+const frameScratch = new Matrix4();
+const paperScratch = new Cartesian3();
+const inkScratch = new Cartesian3();
+
+/**
+ * The look of the Dufour map, the Swiss topographic map of the 1850s: the slopes drawn in hachures, ink strokes down
+ * the steepest slope, straight and broken along their length, thicker where it is steeper and on the slopes away from a light from
+ * the north-west, the flat ground left blank, black ink on white paper.
+ * The strokes are fixed to the ground: they stay put as the camera moves, a power of two of meters apart, the next
+ * power faded in as they grow closer than `spacing` pixels.
+ */
+export default class Dufour extends Effect {
+  /**
+   * @param {import('@cesium/engine').CesiumWidget} viewer
+   * @param {{spacing?: number, strokeLength?: number, weight?: number, oblique?: number, flatSlope?: number, outline?: number, jump?: number, paper?: Color, ink?: Color}} [options]
+   */
+  constructor(viewer, options = {}) {
+    super(viewer);
+    this.spacing_ = options.spacing ?? 3.5;
+    this.strokeLength_ = options.strokeLength ?? 14;
+    this.weight_ = options.weight ?? 1;
+    this.oblique_ = options.oblique ?? 0.8;
+    this.flatSlope_ = options.flatSlope ?? 4;
+    this.outline_ = options.outline ?? 0.8;
+    this.jump_ = options.jump ?? 20;
+    this.paper_ = options.paper ?? Color.fromCssColorString('#f7f3ea');
+    this.ink_ = options.ink ?? Color.fromCssColorString('#1d1b19');
+    /** @type {Cartesian3 | undefined} */
+    this.origin_ = undefined;
+    // east, north and up at the origin
+    this.frame_ = new Matrix3();
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  createStage_(scene) {
+    const toEye = (/** @type {number} */ column, /** @type {Cartesian3} */ result) => {
+      this.follow_(scene);
+      Matrix3.getColumn(this.frame_, column, result);
+      return Matrix4.multiplyByPointAsVector(scene.camera.viewMatrix, result, result);
+    };
+    return new PostProcessStage({
+      fragmentShader: EyeFromDepth + DepthEdges + Height + Normal + Hash + DufourShader,
+      uniforms: {
+        ...heightUniforms(scene),
+        spacing: () => this.spacing_,
+        strokeLength: () => this.strokeLength_,
+        weight: () => this.weight_,
+        oblique: () => this.oblique_,
+        flatSlope: () => CesiumMath.toRadians(this.flatSlope_),
+        outline: () => this.outline_,
+        jump: () => this.jump_,
+        paper: () => Cartesian3.fromElements(this.paper_.red, this.paper_.green, this.paper_.blue, paperScratch),
+        ink: () => Cartesian3.fromElements(this.ink_.red, this.ink_.green, this.ink_.blue, inkScratch),
+        originEC: () => {
+          this.follow_(scene);
+          return Matrix4.multiplyByPoint(scene.camera.viewMatrix, /** @type {Cartesian3} */ (this.origin_), originECScratch);
+        },
+        eastEC: () => toEye(0, eastScratch),
+        northEC: () => toEye(1, northScratch),
+      },
+    });
+  }
+
+  /**
+   * Moves the hachures' frame under the camera once it is REBASE meters away over the ground.
+   * @private
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  follow_(scene) {
+    const surface = scene.ellipsoid.scaleToGeodeticSurface(scene.camera.positionWC, surfaceScratch);
+    if (!surface || (this.origin_ && Cartesian3.distance(surface, this.origin_) < REBASE)) {
+      return;
+    }
+    this.origin_ = Cartesian3.clone(surface, this.origin_);
+    Matrix4.getMatrix3(FixedFrameTransforms.eastNorthUpToFixedFrame(this.origin_, scene.ellipsoid, frameScratch), this.frame_);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  activated_(scene) {
+    acquireTerrainDepth(scene);
+  }
+
+  /**
+   * @override
+   * @param {import('@cesium/engine').Scene} scene
+   */
+  deactivating_(scene) {
+    releaseTerrainDepth(scene);
+  }
+
+  /**
+   * The strokes' spacing on the screen, in pixels: the closest they get before the next power of two of meters
+   * takes over.
+   */
+  get spacing() {
+    return this.spacing_;
+  }
+
+  set spacing(value) {
+    this.spacing_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * A stroke's length between its breaks, in spacings, on average.
+   */
+  get strokeLength() {
+    return this.strokeLength_;
+  }
+
+  set strokeLength(value) {
+    this.strokeLength_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The ink's weight: 1 for Lehmann's scale stretched for the Alps, the share of the spacing a stroke covers growing
+   * with the slope, all of it at 60 degrees, before the light.
+   */
+  get weight() {
+    return this.weight_;
+  }
+
+  set weight(value) {
+    this.weight_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How much thinner the strokes on the slopes facing the north-west light, and thicker away from it, 0 to 1.
+   */
+  get oblique() {
+    return this.oblique_;
+  }
+
+  set oblique(value) {
+    this.oblique_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The slope under which the ground is left blank, in degrees.
+   */
+  get flatSlope() {
+    return this.flatSlope_;
+  }
+
+  set flatSlope(value) {
+    this.flatSlope_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * How dark the outline along the silhouettes, 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: 20 by default.
+   */
+  get jump() {
+    return this.jump_;
+  }
+
+  set jump(value) {
+    this.jump_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The paper's color, and the sky's.
+   */
+  get paper() {
+    return this.paper_;
+  }
+
+  set paper(value) {
+    this.paper_ = value;
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * The ink's color.
+   */
+  get ink() {
+    return this.ink_;
+  }
+
+  set ink(value) {
+    this.ink_ = value;
+    this.viewer.scene.requestRender();
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/cesium-post-process",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "license": "BSD-3-Clause",
   "type": "module",
   "repository": {
@@ -22,6 +22,7 @@
     "color-isolation.js",
     "depth-test.js",
     "digital-video.js",
+    "dufour.js",
     "drone-display.js",
     "effect.js",
     "focus.js",
@@ -53,5 +54,5 @@
     "@cesium/core": ">=0.1.0",
     "@cesium/engine": ">=10"
   },
-  "gitHead": "5c6ee12b4e35f46ff733cf628da105f55121fbf3"
+  "gitHead": "71fc611a0eb4caf6ff6d99cbbab64f266fa73dd6"
 }

package/shaders/Dufour.js

@@ -0,0 +1,2 @@
+// This file is automatically rebuilt from Dufour.glsl.
+export default "// The Dufour map's look, after EyeFromDepth, DepthEdges, Height, Normal and Hash: the slopes drawn in hachures, ink\n// strokes down the steepest slope, broken along their length, thicker where it is steeper and on the slopes away from a\n// light from the north-west, the flat ground left blank; the silhouettes outlined; black ink on white paper.\nprecision highp sampler2D;\nuniform sampler2D colorTexture;\n// the strokes' spacing on the screen, in pixels, their length in spacings, the ink's weight\nuniform float spacing;\nuniform float strokeLength;\nuniform float weight;\n// how much thinner the strokes facing the light, and thicker away from it, 0 to 1\nuniform float oblique;\n// the slope under which the ground is left blank, radians\nuniform float flatSlope;\nuniform float outline;\nuniform vec3 paper;\nuniform vec3 ink;\n// the hachures' frame, in eye coordinates: its origin on the ground below the camera, east and north there (dufour.js)\nuniform vec3 originEC;\nuniform vec3 eastEC;\nuniform vec3 northEC;\nin vec2 v_textureCoordinates;\n\n// the strokes' finest spacing, in meters\nconst float BASE = 1.0;\n// the strokes' directions: the way down the slope snapped to one of these many, the two nearest blended, so that the\n// strokes are straight lines, parallel on a slope, rather than turning with each pixel's normal\nconst float DIRECTIONS = 12.0;\n// a stroke's breaks: its length in spacings, strokeLength long on average, and the share of it left blank\nconst float BREAK = 0.08;\n// the light, from the north-west, in east and north\nconst vec2 LIGHT = vec2(-0.7071, 0.7071);\n// the ink's share grows with the slope, none on the flat, all of it at 60 degrees (radians), Lehmann's scale\n// stretched for the Alps, whose slopes are mostly past his 45; the\n// widest share of the spacing a stroke covers, the paper showing between them, an engraving's\nconst float LEHMANN = 1.047;\nconst float MAX_COVER = 0.45;\n// the slopes over which the strokes fade in above the flat ground, radians (2 degrees): the terrain's triangles,\n// slightly tilted, would show as patches\nconst float FLAT_RAMP = 0.035;\n\n// the strokes' ink at a point of the ground, en its east and north, s their spacing in meters, angle the direction\n// down the slope they run along, cover the share of the spacing they cover. Each stroke is a straight line along it,\n// broken every strokeLength spacings or so, its breaks staggered from the next stroke's: no line across the strokes\nfloat hachuresAt(vec2 en, float angle, vec2 across, float cover, float s) {\n  vec2 down = vec2(-across.y, across.x);\n  // a phase of each direction, so that two directions' strokes do not meet in a pattern\n  float u = dot(en, across) / s + hash(vec2(angle, s));\n  float stroke = floor(u);\n  float w = dot(en, down) / (strokeLength * s) + hash(vec2(stroke, s));\n  float dash = step(BREAK, fract(w * mix(0.8, 1.25, hash(vec2(s, stroke)))));\n  // antialiased, and its mean, the share it covers, where the strokes grow too close to tell apart (a slope seen\n  // edge on): no ink where it covers none\n  float halfWidth = 0.5 * cover;\n  float aa = fwidth(u);\n  float sharp = 1.0 - smoothstep(halfWidth - aa, halfWidth + aa, abs(fract(u) - 0.5));\n  return mix(sharp * dash, 2.0 * halfWidth * (1.0 - BREAK), smoothstep(0.2, 0.5, aa)) * step(1e-3, halfWidth);\n}\n\n// the strokes in one direction, their spacing a power of two of meters, crossfaded with the next, so that they stay at\n// least spacing pixels apart: taken from the ground a pixel covers across them, far more than its width where a slope\n// is seen at a grazing angle\nfloat directionAt(vec2 en, float angle, float cover) {\n  vec2 across = vec2(-sin(angle), cos(angle));\n  float lod = log2(max(spacing * fwidth(dot(en, across)), BASE) / BASE);\n  float s = BASE * exp2(floor(lod));\n  return mix(hachuresAt(en, angle, across, cover, s), hachuresAt(en, angle, across, cover, 2.0 * s), fract(lod));\n}\n\n// the strokes in both of the directions nearest the way down, blended\nfloat strokesAt(vec2 en, vec2 down, float cover) {\n  // the strokes are lines: a direction and its opposite are the same\n  float t = mod(atan(down.y, down.x), czm_pi) / czm_pi * DIRECTIONS;\n  float bin = floor(t);\n  float width = czm_pi / DIRECTIONS;\n  return mix(directionAt(en, bin * width, cover), directionAt(en, (bin + 1.0) * width, cover), smoothstep(0.4, 0.6, fract(t)));\n}\n\nvoid main() {\n  vec2 uv = v_textureCoordinates;\n  vec4 sceneColor = texture(colorTexture, uv);\n  vec4 eye = eyeAt(depthTexture, uv);\n  if (eye.w == 0.0) {\n    out_FragColor = vec4(paper, 1.0);\n    return;\n  }\n  float px = czm_pixelRatio;\n  // averaged wider than smoothNormalAt: the slopes of the terrain's triangles would set the strokes' width\n  vec3 normal = normalize(normalAt(depthTexture, uv, eye.xyz, 4.0 * px) + normalAt(depthTexture, uv, eye.xyz, 12.0 * px) + normalAt(depthTexture, uv, eye.xyz, 24.0 * px));\n  float rise = dot(normal, up);\n  float slope = acos(clamp(rise, -1.0, 1.0));\n  float c = depthAt(uv);\n\n  // the way down the slope, the horizontal part of a normal smoothed wider: the strokes' direction would wobble with\n  // the terrain's triangles\n  vec3 wide = normalize(normal + normalAt(depthTexture, uv, eye.xyz, 32.0 * px));\n  vec3 horizontal = wide - dot(wide, up) * up;\n  vec2 down = normalize(vec2(dot(horizontal, eastEC), dot(horizontal, northEC)) + 1e-6);\n  vec3 rel = eye.xyz - originEC;\n  vec2 en = vec2(dot(rel, eastEC), dot(rel, northEC));\n  float steep = smoothstep(flatSlope, flatSlope + FLAT_RAMP, slope) * clamp(slope / LEHMANN, 0.0, 1.0);\n  float cover = clamp(weight * steep * (1.0 - oblique * dot(down, LIGHT)), 0.0, MAX_COVER);\n  // read everywhere, outside any branch, for its derivatives\n  float amount = strokesAt(en, down, cover);\n\n  if (outline > 0.0) {\n    amount = max(amount, outline * outlineAt(uv, c, vec4(0.0), 1.0, pixelAt(c)));\n  }\n  out_FragColor = vec4(mix(paper, ink, amount), sceneColor.a);\n}\n";