docs(changelog): add the #1709 fragment

Co-Authored-By: Claude Fable 5.2 <[email protected]>

changelog.d/1709-radio-category-cache.md

@@ -0,0 +1,3 @@
+- Shorten the hitch when the Radio directory loads from about 450 ms to about
+  180 ms. A station's tags and categories are worked out once instead of for
+  every category check (mazy1998, #1709).

changelog.d/1713-clouds-infrared-lut.md

@@ -1,3 +0,0 @@
-- Halve the time the satellite cloud image takes to prepare on the 3D Tiles
-  map by applying its transparency curve from a lookup table, in place
-  (mazy1998, #1713).

changelog.d/1721-clouds-infrared-shader.md

@@ -1,3 +0,0 @@
-- Satellite clouds on the 3D Tiles map apply their transparency in the shader
-  instead of rewriting each 4096 x 2048 image on the page, and changing the
-  cloud strength no longer builds a new image (mazy1998, #1721).

docs/CURRENT-STATE.md

@@ -891,11 +891,9 @@ image proxy accepts `bbox=west,south,east,north` for every product: inside the
 product bounds, 2:1 within 1 %, rounded to 0.25°, up to 4096×2048 (the
 default), cached by product, time, size and bbox. Diagnostics report
 `shell.detail` (`bbox`, `size`, `ready`, `enabled`).
-Clouds only applies a soft brightness ramp, using
+Clouds only applies a soft brightness ramp to decoded pixels once, using
 Cesium's sRGB-to-linear conversion (`channel ** 2.2`) and smoothstep from 0.40
-to 0.70. Globe hosts apply it to decoded pixels once; a shell applies the same
-ramp in its fragment shader from a strength uniform, so its images are drawn
-as decoded and a strength change neither fetches nor rewrites an image. The old 0.55 threshold is the ramp midpoint. RGB and source alpha are
+to 0.70. The old 0.55 threshold is the ramp midpoint. RGB and source alpha are
 preserved in Full image mode; both modes use the chosen layer opacity. This
 is a display filter, not a cloud mask. The cloud-filter slider is a continuous
 0–100% strength: 0% is Full, 100% is the existing Clouds only key, and
@@ -911,13 +909,13 @@ and processes it before staging. Globe hosts crop that canvas into 256 px tiles
 to maximum level 3 on a geographic 2×1 root grid bounded to the manifest extent,
 avoiding request-dependent contrast seams.
 On globe hosts, regional infrared retains network tiles and processes each
-decoded tile once; shells never read a frame's pixels back.
+decoded tile once; shells process each whole frame once.
 Exact-time tile and image responses are immutable for 24 hours; manifests and
 errors remain uncached. Each globe renderer retains up to 6 processed global
 mosaics in a least-recently-used cache keyed by observation time and infrared
 mode (up to 48 MiB of canvas pixels). Each shell keeps decoded full-extent and
 detail images in one least-recently-used cache bounded at 128 MiB, keyed by
-time and window: the shown frame and the warmed next frame, each
+time, mode and window: the shown frame and the warmed next frame, each
 full-extent and detail; nothing older survives them. Disable clears the caches.
 Cache hits skip
 fetch/decode and report `mosaic.cached: true` with zero decode time.

src/layers/radio/categories.js

@@ -27,42 +27,52 @@ export function createCategories({
       .filter(Boolean);
   }
 
-  function hasTag(station, needles) {
-    const tags = stationTags(station);
-    return needles.some((needle) =>
+  const tagsInclude = (tags, needles) =>
+    needles.some((needle) =>
       tags.some((tag) => tag === needle || tag.includes(needle)),
     );
+
+  // A station's tags decide its categories, and neither changes while the
+  // station record lives. Matching used to normalise every tag again for
+  // every needle of every category of every station: about 0.9 s and a
+  // 445 ms freeze per directory load of 750 stations, repeated for the active
+  // filter on every horizon scan. Keyed by the record and its tags value, so
+  // a record given new tags is read again.
+  const membershipByStation = new WeakMap();
+
+  function stationMembership(station) {
+    const keyed = station !== null && typeof station === 'object';
+    const known = keyed ? membershipByStation.get(station) : null;
+    if (known && known.source === station.tags) return known;
+    const tags = stationTags(station);
+    const genres = MUSIC_GENRES.filter(([genre]) =>
+      tagsInclude(tags, [genre]),
+    ).map(([genre]) => genre);
+    const categories = new Set(genres.map((genre) => `genre:${genre}`));
+    for (const [id, needles] of Object.entries(CATEGORY_MATCHERS))
+      if (tagsInclude(tags, needles)) categories.add(id);
+    const sorted = categories.size > genres.length;
+    if (genres.length > 0 || tagsInclude(tags, ['music', 'hits', 'songs']))
+      categories.add('music');
+    else if (!sorted) categories.add('other');
+    const membership = { source: station?.tags, tags, genres, categories };
+    if (keyed) membershipByStation.set(station, membership);
+    return membership;
+  }
+
+  function hasTag(station, needles) {
+    return tagsInclude(stationMembership(station).tags, needles);
   }
 
   function detectedGenres(station) {
-    return MUSIC_GENRES.filter(([genre]) => hasTag(station, [genre])).map(
-      ([genre]) => genre,
-    );
+    return [...stationMembership(station).genres];
   }
 
   /** Return whether a station belongs in a station-tag category. */
 
   function stationMatchesRadioCategory(station, categoryId) {
     if (categoryId === 'all') return true;
-    if (categoryId.startsWith('genre:')) {
-      return detectedGenres(station).includes(
-        categoryId.slice('genre:'.length),
-      );
-    }
-    if (categoryId === 'music') {
-      return (
-        detectedGenres(station).length > 0 ||
-        hasTag(station, ['music', 'hits', 'songs'])
-      );
-    }
-    if (categoryId === 'other') {
-      return (
-        !Object.entries(CATEGORY_MATCHERS).some(([id]) =>
-          stationMatchesRadioCategory(station, id),
-        ) && !stationMatchesRadioCategory(station, 'music')
-      );
-    }
-    return hasTag(station, CATEGORY_MATCHERS[categoryId] || []);
+    return stationMembership(station).categories.has(categoryId);
   }
 
   /** Build canonical and detected-genre categories from station-level tags. */

src/layers/radio/categories.test.mjs

@@ -0,0 +1,198 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { createCategories } from './categories.js';
+import { CATEGORY_MATCHERS, MUSIC_GENRES } from './policy.js';
+
+const categories = createCategories({
+  state: {},
+  services: {},
+  parts: { model: { radioCategoryColor: (id) => `color:${id}` } },
+  source: {},
+});
+
+// Category matching as it was before memberships were remembered: every call
+// normalises the station's tags again. Counts and filters must stay equal.
+const normalize = (value) =>
+  String(value ?? '')
+    .trim()
+    .toLocaleLowerCase()
+    .replace(/[_-]+/g, ' ')
+    .replace(/\s+/g, ' ')
+    .slice(0, 80);
+const tagsOf = (station) =>
+  (Array.isArray(station?.tags)
+    ? station.tags
+    : String(station?.tags ?? '').split(',')
+  )
+    .map(normalize)
+    .filter(Boolean);
+const hasTag = (station, needles) => {
+  const tags = tagsOf(station);
+  return needles.some((needle) =>
+    tags.some((tag) => tag === needle || tag.includes(needle)),
+  );
+};
+const genresOf = (station) =>
+  MUSIC_GENRES.filter(([genre]) => hasTag(station, [genre])).map(
+    ([genre]) => genre,
+  );
+function matchesByRescan(station, categoryId) {
+  if (categoryId === 'all') return true;
+  if (categoryId.startsWith('genre:'))
+    return genresOf(station).includes(categoryId.slice('genre:'.length));
+  if (categoryId === 'music')
+    return (
+      genresOf(station).length > 0 ||
+      hasTag(station, ['music', 'hits', 'songs'])
+    );
+  if (categoryId === 'other')
+    return (
+      !Object.keys(CATEGORY_MATCHERS).some((id) =>
+        matchesByRescan(station, id),
+      ) && !matchesByRescan(station, 'music')
+    );
+  return hasTag(station, CATEGORY_MATCHERS[categoryId] || []);
+}
+
+const CATEGORY_IDS = [
+  'all',
+  ...Object.keys(CATEGORY_MATCHERS),
+  'music',
+  ...MUSIC_GENRES.map(([genre]) => `genre:${genre}`),
+  'other',
+  'genre:not-a-genre',
+  'not-a-category',
+];
+
+function seeded(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = (Math.imul(state, 1664525) + 1013904223) >>> 0;
+    return state / 2 ** 32;
+  };
+}
+
+/** Stations tagged the way the directory tags them, plus the odd shapes. */
+function directory(count = 1500) {
+  const random = seeded(11);
+  const vocabulary = [
+    ...MUSIC_GENRES.map(([genre]) => genre),
+    ...Object.values(CATEGORY_MATCHERS).flat(),
+    'Hip-Hop',
+    'R&B',
+    'Top_Hits',
+    'songs of praise',
+    'community',
+    'college',
+    'varied',
+    'Police  Scanner',
+    'FIREFIGHTERS',
+    'metropolitan',
+    'x'.repeat(100),
+    '',
+    '  ',
+  ];
+  const pick = () => vocabulary[Math.floor(random() * vocabulary.length)];
+  const stations = [];
+  for (let i = 0; i < count; i++) {
+    const tags = Array.from({ length: Math.floor(random() * 6) }, pick);
+    stations.push({
+      id: `station-${i}`,
+      tags: i % 5 === 0 ? tags.join(',') : i % 7 === 0 ? Object.freeze(tags) : tags,
+    });
+  }
+  stations.push(
+    { id: 'no-tags' },
+    { id: 'null-tags', tags: null },
+    { id: 'number-tags', tags: 42 },
+    Object.freeze({ id: 'frozen', tags: Object.freeze(['Jazz', 'News']) }),
+    null,
+    undefined,
+    'pop',
+  );
+  return stations;
+}
+
+test('remembered memberships give the counts and filters of a full rescan', () => {
+  const stations = directory();
+  for (const id of CATEGORY_IDS) {
+    const expected = stations.filter((station) => matchesByRescan(station, id));
+    assert.deepEqual(
+      categories.filterRadioStations(stations, id),
+      expected,
+      `filter ${id}`,
+    );
+    for (const station of stations)
+      assert.equal(
+        categories.stationMatchesRadioCategory(station, id),
+        matchesByRescan(station, id),
+      );
+  }
+  const built = categories.buildRadioCategories(stations);
+  assert.deepEqual(
+    built.map(({ id, count }) => [id, count]),
+    CATEGORY_IDS.filter(
+      (id) =>
+        !id.startsWith('genre:') ||
+        stations.some((station) => matchesByRescan(station, id)),
+    )
+      .filter((id) => id !== 'not-a-category')
+      .map((id) => [
+        id,
+        stations.filter((station) => matchesByRescan(station, id)).length,
+      ]),
+  );
+  assert.ok(built.find(({ id }) => id === 'other').count > 0);
+  assert.ok(built.find(({ id }) => id === 'genre:hip hop').count > 0);
+  for (const station of stations) {
+    assert.deepEqual(categories.detectedGenres(station), genresOf(station));
+    assert.deepEqual(categories.stationTags(station), tagsOf(station));
+  }
+});
+
+test('a station has its tags normalised once, however often it is matched', () => {
+  let reads = 0;
+  const tag = (text) => ({
+    toString() {
+      reads++;
+      return text;
+    },
+  });
+  const stations = [
+    { id: 'a', tags: [tag('Jazz'), tag('News')] },
+    { id: 'b', tags: [tag('community')] },
+  ];
+  categories.buildRadioCategories(stations);
+  for (const id of CATEGORY_IDS) categories.filterRadioStations(stations, id);
+  // A horizon scan asks once per station for the active filter.
+  for (let scan = 0; scan < 50; scan++)
+    for (const station of stations)
+      categories.stationMatchesRadioCategory(station, 'news');
+  assert.equal(reads, 3, 'one normalisation per tag');
+  assert.deepEqual(
+    categories.filterRadioStations(stations, 'genre:jazz').map(({ id }) => id),
+    ['a'],
+  );
+});
+
+test('a station record given new tags is matched on the new tags', () => {
+  const station = { id: 'a', tags: ['jazz'] };
+  assert.equal(categories.stationMatchesRadioCategory(station, 'music'), true);
+  assert.equal(categories.stationMatchesRadioCategory(station, 'news'), false);
+  station.tags = ['news'];
+  assert.equal(categories.stationMatchesRadioCategory(station, 'music'), false);
+  assert.equal(categories.stationMatchesRadioCategory(station, 'news'), true);
+  assert.deepEqual(categories.detectedGenres(station), []);
+  station.tags = 'community';
+  assert.equal(categories.stationMatchesRadioCategory(station, 'other'), true);
+});
+
+test('callers cannot alter a remembered genre list', () => {
+  const station = { id: 'a', tags: ['jazz', 'soul'] };
+  categories.detectedGenres(station).push('rock');
+  assert.deepEqual(categories.detectedGenres(station), ['jazz', 'soul']);
+  assert.equal(
+    categories.stationMatchesRadioCategory(station, 'genre:rock'),
+    false,
+  );
+});

src/layers/weather/infraredAlpha.js

@@ -1,31 +1,22 @@
 export const INFRARED_ALPHA_T0 = 0.4;
 export const INFRARED_ALPHA_T1 = 0.7;
 
-/** How much of the cloud key applies, 0–1, for a display mode or a 0–100
- * strength. The weather shell passes it to its fragment shader. */
-export function infraredAmount(strength) {
-  return strength === 'full'
-    ? 0
-    : strength === 'filtered' || !Number.isFinite(strength)
-      ? 1
-      : Math.max(0, Math.min(100, strength)) / 100;
-}
-
-/** Scale each pixel's alpha in place; RGB is left as it is. The scale depends
- * only on the brightest channel, so it is worked out once for each of the 256
- * byte values instead of once per pixel: a 4096×2048 image has 8.4 million
- * pixels and the power curve per pixel held the page for over 100 ms. The
- * table holds the same numbers the per-pixel formula produced, so the output
- * bytes are unchanged.
+/** Return display pixels without changing RGB or the source RGBA bytes.
  * `strength` is 0–100: zero is the full image and 100 is the cloud key.
  */
-export function applyInfraredAlpha(pixels, strength = 'filtered') {
-  const amount = infraredAmount(strength);
+export function infraredAlpha(rgba, strength = 'filtered') {
+  const pixels = new Uint8ClampedArray(rgba);
+  const amount =
+    strength === 'full'
+      ? 0
+      : strength === 'filtered' || !Number.isFinite(strength)
+        ? 1
+        : Math.max(0, Math.min(100, strength)) / 100;
   if (amount === 0) return pixels;
-  const scale = new Float64Array(256);
-  for (let value = 0; value < 256; value++) {
+  for (let i = 0; i < pixels.length; i += 4) {
     // Match Cesium's czm_srgbToLinear conversion in draped imagery.
-    const linearMax = (value / 255) ** 2.2;
+    const linearMax =
+      (Math.max(rgba[i], rgba[i + 1], rgba[i + 2]) / 255) ** 2.2;
     const t = Math.max(
       0,
       Math.min(
@@ -35,21 +26,7 @@ export function applyInfraredAlpha(pixels, strength = 'filtered') {
       ),
     );
     const filtered = t * t * (3 - 2 * t);
-    scale[value] = 1 - amount + filtered * amount;
-  }
-  for (let i = 0; i < pixels.length; i += 4) {
-    const r = pixels[i];
-    const g = pixels[i + 1];
-    const b = pixels[i + 2];
-    const max = r > g ? (r > b ? r : b) : g > b ? g : b;
-    pixels[i + 3] = pixels[i + 3] * scale[max];
+    pixels[i + 3] = rgba[i + 3] * (1 - amount + filtered * amount);
   }
   return pixels;
 }
-
-/** Return display pixels without changing RGB or the source RGBA bytes.
- * `strength` is 0–100: zero is the full image and 100 is the cloud key.
- */
-export function infraredAlpha(rgba, strength = 'filtered') {
-  return applyInfraredAlpha(new Uint8ClampedArray(rgba), strength);
-}

src/layers/weather/infraredAlpha.test.mjs

@@ -1,7 +1,6 @@
 import test from 'node:test';
 import assert from 'node:assert/strict';
 import {
-  applyInfraredAlpha,
   infraredAlpha,
   INFRARED_ALPHA_T0,
   INFRARED_ALPHA_T1,
@@ -62,43 +61,3 @@ test('full infrared preserves every channel including partial and zero alpha', (
   ]);
   assert.deepEqual(infraredAlpha(pixels, 'full'), pixels);
 });
-
-test('the lookup table gives the per-pixel curve byte for byte, in place', () => {
-  // The transfer as it was written per pixel, before the table.
-  const perPixel = (rgba, amount) => {
-    const out = new Uint8ClampedArray(rgba);
-    for (let i = 0; i < out.length; i += 4) {
-      const linearMax =
-        (Math.max(rgba[i], rgba[i + 1], rgba[i + 2]) / 255) ** 2.2;
-      const t = Math.max(
-        0,
-        Math.min(
-          1,
-          (linearMax - INFRARED_ALPHA_T0) /
-            (INFRARED_ALPHA_T1 - INFRARED_ALPHA_T0),
-        ),
-      );
-      out[i + 3] = rgba[i + 3] * (1 - amount + t * t * (3 - 2 * t) * amount);
-    }
-    return out;
-  };
-  // Every brightest-channel value in each channel, against a spread of alphas.
-  const bytes = [];
-  for (let value = 0; value < 256; value++)
-    for (const alpha of [0, 1, 37, 128, 200, 254, 255]) {
-      bytes.push(value, 0, 0, alpha);
-      bytes.push(value >> 1, value, 0, alpha);
-      bytes.push(0, value >> 2, value, alpha);
-    }
-  const source = new Uint8ClampedArray(bytes);
-  for (const strength of [1, 33, 50, 99, 100, 'filtered', Number.NaN]) {
-    const amount = Number.isFinite(strength) ? strength / 100 : 1;
-    const pixels = source.slice();
-    assert.equal(applyInfraredAlpha(pixels, strength), pixels);
-    assert.deepEqual(pixels, perPixel(source, amount), `strength ${strength}`);
-  }
-  for (const strength of [0, 'full']) {
-    const pixels = source.slice();
-    assert.deepEqual(applyInfraredAlpha(pixels, strength), source);
-  }
-});

src/layers/weather/infraredImage.js

@@ -6,7 +6,7 @@ import {
   drawWeatherPixels,
   closeWeatherPixels,
 } from './source.js';
-import { applyInfraredAlpha } from './infraredAlpha.js';
+import { infraredAlpha } from './infraredAlpha.js';
 
 export const MAX_MOSAIC_BYTES = 4 * 1024 * 1024;
 
@@ -31,22 +31,13 @@ export function processInfraredImage(
 
 function applyInfraredTransfer(context, canvas, mode) {
   const pixels = context.getImageData(0, 0, canvas.width, canvas.height);
-  // In place: a copy of a 4096×2048 image is 33 MB, made and written back.
-  applyInfraredAlpha(pixels.data, mode);
+  pixels.data.set(infraredAlpha(pixels.data, mode));
   context.putImageData(pixels, 0, 0);
 }
 
 /** Draw pixels a frame source supplied into a new canvas, with the display
  * transfer for infrared products, and release them. They must be `size`. */
-function drawSuppliedImage(
-  pixels,
-  product,
-  mode,
-  size,
-  signal,
-  createCanvas,
-  transfer,
-) {
+function drawSuppliedImage(pixels, product, mode, size, signal, createCanvas) {
   try {
     signal.throwIfAborted();
     const { width, height } = weatherPixelSize(pixels);
@@ -57,7 +48,7 @@ function drawSuppliedImage(
     texture.height = height;
     const context = texture.getContext('2d');
     drawWeatherPixels(context, pixels);
-    if (transfer && (product === 'clouds' || product === 'clouds-regional'))
+    if (product === 'clouds' || product === 'clouds-regional')
       applyInfraredTransfer(context, texture, mode);
     return texture;
   } finally {
@@ -97,8 +88,7 @@ export function decodeInfraredImage(blob, signal) {
 }
 
 /** Fetch one capped whole-extent frame, or a `bbox` detail window of it, and draw
- * it into a canvas. Infrared frames get the display transfer unless `transfer`
- * is false, for a caller that applies it when drawing; a canvas also keeps
+ * it into a canvas. Infrared frames get the display transfer; a canvas also keeps
  * Cesium's texture row order, which an ImageBitmap upload would not. The decoded
  * image is always released. With a `frameSource` that has `getImage`, the host
  * supplies the decoded pixels instead and nothing is fetched or decoded here. */
@@ -117,7 +107,6 @@ export async function acquireWeatherImage(
     now = () => performance.now(),
     onFetched = () => {},
     frameSource = null,
-    transfer = true,
   },
 ) {
   if (frameSource?.getImage) {
@@ -138,7 +127,6 @@ export async function acquireWeatherImage(
       size,
       signal,
       createCanvas,
-      transfer,
     );
     return { texture, decodeMs: now() - started };
   }
@@ -159,7 +147,7 @@ export async function acquireWeatherImage(
     if (image.width !== size.width || image.height !== size.height)
       throw new Error('Invalid weather image dimensions');
     let texture;
-    if (transfer && (product === 'clouds' || product === 'clouds-regional'))
+    if (product === 'clouds' || product === 'clouds-regional')
       texture = processInfraredImage(image, mode, createCanvas);
     else {
       texture = createCanvas();

src/layers/weather/infraredImage.test.mjs

@@ -26,75 +26,6 @@ function canvas() {
   return output;
 }
 
-test('the transfer is applied to the canvas pixels in place, with no copy written back', () => {
-  let read = null;
-  const output = {};
-  output.getContext = () => ({
-    drawImage() {},
-    getImageData: () => {
-      read = { data: new Uint8ClampedArray([194, 0, 0, 200]) };
-      // A second full-size buffer copied over the first is what this guards.
-      read.data.set = () => {
-        throw new Error('the canvas pixels were overwritten from a copy');
-      };
-      return read;
-    },
-    putImageData: (pixels) => {
-      output.pixels = pixels;
-    },
-  });
-  processInfraredImage({ width: 1, height: 1 }, 'filtered', () => output);
-  assert.equal(output.pixels, read);
-  assert.deepEqual([...read.data], [194, 0, 0, 98]);
-});
-
-test('with transfer off an infrared frame is drawn and never read back', async () => {
-  const drawn = [];
-  const createCanvas = () => {
-    const output = {};
-    output.getContext = () => ({
-      drawImage: (image) => drawn.push(image),
-      getImageData: () => {
-        throw new Error('the frame was read back on the page');
-      },
-      putImageData: () => {
-        throw new Error('the frame was rewritten on the page');
-      },
-    });
-    return output;
-  };
-  const size = { width: 4096, height: 2048 };
-  const image = { ...size, close() {} };
-  const options = {
-    signal: new AbortController().signal,
-    mode: 'filtered',
-    size,
-    maxBytes: 1024,
-    createCanvas,
-    transfer: false,
-  };
-  const fetched = await acquireWeatherImage(
-    'clouds-regional',
-    '2026-09-15T20:00:00.000Z',
-    {
-      ...options,
-      fetchImpl: async () => ({
-        ok: true,
-        headers: new Headers(),
-        arrayBuffer: async () => new ArrayBuffer(1),
-      }),
-      decodeImage: async () => image,
-    },
-  );
-  assert.equal(fetched.texture.width, 4096);
-  const supplied = { ...size };
-  await acquireWeatherImage('clouds-regional', '2026-09-15T20:00:00.000Z', {
-    ...options,
-    frameSource: { getImage: async () => supplied },
-  });
-  assert.deepEqual(drawn, [image, supplied]);
-});
-
 test('decoded pixels are processed once on a same-sized canvas', () => {
   const image = { width: 1, height: 1 };
   const output = processInfraredImage(image, 'filtered', canvas);

src/layers/weather/shellRendering.js

@@ -1,9 +1,4 @@
 import { acquireWeatherImage } from './infraredImage.js';
-import {
-  INFRARED_ALPHA_T0,
-  INFRARED_ALPHA_T1,
-  infraredAmount,
-} from './infraredAlpha.js';
 import { imageryHostStatus } from './imageryHost.js';
 import { WEATHER_DETAIL_SIZE, WEATHER_IMAGE_SIZES } from './source.js';
 import { msg } from '../../i18n/index.js';
@@ -41,10 +36,6 @@ const LIFT_STEP = 500;
 // draw nothing until the full-extent image has arrived, and sample the detail
 // image only once it has arrived. The window is west, south, east, north in the
 // full-extent image's texture coordinates.
-// `infrared` is how much of the cloud key applies, 0–1 (infraredAlpha.js has
-// the same curve for the globe's draped imagery). It is applied here, to the
-// image as it was decoded, so a 4096×2048 frame is never read back and
-// rewritten on the page, and a strength change is one uniform, not a new image.
 const MATERIAL_SOURCE = `czm_material czm_getMaterial(czm_materialInput materialInput)
 {
   czm_material material = czm_getDefaultMaterial(materialInput);
@@ -55,8 +46,7 @@ const MATERIAL_SOURCE = `czm_material czm_getMaterial(czm_materialInput material
   float useDetail = inside * step(1.5, float(detailDimensions.x));
   vec4 c = mix(coarse, texture(detail, clamp(dst, 0.0, 1.0)), useDetail);
   material.diffuse = czm_gammaCorrect(c.rgb);
-  float key = smoothstep(${INFRARED_ALPHA_T0.toFixed(4)}, ${INFRARED_ALPHA_T1.toFixed(4)}, pow(max(c.r, max(c.g, c.b)), 2.2));
-  material.alpha = c.a * mix(1.0, key, infrared) * alpha * step(1.5, float(imageDimensions.x));
+  material.alpha = c.a * alpha * step(1.5, float(imageDimensions.x));
   return material;
 }
 `;
@@ -73,7 +63,6 @@ function registerMaterial(cesium) {
         image: cesium.Material.DefaultImageId,
         detail: cesium.Material.DefaultImageId,
         alpha: 1,
-        infrared: 0,
         window: { type: 'vec4', x: 0, y: 0, z: -1, w: -1 },
       },
       // Diffuse and alpha share these samples, so one source, not components.
@@ -256,12 +245,6 @@ export function createShellSurface({
       material.uniforms.alpha = value;
       scene.requestRender();
     },
-    /** How much of the infrared cloud key applies, 0–1. */
-    setInfrared(value) {
-      if (destroyed || material.uniforms.infrared === value) return;
-      material.uniforms.infrared = value;
-      scene.requestRender();
-    },
     /** Draw `next` inside `rect` (west, south, east, north in the full-extent
      * image's texture coordinates, 0–1); null clears it. In the same window only
      * the image changes, and Cesium keeps drawing the previous texture until
@@ -455,11 +438,10 @@ export function createWeatherShell({
   const visible = () => !hidden && !suspended();
   const boundsKey = ({ west, south, east, north }) =>
     `${west},${south},${east},${north}`;
-  // One image per time and window: the infrared mode is a uniform, not pixels.
-  const cacheKey = (time, box = null) =>
-    box ? `${time}|${boundsKey(box)}` : time;
+  const cacheKey = (time, mode, box = null) =>
+    `${time}|${infrared ? mode : 'none'}${box ? `|${boundsKey(box)}` : ''}`;
   const wantedDetail = () =>
-    current && view ? cacheKey(current.time, view) : null;
+    current && view ? cacheKey(current.time, current.infrared, view) : null;
 
   function evict(keep = []) {
     const kept = new Set([...keep, current?.key, detail?.key]);
@@ -472,11 +454,12 @@ export function createWeatherShell({
   }
   async function acquire(
     time,
+    mode,
     signal,
     { box = null, keep = [], onFetched } = {},
   ) {
     signal.throwIfAborted();
-    const key = cacheKey(time, box);
+    const key = cacheKey(time, mode, box);
     const entry = images.get(key);
     if (entry) {
       images.delete(key);
@@ -485,8 +468,7 @@ export function createWeatherShell({
     }
     const result = await acquireWeatherImage(product, time, {
       signal,
-      // The surface's shader applies the infrared transfer.
-      transfer: false,
+      mode,
       size: box ? detailSize : size,
       bbox: box,
       maxBytes: MAX_IMAGE_BYTES,
@@ -582,7 +564,9 @@ export function createWeatherShell({
     const job = { key, box: view, controller: new AbortController() };
     detailJob = job;
     job.timeout = setTimeout(() => job.controller.abort(), timeoutMs);
-    void acquire(current.time, job.controller.signal, { box: view })
+    void acquire(current.time, current.infrared, job.controller.signal, {
+      box: view,
+    })
       .then(({ texture }) => installDetail(job, texture))
       .catch(() => failDetail(job));
   }
@@ -677,7 +661,6 @@ export function createWeatherShell({
       loadMs: now() - frame.startedAt,
     };
     surface.setAlpha(alpha);
-    surface.setInfrared(infrared ? infraredAmount(frame.infrared) : 0);
     applyVisibility();
     lastError = null;
     evict();
@@ -732,7 +715,7 @@ export function createWeatherShell({
       return changed;
     },
     cancelPrefetch,
-    async prefetch(snapshot, time) {
+    async prefetch(snapshot, time, { infrared: mode = 'filtered' } = {}) {
       let job;
       try {
         if (
@@ -746,8 +729,8 @@ export function createWeatherShell({
         // Warm the next frame's detail window too while the window stays put.
         const box =
           view && viewBounds === boundsKey(snapshot.bounds) ? view : null;
-        const coarse = cacheKey(time);
-        const key = box ? cacheKey(time, box) : coarse;
+        const coarse = cacheKey(time, mode);
+        const key = box ? cacheKey(time, mode, box) : coarse;
         if (prefetchJob?.key === key || prefetchedKey === key) return false;
         cancelPrefetch();
         job = { key, controller: new AbortController() };
@@ -756,8 +739,8 @@ export function createWeatherShell({
         job.timeout = setTimeout(() => job.controller.abort(), timeoutMs);
         // Both images at once: one after the other would outlast playback's step.
         await Promise.all([
-          acquire(time, signal, { keep: box ? [key] : [] }),
-          box ? acquire(time, signal, { box, keep: [coarse] }) : null,
+          acquire(time, mode, signal, { keep: box ? [key] : [] }),
+          box ? acquire(time, mode, signal, { box, keep: [coarse] }) : null,
         ]);
         signal.throwIfAborted();
         if (prefetchJob === job) prefetchedKey = key;
@@ -799,7 +782,7 @@ export function createWeatherShell({
         infrared: mode,
         bounds,
         product: snapshot.product,
-        key: cacheKey(time),
+        key: cacheKey(time, mode),
         mosaic: { fetched: false, decodeMs: null, cached: false },
         controller: new AbortController(),
         startedAt: now(),
@@ -814,7 +797,7 @@ export function createWeatherShell({
       });
       watch(frame, signal);
       frame.timeout = setTimeout(() => fail(frame), timeoutMs);
-      void acquire(time, frame.controller.signal, {
+      void acquire(time, mode, frame.controller.signal, {
         onFetched: () => {
           frame.mosaic.fetched = true;
         },

src/layers/weather/shellRendering.test.mjs

@@ -11,7 +11,6 @@ import {
   WEATHER_SHELL_HEIGHTS,
 } from './shellRendering.js';
 import { NO_IMAGERY_HOST } from './imageryHost.js';
-import { INFRARED_ALPHA_T0, INFRARED_ALPHA_T1 } from './infraredAlpha.js';
 import {
   createShellCesium,
   createShellScene,
@@ -148,13 +147,12 @@ test('surface builds a flat raised rectangle drawn in primitive order without de
     image: Cesium.Material.DefaultImageId,
     detail: Cesium.Material.DefaultImageId,
     alpha: 1,
-    infrared: 0,
     window: { type: 'vec4', x: 0, y: 0, z: -1, w: -1 },
   });
   const { source } = template.fabric;
   assert.match(
     source,
-    /material\.alpha = c\.a \* mix\(1\.0, key, infrared\) \* alpha \* step\(1\.5, float\(imageDimensions\.x\)\);/,
+    /material\.alpha = c\.a \* alpha \* step\(1\.5, float\(imageDimensions\.x\)\);/,
     'nothing draws before the full-extent image',
   );
   assert.match(
@@ -375,7 +373,6 @@ test('real Cesium builds the two-texture material, the opaque-pass appearance an
     /uniform sampler2D image_\d+;/,
     /uniform sampler2D detail_\d+;/,
     /uniform float alpha_\d+;/,
-    /uniform float infrared_\d+;/,
     /uniform vec4 window_\d+;/,
     /uniform ivec3 imageDimensions_\d+;/,
     /uniform ivec3 detailDimensions_\d+;/,
@@ -387,16 +384,9 @@ test('real Cesium builds the two-texture material, the opaque-pass appearance an
   assert.match(shader, /step\(1\.5, float\(detailDimensions_\d+\.x\)\)/);
   assert.match(
     shader,
-    /material\.alpha = c\.a \* mix\(1\.0, key, infrared_\d+\) \* alpha_\d+ \* step\(1\.5, float\(imageDimensions_\d+\.x\)\);/,
+    /material\.alpha = c\.a \* alpha_\d+ \* step\(1\.5, float\(imageDimensions_\d+\.x\)\);/,
     'the uniform is renamed, the material field is not',
   );
-  // The cloud key the globe's draped imagery gets from infraredAlpha.js:
-  // brightest channel, 2.2 power, the shared thresholds.
-  assert.ok(
-    shader.includes(
-      `float key = smoothstep(${INFRARED_ALPHA_T0.toFixed(4)}, ${INFRARED_ALPHA_T1.toFixed(4)}, pow(max(c.r, max(c.g, c.b)), 2.2));`,
-    ),
-  );
   assert.match(shader, /float useDetail = inside \* step/, 'locals keep names');
   const detail = { width: 4096, height: 2048 };
   surface.setDetail(detail, { west: 0.1, south: 0.2, east: 0.3, north: 0.4 });
@@ -753,12 +743,12 @@ test('prefetch warms a decoded frame without staging and cancels cleanly', async
   h.shell.clear();
 });
 
-test('infrared frames reach the shader as decoded, with the cloud key as a uniform; radar and lightning get none', async () => {
-  for (const [product, amount] of [
-    ['clouds-regional', 1],
-    ['clouds', 1],
-    ['radar', 0],
-    ['lightning', 0],
+test('infrared frames get the display transfer; radar and lightning keep their pixels', async () => {
+  for (const [product, transfer] of [
+    ['clouds-regional', true],
+    ['clouds', true],
+    ['radar', false],
+    ['lightning', false],
   ]) {
     const h = harness({ product });
     const pending = h.shell.setFrame(snapshot(product), times[0]);
@@ -766,10 +756,11 @@ test('infrared frames reach the shader as decoded, with the cloud key as a unifo
     const image = h.material().uniforms.image;
     assert.equal(image.source, h.decoded[0], 'drawn into a canvas');
     assert.equal(h.decoded[0].closed, true);
-    assert.equal(image.pixels, undefined, `${product}: pixels never rewritten`);
+    assert.equal(image.pixels !== undefined, transfer, product);
+    if (transfer)
+      assert.deepEqual([...image.pixels], [194, 0, 0, 98], 'clouds only');
     h.render();
     assert.equal(await pending, true);
-    assert.equal(h.material().uniforms.infrared, amount, product);
     assert.equal(
       h.shell.getDiagnostics().height,
       WEATHER_SHELL_HEIGHTS[product],
@@ -778,28 +769,20 @@ test('infrared frames reach the shader as decoded, with the cloud key as a unifo
   }
 });
 
-test('an infrared mode change is a uniform on the same image: no fetch, no new canvas', async () => {
+test('an infrared mode change restages the same time with its own cached canvas', async () => {
   const h = harness({ product: 'clouds' });
   assert.equal(await show(h, times[0]), true);
-  const image = h.material().uniforms.image;
-  assert.equal(h.material().uniforms.infrared, 1);
+  const filtered = h.material().uniforms.image;
   assert.equal(await show(h, times[0]), true, 'same frame is a no-op');
   assert.equal(h.fetches.length, 1);
-  const renders = h.scene.renders;
   assert.equal(await show(h, times[0], { infrared: 'full' }), true);
-  assert.equal(h.material().uniforms.image, image);
-  assert.equal(h.material().uniforms.infrared, 0);
+  const full = h.material().uniforms.image;
+  assert.notEqual(full, filtered);
+  assert.deepEqual([...full.pixels], [194, 0, 0, 200]);
   assert.equal(h.shell.getDiagnostics().infrared, 'full');
-  assert.ok(h.scene.renders > renders, 'the new strength is drawn');
-  assert.equal(await show(h, times[0], { infrared: 40 }), true);
-  assert.equal(h.material().uniforms.infrared, 0.4);
-  assert.equal(h.shell.getDiagnostics().infrared, 40);
   assert.equal(await show(h, times[0], { infrared: 'filtered' }), true);
-  assert.equal(h.material().uniforms.image, image);
-  assert.equal(h.material().uniforms.infrared, 1);
-  assert.equal(h.fetches.length, 1);
-  assert.equal(h.decoded.length, 1);
-  assert.equal(h.shell.getDiagnostics().cache.mosaics, 1);
+  assert.equal(h.material().uniforms.image, filtered, 'cache hit');
+  assert.equal(h.fetches.length, 2);
   h.shell.clear();
 });