Share observed weather clocks and render radar, infrared and lightning on Navara

src/app/constructCatalog.js

@@ -4,7 +4,7 @@ import { createWeatherLayer } from '../layers/weather/index.js';
 import { createCyclonesLayer } from '../layers/cyclones/index.js';
 import { createWindLayer } from '../layers/wind/index.js';
 import { createLayerCatalog } from './catalog.js';
-import { createLayerAvailability } from './layers/renderers.js';
+import { createLayerAvailability, rendererFor } from './layers/renderers.js';
 import { APPLICATION_LAYER_DIRECTORY } from './layers/directory.js';
 import { LAYER_STATE_REGISTRY } from '../data/layerState.js';
 import { createMilitaryRegistry } from '../layers/aircraft/classification.js';
@@ -82,11 +82,15 @@ export function createApplicationCatalog({
   sources = sourceComposition.sources;
   const militaryRegistry =
     layerSession?.militaryRegistry ?? createMilitaryRegistry();
-  const weatherClock = createWeatherClock();
+  const weatherClock = layerSession?.weatherClock ?? createWeatherClock();
+  if (layerSession && !layerSession.weatherClock) {
+    layerSession.weatherClock = weatherClock;
+    layerSession.lifetime.signal.addEventListener('abort', weatherClock.destroy, { once: true });
+  }
   const dispose = () => {
     signal.removeEventListener('abort', dispose);
     if (!layerSession) militaryRegistry.dispose();
-    weatherClock.destroy();
+    if (!layerSession) weatherClock.destroy();
   };
   signal.addEventListener('abort', dispose, { once: true });
   try {
@@ -279,12 +283,14 @@ export function createApplicationCatalog({
       ...['weather-radar', 'weather-satellite', 'weather-lightning'].map(
         (id) => [
           id,
-          () =>
+          () => sessionModel(id, () =>
             createWeatherLayer({
               feed: sources.weather,
               id,
               clock: weatherClock,
+              createNativeRendering: (engine, options) => rendererFor(id, engine, options),
             }),
+          ),
         ],
       ),
       [

src/app/navaraLayers.test.mjs

@@ -62,6 +62,9 @@ test('the Navara mode registers migrated renderers once', async () => {
       'ais-live-vessels',
       'military-installations',
       'military-awareness',
+      'weather-radar',
+      'weather-satellite',
+      'weather-lightning',
       'local-firms',
     ],
   );

src/app/navaraMode.js

@@ -59,6 +59,8 @@ const NAVARA_CREDIT_KEYS = new Set([
   'eccc-aqhi',
   'wfigs',
   's2-ghostmaps',
+  'weather-noaa',
+  'weather-lightning',
   'firms',
   'gbfs',
   'overture-military-names',
@@ -107,6 +109,12 @@ export async function registerNavaraLayerRenderers() {
     bikeshare: async () =>
       (await import('../layers/bikeshare/render/navara.js'))
         .createBikeshareNavaraRenderer,
+    ...Object.fromEntries(['weather-radar', 'weather-satellite', 'weather-lightning'].map((id) => [
+      id, async () => {
+        const { createWeatherNavaraRenderer } = await import('../layers/weather/render/navara.js');
+        return (engine, options) => createWeatherNavaraRenderer(engine, navaraViews.get(engine), options);
+      },
+    ])),
     's2-ghostmaps': async () => {
       const { createGhostMapsNavaraRenderer } = await import('../layers/ghostMaps/render/navara.js');
       return (engine) => createGhostMapsNavaraRenderer(engine, navaraViews.get(engine).view);

src/layers/weather/index.js

@@ -59,6 +59,7 @@ export function createWeatherLayer({
   id = 'weather-radar',
   cesium = Cesium,
   createRendering = createWeatherRendering,
+  createNativeRendering = null,
   documentRef = globalThis.document,
   eventTarget = globalThis.window,
   matchMedia = globalThis.matchMedia?.bind(globalThis),
@@ -71,6 +72,8 @@ export function createWeatherLayer({
   let product = radar ? 'radar' : lightning ? 'lightning' : 'clouds-regional';
   let opacity = 'strong';
   let infrared = 100;
+  let sceneEngine = null;
+  let lastShown = null;
   let viewer = null,
     rendering = null,
     manifest = null,
@@ -104,9 +107,11 @@ export function createWeatherLayer({
   const isLatest = () =>
     clock ? clock.getState().mode === 'latest' : followLatest;
   const getHost = () =>
-    imageryHost?.() ?? { collection: viewer?.imageryLayers, kind: 'globe' };
+    sceneEngine?.kind === 'navara'
+      ? { kind: sceneEngine.maps.photorealActive() ? 'tileset' : 'globe', collection: sceneEngine }
+      : imageryHost?.() ?? { collection: viewer?.imageryLayers, kind: 'globe' };
   const notify = () => listener?.();
-  const shownTime = () => (noFrame ? null : rendering?.getDiagnostics().time);
+  const shownTime = () => (noFrame ? null : rendering?.getDiagnostics().time ?? lastShown);
   const unsubscribeClock = clock?.subscribe(() => {
     if (!clock.getState().playing || suspended()) rendering?.cancelPrefetch?.();
     notify();
@@ -159,7 +164,7 @@ export function createWeatherLayer({
           : shownTime();
       if (
         time !== shownTime() ||
-        (satellite && rendering.getDiagnostics().infrared !== infrared)
+        (satellite && rendering?.getDiagnostics().infrared !== infrared)
       )
         void show(time);
       else schedule();
@@ -194,7 +199,7 @@ export function createWeatherLayer({
     return true;
   }
   function registerClock() {
-    if (!clock || unregisterClock || !rendering || !enabled) return;
+    if (!clock || unregisterClock || !enabled) return;
     unregisterClock = clock.register({
       id,
       get maxGapMs() {
@@ -227,6 +232,7 @@ export function createWeatherLayer({
     if (!enabled || hostHidden || !manifest?.times?.includes(time))
       return false;
     signal?.throwIfAborted();
+    if (!rendering) return false;
     frameRequest?.abort();
     const controller = new AbortController();
     frameRequest = controller;
@@ -244,6 +250,7 @@ export function createWeatherLayer({
         return false;
       if (ok) {
         noFrame = false;
+        lastShown = time;
         rendering.setHidden?.(false);
         void warmNext(time);
       }
@@ -269,6 +276,14 @@ export function createWeatherLayer({
       }
     }
   }
+  function watchCamera() {
+    const moveEnd = sceneEngine?.camera?.moveEnd ?? viewer?.camera?.moveEnd;
+    removeCamera ??= moveEnd?.addEventListener(() => {
+      checkHost();
+      notify();
+    });
+  }
+
   const layer = {
     id,
     name: radar
@@ -279,24 +294,47 @@ export function createWeatherLayer({
     icon: radar ? '◉' : lightning ? 'ϟ' : '☁',
     source: 'NOAA nowCOAST · OBSERVED',
     updateInterval: lightning ? 600_000 : 120_000,
-    init(nextViewer) {
-      viewer = nextViewer;
-      rendering = createRendering({
-        viewer,
-        cesium,
-        getHost,
-        onChange: notify,
-      });
-      checkHost(false);
-      eventTarget?.addEventListener?.(
-        'gev:map-stack-changed',
-        onMapStackChanged,
-      );
-      rendering.setAlpha(opacity === 'light' ? 0.4 : satellite ? 0.7 : 0.8);
+    init(nextViewer, options = {}) {
       motion = matchMedia?.('(prefers-reduced-motion: reduce)');
       motion?.addEventListener?.('change', onVisibility);
       documentRef?.addEventListener?.('visibilitychange', onVisibility);
-      registerClock();
+      if (nextViewer || options.engine) layer.attachRenderer(nextViewer, options);
+    },
+    attachRenderer(nextViewer, { engine = null } = {}) {
+      viewer = nextViewer;
+      sceneEngine = engine;
+      const options = { viewer, cesium, getHost, onChange: notify };
+      rendering = engine?.kind === 'navara'
+        ? createNativeRendering(engine, options)
+        : createRendering(options);
+      checkHost(false);
+      eventTarget?.addEventListener?.('gev:map-stack-changed', onMapStackChanged);
+      rendering.setAlpha(opacity === 'light' ? 0.4 : satellite ? 0.7 : 0.8);
+      if (!enabled) return;
+      watchCamera();
+      if (!manifest) return;
+      const time = clock && !isLatest() ? clock.selectFor(id, clock.getState().target) :
+        (followLatest ? manifest.latest : lastShown);
+      if (time) void show(time);
+      else rendering.setHidden(true);
+    },
+    detachRenderer() {
+      ++generation;
+      frameRequest?.abort();
+      frameRequest = null;
+      clearTimeout(timer);
+      timer = null;
+      removeCamera?.();
+      removeCamera = null;
+      eventTarget?.removeEventListener?.('gev:map-stack-changed', onMapStackChanged);
+      rendering?.clear();
+      rendering = null;
+      hostCollection = null;
+      imageryHost = null;
+      runNavigation = null;
+      sceneEngine = null;
+      viewer = null;
+      loading = Boolean(request && !request.signal.aborted);
     },
     attachShellServices(services) {
       imageryHost =
@@ -312,12 +350,7 @@ export function createWeatherLayer({
     },
     enable() {
       enabled = true;
-      if (!removeCamera) {
-        removeCamera = viewer.camera.moveEnd?.addEventListener(() => {
-          checkHost();
-          notify();
-        });
-      }
+      watchCamera();
       registerClock();
     },
     disable() {
@@ -335,6 +368,7 @@ export function createWeatherLayer({
       stop();
       rendering?.clear();
       manifest = null;
+      lastShown = null;
       loading = false;
       error = null;
       followLatest = true;
@@ -394,7 +428,7 @@ export function createWeatherLayer({
             : shownTime();
         if (
           shownTime() !== time ||
-          (satellite && rendering.getDiagnostics().infrared !== infrared)
+          (satellite && rendering?.getDiagnostics().infrared !== infrared)
         )
           await show(time, controller.signal);
         return (
@@ -476,7 +510,7 @@ export function createWeatherLayer({
             ? { west: 110, south: -25, east: 0, north: 80 }
             : manifest.bounds);
         runNavigation(() =>
-          viewer.camera.flyTo({
+          (sceneEngine?.camera ?? viewer.camera).flyTo({
             destination: cesium.Rectangle.fromDegrees(
               b.west,
               b.south,
@@ -577,18 +611,18 @@ export function createWeatherLayer({
       const shownProblem = problem ? presentWeatherProblem(problem) : null;
       const shownHost = hostStatus ? t(hostStatus) : null;
       const b = manifest?.bounds;
-      const canvas = viewer?.scene?.canvas;
+      const canvas = sceneEngine?.host.canvas ?? viewer?.scene?.canvas;
       const point =
         canvas &&
-        viewer.camera.pickEllipsoid?.(
+        (sceneEngine?.camera ?? viewer.camera).pickEllipsoid?.(
           new cesium.Cartesian2(
             canvas.clientWidth / 2,
             canvas.clientHeight / 2,
           ),
-          viewer.scene.globe.ellipsoid,
+          viewer?.scene?.globe?.ellipsoid,
         );
       const camera = point
-        ? cesium.Cartographic.fromCartesian(point, viewer.scene.globe.ellipsoid)
+        ? cesium.Cartographic.fromCartesian(point, viewer?.scene?.globe?.ellipsoid)
         : null;
       const lon = camera ? cesium.Math.toDegrees(camera.longitude) : 0;
       const lat = camera ? cesium.Math.toDegrees(camera.latitude) : 0;
@@ -873,19 +907,10 @@ export function createWeatherLayer({
     },
     destroy() {
       layer.disable();
+      layer.detachRenderer();
       unsubscribeClock?.();
-      removeCamera?.();
-      removeCamera = null;
       motion?.removeEventListener?.('change', onVisibility);
       documentRef?.removeEventListener?.('visibilitychange', onVisibility);
-      eventTarget?.removeEventListener?.(
-        'gev:map-stack-changed',
-        onMapStackChanged,
-      );
-      runNavigation = null;
-      imageryHost = null;
-      viewer = null;
-      rendering = null;
       listener = null;
     },
   };

src/layers/weather/render/navara.js

@@ -0,0 +1,63 @@
+import { createWeatherShell } from '../shellRendering.js';
+import { escapeCreditText, weatherDisplay } from '../display.js';
+import { createWeatherSurface } from './navaraSurface.js';
+
+/** Use the same decoded frames, detail windows, infrared mask and prefetch policy as the weather shell. */
+export function createWeatherNavaraRenderer(engine, native, options) {
+  let shell = null,
+    alpha = 0.7,
+    hidden = false,
+    removeCredit = null,
+    credit = null;
+  const updateSnapshot = (snapshot) => {
+    const next = weatherDisplay(snapshot).credit ?? null;
+    if (next === credit) return;
+    removeCredit?.();
+    credit = next;
+    removeCredit = next
+      ? engine.credits.addStatic(escapeCreditText(next))
+      : null;
+  };
+  const select = (product) => {
+    if (shell?.product === product) return shell;
+    shell?.clear();
+    shell = createWeatherShell({
+      ...options,
+      product,
+      requestRender: () => engine.render.request('weather'),
+      viewRectangle: () => engine.camera.viewRectangle(),
+      moveEnd: engine.camera.moveEnd,
+      createSurface: (frame) =>
+        createWeatherSurface(engine, native, product, frame),
+    });
+    shell.setAlpha(alpha);
+    shell.setHidden(hidden);
+    return shell;
+  };
+  return {
+    setFrame(snapshot, time, params) {
+      updateSnapshot(snapshot);
+      return select(snapshot.product).setFrame(snapshot, time, params);
+    },
+    updateSnapshot,
+    prefetch: (...args) => shell?.prefetch(...args),
+    cancelPrefetch: () => shell?.cancelPrefetch(),
+    rehome: () => shell?.rehome(),
+    setHidden(value) {
+      hidden = value;
+      shell?.setHidden(value);
+    },
+    setAlpha(value) {
+      alpha = value;
+      shell?.setAlpha(value);
+    },
+    getDiagnostics: () =>
+      shell?.getDiagnostics() ?? { time: null, loading: false },
+    clear() {
+      shell?.clear();
+      shell = null;
+      removeCredit?.();
+      removeCredit = credit = null;
+    },
+  };
+}

src/layers/weather/render/navaraSurface.js

@@ -0,0 +1,259 @@
+import { Effect, EffectAttribute } from 'postprocessing';
+import {
+  CanvasTexture,
+  DataTexture,
+  LinearFilter,
+  Matrix4,
+  Uniform,
+} from 'three';
+import {
+  groundSurfaceUniforms,
+  updateGroundSurface,
+} from '../../shared/render/navaraGroundSurface.js';
+import { shellLift } from '../shellRendering.js';
+
+const KEY = 'gevObservedWeather';
+const owners = new WeakMap();
+const products = ['Satellite', 'Radar', 'Lightning'];
+const slotFor = (p) =>
+  p === 'radar' ? 'Radar' : p === 'lightning' ? 'Lightning' : 'Satellite';
+const emptyRect = [0, 0, -1, -1];
+const rectArray = (r) => (r ? [r.west, r.south, r.east, r.north] : emptyRect);
+
+const shader = /* glsl */ `
+uniform sampler2D tAllDepth,tSurfaceDepth;
+uniform mat4 uInverseProjection,uWorld;
+uniform float uLogDepthFC;
+uniform bool uRaised;
+${products
+  .map(
+    (p) => `uniform sampler2D t${p},tDetail${p};
+uniform vec4 uBounds${p},uWindow${p};
+uniform vec2 uLook${p};`,
+  )
+  .join('\n')}
+vec3 toDisplay(vec3 x) {
+  return mix(12.92*x,1.055*pow(max(x,vec3(0.0)),vec3(1.0/2.4))-0.055,step(vec3(0.0031308),x));
+}
+vec3 toLinear(vec3 x) {
+  return mix(x/12.92,pow((x+0.055)/1.055,vec3(2.4)),step(vec3(0.04045),x));
+}
+vec2 geographic(vec3 point) {
+  float r=length(point.xy),theta=atan(point.z*6378137.0,r*6356752.314245);
+  float s=sin(theta),c=cos(theta);
+  return vec2(atan(point.y,point.x),atan(point.z+42841.311513*s*s*s,r-42697.672707*c*c*c));
+}
+vec3 paint(vec3 color,sampler2D image,sampler2D detail,vec4 bounds,vec4 window,vec2 look,
+    vec3 ray,float sceneRange,bool onSurface) {
+  if(look.x<=0.0) return color;
+  vec3 origin=uWorld[3].xyz;
+  float range=sceneRange;
+  if(uRaised) {
+    vec3 radii=vec3(6378137.0,6378137.0,6356752.314245)+look.y;
+    vec3 o=origin/radii,d=ray/radii;
+    float a=dot(d,d),b=dot(o,d),c=dot(o,o)-1.0;
+    float disc=b*b-a*c;
+    if(disc<0.0) return color;
+    float root=sqrt(disc);
+    range=(-b-root)/a;
+    if(range<=0.0) range=(-b+root)/a;
+    if(range<=0.0 || range>sceneRange+1.0) return color;
+  } else if(!onSurface) return color;
+  vec2 uv=(geographic(origin+range*ray)-bounds.xy)/(bounds.zw-bounds.xy);
+  if(any(lessThan(uv,vec2(0.0)))||any(greaterThan(uv,vec2(1.0)))) return color;
+  vec2 delta=window.zw-window.xy;
+  vec2 duv=(uv-window.xy)/max(delta,vec2(1e-6));
+  bool useDetail=all(greaterThan(delta,vec2(0.0)))&&all(greaterThanEqual(duv,vec2(0.0)))&&all(lessThanEqual(duv,vec2(1.0)));
+  vec4 sampleColor=useDetail ? texture2D(detail,duv) : texture2D(image,uv);
+  return mix(color,sampleColor.rgb,look.x*sampleColor.a);
+}
+void mainImage(const in vec4 inputColor,const in vec2 uv,out vec4 outputColor) {
+  outputColor=inputColor;
+  float depth=unpackRGBAToDepth(texture2D(tAllDepth,uv));
+  bool onSurface=depth<1.0 && depth>=texture2D(tSurfaceDepth,uv).r-2e-7;
+  if(!uRaised && !onSurface) return;
+  vec3 v=(uInverseProjection*vec4(uv*2.0-1.0,-1.0,1.0)).xyz;
+  vec3 ray=normalize(mat3(uWorld)*v);
+  float range=depth>=1.0 ? 1.0e12 : (exp2(2.0*depth/uLogDepthFC)-1.0)*length(v)/(-v.z);
+  vec3 rgb=toDisplay(inputColor.rgb);
+  ${products.map((p) => `rgb=paint(rgb,t${p},tDetail${p},uBounds${p},uWindow${p},uLook${p},ray,range,onSurface);`).join('\n')}
+  outputColor=vec4(toLinear(rgb),inputColor.a);
+}
+`;
+
+function weatherPass(engine, { view, EffectDesc, NavaraEffect }) {
+  let shared = owners.get(view);
+  if (shared) return shared;
+  const surfaces = new Set();
+  let handle = null,
+    empty = null;
+  class WeatherEffect extends EffectDesc {
+    static key = KEY;
+    static insertAfter = ['toneMapping', 'gevRecentImagery'];
+    static insertBefore = [
+      'gevEarthquakeGround',
+      'gevFirmsGround',
+      'gevPreSharpenOverlay',
+      'gevSharpen',
+      'smaa',
+      'fxaa',
+      'gevOverlay',
+      'final',
+    ];
+    createPass() {
+      this.effect = new Effect('GevObservedWeather', shader, {
+        attributes: EffectAttribute.CONVOLUTION,
+        uniforms: new Map([
+          ...groundSurfaceUniforms(),
+          ['uWorld', new Uniform(new Matrix4())],
+          ['uRaised', new Uniform(false)],
+          ...products.flatMap((p) => [
+            ['t' + p, new Uniform(empty)],
+            ['tDetail' + p, new Uniform(empty)],
+            ['uBounds' + p, new Uniform(emptyRect)],
+            ['uWindow' + p, new Uniform(emptyRect)],
+            ['uLook' + p, new Uniform([0, 0])],
+          ]),
+        ]),
+      });
+      return new NavaraEffect(this.view.camera.raw, this.effect);
+    }
+    update() {
+      if (!this.effect) return;
+      const camera = this.view.camera.raw,
+        u = this.effect.uniforms;
+      updateGroundSurface(this.effect, camera, this.ctx, this.find('mrt'));
+      u.get('uWorld').value.copy(camera.matrixWorld);
+      u.get('uRaised').value = engine.maps.photorealActive();
+      const lift = shellLift(engine.camera.pose().cartographic.height);
+      for (const frame of surfaces) frame.upload(this.ctx.getRenderer());
+      for (const p of products) {
+        let active = null;
+        for (const f of surfaces)
+          if (f.slot === p && f.visible && f.alpha > 0 && f.image) active = f;
+        u.get('t' + p).value = active?.image ?? empty;
+        u.get('tDetail' + p).value = active?.detail ?? empty;
+        u.get('uBounds' + p).value = active?.bounds ?? emptyRect;
+        u.get('uWindow' + p).value = active?.window ?? emptyRect;
+        u.get('uLook' + p).value = active
+          ? [active.alpha, active.height + lift]
+          : [0, 0];
+      }
+    }
+    onDestroy() {
+      this.effect?.dispose();
+      super.onDestroy();
+    }
+  }
+  view.registerEffect(KEY, WeatherEffect);
+  shared = {
+    surfaces,
+    sync() {
+      if (surfaces.size && !handle) {
+        empty = new DataTexture(new Uint8Array(4), 1, 1);
+        empty.needsUpdate = true;
+        handle = view.addEffect({ [KEY]: {}, visible: true });
+      } else if (!surfaces.size && handle) {
+        handle.delete();
+        handle = null;
+        empty.dispose();
+        empty = null;
+      }
+      engine.render.request(KEY);
+    },
+  };
+  owners.set(view, shared);
+  return shared;
+}
+
+function imageTexture(canvas) {
+  const texture = new CanvasTexture(canvas);
+  texture.minFilter = texture.magFilter = LinearFilter;
+  texture.generateMipmaps = false;
+  return texture;
+}
+
+/** Own one weather frame. Upload staging images before replacing the last drawn frame. */
+export function createWeatherSurface(
+  engine,
+  options,
+  product,
+  { rectangle, height, onSettled },
+) {
+  const shared = weatherPass(engine, options);
+  let pending = false,
+    ready = false;
+  const frame = {
+    slot: slotFor(product),
+    bounds: rectArray(rectangle),
+    height,
+    alpha: 0,
+    visible: true,
+    image: null,
+    detail: null,
+    window: null,
+    upload(renderer) {
+      if (!pending) return;
+      if (frame.image) renderer.initTexture(frame.image);
+      if (frame.detail) renderer.initTexture(frame.detail);
+      pending = false;
+      ready = true;
+      // Completing a frame can dispose its predecessor. Finish this pass first.
+      queueMicrotask(() => {
+        if (shared.surfaces.has(frame)) onSettled();
+      });
+    },
+  };
+  shared.surfaces.add(frame);
+  shared.sync();
+  return {
+    setImage(canvas) {
+      if (frame.image?.image === canvas) return;
+      frame.image?.dispose();
+      frame.image = imageTexture(canvas);
+      ready = false;
+      pending = true;
+      shared.sync();
+    },
+    setDetail(canvas, rect) {
+      if (frame.detail?.image !== canvas) {
+        frame.detail?.dispose();
+        frame.detail = canvas ? imageTexture(canvas) : null;
+        pending = true;
+      }
+      frame.window = rect ? rectArray(rect) : null;
+      shared.sync();
+    },
+    setAlpha(value) {
+      frame.alpha = value;
+      shared.sync();
+    },
+    setShow(value) {
+      if (frame.visible === value) return false;
+      frame.visible = value;
+      shared.sync();
+      return true;
+    },
+    getDiagnostics() {
+      const [west, south, east, north] = frame.window ?? [];
+      return {
+        height,
+        ready,
+        uploaded: ready,
+        show: frame.visible,
+        alpha: frame.alpha,
+        rendering: pending,
+        detail: {
+          uploaded: Boolean(frame.detail && !pending),
+          window: frame.window && { west, south, east, north },
+        },
+      };
+    },
+    destroy() {
+      if (!shared.surfaces.delete(frame)) return;
+      frame.image?.dispose();
+      frame.detail?.dispose();
+      shared.sync();
+    },
+  };
+}

src/layers/weather/shellRendering.js

@@ -405,10 +405,13 @@ export function createWeatherShell({
   decodeImage,
   createCanvas = () => document.createElement('canvas'),
   cacheBytes = WEATHER_SHELL_CACHE_BYTES,
+  createSurface = createShellSurface,
+  requestRender = () => viewer.scene.requestRender(),
+  viewRectangle = () => viewer.camera?.computeViewRectangle?.(viewer.scene.globe?.ellipsoid),
+  moveEnd = viewer?.camera?.moveEnd,
 }) {
   if (!Object.hasOwn(WEATHER_IMAGE_SIZES, product))
     throw new TypeError('Unknown weather product');
-  const scene = viewer.scene;
   const size = fitTexture(cesium, WEATHER_IMAGE_SIZES[product]);
   const detailSize = fitTexture(cesium, WEATHER_DETAIL_SIZE);
   const infrared = product === 'clouds' || product === 'clouds-regional';
@@ -524,14 +527,14 @@ export function createWeatherShell({
     detail = { box: job.box, key: job.key, image, stale: false };
     syncDetail();
     evict();
-    scene.requestRender();
+    requestRender();
   }
   function failDetail(job) {
     if (detailJob !== job) return;
     clearTimeout(job.timeout);
     detailJob = null;
     if (detail?.stale) dropDetail();
-    scene.requestRender();
+    requestRender();
   }
   /** Bring the detail to the shown frame and window. The previous detail image
    * stays until the next is decoded unless the window itself moved, and over at
@@ -570,7 +573,7 @@ export function createWeatherShell({
   /** Recompute the window from the camera's ground footprint; returns whether it changed. */
   function computeView() {
     const rectangle = detailed
-      ? viewer.camera?.computeViewRectangle?.(scene.globe?.ellipsoid)
+      ? viewRectangle()
       : null;
     const degrees = cesium.Math.toDegrees;
     const footprint = rectangle && {
@@ -592,7 +595,7 @@ export function createWeatherShell({
   function watchCamera() {
     if (offCamera || !detailed) return;
     offCamera =
-      viewer.camera?.moveEnd?.addEventListener(() => {
+      moveEnd?.addEventListener(() => {
         if (current && computeView()) refreshDetail();
       }) ?? null;
   }
@@ -607,7 +610,7 @@ export function createWeatherShell({
     frame.owned = true;
     const abort = () => {
       if (incoming === frame) cancelIncoming();
-      scene.requestRender();
+      requestRender();
     };
     signal.addEventListener('abort', abort, { once: true });
     frame.offAbort = () => signal.removeEventListener('abort', abort);
@@ -633,7 +636,7 @@ export function createWeatherShell({
     close(frame);
     lastError = msg('Weather tiles unavailable · previous frame retained');
     frame.resolve(false);
-    scene.requestRender();
+    requestRender();
     onChange();
   }
   function commit(frame) {
@@ -668,7 +671,7 @@ export function createWeatherShell({
     if (detail?.stale && detail.key !== wantedDetail()) dropDetail();
     refreshDetail();
     frame.resolve(true);
-    scene.requestRender();
+    requestRender();
     onChange();
   }
   function install(frame, image) {
@@ -682,7 +685,7 @@ export function createWeatherShell({
     // First frame or a new extent: stage an invisible surface and keep the
     // previous one until the new geometry and texture are drawable.
     const { west, south, east, north } = frame.snapshot.bounds;
-    const next = createShellSurface({
+    const next = createSurface({
       viewer,
       cesium,
       height,
@@ -708,7 +711,7 @@ export function createWeatherShell({
         computeView();
         refreshDetail();
       }
-      if (changed) scene.requestRender();
+      if (changed) requestRender();
       return changed;
     },
     cancelPrefetch,
@@ -805,7 +808,7 @@ export function createWeatherShell({
           install(frame, texture);
         })
         .catch(() => fail(frame));
-      scene.requestRender();
+      requestRender();
       onChange();
       return frame.result;
     },
@@ -818,12 +821,12 @@ export function createWeatherShell({
       }
       applyVisibility();
       if (!hidden) refreshDetail();
-      scene.requestRender();
+      requestRender();
     },
     setAlpha(value) {
       alpha = value;
       surface?.setAlpha(alpha);
-      scene.requestRender();
+      requestRender();
     },
     clear() {
       cancelPrefetch();
@@ -841,7 +844,7 @@ export function createWeatherShell({
       lastError = null;
       images.clear();
       imageBytes = 0;
-      scene.requestRender();
+      requestRender();
     },
     getDiagnostics() {
       const drawn = surface?.getDiagnostics();