@johnmorrisdotca/chikyu-earth 0.4.0 → 0.7.0

package/dist/realistic/element.js

@@ -0,0 +1,284 @@
+import { createEarthItem, lookAt, newModel } from "./earth.js";
+import { createGate, frameCap } from "./gate.js";
+import { setThreeLoader, takeRenderer } from "./shared.js";
+export { setThreeLoader };
+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.
+ *
+ * @param value - The attribute's text, or `null` when it is not there.
+ * @returns The moment in milliseconds since the Unix epoch, or `"now"` when the value is empty, `"now"` or not a date.
+ *
+ * @example
+ * ```ts no-run
+ * import { readTime } from "@johnmorrisdotca/chikyu-earth/realistic/element";
+ *
+ * console.log(readTime("2026-06-21T12:00:00Z"), readTime(null), readTime("tomorrow"));
+ * ```
+ */
+export const readTime = (value) => {
+    if (value === null || value === "" || value === "now")
+        return "now";
+    const ms = Date.parse(value);
+    return Number.isFinite(ms) ? ms : "now";
+};
+/**
+ * The `<chikyu-earth-realistic>` custom element: the Earth from space, drawn with three.js through kazoku-ui's shared renderer (one WebGL context for the page). It takes `center` (`"lon,lat"`), `time` (`now` or an ISO date; the real Sun at that moment), `clouds="off"`, `lights="off"`, `live-seconds` and `texture-base` (where the pictures are served from), and a shared view controller's camera through `setView`. It draws only when something changes, at most 30 times a second, and nothing while it is out of sight or the tab is hidden.
+ *
+ * @example
+ * ```ts no-run
+ * import type { ChikyuEarthRealistic } from "@johnmorrisdotca/chikyu-earth/realistic/element";
+ *
+ * const earth = document.createElement("chikyu-earth-realistic") as ChikyuEarthRealistic;
+ * earth.setAttribute("center", "139.7,35.7");
+ * earth.setAttribute("time", "2026-06-21T03:00Z");
+ * earth.setAttribute("texture-base", "/textures/");
+ * document.body.append(earth);
+ * ```
+ */
+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] };
+    #taken;
+    #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() {
+        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);
+        const taken = takeRenderer(this.#onContext);
+        this.#taken = taken;
+        const item = createEarthItem(this.#model, {
+            assets: taken.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) => {
+                if (layer in this.#tiers)
+                    this.#tiers[layer] = width;
+                this.dispatchEvent(new CustomEvent("chikyu-tier", { detail: { layer, width } }));
+            },
+        });
+        this.#view = taken.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 && taken.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;
+        this.#taken?.release();
+        this.#taken = undefined;
+    }
+    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 = this.#taken?.renderer.stats;
+        return {
+            state: this.#state,
+            tiers: { ...this.#tiers },
+            draws: stats?.draws ?? 0,
+            contexts: stats?.contexts ?? 0,
+            canvas: stats?.canvas ?? { width: 0, height: 0, pixels: 0 },
+            assets: { entries: stats?.assets.entries ?? 0, refs: stats?.assets.refs ?? 0 },
+        };
+    }
+    /**
+     * 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,64 @@
+export interface Timers {
+    set(callback: () => void, ms: number): unknown;
+    clear(handle: unknown): void;
+    now(): number;
+}
+export declare const browserTimers: Timers;
+/**
+ * A rate gate for the draw: what `createGate` returns.
+ *
+ * @example
+ * ```ts
+ * import { createGate, type Gate } from "@johnmorrisdotca/chikyu-earth/realistic";
+ *
+ * const gate: Gate = createGate(33, () => console.log("draw"));
+ * gate.request();
+ * gate.cancel();
+ * ```
+ */
+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;
+}
+/**
+ * A rate gate for the draw: asks that come faster than `minMs` apart become one, and the last ask is never lost, so a burst of changes costs one draw.
+ *
+ * @param minMs - The least time between two runs, in milliseconds.
+ * @param fire - What to run.
+ * @param timers - A clock and timers; the browser's by default (a test passes its own).
+ * @returns The gate: `request()` to ask, `cancel()` to forget a waiting run, `setMinMs()` to change the pace.
+ *
+ * @example
+ * ```ts
+ * import { createGate } from "@johnmorrisdotca/chikyu-earth/realistic";
+ *
+ * const gate = createGate(30, () => console.log("drawn"));
+ * gate.request();
+ * gate.request();
+ * gate.request();
+ * gate.cancel();
+ * ```
+ */
+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.
+ *
+ * @param maxFps - The most frames a second to allow.
+ * @param device - `deviceMemory` in gigabytes and `hardwareConcurrency` in cores, from `navigator`; either may be left out.
+ * @returns The frames a second to allow, at least 1; 20 at most on a small device.
+ *
+ * @example
+ * ```ts
+ * import { frameCap } from "@johnmorrisdotca/chikyu-earth/realistic";
+ *
+ * console.log(frameCap(), frameCap(30, { deviceMemory: 1 }));
+ * ```
+ */
+export declare function frameCap(maxFps?: number, device?: {
+    deviceMemory?: number;
+    hardwareConcurrency?: number;
+}): number;

package/dist/realistic/gate.js

@@ -0,0 +1,72 @@
+// 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(),
+};
+/**
+ * A rate gate for the draw: asks that come faster than `minMs` apart become one, and the last ask is never lost, so a burst of changes costs one draw.
+ *
+ * @param minMs - The least time between two runs, in milliseconds.
+ * @param fire - What to run.
+ * @param timers - A clock and timers; the browser's by default (a test passes its own).
+ * @returns The gate: `request()` to ask, `cancel()` to forget a waiting run, `setMinMs()` to change the pace.
+ *
+ * @example
+ * ```ts
+ * import { createGate } from "@johnmorrisdotca/chikyu-earth/realistic";
+ *
+ * const gate = createGate(30, () => console.log("drawn"));
+ * gate.request();
+ * gate.request();
+ * gate.request();
+ * gate.cancel();
+ * ```
+ */
+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.
+ *
+ * @param maxFps - The most frames a second to allow.
+ * @param device - `deviceMemory` in gigabytes and `hardwareConcurrency` in cores, from `navigator`; either may be left out.
+ * @returns The frames a second to allow, at least 1; 20 at most on a small device.
+ *
+ * @example
+ * ```ts
+ * import { frameCap } from "@johnmorrisdotca/chikyu-earth/realistic";
+ *
+ * console.log(frameCap(), frameCap(30, { deviceMemory: 1 }));
+ * ```
+ */
+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,10 @@
+export declare const SURFACE_VERT = "\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvarying vec3 vWorld;\nvoid main() {\n  vUv = uv;\n  vNormal = normalize(mat3(modelMatrix) * position);\n  vWorld = (modelMatrix * vec4(position, 1.0)).xyz;\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;\nuniform float ortho;\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvarying vec3 vWorld;\nvoid main() {\n  vec3 n = normalize(vNormal);\n  vec3 toEye = ortho > 0.5 ? vec3(0.0, 0.0, 1.0) : normalize(cameraPosition - vWorld);\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 + toEye);\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(dot(n, toEye), 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 vPosView;\nvarying vec3 vNormalView;\nvoid main() {\n  vec4 view = modelViewMatrix * vec4(position, 1.0);\n  vPosView = view.xyz;\n  vNormalView = normalize(normalMatrix * position);\n  gl_Position = projectionMatrix * view;\n}";
+export declare const ATMOSPHERE_FRAG = "\nuniform vec3 sunView;\nuniform float outer;\nuniform float ortho;\nvarying vec3 vPosView;\nvarying vec3 vNormalView;\nvoid main() {\n  vec3 n = normalize(vNormalView);\n  vec3 v = ortho > 0.5 ? vec3(0.0, 0.0, 1.0) : normalize(-vPosView);\n  float nz = clamp(dot(n, v), -1.0, 1.0);\n  float rho = outer * sqrt(max(0.0, 1.0 - nz * nz));\n  float t = clamp((rho - 1.0) / (outer - 1.0), 0.0, 1.0);\n  vec2 dir = normalize(n.xy + vec2(1e-5, 0.0));\n  float side = smoothstep(-0.40, 0.55, dot(vec3(dir, 0.0), sunView));\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}";
+/** The Moon and other plain bodies: a picture (or a flat colour) lit by the Sun, with a trace of light on the dark side. */
+export declare const BODY_FRAG = "\nuniform sampler2D map;\nuniform vec3 tint;\nuniform float textured;\nuniform float ambient;\nuniform vec3 sunDir;\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvoid main() {\n  vec3 n = normalize(vNormal);\n  float ndl = dot(n, sunDir);\n  vec3 albedo = textured > 0.5 ? texture2D(map, vUv).rgb : tint;\n  float lit = smoothstep(-0.04, 0.12, ndl) * (0.10 + 0.95 * pow(max(ndl, 0.0), 0.6));\n  gl_FragColor = vec4(albedo * (ambient + lit), 1.0);\n}";
+/** A flat quad facing the camera: the Sun's disc and its glow. */
+export declare const GLOW_VERT = "\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}";
+export declare const GLOW_FRAG = "\nuniform vec3 tint;\nvarying vec2 vUv;\nvoid main() {\n  float r = length(vUv - 0.5) * 2.0;\n  float core = 1.0 - smoothstep(0.10, 0.14, r);\n  float halo = pow(max(0.0, 1.0 - r), 2.5);\n  vec3 col = mix(tint, vec3(1.0), core);\n  gl_FragColor = vec4(col, clamp(core + halo * 0.85, 0.0, 1.0));\n}";

package/dist/realistic/shaders.js

@@ -0,0 +1,124 @@
+// The three programs of the realistic Earth, as GLSL strings: the surface (day, night, sun glint, rim), the cloud layer and the
+// atmosphere's glow. Colours are shaded in the textures' own (sRGB) space: a look, not a radiometric model.
+export const SURFACE_VERT = /* glsl */ `
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vWorld;
+void main() {
+  vUv = uv;
+  vNormal = normalize(mat3(modelMatrix) * position);
+  vWorld = (modelMatrix * vec4(position, 1.0)).xyz;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+export const SURFACE_FRAG = /* glsl */ `
+uniform sampler2D dayMap;
+uniform sampler2D nightMap;
+uniform sampler2D waterMap;
+uniform vec3 sunDir;
+uniform float lights;
+uniform float ortho;
+varying vec2 vUv;
+varying vec3 vNormal;
+varying vec3 vWorld;
+void main() {
+  vec3 n = normalize(vNormal);
+  vec3 toEye = ortho > 0.5 ? vec3(0.0, 0.0, 1.0) : normalize(cameraPosition - vWorld);
+  float ndl = dot(n, sunDir);
+  float day = smoothstep(-0.10, 0.22, ndl);
+  vec3 albedo = texture2D(dayMap, vUv).rgb;
+  float water = texture2D(waterMap, vUv).r;
+
+  vec3 lit = albedo * (0.07 + 1.0 * pow(max(ndl, 0.0), 0.5));
+  float dusk = smoothstep(-0.14, 0.0, ndl) * (1.0 - smoothstep(0.0, 0.30, ndl));
+  lit += vec3(0.55, 0.28, 0.14) * dusk * 0.30 * (0.35 + 0.65 * albedo.g);
+
+  vec3 h = normalize(sunDir + toEye);
+  float glint = pow(max(dot(n, h), 0.0), 220.0) * water * day;
+  lit += vec3(1.0, 0.93, 0.80) * glint * 0.7;
+
+  vec3 night = texture2D(nightMap, vUv).rgb;
+  night = night * night * vec3(1.6, 1.5, 1.3) * lights + night * 0.25;
+  vec3 col = mix(night, lit, day);
+
+  float rim = pow(1.0 - clamp(dot(n, toEye), 0.0, 1.0), 3.0);
+  float sunSide = 0.12 + 0.88 * smoothstep(-0.25, 0.5, ndl);
+  col += vec3(0.20, 0.45, 1.0) * rim * sunSide * 0.55;
+  gl_FragColor = vec4(col, 1.0);
+}`;
+export const CLOUD_FRAG = /* glsl */ `
+uniform sampler2D cloudMap;
+uniform vec3 sunDir;
+uniform float shift;
+uniform float opacity;
+varying vec2 vUv;
+varying vec3 vNormal;
+void main() {
+  vec3 n = normalize(vNormal);
+  float ndl = dot(n, sunDir);
+  float c = texture2D(cloudMap, vec2(vUv.x + shift, vUv.y)).r;
+  float a = smoothstep(0.28, 0.88, c) * opacity;
+  float day = smoothstep(-0.10, 0.25, ndl);
+  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)));
+  col += vec3(0.55, 0.28, 0.14) * smoothstep(-0.14, 0.0, ndl) * (1.0 - smoothstep(0.0, 0.25, ndl)) * 0.35;
+  gl_FragColor = vec4(col, a);
+}`;
+export const ATMOSPHERE_VERT = /* glsl */ `
+varying vec3 vPosView;
+varying vec3 vNormalView;
+void main() {
+  vec4 view = modelViewMatrix * vec4(position, 1.0);
+  vPosView = view.xyz;
+  vNormalView = normalize(normalMatrix * position);
+  gl_Position = projectionMatrix * view;
+}`;
+export const ATMOSPHERE_FRAG = /* glsl */ `
+uniform vec3 sunView;
+uniform float outer;
+uniform float ortho;
+varying vec3 vPosView;
+varying vec3 vNormalView;
+void main() {
+  vec3 n = normalize(vNormalView);
+  vec3 v = ortho > 0.5 ? vec3(0.0, 0.0, 1.0) : normalize(-vPosView);
+  float nz = clamp(dot(n, v), -1.0, 1.0);
+  float rho = outer * sqrt(max(0.0, 1.0 - nz * nz));
+  float t = clamp((rho - 1.0) / (outer - 1.0), 0.0, 1.0);
+  vec2 dir = normalize(n.xy + vec2(1e-5, 0.0));
+  float side = smoothstep(-0.40, 0.55, dot(vec3(dir, 0.0), sunView));
+  float glow = pow(1.0 - t, 3.0) * (0.10 + 0.90 * side);
+  vec3 col = mix(vec3(0.10, 0.22, 0.60), vec3(0.42, 0.68, 1.0), side);
+  gl_FragColor = vec4(col, glow * 0.9);
+}`;
+/** The Moon and other plain bodies: a picture (or a flat colour) lit by the Sun, with a trace of light on the dark side. */
+export const BODY_FRAG = /* glsl */ `
+uniform sampler2D map;
+uniform vec3 tint;
+uniform float textured;
+uniform float ambient;
+uniform vec3 sunDir;
+varying vec2 vUv;
+varying vec3 vNormal;
+void main() {
+  vec3 n = normalize(vNormal);
+  float ndl = dot(n, sunDir);
+  vec3 albedo = textured > 0.5 ? texture2D(map, vUv).rgb : tint;
+  float lit = smoothstep(-0.04, 0.12, ndl) * (0.10 + 0.95 * pow(max(ndl, 0.0), 0.6));
+  gl_FragColor = vec4(albedo * (ambient + lit), 1.0);
+}`;
+/** A flat quad facing the camera: the Sun's disc and its glow. */
+export const GLOW_VERT = /* glsl */ `
+varying vec2 vUv;
+void main() {
+  vUv = uv;
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}`;
+export const GLOW_FRAG = /* glsl */ `
+uniform vec3 tint;
+varying vec2 vUv;
+void main() {
+  float r = length(vUv - 0.5) * 2.0;
+  float core = 1.0 - smoothstep(0.10, 0.14, r);
+  float halo = pow(max(0.0, 1.0 - r), 2.5);
+  vec3 col = mix(tint, vec3(1.0), core);
+  gl_FragColor = vec4(col, clamp(core + halo * 0.85, 0.0, 1.0));
+}`;

package/dist/realistic/shared.d.ts

@@ -0,0 +1,23 @@
+import { type SharedRenderer } from "@johnmorrisdotca/kazoku-ui/renderer";
+import type { ThreeParts } from "./textures.ts";
+type Three = ThreeParts;
+export type ContextState = "lost" | "restored" | "unavailable";
+/**
+ * Where three.js comes from, if a page wants to hand it over itself (before the first element connects). A page that hands over a module re-exporting only the parts the Earth and the space view use ships a few hundred kilobytes of three.js instead of all of it.
+ *
+ * @param load - Returns the parts of three.js the Earth and the space view use, as a promise.
+ *
+ * @example
+ * ```ts no-run
+ * import { setThreeLoader } from "@johnmorrisdotca/chikyu-earth/realistic/element";
+ *
+ * setThreeLoader(() => import("three"));
+ * ```
+ */
+export declare function setThreeLoader(load: () => Promise<Three>): void;
+/** The page's renderer, made on first use. Call `release()` (from the result) when the element leaves. */
+export declare function takeRenderer(onContext: (state: ContextState) => void): {
+    renderer: SharedRenderer<Three>;
+    release(): void;
+};
+export {};

package/dist/realistic/shared.js

@@ -0,0 +1,51 @@
+// One shared renderer for the page, whichever element draws with it: the Earth from space and the space view both take it from here, so the page keeps one
+// WebGL context between them. The last element to leave lets it go (after a second, in case it is only moving).
+import { createSharedRenderer } from "@johnmorrisdotca/kazoku-ui/renderer";
+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). A page that hands over a module re-exporting only the parts the Earth and the space view use ships a few hundred kilobytes of three.js instead of all of it.
+ *
+ * @param load - Returns the parts of three.js the Earth and the space view use, as a promise.
+ *
+ * @example
+ * ```ts no-run
+ * import { setThreeLoader } from "@johnmorrisdotca/chikyu-earth/realistic/element";
+ *
+ * setThreeLoader(() => import("three"));
+ * ```
+ */
+export function setThreeLoader(load) {
+    loader = load;
+}
+/** The page's renderer, made on first use. Call `release()` (from the result) when the element leaves. */
+export function takeRenderer(onContext) {
+    clearTimeout(releaseTimer);
+    elements += 1;
+    contextListeners.add(onContext);
+    shared ??= createSharedRenderer({
+        load: () => loader(),
+        onContext: (state) => {
+            for (const listener of contextListeners)
+                listener(state);
+        },
+    });
+    return {
+        renderer: shared,
+        release() {
+            contextListeners.delete(onContext);
+            elements -= 1;
+            if (elements <= 0) {
+                releaseTimer = setTimeout(() => {
+                    if (elements <= 0) {
+                        shared?.dispose();
+                        shared = undefined;
+                    }
+                }, 1000);
+            }
+        },
+    };
+}