@geoblocks/cesium-post-process 0.4.0 → 0.5.0

package/src/shaders/DroneDisplay.glsl

@@ -0,0 +1,337 @@
+// A drone's OSD, as ArduPilot draws it on an HD video system: 50 columns and 18 rows of 12 x 18
+// pixel character cells over the whole picture, with the readouts near its edges, here in the
+// blocky white glyphs of an analog chip with their black outline, and some in color. The layout
+// follows a fixed-wing plane's display; the glyphs are drawn here, not copied from a font.
+// - The horizon: 9 dots of 2 x 2 pixels around the middle, as ArduPilot's draw_horizon: pitch (at
+//   most 20 degrees) moves it a row per 5 degrees, and roll tilts it at its angle on the screen;
+//   each dot is at one of 9 heights in its cell, or past 45 degrees of roll, one per row at one of
+//   9 places across its cell. A dot more than 4 cells from the middle is not drawn, and upside
+//   down the horizon blinks. It is a symbol, not lined up with the real horizon.
+// - The flight mode, top left: FBWA, RTL in failsafe; the heading, top middle.
+// - Top right, the link bar, green, orange then red as the link quality drops, and the battery,
+//   its symbol filled in green in 7 steps, and its voltage.
+// - The right column: the altitude since the display turned on, under a mountain with a green
+//   dot; the vertical speed, with one or two green arrows; the throttle.
+// - The air speed, bottom middle, after its pale blue label.
+// - The FAILSAFE warning, blinking red in the lower part of the middle while the control link is
+//   lost.
+precision highp sampler2D;
+uniform sampler2D colorTexture;
+// 0 to 1
+uniform float opacity;
+// degrees, negative looking down
+uniform float pitch;
+// degrees, positive to the right
+uniform float roll;
+// degrees, 0 to 360
+uniform float heading;
+// meters, since the display turned on
+uniform float altitude;
+// m/s, positive climbing
+uniform float verticalSpeed;
+// km/h
+uniform float speed;
+// volts
+uniform float voltage;
+// 0 to 99
+uniform float linkQuality;
+// percent
+uniform float throttle;
+// 1 while the control link is lost, 0 otherwise
+uniform float failsafe;
+// 1 or 0, twice per second: the blinking of the warning and of the horizon upside down
+uniform float blink;
+in vec2 v_textureCoordinates;
+
+const float COLUMNS = 50.0;
+const float ROWS = 18.0;
+// a cell, in pixels
+const float CELL_WIDTH = 12.0;
+const float CELL_HEIGHT = 18.0;
+// the middle cell, where the horizon is
+const int MIDDLE_COLUMN = 24;
+const int MIDDLE_ROW = 8;
+// ArduPilot's horizon: its limit in pitch, rows per degree of it (16 rows per 80 degrees), and
+// rows per column at 45 degrees of roll, for the line to tilt at its angle
+const float MAX_PITCH = 20.0;
+const float ROWS_PER_DEGREE = 0.2;
+const float RATIO = CELL_WIDTH / CELL_HEIGHT;
+// battery: volts full and empty of a 3S, and the steps of its symbol's fill (full, 5 to 1, empty)
+const float FULL_VOLTS = 12.6;
+const float EMPTY_VOLTS = 10.5;
+const float BATTERY_STEPS = 6.0;
+// the right column: the units in its last column, right of the numbers
+const int UNIT_COLUMN = 41;
+// the link bar: its first column, and its length in cells
+const int LINK_COLUMN = 36;
+const float LINK_CELLS = 6.0;
+
+const vec3 WHITE = vec3(1.0);
+const vec3 GREEN = vec3(0.2, 0.85, 0.35);
+const vec3 ORANGE = vec3(1.0, 0.6, 0.1);
+const vec3 RED = vec3(0.95, 0.15, 0.15);
+const vec3 PALE_BLUE = vec3(0.55, 0.75, 0.95);
+
+// the glyphs, at 12 x 18 pixels: one row of 12 bits each, the leftmost bit highest; the table is
+// written by scripts/osd-font.js from its pixel drawings
+const int DOT = 10;
+const int SPACE = 11;
+const int MINUS = 12;
+const int VOLT = 13;
+const int DEGREE = 14;
+const int PERCENT = 15;
+// the units of the altitude, the vertical speed and the air speed, and the air speed's label
+const int ALTITUDE = 16;
+const int METERS_PER_SECOND = 17;
+const int KILOMETERS_PER_HOUR = 18;
+const int AIR_SPEED = 19;
+// the vertical speed's arrows
+const int UP = 20;
+const int UP_TWO = 21;
+const int DOWN = 22;
+const int DOWN_TWO = 23;
+// the letters of the flight modes and the warning
+const int LETTER_F = 24;
+const int LETTER_B = 25;
+const int LETTER_W = 26;
+const int LETTER_A = 27;
+const int LETTER_R = 28;
+const int LETTER_T = 29;
+const int LETTER_L = 30;
+const int LETTER_I = 31;
+const int LETTER_E = 32;
+const int LETTER_S = 33;
+// the warning's row and first column: FAILSAFE, centered under the middle
+const int WARNING_ROW = 12;
+const int WARNING_COLUMN = 21;
+
+const int FONT[612] = int[612](
+  0, 0, 0, 983040, 1671264, 1474704, 1474704, 1474704, 1474704, 1474704, 1474704, 1474704, 1671264, 983040, 0, 0, 0, 0, // 0
+  0, 0, 0, 917504, 1704000, 1179840, 1704000, 655424, 655424, 655424, 655424, 1769536, 1114336, 2031616, 0, 0, 0, 0, // 1
+  0, 0, 0, 983040, 1671264, 1474704, 1998864, 426000, 884768, 1769536, 1441920, 1540224, 1081584, 2064384, 0, 0, 0, 0, // 2
+  0, 0, 0, 2031616, 1147104, 1998864, 163856, 950288, 622688, 950288, 163856, 1998864, 1147104, 2031616, 0, 0, 0, 0, // 3
+  0, 0, 0, 2064384, 1474704, 1474704, 1474704, 1474704, 1081584, 1998864, 163856, 163856, 163856, 229376, 0, 0, 0, 0, // 4
+  0, 0, 0, 2064384, 1081584, 1540224, 1507456, 1147104, 1998864, 163856, 1998864, 1474704, 1671264, 983040, 0, 0, 0, 0, // 5
+  0, 0, 0, 983040, 1638496, 1507456, 1507456, 1147104, 1474704, 1474704, 1474704, 1474704, 1671264, 983040, 0, 0, 0, 0, // 6
+  0, 0, 0, 2064384, 1081584, 1998864, 426000, 360480, 852000, 720960, 655424, 655424, 655424, 917504, 0, 0, 0, 0, // 7
+  0, 0, 0, 983040, 1671264, 1474704, 1474704, 1474704, 1671264, 1474704, 1474704, 1474704, 1671264, 983040, 0, 0, 0, 0, // 8
+  0, 0, 0, 983040, 1671264, 1474704, 1474704, 1474704, 1605744, 950288, 163856, 950288, 622688, 983040, 0, 0, 0, 0, // 9
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 983040, 589920, 589920, 983040, 0, 0, 0, 0, // .
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, // space
+  0, 0, 0, 0, 0, 0, 0, 2064384, 1081584, 2064384, 0, 0, 0, 0, 0, 0, 0, 0, // -
+  0, 0, 0, 0, 0, 0, 3899392, 2785552, 2785552, 3047696, 3506336, 1376416, 1769536, 917504, 0, 0, 0, 0, // v, volts
+  0, 0, 1966080, 3342528, 2949408, 2949408, 3342528, 1966080, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, // °, degrees
+  0, 0, 0, 0, 7979008, 4932360, 5161744, 8224800, 1769536, 3653760, 7225624, 5915160, 7585792, 0, 0, 0, 0, 0, // %
+  1835008, 3539072, 7061824, 14508584, 11973652, 6543362, 12611584, 0, 4128768, 2195936, 2785616, 2785616, 2785616, 4161536, 0, 0, 0, 0, // a mountain over m, the altitude; the shader adds a green dot inside
+  0, 4128768, 2195936, 2785616, 2785616, 2785616, 4161536, 0, 983040, 1638496, 1507456, 1769536, 1900576, 1245376, 1966080, 0, 0, 0, // m over s, meters per second
+  14680064, 12567552, 11036024, 10135124, 11183444, 11183444, 16769024, 917504, 655424, 720960, 622688, 688208, 688208, 1015808, 0, 0, 0, 0, // km over h, kilometers per hour
+  0, 8257536, 14410304, 11445524, 9070424, 11191632, 11175248, 16744448, 15757312, 2022914, 7575750, 1400490, 13849290, 1547910, 16576512, 0, 0, 0, // Air over Spd, the air speed
+  0, 0, 0, 0, 0, 0, 917504, 1769536, 3244256, 6341104, 4211704, 8372224, 0, 0, 0, 0, 0, 0, // an arrow up
+  0, 0, 917504, 1769536, 3244256, 6341104, 4211704, 8372224, 0, 917504, 1769536, 3244256, 6341104, 4211704, 8372224, 0, 0, 0, // two arrows up
+  0, 0, 0, 0, 0, 0, 8372224, 4211704, 6341104, 3244256, 1769536, 917504, 0, 0, 0, 0, 0, 0, // an arrow down
+  0, 0, 8372224, 4211704, 6341104, 3244256, 1769536, 917504, 0, 8372224, 4211704, 6341104, 3244256, 1769536, 917504, 0, 0, 0, // two arrows down
+  0, 0, 0, 2064384, 1081584, 1540224, 1310848, 1507456, 1114336, 1507456, 1310848, 1310848, 1310848, 1835008, 0, 0, 0, 0, // F
+  0, 0, 0, 2031616, 1147104, 1474704, 1474704, 1474704, 1147104, 1474704, 1474704, 1474704, 1147104, 2031616, 0, 0, 0, 0, // B
+  0, 0, 0, 3899392, 2785552, 2785552, 2785552, 3047696, 2785616, 2785616, 2785616, 2785616, 3506336, 2031616, 0, 0, 0, 0, // W
+  0, 0, 0, 983040, 1671264, 1474704, 1474704, 1474704, 1081584, 1474704, 1474704, 1474704, 1474704, 2064384, 0, 0, 0, 0, // A
+  0, 0, 0, 2031616, 1147104, 1474704, 1474704, 1474704, 1147104, 1409184, 1474704, 1474704, 1474704, 2064384, 0, 0, 0, 0, // R
+  0, 0, 0, 4161536, 2130416, 3899456, 655424, 655424, 655424, 655424, 655424, 655424, 655424, 917504, 0, 0, 0, 0, // T
+  0, 0, 0, 1835008, 1310848, 1310848, 1310848, 1310848, 1310848, 1310848, 1310848, 1540224, 1081584, 2064384, 0, 0, 0, 0, // L
+  0, 0, 0, 2031616, 1114336, 1769536, 655424, 655424, 655424, 655424, 655424, 1769536, 1114336, 2031616, 0, 0, 0, 0, // I
+  0, 0, 0, 2064384, 1081584, 1540224, 1310848, 1507456, 1114336, 1507456, 1310848, 1540224, 1081584, 2064384, 0, 0, 0, 0, // E
+  0, 0, 0, 1015808, 1605744, 1540224, 1310848, 1507456, 1671264, 950288, 163856, 1998864, 1147104, 2031616, 0, 0, 0, 0 // S
+);
+
+int digit(float value, float power) {
+  return int(mod(floor(value / power), 10.0));
+}
+
+// 10 to the n, exactly: pow may be off by a little on the GPU
+float powerOfTen(int n) {
+  return n == 3 ? 1000.0 : n == 2 ? 100.0 : n == 1 ? 10.0 : 1.0;
+}
+
+// a number right-aligned to end at the column last: its whole part, and its tenths after a dot,
+// and a minus before it when negative; -1 left of it
+int numberAt(float value, bool tenths, int column, int last) {
+  float scaled = floor(abs(value) * (tenths ? 10.0 : 1.0) + 0.5);
+  float whole = tenths ? floor(scaled / 10.0) : scaled;
+  int digits = whole >= 1000.0 ? 4 : whole >= 100.0 ? 3 : whole >= 10.0 ? 2 : 1;
+  int i = last - column;
+  if (tenths) {
+    if (i == 0) {
+      return digit(scaled, 1.0);
+    }
+    if (i == 1) {
+      return DOT;
+    }
+    i -= 2;
+  }
+  if (i >= 0 && i < digits) {
+    return digit(whole, powerOfTen(i));
+  }
+  return i == digits && value < 0.0 && scaled > 0.0 ? MINUS : -1;
+}
+
+// the glyph in this cell and its color, or -1
+int glyphAt(int column, int row, out vec3 color) {
+  color = WHITE;
+  // the flight mode, top left
+  if (row == 1 && column >= 3 && column <= 6) {
+    int i = column - 3;
+    if (failsafe > 0.5) {
+      return i == 0 ? LETTER_R : i == 1 ? LETTER_T : i == 2 ? LETTER_L : -1;
+    }
+    return i == 0 ? LETTER_F : i == 1 ? LETTER_B : i == 2 ? LETTER_W : LETTER_A;
+  }
+  // the heading, top middle
+  if (row == 1 && column >= 23 && column <= 26) {
+    return column == 26 ? DEGREE : numberAt(mod(floor(heading + 0.5), 360.0), false, column, 25);
+  }
+  // the battery voltage, top right after its symbol: 12.0v
+  if (row == 2 && column > LINK_COLUMN && column <= UNIT_COLUMN) {
+    return column == UNIT_COLUMN ? VOLT : numberAt(clamp(voltage, 0.0, 99.9), true, column, UNIT_COLUMN - 1);
+  }
+  // the right column: the altitude, the vertical speed after its arrows, the throttle
+  bool right = column >= UNIT_COLUMN - 6 && column <= UNIT_COLUMN;
+  if (row == MIDDLE_ROW && right) {
+    return column == UNIT_COLUMN ? ALTITUDE : numberAt(clamp(altitude, -999.0, 9999.0), false, column, UNIT_COLUMN - 1);
+  }
+  if (row == MIDDLE_ROW + 1 && right) {
+    if (column == UNIT_COLUMN) {
+      return METERS_PER_SECOND;
+    }
+    float climb = min(abs(verticalSpeed), 99.9);
+    int width = climb >= 9.95 ? 4 : 3;
+    if (column == UNIT_COLUMN - 1 - width) {
+      color = GREEN;
+      bool up = verticalSpeed > 0.0;
+      return climb < 0.05 ? -1 : climb < 5.0 ? (up ? UP : DOWN) : (up ? UP_TWO : DOWN_TWO);
+    }
+    return numberAt(climb, true, column, UNIT_COLUMN - 1);
+  }
+  if (row == MIDDLE_ROW + 3 && right) {
+    return column == UNIT_COLUMN ? PERCENT : numberAt(clamp(throttle, 0.0, 100.0), false, column, UNIT_COLUMN - 1);
+  }
+  // the warning
+  if (failsafe > 0.5 && blink > 0.5 && row == WARNING_ROW && column >= WARNING_COLUMN && column < WARNING_COLUMN + 8) {
+    int i = column - WARNING_COLUMN;
+    color = RED;
+    return i == 0 ? LETTER_F : i == 1 ? LETTER_A : i == 2 ? LETTER_I : i == 3 ? LETTER_L : i == 4 ? LETTER_S : i == 5 ? LETTER_A : i == 6 ? LETTER_F : LETTER_E;
+  }
+  // the air speed, bottom middle: its label, whole km/h and the unit
+  if (row == 16 && column >= 20 && column <= 25) {
+    if (column == 20) {
+      color = PALE_BLUE;
+      return AIR_SPEED;
+    }
+    return column == 25 ? KILOMETERS_PER_HOUR : numberAt(clamp(speed, 0.0, 999.0), false, column, 24);
+  }
+  return -1;
+}
+
+// 2 where the glyph is drawn, 1 on its black outline, 0 elsewhere; x and y in the cell's pixels.
+// A row of the table holds the glyph in its low 12 bits and the outline in the 12 above, the
+// leftmost pixel highest
+float glyphInk(int glyph, int x, int y) {
+  if (glyph < 0) {
+    return 0.0;
+  }
+  int row = FONT[glyph * int(CELL_HEIGHT) + y] >> (int(CELL_WIDTH) - 1 - x);
+  return (row & 1) == 1 ? 2.0 : ((row >> int(CELL_WIDTH)) & 1) == 1 ? 1.0 : 0.0;
+}
+
+// 2 inside the box, 1 on its outline a pixel around, 0 elsewhere; in pixels
+float boxInk(vec2 p, vec2 low, vec2 high) {
+  if (all(greaterThanEqual(p, low)) && all(lessThan(p, high))) {
+    return 2.0;
+  }
+  return all(greaterThanEqual(p, low - 1.0)) && all(lessThan(p, high + 1.0)) ? 1.0 : 0.0;
+}
+
+// what is drawn over what is under it, its outline under what is drawn
+void paint(inout float ink, inout vec3 fill, float layer, vec3 color) {
+  if (layer > ink) {
+    ink = layer;
+    fill = color;
+  }
+}
+
+void main() {
+  vec4 sceneColor = texture(colorTexture, v_textureCoordinates);
+  // the grid as large as fits the screen, centered, from its top left, in pixels
+  vec2 size = czm_viewport.zw;
+  vec2 grid = vec2(COLUMNS * CELL_WIDTH, ROWS * CELL_HEIGHT);
+  float scale = min(size.x / grid.x, size.y / grid.y);
+  vec2 fromCorner = vec2(gl_FragCoord.x - czm_viewport.x, czm_viewport.y + size.y - gl_FragCoord.y) - 0.5 * (size - grid * scale);
+  vec2 p = floor(fromCorner / scale);
+  int column = int(floor(p.x / CELL_WIDTH));
+  int row = int(floor(p.y / CELL_HEIGHT));
+  if (column < 0 || column >= int(COLUMNS) || row < 0 || row >= int(ROWS)) {
+    out_FragColor = sceneColor;
+    return;
+  }
+  vec2 inCell = p - vec2(float(column) * CELL_WIDTH, float(row) * CELL_HEIGHT);
+
+  vec3 glyphColor;
+  int glyph = glyphAt(column, row, glyphColor);
+  float ink = 0.0;
+  vec3 fill = WHITE;
+  paint(ink, fill, glyphInk(glyph, int(inCell.x), int(inCell.y)), glyphColor);
+
+  // the horizon, as ArduPilot's draw_horizon in rows and columns from the middle cell, with the
+  // pitch (positive nose down) raising it: a dot per column, at its height in the cell in ninths,
+  // or past 45 degrees of roll a dot per row, at its place across the cell in ninths
+  bool nearMiddle = abs(column - MIDDLE_COLUMN) <= 5 && abs(row - MIDDLE_ROW) <= 5;
+  if (nearMiddle && (abs(roll) < 90.0 || blink > 0.5)) {
+    float level = clamp(-pitch, -MAX_PITCH, MAX_PITCH) * ROWS_PER_DEGREE;
+    float ky = sin(radians(roll));
+    float kx = cos(radians(roll));
+    bool steep = abs(ky) >= abs(kx);
+    for (int k = -4; k <= 4; k++) {
+      float along = steep ? (float(k) - level) / RATIO * kx / ky + 0.5 : RATIO * float(k) * ky / kx + level + 0.5;
+      float cell = floor(along);
+      float ninth = floor((along - cell) * 9.0);
+      if (abs(cell) > 4.0) {
+        continue;
+      }
+      vec2 center = steep
+        ? vec2(float(MIDDLE_COLUMN) + cell, float(MIDDLE_ROW - k)) * vec2(CELL_WIDTH, CELL_HEIGHT) + vec2(2.0 + ninth, 9.0)
+        : vec2(float(MIDDLE_COLUMN + k), float(MIDDLE_ROW) - cell) * vec2(CELL_WIDTH, CELL_HEIGHT) + vec2(6.0, 17.0 - 2.0 * ninth);
+      float d = length(p + 0.5 - center);
+      paint(ink, fill, d < 1.0 ? 2.0 : d < 2.0 ? 1.0 : 0.0, WHITE);
+    }
+  }
+
+  // the link bar, top right: as long as the link quality, its color by it; full and red in
+  // failsafe
+  if (row == 1) {
+    float quality = failsafe > 0.5 ? 99.0 : clamp(linkQuality, 0.0, 99.0);
+    vec3 color = failsafe > 0.5 || quality < 40.0 ? RED : quality < 70.0 ? ORANGE : GREEN;
+    float left = float(LINK_COLUMN) * CELL_WIDTH;
+    float bar = floor(LINK_CELLS * CELL_WIDTH * (quality + 1.0) / 100.0);
+    if (bar > 0.0) {
+      paint(ink, fill, boxInk(p, vec2(left, CELL_HEIGHT + 7.0), vec2(left + bar, CELL_HEIGHT + 11.0)), color);
+    }
+  }
+
+  // the battery symbol, top right before its voltage: a white frame with a cap, filled in green
+  // from the bottom in steps as the voltage drops, black inside above the fill
+  if (column == LINK_COLUMN && row == 2) {
+    float charge = clamp((voltage - EMPTY_VOLTS) / (FULL_VOLTS - EMPTY_VOLTS), 0.0, 1.0);
+    float fillTop = 17.0 - 13.0 * ceil(charge * BATTERY_STEPS) / BATTERY_STEPS;
+    paint(ink, fill, max(boxInk(inCell, vec2(2.0, 3.0), vec2(10.0, 18.0)), boxInk(inCell, vec2(4.0, 1.0), vec2(8.0, 3.0))), WHITE);
+    if (all(greaterThanEqual(inCell, vec2(3.0, 4.0))) && all(lessThan(inCell, vec2(9.0, 17.0)))) {
+      ink = inCell.y >= fillTop ? 2.0 : 1.0;
+      fill = GREEN;
+    }
+  }
+
+  // the green dot inside the altitude's mountain
+  if (glyph == ALTITUDE) {
+    paint(ink, fill, all(greaterThanEqual(inCell, vec2(3.0, 4.0))) && all(lessThan(inCell, vec2(5.0, 6.0))) ? 2.0 : 0.0, GREEN);
+  }
+
+  vec3 color = ink == 2.0 ? fill : ink == 1.0 ? vec3(0.0) : sceneColor.rgb;
+  out_FragColor = vec4(mix(sceneColor.rgb, color, ink > 0.0 ? opacity : 0.0), sceneColor.a);
+}

package/src/shaders/Dufour.glsl

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

package/src/shaders/EyeFromDepth.glsl

@@ -0,0 +1,36 @@
+// Eye coordinates of the pixel at uv, from the depth texture; w is 0 for the sky. With a
+// logarithmic depth buffer, czm_readDepth's perspective depth is about 1 beyond a few meters,
+// so the distance is decoded from the logarithmic depth directly. An orthographic camera's depth
+// is linear between the near and far planes Cesium fits to the scene each frame, not the
+// projection's, and its rays are parallel; Cesium gives it no inverse projection (zero).
+
+// A sampler's default precision is low: some phones' GPUs (Mali) then read the depth as a half float,
+// steps of centimeters a few hundred meters away.
+precision highp sampler2D;
+
+vec4 eyeAt(sampler2D depthTexture, vec2 uv) {
+  float raw = texture(depthTexture, uv).r;
+  if (czm_orthographicIn3D == 1.0) {
+    vec2 xy = (2.0 * uv - 1.0 - czm_projection[3].xy) / vec2(czm_projection[0][0], czm_projection[1][1]);
+    return raw >= 1.0 ? vec4(0.0, 0.0, -1.0, 0.0) : vec4(xy, -mix(czm_currentFrustum.x, czm_currentFrustum.y, raw), 1.0);
+  }
+  // the pixel's view ray, through the near plane
+  vec4 ray = czm_inverseProjection * vec4(2.0 * uv - 1.0, -1.0, 1.0);
+  ray.xyz /= ray.w;
+  if (raw >= 1.0) {
+    return vec4(normalize(ray.xyz), 0.0);
+  }
+#ifdef LOG_DEPTH
+  float viewDepth = exp2(raw * czm_log2FarDepthFromNearPlusOne) - 1.0 + czm_currentFrustum.x;
+#else
+  vec4 eye = czm_inverseProjection * vec4(2.0 * uv - 1.0, 2.0 * raw - 1.0, 1.0);
+  float viewDepth = -eye.z / eye.w;
+#endif
+  return vec4(ray.xyz * (viewDepth / -ray.z), 1.0);
+}
+
+// the distance to the pixel at uv, in meters, and the sky as far as a given distance
+float eyeDistance(sampler2D depthTexture, vec2 uv, float skyDistance) {
+  vec4 eye = eyeAt(depthTexture, uv);
+  return eye.w == 0.0 ? skyDistance : length(eye.xyz);
+}

package/src/shaders/Filmic.glsl

@@ -0,0 +1,5 @@
+// a filmic roll-off (ACES, Narkowicz's fit) for the effects that add light to the picture: Cesium
+// has already tone mapped it, so their light would clip to flat white without it
+vec3 filmic(vec3 x) {
+  return clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), 0.0, 1.0);
+}

package/src/shaders/Fog.glsl

@@ -0,0 +1,18 @@
+// What ValleyFog's fog and the rain's and the snow's haze share: the sky as a ray this long, and
+// their light, lit by the sun as Cesium's fog, turning around sunset to a moonlit blue as bright as
+// the scene's fog.minimumBrightness, rather than a flat gray. Needs Height.
+
+// the sky is a ray this long, in meters
+const float SKY_DISTANCE = 50000.0;
+// tint of the fog at night, scaled by fog.minimumBrightness
+const vec3 NIGHT = vec3(0.45, 0.55, 0.85);
+
+// 0 at night to 1 by day, from the sun's height at the camera
+float daylight() {
+  return smoothstep(-0.1, 0.3, dot(up, czm_sunDirectionEC));
+}
+
+// a fog's color by day, turning to the moonlit blue at night
+vec3 byDaylight(vec3 color, float day) {
+  return mix(NIGHT * czm_fogMinimumBrightness, color, day);
+}

package/src/shaders/Frame.glsl

@@ -0,0 +1,10 @@
+// Size of the visible frame of the given width over height, centered in the canvas, in texture
+// coordinates: bars above and below when the canvas is narrower than the ratio, on the sides when
+// it is wider; the whole canvas for a ratio of 0.
+vec2 frameSize(float aspectRatio) {
+  if (aspectRatio <= 0.0) {
+    return vec2(1.0);
+  }
+  float canvas = czm_viewport.z / czm_viewport.w;
+  return aspectRatio < canvas ? vec2(aspectRatio / canvas, 1.0) : vec2(1.0, canvas / aspectRatio);
+}

package/src/shaders/Hash.glsl

@@ -0,0 +1,12 @@
+// random in [0, 1) for a point, without sin, which GPUs compute poorly for large numbers
+float hash(vec2 p) {
+  vec3 p3 = fract(p.xyx * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+// per pixel noise in [0, 1), "interleaved gradient noise" (Jimenez 2014): a dither that
+// spreads the sample positions of a blur between neighbouring pixels
+float pixelNoise(vec2 pixel) {
+  return fract(52.9829189 * fract(dot(pixel, vec2(0.06711056, 0.00583715))));
+}

package/src/shaders/Height.glsl

@@ -0,0 +1,25 @@
+// Height above the ellipsoid of a point in eye coordinates, computed relative to the camera: in
+// world coordinates, single precision would round the position to about half a meter. The
+// uniforms come from the CPU in double precision (height.js).
+uniform float cameraHeight;
+uniform vec3 up;
+uniform float radius;
+
+float heightAt(vec3 eye) {
+  // the camera is at the origin of eye coordinates; away from it horizontally, the ground falls
+  // below the horizontal by the Earth's curvature
+  float rise = dot(eye, up);
+  float across = dot(eye, eye) - rise * rise;
+  return cameraHeight + rise + across / (2.0 * radius);
+}
+
+// the part below a height of the ray from the camera to a point in eye coordinates, as shares of
+// it, from its start to its end, the height taken as linear along it; none when both ends are above
+vec2 belowHeight(vec3 rayEnd, float height) {
+  float h0 = cameraHeight;
+  float h1 = heightAt(rayEnd);
+  if (min(h0, h1) >= height) {
+    return vec2(0.0);
+  }
+  return vec2(h0 > height ? (h0 - height) / (h0 - h1) : 0.0, h1 > height ? (height - h0) / (h1 - h0) : 1.0);
+}

package/src/shaders/Infrared.glsl

@@ -0,0 +1,44 @@
+// Black and white infrared film: foliage, which reflects the near infrared, turns bright, the sky
+// and water dark. The gray is the lightness raised or lowered by a weight per hue. After prod80's
+// ReShade Black & White (MIT), its Infrared preset, https://github.com/prod80/prod80-ReShade-Repository
+precision highp sampler2D;
+uniform sampler2D colorTexture;
+// 0 to 1
+uniform float strength;
+in vec2 v_textureCoordinates;
+
+// weights of the red, yellow, green, cyan, blue and magenta hues
+const float RED = -1.35;
+const float YELLOW = 2.35;
+const float GREEN = 1.35;
+const float CYAN = -1.35;
+const float BLUE = -1.6;
+const float MAGENTA = -1.07;
+// shape of the hue selections
+const float CURVE = 1.5;
+
+float curve(float x, float k) {
+  float s = sign(x - 0.5);
+  float o = 0.5 * (1.0 + s);
+  return o - 0.5 * s * pow(max(2.0 * (o - s * x), 0.0), k);
+}
+
+// how much of the hue centered at center there is in hue
+float hueWeight(float hue, float center) {
+  return curve(max(1.0 - abs((hue - center) * 6.0), 0.0), CURVE);
+}
+
+void main() {
+  vec4 sceneColor = texture(colorTexture, v_textureCoordinates);
+  vec3 hsl = czm_RGBToHSL(clamp(sceneColor.rgb, 0.0, 1.0));
+  float h = hsl.x;
+  float weight = RED * (hueWeight(h, 0.0) + hueWeight(h, 1.0))
+    + YELLOW * hueWeight(h, 1.0 / 6.0)
+    + GREEN * hueWeight(h, 2.0 / 6.0)
+    + CYAN * hueWeight(h, 3.0 / 6.0)
+    + BLUE * hueWeight(h, 4.0 / 6.0)
+    + MAGENTA * hueWeight(h, 5.0 / 6.0);
+  float saturation = hsl.y * (1.0 - hsl.y) + hsl.y;
+  float gray = clamp(hsl.z + hsl.z * weight * saturation * (1.0 - hsl.z), 0.0, 1.0);
+  out_FragColor = vec4(mix(sceneColor.rgb, vec3(gray), strength), sceneColor.a);
+}

package/src/shaders/Jello.glsl

@@ -0,0 +1,41 @@
+// The jello of a vibrating camera with a rolling shutter: the sensor reads its rows one after
+// another, so each row sees the camera at a different moment of its shake, and straight edges
+// wobble. After Readout's readout pass (stoatworks-labs, MIT): row r of H is read
+// `readout * (1 - r / H)` before the frame, the camera's pose is taken at the middle of the row's
+// exposure, and the shake is a few sinusoids in x, y and rotation. The phases come from the CPU,
+// in double precision; the picture is magnified by zoom so that its edges do not show.
+precision highp sampler2D;
+uniform sampler2D colorTexture;
+// the shake: frequencies in Hz, phases at the frame's time in radians, amplitudes in picture
+// heights (x, y) and radians (rotation)
+uniform vec4 shakeHz;
+uniform vec4 phaseX;
+uniform vec4 phaseY;
+uniform vec4 phaseRotation;
+uniform vec4 amplitudeX;
+uniform vec4 amplitudeY;
+uniform vec4 amplitudeRotation;
+uniform float zoom;
+in vec2 v_textureCoordinates;
+
+// seconds to read all the rows, top down, and to expose each
+const float READOUT = 0.02;
+const float EXPOSURE = 0.004;
+
+void main() {
+  vec2 size = czm_viewport.zw;
+  // the row, from the top, and how long before the frame it was read, at the middle of its exposure
+  float row = floor((1.0 - v_textureCoordinates.y) * size.y);
+  float tau = READOUT * (1.0 - row / size.y) + 0.5 * EXPOSURE;
+  vec4 arg = czm_twoPi * shakeHz * tau;
+  vec2 shift = vec2(dot(amplitudeX, sin(phaseX - arg)), dot(amplitudeY, sin(phaseY - arg)));
+  float rotation = dot(amplitudeRotation, sin(phaseRotation - arg));
+
+  // centred, in picture heights, so that a rotation is not a shear
+  float aspect = size.x / size.y;
+  vec2 p = vec2((v_textureCoordinates.x - 0.5) * aspect, v_textureCoordinates.y - 0.5);
+  float c = cos(rotation);
+  float s = sin(rotation);
+  p = (vec2(p.x * c - p.y * s, p.x * s + p.y * c) + shift) / zoom;
+  out_FragColor = texture(colorTexture, vec2(p.x / aspect + 0.5, p.y + 0.5));
+}