@johnmorrisdotca/chikyu-earth 0.3.0 → 0.5.0

package/dist/realistic/earth.js

@@ -0,0 +1,256 @@
+import { HOME_VIEW, lookAt } from "../view.js";
+import { ATMOSPHERE_FRAG, ATMOSPHERE_VERT, CLOUD_FRAG, SURFACE_FRAG, SURFACE_VERT } from "./shaders.js";
+import { subsolarPoint, unitVector } from "./sun.js";
+import { chooseTier, TIERS } from "./tiers.js";
+const RAD = Math.PI / 180;
+/** The glow reaches this many radii from the centre; the globe at 1x is drawn to fit inside it. */
+export const ATMOSPHERE_OUTER = 1.08;
+const CLOUD_RADIUS = 1.006;
+const LAYERS = ["day", "night", "clouds", "water"];
+/** Milliseconds a lower texture size must be enough before the larger one is let go. */
+const DOWNGRADE_AFTER_MS = 4000;
+export const newModel = () => ({
+    centre: { lon: 0, lat: 0 },
+    view: { ...HOME_VIEW },
+    time: Date.now(),
+    clouds: true,
+    lights: true,
+    drawn: null,
+    ratio: () => Math.min(globalThis.devicePixelRatio || 1, 2),
+});
+/** The disc's radius in CSS pixels in a box of `width` x `height` at `zoom`: it fits the glow in the box at 1x. */
+export const discRadius = (width, height, zoom) => Math.max(1, (Math.min(width, height) / 2 / ATMOSPHERE_OUTER - 1) * zoom);
+export { lookAt };
+/** An equirectangular sphere: +z is longitude 0 on the equator, +x east, +y north; v is 0 at the north pole (the top row of the picture). */
+function sphere(three, columns, rows) {
+    const positions = new Float32Array((columns + 1) * (rows + 1) * 3);
+    const uvs = new Float32Array((columns + 1) * (rows + 1) * 2);
+    let p = 0;
+    let q = 0;
+    for (let j = 0; j <= rows; j += 1) {
+        const lat = (0.5 - j / rows) * Math.PI;
+        for (let i = 0; i <= columns; i += 1) {
+            const lon = (i / columns - 0.5) * 2 * Math.PI;
+            positions[p++] = Math.cos(lat) * Math.sin(lon);
+            positions[p++] = Math.sin(lat);
+            positions[p++] = Math.cos(lat) * Math.cos(lon);
+            uvs[q++] = i / columns;
+            uvs[q++] = j / rows;
+        }
+    }
+    const index = [];
+    for (let j = 0; j < rows; j += 1) {
+        for (let i = 0; i < columns; i += 1) {
+            const a = j * (columns + 1) + i;
+            const b = a + columns + 1;
+            index.push(a, b, a + 1, b, b + 1, a + 1);
+        }
+    }
+    const geometry = new three.BufferGeometry();
+    geometry.setAttribute("position", new three.BufferAttribute(positions, 3));
+    geometry.setAttribute("uv", new three.BufferAttribute(uvs, 2));
+    geometry.setIndex(index);
+    return geometry;
+}
+export function createEarthItem(model, deps) {
+    return {
+        key: "chikyu-earth:realistic",
+        async build({ three, width, height }) {
+            let size = { width, height };
+            let disposed = false;
+            const held = [];
+            const makeTexture = (layer, texels) => {
+                const key = `chikyu-earth:${layer}:${texels}`;
+                const entry = deps.assets.acquire(key, () => {
+                    const texture = new three.Texture();
+                    texture.wrapS = three.RepeatWrapping;
+                    texture.wrapT = three.ClampToEdgeWrapping;
+                    texture.minFilter = three.LinearMipmapLinearFilter;
+                    texture.magFilter = three.LinearFilter;
+                    texture.anisotropy = 8;
+                    const controller = new AbortController();
+                    const made = { width: texels, texture, closed: false, ready: Promise.resolve(), release: () => undefined };
+                    made.ready = fetch(`${deps.textureBase()}${layer}-${texels}.webp`, { signal: controller.signal })
+                        .then((response) => {
+                        if (!response.ok)
+                            throw new Error(`${layer}-${texels}.webp: ${response.status}`);
+                        return response.blob();
+                    })
+                        .then((blob) => createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }))
+                        .then((bitmap) => {
+                        if (made.closed)
+                            bitmap.close();
+                        else {
+                            texture.image = bitmap;
+                            texture.needsUpdate = true;
+                        }
+                    });
+                    made.ready.catch(() => undefined);
+                    made.release = () => {
+                        made.closed = true;
+                        controller.abort();
+                        texture.dispose();
+                        texture.image?.close?.();
+                    };
+                    return made;
+                }, (value) => value.release());
+                held.push(key);
+                return entry;
+            };
+            const letGo = (layer, texels) => {
+                const key = `chikyu-earth:${layer}:${texels}`;
+                const at = held.indexOf(key);
+                if (at >= 0)
+                    held.splice(at, 1);
+                deps.assets.release(key);
+            };
+            const slots = new Map();
+            for (const layer of LAYERS) {
+                const baseWidth = TIERS[layer][0];
+                const base = makeTexture(layer, baseWidth);
+                slots.set(layer, { layer, uniform: { value: null }, base, baseWidth, entry: base, width: baseWidth, loading: undefined, timer: undefined });
+            }
+            try {
+                await Promise.all([...slots.values()].map((slot) => slot.base.ready));
+            }
+            catch (error) {
+                for (const slot of slots.values())
+                    letGo(slot.layer, slot.baseWidth);
+                deps.onError?.(error);
+                throw error;
+            }
+            for (const slot of slots.values())
+                slot.uniform.value = slot.base.texture;
+            const sunDir = { value: new three.Vector3(1, 0, 0) };
+            const grid = sphere(three, 128, 64);
+            const surface = new three.ShaderMaterial({
+                vertexShader: SURFACE_VERT,
+                fragmentShader: SURFACE_FRAG,
+                uniforms: { dayMap: slots.get("day").uniform, nightMap: slots.get("night").uniform, waterMap: slots.get("water").uniform, sunDir, lights: { value: 1 } },
+            });
+            const cloudShift = { value: 0 };
+            const cloudMaterial = new three.ShaderMaterial({
+                vertexShader: SURFACE_VERT,
+                fragmentShader: CLOUD_FRAG,
+                uniforms: { cloudMap: slots.get("clouds").uniform, sunDir, shift: cloudShift, opacity: { value: 0.9 } },
+                transparent: true,
+                depthWrite: false,
+            });
+            const atmosphere = new three.ShaderMaterial({
+                vertexShader: ATMOSPHERE_VERT,
+                fragmentShader: ATMOSPHERE_FRAG,
+                uniforms: { sunDir, outer: { value: ATMOSPHERE_OUTER } },
+                transparent: true,
+                depthWrite: false,
+                side: three.BackSide,
+            });
+            const turned = new three.Group();
+            const earth = new three.Mesh(grid, surface);
+            const clouds = new three.Mesh(grid, cloudMaterial);
+            clouds.scale.setScalar(CLOUD_RADIUS);
+            clouds.renderOrder = 2;
+            turned.add(earth, clouds);
+            const glow = new three.Mesh(grid, atmosphere);
+            glow.scale.setScalar(ATMOSPHERE_OUTER);
+            glow.renderOrder = 1;
+            glow.frustumCulled = false;
+            const scene = new three.Scene();
+            scene.add(turned, glow);
+            const camera = new three.OrthographicCamera(-1, 1, 1, -1, 0.1, 20);
+            camera.position.set(0, 0, 5);
+            const setUniformTexture = (slot, entry, texels) => {
+                const previous = slot.entry;
+                slot.entry = entry;
+                slot.width = texels;
+                slot.uniform.value = entry.texture;
+                if (previous !== slot.base)
+                    letGo(slot.layer, previous.width);
+                deps.onTier?.(slot.layer, texels);
+            };
+            const moveTo = (slot, texels) => {
+                if (disposed || texels === slot.width || slot.loading === texels)
+                    return;
+                if (texels === slot.baseWidth) {
+                    setUniformTexture(slot, slot.base, texels);
+                    deps.invalidate();
+                    return;
+                }
+                slot.loading = texels;
+                const entry = makeTexture(slot.layer, texels);
+                entry.ready.then(() => {
+                    if (disposed || slot.loading !== texels) {
+                        letGo(slot.layer, texels);
+                        return;
+                    }
+                    slot.loading = undefined;
+                    setUniformTexture(slot, entry, texels);
+                    deps.invalidate();
+                }, (error) => {
+                    letGo(slot.layer, texels);
+                    if (slot.loading === texels)
+                        slot.loading = undefined;
+                    deps.onError?.(error);
+                });
+            };
+            const syncTiers = (radiusCssPx) => {
+                const radius = radiusCssPx * model.ratio();
+                for (const slot of slots.values()) {
+                    const wanted = chooseTier(slot.layer, radius, deps.cap());
+                    if (slot.timer !== undefined && wanted >= slot.width) {
+                        clearTimeout(slot.timer);
+                        slot.timer = undefined;
+                    }
+                    if (wanted > slot.width)
+                        moveTo(slot, wanted);
+                    else if (wanted < slot.width && slot.timer === undefined) {
+                        slot.timer = setTimeout(() => {
+                            slot.timer = undefined;
+                            const now = chooseTier(slot.layer, discRadius(size.width, size.height, model.view.zoom) * model.ratio(), deps.cap());
+                            if (now < slot.width)
+                                moveTo(slot, now);
+                        }, DOWNGRADE_AFTER_MS);
+                    }
+                }
+            };
+            return {
+                scene,
+                camera,
+                update() {
+                    const view = model.view;
+                    const look = lookAt(model.centre, view);
+                    turned.rotation.set(look.lat * RAD, -look.lon * RAD, 0, "XYZ");
+                    const [sx, sy, sz] = unitVector(subsolarPoint(model.time));
+                    sunDir.value.set(sx, sy, sz).applyEuler(turned.rotation);
+                    cloudShift.value = -(((model.time / 3_600_000) * deps.drift) % 360) / 360;
+                    clouds.visible = model.clouds;
+                    surface.uniforms["lights"].value = model.lights ? 1 : 0;
+                    const radius = discRadius(size.width, size.height, view.zoom);
+                    camera.left = (-size.width / 2 - view.panX) / radius;
+                    camera.right = (size.width / 2 - view.panX) / radius;
+                    camera.top = (size.height / 2 + view.panY) / radius;
+                    camera.bottom = (-size.height / 2 + view.panY) / radius;
+                    camera.updateProjectionMatrix();
+                    model.drawn = { view: { ...view }, time: model.time, radius, centre: { ...model.centre } };
+                    syncTiers(radius);
+                    deps.onPose?.({ lon: look.lon, lat: look.lat, radius, cx: size.width / 2 + view.panX, cy: size.height / 2 + view.panY, width: size.width, height: size.height });
+                    return false;
+                },
+                resize(next, nextHeight) {
+                    size = { width: next, height: nextHeight };
+                },
+                dispose() {
+                    disposed = true;
+                    for (const slot of slots.values())
+                        if (slot.timer !== undefined)
+                            clearTimeout(slot.timer);
+                    for (const key of held.splice(0))
+                        deps.assets.release(key);
+                    grid.dispose();
+                    surface.dispose();
+                    cloudMaterial.dispose();
+                    atmosphere.dispose();
+                },
+            };
+        },
+    };
+}

package/dist/realistic/element.d.ts

@@ -0,0 +1,53 @@
+import type { GeoPoint, GlobeView } from "../types.ts";
+import { type ThreeParts } from "./earth.ts";
+import type { OverlayHost } from "../markers/layer.ts";
+import { type Layer } from "./tiers.ts";
+type Three = ThreeParts;
+export type EarthState = "loading" | "live" | "unavailable" | "lost" | "idle";
+/** A `time` attribute: "now" (or none) follows the clock, else an ISO date such as 2026-06-21T12:00:00Z. */
+export declare const readTime: (value: string | null) => number | "now";
+/** Where three.js comes from, if a page wants to hand it over itself (before the first element connects). */
+export declare function setThreeLoader(load: () => Promise<Three>): void;
+export declare class ChikyuEarthRealistic extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    /** A box laid over the Earth for markers (see `@johnmorrisdotca/chikyu-earth/markers`): where it is, the pose of the last draw, and a way to hear the next. */
+    get overlay(): OverlayHost;
+    /** Where the view starts: longitude and latitude; the shared controls' yaw and tilt turn it from there. */
+    get centre(): GeoPoint;
+    set centre(value: GeoPoint);
+    /** The moment shown: milliseconds since the epoch, or "now" to follow the clock. */
+    get time(): number | "now";
+    set time(value: number | Date | "now");
+    get clouds(): boolean;
+    set clouds(value: boolean);
+    get lights(): boolean;
+    set lights(value: boolean);
+    /** What the element is doing, for a page or a test: its state, the texture widths held, the draws made. */
+    get stats(): {
+        state: EarthState;
+        tiers: Record<Layer, number>;
+        draws: number;
+        contexts: number;
+        canvas: {
+            width: number;
+            height: number;
+            pixels: number;
+        };
+        assets: {
+            entries: number;
+            refs: number;
+        };
+    };
+    /**
+     * Apply a shared view controller's camera (yaw, tilt, zoom, pan). A change under half a pixel is not drawn, a settled change always is,
+     * and draws are at most 30 a second.
+     */
+    setView(view: GlobeView, final?: boolean): void;
+    /** The view as it is (for a page that wants to read it back). */
+    get view(): GlobeView;
+}
+export {};

package/dist/realistic/element.js

@@ -0,0 +1,280 @@
+// <chikyu-earth-realistic>: the Earth from space as a web component, drawn by kazoku-ui's shared 3D renderer (one WebGL context for the
+// page) with three.js, which is the page's own. Optional entry point: the flat `<chikyu-earth>` needs neither. It draws only when something
+// changes, at most 30 times a second, and nothing at all while it is out of sight or the tab is hidden.
+import { createSharedRenderer } from "@johnmorrisdotca/kazoku-ui/renderer";
+import { createEarthItem, lookAt, newModel } from "./earth.js";
+import { createGate, frameCap } from "./gate.js";
+import { MAX_TEXTURE, TIERS } from "./tiers.js";
+const RAD = Math.PI / 180;
+/** The Sun and the clouds are re-placed this often while the time is "now": 15 degrees an hour is 0.25 degree a minute. */
+const LIVE_TICK_MS = 60_000;
+const MIN_TICK_MS = 1000;
+const readCentre = (value) => {
+    if (!value)
+        return null;
+    const [lon, lat] = value.split(",").map((part) => Number(part.trim()));
+    if (!Number.isFinite(lon) || !Number.isFinite(lat) || Math.abs(lon) > 180 || Math.abs(lat) > 90)
+        return null;
+    return { lon: lon, lat: lat };
+};
+/** A `time` attribute: "now" (or none) follows the clock, else an ISO date such as 2026-06-21T12:00:00Z. */
+export const readTime = (value) => {
+    if (value === null || value === "" || value === "now")
+        return "now";
+    const ms = Date.parse(value);
+    return Number.isFinite(ms) ? ms : "now";
+};
+// --- one renderer for the page ----------------------------------------------------------------------------------------------------------------------
+let shared;
+let loader = () => import("three");
+const contextListeners = new Set();
+let elements = 0;
+let releaseTimer;
+/** Where three.js comes from, if a page wants to hand it over itself (before the first element connects). */
+export function setThreeLoader(load) {
+    loader = load;
+}
+function renderer() {
+    shared ??= createSharedRenderer({
+        load: () => loader(),
+        onContext: (state) => {
+            for (const listener of contextListeners)
+                listener(state);
+        },
+    });
+    return shared;
+}
+export class ChikyuEarthRealistic extends HTMLElement {
+    static observedAttributes = ["center", "time", "clouds", "lights", "live-seconds"];
+    #model = newModel();
+    #mode = "now";
+    #view;
+    #gate;
+    #tick;
+    #state = "loading";
+    #tiers = { day: TIERS.day[0], night: TIERS.night[0], clouds: TIERS.clouds[0], water: TIERS.water[0] };
+    #stage;
+    #overlay;
+    #pose = null;
+    #listeners = new Set();
+    #onContext = (state) => {
+        if (state === "unavailable")
+            this.#fail("WebGL is not available");
+    };
+    // The canvas's own events reach the stage in the capture phase (they do not bubble); the shared renderer handles them and this follows.
+    #lost = () => this.#set("lost");
+    #restored = () => this.#set("live");
+    connectedCallback() {
+        clearTimeout(releaseTimer);
+        elements += 1;
+        this.#model.centre = readCentre(this.getAttribute("center")) ?? this.#model.centre;
+        this.#mode = readTime(this.getAttribute("time"));
+        this.#model.time = this.#mode === "now" ? Date.now() : this.#mode;
+        this.#model.clouds = this.getAttribute("clouds") !== "off";
+        this.#model.lights = this.getAttribute("lights") !== "off";
+        if (!this.hasAttribute("role"))
+            this.setAttribute("role", "img");
+        if (!this.hasAttribute("aria-label"))
+            this.setAttribute("aria-label", "The Earth from space, with its sunlit and dark sides");
+        const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+        root.innerHTML = `<style>:host{display:block;aspect-ratio:1/1;position:relative}#stage,#overlay{position:absolute;inset:0}#overlay{pointer-events:none}</style><div id="stage"></div><div id="overlay"></div>`;
+        this.#stage = root.getElementById("stage");
+        this.#overlay = root.getElementById("overlay");
+        this.#stage.addEventListener("webglcontextlost", this.#lost, true);
+        this.#stage.addEventListener("webglcontextrestored", this.#restored, true);
+        const nav = navigator;
+        const cap = frameCap(30, { deviceMemory: nav.deviceMemory, hardwareConcurrency: nav.hardwareConcurrency });
+        this.#gate = createGate(1000 / cap, () => this.#view?.invalidate());
+        nav.getBattery?.().then((battery) => {
+            if (!battery.charging && battery.level <= 0.2)
+                this.#gate?.setMinMs(1000 / Math.min(cap, 15));
+        }, () => undefined);
+        contextListeners.add(this.#onContext);
+        const item = createEarthItem(this.#model, {
+            assets: renderer().assets,
+            textureBase: () => this.#textureBase(),
+            cap: () => this.#textureCap(),
+            drift: 1.5,
+            invalidate: () => this.#gate?.request(),
+            onPose: (pose) => {
+                this.#pose = { ...pose, transform: "" };
+                for (const listener of this.#listeners)
+                    listener(this.#pose);
+            },
+            onError: (error) => this.#fail(error instanceof Error ? error.message : String(error)),
+            onTier: (layer, width) => {
+                this.#tiers[layer] = width;
+                this.dispatchEvent(new CustomEvent("chikyu-tier", { detail: { layer, width } }));
+            },
+        });
+        this.#view = renderer().view(this.#stage, item, { still: null });
+        this.#set("loading");
+        void this.#view.focus().then((live) => {
+            if (live) {
+                this.#set("live");
+                this.dispatchEvent(new CustomEvent("chikyu-ready"));
+            }
+            else if (this.#state === "loading")
+                this.#set(this.#view?.live === false && renderer().focused !== undefined ? "idle" : "unavailable");
+        });
+        this.addEventListener("pointerdown", this.#take);
+        this.addEventListener("focusin", this.#take);
+        this.#startTick();
+        this.#locate();
+    }
+    disconnectedCallback() {
+        this.removeEventListener("pointerdown", this.#take);
+        this.removeEventListener("focusin", this.#take);
+        clearInterval(this.#tick);
+        this.#tick = undefined;
+        this.#gate?.cancel();
+        this.#view?.dispose();
+        this.#view = undefined;
+        contextListeners.delete(this.#onContext);
+        elements -= 1;
+        if (elements <= 0) {
+            releaseTimer = setTimeout(() => {
+                if (elements <= 0) {
+                    shared?.dispose();
+                    shared = undefined;
+                }
+            }, 1000);
+        }
+    }
+    attributeChangedCallback(name, _old, value) {
+        if (name === "center")
+            this.centre = readCentre(value) ?? { lon: 0, lat: 0 };
+        else if (name === "time")
+            this.time = readTime(value);
+        else if (name === "clouds")
+            this.clouds = value !== "off";
+        else if (name === "lights")
+            this.lights = value !== "off";
+        else if (name === "live-seconds")
+            this.#startTick();
+    }
+    /** A box laid over the Earth for markers (see `@johnmorrisdotca/chikyu-earth/markers`): where it is, the pose of the last draw, and a way to hear the next. */
+    get overlay() {
+        if (!this.#overlay)
+            throw new Error("chikyu-earth-realistic: attach markers once the element is in the page");
+        return {
+            overlayRoot: this.#overlay,
+            pose: this.#pose,
+            subscribe: (listener) => {
+                this.#listeners.add(listener);
+                return () => this.#listeners.delete(listener);
+            },
+        };
+    }
+    /** Where the view starts: longitude and latitude; the shared controls' yaw and tilt turn it from there. */
+    get centre() {
+        return { ...this.#model.centre };
+    }
+    set centre(value) {
+        this.#model.centre = { ...value };
+        this.#gate?.request();
+    }
+    /** The moment shown: milliseconds since the epoch, or "now" to follow the clock. */
+    get time() {
+        return this.#mode;
+    }
+    set time(value) {
+        this.#mode = value instanceof Date ? value.getTime() : value;
+        if (this.#mode === "now")
+            this.#model.time = Date.now();
+        else
+            this.#model.time = this.#mode;
+        this.#startTick();
+        this.#gate?.request();
+    }
+    get clouds() {
+        return this.#model.clouds;
+    }
+    set clouds(value) {
+        this.#model.clouds = value;
+        this.#gate?.request();
+    }
+    get lights() {
+        return this.#model.lights;
+    }
+    set lights(value) {
+        this.#model.lights = value;
+        this.#gate?.request();
+    }
+    /** What the element is doing, for a page or a test: its state, the texture widths held, the draws made. */
+    get stats() {
+        const stats = renderer().stats;
+        return { state: this.#state, tiers: { ...this.#tiers }, draws: stats.draws, contexts: stats.contexts, canvas: stats.canvas, assets: { entries: stats.assets.entries, refs: stats.assets.refs } };
+    }
+    /**
+     * Apply a shared view controller's camera (yaw, tilt, zoom, pan). A change under half a pixel is not drawn, a settled change always is,
+     * and draws are at most 30 a second.
+     */
+    setView(view, final = true) {
+        this.#model.view = { ...view };
+        const drawn = this.#model.drawn;
+        if (!drawn) {
+            this.#gate?.request();
+            return;
+        }
+        const shifted = view.zoom !== drawn.view.zoom || view.panX !== drawn.view.panX || view.panY !== drawn.view.panY;
+        const a = lookAt(drawn.centre, drawn.view);
+        const b = lookAt(this.#model.centre, view);
+        const px = (Math.abs(b.lon - a.lon) * Math.cos(((a.lat + b.lat) / 2) * RAD) + Math.abs(b.lat - a.lat)) * RAD * drawn.radius;
+        if (shifted || px >= 0.5 || (final && px > 0.01))
+            this.#gate?.request();
+    }
+    /** The view as it is (for a page that wants to read it back). */
+    get view() {
+        return { ...this.#model.view };
+    }
+    /** While the time is "now", the Sun and the clouds are put right once a minute (`live-seconds` changes that): no frames between. */
+    #startTick() {
+        clearInterval(this.#tick);
+        this.#tick = undefined;
+        if (!this.isConnected || this.#mode !== "now")
+            return;
+        const seconds = Number(this.getAttribute("live-seconds"));
+        const ms = Number.isFinite(seconds) && seconds > 0 ? Math.max(MIN_TICK_MS, seconds * 1000) : LIVE_TICK_MS;
+        this.#tick = setInterval(this.#onTick, ms);
+    }
+    #onTick = () => {
+        this.#model.time = Date.now();
+        this.#gate?.request();
+    };
+    #take = () => {
+        if (this.#view && !this.#view.live)
+            void this.#view.focus();
+    };
+    #textureBase() {
+        const given = this.getAttribute("texture-base");
+        const base = given ?? new URL("../textures/", import.meta.url).href;
+        return base.endsWith("/") ? base : `${base}/`;
+    }
+    #textureCap() {
+        const given = Number(this.getAttribute("max-texture"));
+        const memory = navigator.deviceMemory;
+        const cap = Number.isFinite(given) && given > 0 ? Math.min(given, MAX_TEXTURE) : MAX_TEXTURE;
+        return memory !== undefined && memory <= 2 ? Math.min(cap, 2048) : cap;
+    }
+    #set(state) {
+        if (this.#state === state)
+            return;
+        this.#state = state;
+        this.dataset["state"] = state;
+    }
+    #fail(reason) {
+        this.#set("unavailable");
+        this.dispatchEvent(new CustomEvent("chikyu-unavailable", { detail: { reason } }));
+    }
+    #locate() {
+        if (readCentre(this.getAttribute("center")) || typeof navigator === "undefined" || !navigator.geolocation)
+            return;
+        navigator.geolocation.getCurrentPosition((position) => {
+            this.centre = { lon: position.coords.longitude, lat: position.coords.latitude };
+        }, () => undefined, { timeout: 8000, maximumAge: 600000 });
+    }
+}
+if (typeof customElements !== "undefined" && !customElements.get("chikyu-earth-realistic")) {
+    customElements.define("chikyu-earth-realistic", ChikyuEarthRealistic);
+}

package/dist/realistic/gate.d.ts

@@ -0,0 +1,20 @@
+export interface Timers {
+    set(callback: () => void, ms: number): unknown;
+    clear(handle: unknown): void;
+    now(): number;
+}
+export declare const browserTimers: Timers;
+export interface Gate {
+    /** Ask for `fire` to run: now if the last run was `minMs` ago or more, else once, when that time has passed. */
+    request(): void;
+    /** Forget a run that is waiting. */
+    cancel(): void;
+    /** Change the least time between runs (a lower frame rate on a battery). */
+    setMinMs(minMs: number): void;
+}
+export declare function createGate(minMs: number, fire: () => void, timers?: Timers): Gate;
+/** The frame rate cap for this device: `maxFps` (30 by default), lower on a small device. */
+export declare function frameCap(maxFps?: number, device?: {
+    deviceMemory?: number;
+    hardwareConcurrency?: number;
+}): number;

package/dist/realistic/gate.js

@@ -0,0 +1,40 @@
+// A rate gate for the draw: asks that come faster than `minMs` apart become one, and the last ask is never lost. Pure, with its own clock.
+export const browserTimers = {
+    set: (callback, ms) => setTimeout(callback, ms),
+    clear: (handle) => clearTimeout(handle),
+    now: () => performance.now(),
+};
+export function createGate(minMs, fire, timers = browserTimers) {
+    let least = minMs;
+    let last = -Infinity;
+    let waiting;
+    const run = () => {
+        waiting = undefined;
+        last = timers.now();
+        fire();
+    };
+    return {
+        request() {
+            if (waiting !== undefined)
+                return;
+            const wait = last + least - timers.now();
+            if (wait <= 0)
+                run();
+            else
+                waiting = timers.set(run, wait);
+        },
+        cancel() {
+            if (waiting !== undefined)
+                timers.clear(waiting);
+            waiting = undefined;
+        },
+        setMinMs(value) {
+            least = value;
+        },
+    };
+}
+/** The frame rate cap for this device: `maxFps` (30 by default), lower on a small device. */
+export function frameCap(maxFps = 30, device = {}) {
+    const small = (device.deviceMemory !== undefined && device.deviceMemory <= 2) || (device.hardwareConcurrency !== undefined && device.hardwareConcurrency <= 2);
+    return Math.max(1, small ? Math.min(maxFps, 20) : maxFps);
+}

package/dist/realistic/index.d.ts

@@ -0,0 +1,5 @@
+export { subsolarPoint, unitVector, julianDay } from "./sun.ts";
+export { chooseTier, textureBytes, textureCap, MAX_TEXTURE, TIERS, TEXELS_PER_RADIUS_PIXEL, type Layer } from "./tiers.ts";
+export { createGate, frameCap, type Gate } from "./gate.ts";
+export { lookAt, discRadius, ATMOSPHERE_OUTER } from "./earth.ts";
+export type { ThreeParts } from "./earth.ts";

package/dist/realistic/index.js

@@ -0,0 +1,6 @@
+// The realistic Earth's pure parts, which import on a server and need neither three.js nor a browser. The element is
+// `@johnmorrisdotca/chikyu-earth/realistic/element`.
+export { subsolarPoint, unitVector, julianDay } from "./sun.js";
+export { chooseTier, textureBytes, textureCap, MAX_TEXTURE, TIERS, TEXELS_PER_RADIUS_PIXEL } from "./tiers.js";
+export { createGate, frameCap } from "./gate.js";
+export { lookAt, discRadius, ATMOSPHERE_OUTER } from "./earth.js";

package/dist/realistic/shaders.d.ts

@@ -0,0 +1,5 @@
+export declare const SURFACE_VERT = "\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvoid main() {\n  vUv = uv;\n  vNormal = normalize(mat3(modelMatrix) * position);\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}";
+export declare const SURFACE_FRAG = "\nuniform sampler2D dayMap;\nuniform sampler2D nightMap;\nuniform sampler2D waterMap;\nuniform vec3 sunDir;\nuniform float lights;\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvoid main() {\n  vec3 n = normalize(vNormal);\n  float ndl = dot(n, sunDir);\n  float day = smoothstep(-0.10, 0.22, ndl);\n  vec3 albedo = texture2D(dayMap, vUv).rgb;\n  float water = texture2D(waterMap, vUv).r;\n\n  vec3 lit = albedo * (0.07 + 1.0 * pow(max(ndl, 0.0), 0.5));\n  float dusk = smoothstep(-0.14, 0.0, ndl) * (1.0 - smoothstep(0.0, 0.30, ndl));\n  lit += vec3(0.55, 0.28, 0.14) * dusk * 0.30 * (0.35 + 0.65 * albedo.g);\n\n  vec3 h = normalize(sunDir + vec3(0.0, 0.0, 1.0));\n  float glint = pow(max(dot(n, h), 0.0), 220.0) * water * day;\n  lit += vec3(1.0, 0.93, 0.80) * glint * 0.7;\n\n  vec3 night = texture2D(nightMap, vUv).rgb;\n  night = night * night * vec3(1.6, 1.5, 1.3) * lights + night * 0.25;\n  vec3 col = mix(night, lit, day);\n\n  float rim = pow(1.0 - clamp(n.z, 0.0, 1.0), 3.0);\n  float sunSide = 0.12 + 0.88 * smoothstep(-0.25, 0.5, ndl);\n  col += vec3(0.20, 0.45, 1.0) * rim * sunSide * 0.55;\n  gl_FragColor = vec4(col, 1.0);\n}";
+export declare const CLOUD_FRAG = "\nuniform sampler2D cloudMap;\nuniform vec3 sunDir;\nuniform float shift;\nuniform float opacity;\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvoid main() {\n  vec3 n = normalize(vNormal);\n  float ndl = dot(n, sunDir);\n  float c = texture2D(cloudMap, vec2(vUv.x + shift, vUv.y)).r;\n  float a = smoothstep(0.28, 0.88, c) * opacity;\n  float day = smoothstep(-0.10, 0.25, ndl);\n  vec3 col = mix(vec3(0.015, 0.02, 0.04), vec3(1.0), day * (0.18 + 0.82 * pow(max(ndl, 0.0), 0.45)));\n  col += vec3(0.55, 0.28, 0.14) * smoothstep(-0.14, 0.0, ndl) * (1.0 - smoothstep(0.0, 0.25, ndl)) * 0.35;\n  gl_FragColor = vec4(col, a);\n}";
+export declare const ATMOSPHERE_VERT = "\nvarying vec3 vView;\nvoid main() {\n  vec4 view = modelViewMatrix * vec4(position, 1.0);\n  vView = view.xyz;\n  gl_Position = projectionMatrix * view;\n}";
+export declare const ATMOSPHERE_FRAG = "\nuniform vec3 sunDir;\nuniform float outer;\nvarying vec3 vView;\nvoid main() {\n  float rho = length(vView.xy);\n  float t = clamp((rho - 1.0) / (outer - 1.0), 0.0, 1.0);\n  vec2 dir = rho > 0.0 ? vView.xy / rho : vec2(1.0, 0.0);\n  float side = smoothstep(-0.40, 0.55, dot(vec3(dir, 0.0), sunDir));\n  float glow = pow(1.0 - t, 3.0) * (0.10 + 0.90 * side);\n  vec3 col = mix(vec3(0.10, 0.22, 0.60), vec3(0.42, 0.68, 1.0), side);\n  gl_FragColor = vec4(col, glow * 0.9);\n}";