@johnmorrisdotca/wakusei-planets 0.0.0-stage → 0.3.0

package/dist/scene/look.js

@@ -0,0 +1,35 @@
+import { looks, waiting } from "./store.js";
+/**
+ * Teach the package how to draw a body in three.js. Each body's entry point (`@johnmorrisdotca/wakusei-planets/jupiter`) calls this once as it loads; call it yourself to add or replace a look.
+ *
+ * @param look - The body's name and its shader code, atmosphere and map.
+ * @returns The look, as it was given.
+ *
+ * @example
+ * ```ts
+ * import { registerLook, lookOf } from "@johnmorrisdotca/wakusei-planets/look";
+ *
+ * registerLook({ id: "moon", surface: "vec4 surface(vec3 p) { return vec4(vec3(0.6), 0.0); }" });
+ * console.log(lookOf("moon")?.id);
+ * ```
+ */
+export function registerLook(look) {
+    looks.set(look.id, look);
+    for (const wake of waiting)
+        wake();
+    return look;
+}
+/**
+ * The look registered for a body, or `undefined` when its entry point has not been imported.
+ *
+ * @param id - The body's name.
+ * @returns The registered look, or `undefined` for a body with none.
+ *
+ * @example
+ * ```ts
+ * import { lookOf } from "@johnmorrisdotca/wakusei-planets/look";
+ *
+ * console.log(lookOf("jupiter") === undefined);
+ * ```
+ */
+export const lookOf = (id) => looks.get(id);

package/dist/scene/recipes.d.ts

@@ -0,0 +1,49 @@
+/** A `#rrggbb` colour as GLSL. */
+export declare const vec: (hex: string) => string;
+/** A latitude-to-colour function from stops (latitude in degrees, south to north). `plateau` (0 to 0.5) keeps each band flat and its edge sharp. */
+export declare function bandFn(stops: readonly (readonly [number, string])[], plateau?: number): string;
+export interface GasOptions {
+    stops: readonly (readonly [number, string])[];
+    /** How much the bands wobble (0 to 0.1). */
+    turbulence?: number;
+    /** How strong the streaks along the bands are (0 to 0.5). */
+    streaks?: number;
+    plateau?: number;
+    /** GLSL that may change `col` and read `p` and `la`. */
+    extra?: string;
+}
+/** A banded atmosphere: colour by latitude, wobbled by noise, streaked along the bands. */
+export declare function gas(options: GasOptions): string;
+export interface RockOptions {
+    /** The darker and the lighter ground colour. */
+    dark: string;
+    light: string;
+    /** How many craters (1 is a lot). */
+    craters?: number;
+    /** How dark the bowls are (0 to 2). */
+    contrast?: number;
+    seed?: number;
+    /** How large the patches of dark and light ground are (the noise's frequency). */
+    patches?: number;
+    /** GLSL that may change `col` and read `p`, `h` (the crater height) and `tone`. */
+    extra?: string;
+}
+/** A cratered world: two ground colours in patches, with craters that are dark in the bowl and bright on the rim. */
+export declare function rock(options: RockOptions): string;
+export interface CloudOptions {
+    light: string;
+    dark: string;
+    /** How much swirl (0 to 1). */
+    swirl?: number;
+    extra?: string;
+}
+/** A world wrapped in cloud: pale and smooth, streaked and swirled. */
+export declare function cloud(options: CloudOptions): string;
+/** An icy world: bright ground with a few dark stains and faint cracks. */
+export declare function ice(options: {
+    base: string;
+    stain: string;
+    cracks?: number;
+    craters?: number;
+    extra?: string;
+}): string;

package/dist/scene/recipes.js

@@ -0,0 +1,76 @@
+// Builders for the surface code of a body: a gas giant's bands, a cratered rock, a cloud-wrapped world. Each returns the GLSL text of `vec4 surface(vec3 p)`; a body's own entry
+// point adds what is only its own (a spot, a cap, a heart) as a few lines of `extra`.
+/** A `#rrggbb` colour as GLSL. */
+export const vec = (hex) => {
+    const c = [1, 3, 5].map((i) => (parseInt(hex.slice(i, i + 2), 16) / 255).toFixed(3));
+    return `vec3(${c.join(", ")})`;
+};
+/** A latitude-to-colour function from stops (latitude in degrees, south to north). `plateau` (0 to 0.5) keeps each band flat and its edge sharp. */
+export function bandFn(stops, plateau = 0.3) {
+    let code = `vec3 bandCol(float la) { float d = degrees(la); vec3 c = ${vec(stops[0][1])};\n`;
+    for (let i = 1; i < stops.length; i += 1) {
+        const a = stops[i - 1][0];
+        const b = stops[i][0];
+        const w = (b - a) * plateau;
+        code += `  c = mix(c, ${vec(stops[i][1])}, smoothstep(${(a + w).toFixed(2)}, ${(b - w).toFixed(2)}, d));\n`;
+    }
+    return `${code}  return c; }\n`;
+}
+/** A banded atmosphere: colour by latitude, wobbled by noise, streaked along the bands. */
+export function gas(options) {
+    const t = options.turbulence ?? 0.04;
+    const k = options.streaks ?? 0.2;
+    return `${bandFn(options.stops, options.plateau)}
+vec4 surface(vec3 p) {
+  float la = lat(p);
+  float warp = (fbm(vec3(p.xy * 4.5, p.z * 9.0)) - 0.5) * ${t.toFixed(3)} + (fbm(vec3(p.xy * 11.0, p.z * 22.0) + 5.0) - 0.5) * ${(t * 0.45).toFixed(3)};
+  vec3 col = bandCol(la + warp);
+  float streak = fbm(vec3(p.xy * 3.0, p.z * 36.0) + 2.0);
+  col *= 1.0 + ${k.toFixed(3)} * (streak - 0.5) * 2.0;
+  ${options.extra ?? ""}
+  return vec4(col, 0.0);
+}`;
+}
+/** A cratered world: two ground colours in patches, with craters that are dark in the bowl and bright on the rim. */
+export function rock(options) {
+    const c = options.craters ?? 1;
+    const seed = (options.seed ?? 0).toFixed(1);
+    return `
+vec4 surface(vec3 p) {
+  float h = craters(p, 3.0, ${(c * 1.0).toFixed(2)}, ${seed}) + craters(p, 8.0, ${(c * 0.7).toFixed(2)}, ${seed} + 7.0) * 0.6 + craters(p, 20.0, ${(c * 0.6).toFixed(2)}, ${seed} + 3.0) * 0.3;
+  float tone = fbm(p * ${(options.patches ?? 2.3).toFixed(2)} + ${seed});
+  vec3 col = mix(${vec(options.dark)}, ${vec(options.light)}, smoothstep(0.25, 0.75, tone));
+  col *= 1.0 + ${(options.contrast ?? 1).toFixed(2)} * 1.15 * h;
+  col *= 0.94 + 0.12 * fbm(p * 60.0);
+  ${options.extra ?? ""}
+  return vec4(col, h);
+}`;
+}
+/** A world wrapped in cloud: pale and smooth, streaked and swirled. */
+export function cloud(options) {
+    return `
+vec4 surface(vec3 p) {
+  vec3 q = p * 2.2;
+  float w = fbm(q * 1.4 + 3.0);
+  float n = fbm(q + vec3(w * 2.6, w * 1.4, -w * 2.0));
+  float streak = fbm(vec3(p.xy * 2.2, p.z * 7.0) + w);
+  float m = clamp(mix(n, streak, 0.4) * 1.3 - 0.12, 0.0, 1.0);
+  vec3 col = mix(${vec(options.dark)}, ${vec(options.light)}, mix(0.55, m, ${(options.swirl ?? 0.8).toFixed(2)}));
+  ${options.extra ?? ""}
+  return vec4(col, 0.0);
+}`;
+}
+/** An icy world: bright ground with a few dark stains and faint cracks. */
+export function ice(options) {
+    return `
+vec4 surface(vec3 p) {
+  float h = craters(p, 4.0, ${(options.craters ?? 0.5).toFixed(2)}, 11.0) + craters(p, 12.0, ${((options.craters ?? 0.5) * 0.8).toFixed(2)}, 5.0) * 0.6;
+  float tone = fbm(p * 3.0 + 9.0);
+  vec3 col = mix(${vec(options.base)}, ${vec(options.stain)}, smoothstep(0.45, 0.8, tone) * 0.7);
+  float ridge = 1.0 - smoothstep(0.0, 0.02, abs(fbm(p * 7.0 + 4.0) - 0.5));
+  col = mix(col, ${vec(options.stain)}, ridge * ${(options.cracks ?? 0.0).toFixed(2)});
+  col *= 1.0 + 0.7 * h;
+  ${options.extra ?? ""}
+  return vec4(col, h);
+}`;
+}

package/dist/scene/rings.d.ts

@@ -0,0 +1,34 @@
+import type { BodyFacts } from "../facts.ts";
+/**
+ * The strip of a body's rings: RGBA bytes `width` pixels across, and the inner and outer radii in body radii.
+ *
+ * @example
+ * ```ts
+ * import { BODIES, ringStrip, type RingStrip } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * const strip: RingStrip | null = ringStrip(BODIES.saturn, 64);
+ * console.log(strip?.data.length);
+ * ```
+ */
+export interface RingStrip {
+    data: Uint8Array;
+    width: number;
+    inner: number;
+    outer: number;
+}
+/**
+ * The strip of a body's rings, made from its ring bands: where each band is it stops light and has its tone, with fine ringlets in it and soft edges.
+ *
+ * @param facts - A body that has rings.
+ * @param width - The strip's width in pixels. Default 1024.
+ * @returns The RGBA bytes with the inner and outer radii in body radii, or `null` for a body with no rings.
+ *
+ * @example
+ * ```ts
+ * import { BODIES, ringStrip } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * const strip = ringStrip(BODIES.saturn, 256);
+ * console.log(strip?.width, strip?.inner.toFixed(2), strip?.outer.toFixed(2));
+ * ```
+ */
+export declare function ringStrip(facts: BodyFacts, width?: number): RingStrip | null;

package/dist/scene/rings.js

@@ -0,0 +1,64 @@
+const PALETTE = {
+    saturn: [[104, 86, 66], [243, 230, 200]],
+    uranus: [[58, 62, 66], [150, 158, 162]],
+};
+const hash = (n) => {
+    const s = Math.sin(n * 127.1 + 311.7) * 43758.5453;
+    return s - Math.floor(s);
+};
+const smooth = (a, b, x) => {
+    const t = Math.min(1, Math.max(0, (x - a) / (b - a)));
+    return t * t * (3 - 2 * t);
+};
+const ripple = (x) => {
+    const i = Math.floor(x);
+    const f = x - i;
+    return hash(i) * (1 - f) + hash(i + 1) * f;
+};
+/**
+ * The strip of a body's rings, made from its ring bands: where each band is it stops light and has its tone, with fine ringlets in it and soft edges.
+ *
+ * @param facts - A body that has rings.
+ * @param width - The strip's width in pixels. Default 1024.
+ * @returns The RGBA bytes with the inner and outer radii in body radii, or `null` for a body with no rings.
+ *
+ * @example
+ * ```ts
+ * import { BODIES, ringStrip } from "@johnmorrisdotca/wakusei-planets";
+ *
+ * const strip = ringStrip(BODIES.saturn, 256);
+ * console.log(strip?.width, strip?.inner.toFixed(2), strip?.outer.toFixed(2));
+ * ```
+ */
+export function ringStrip(facts, width = 1024) {
+    const bands = facts.rings;
+    if (bands === undefined || bands.length === 0)
+        return null;
+    const from = Math.min(...bands.map((band) => band.from)) - 300;
+    const to = Math.max(...bands.map((band) => band.to)) + 300;
+    const [dark, light] = PALETTE[facts.id] ?? [[90, 90, 90], [170, 170, 170]];
+    const data = new Uint8Array(width * 4);
+    const km = (to - from) / width;
+    for (let x = 0; x < width; x += 1) {
+        const r = from + (x + 0.5) * km;
+        let alpha = 0;
+        let tone = 0;
+        let weight = 0;
+        for (const band of bands) {
+            const soft = Math.max(km * 1.2, 120);
+            const inside = smooth(band.from - soft, band.from + soft, r) * (1 - smooth(band.to - soft, band.to + soft, r));
+            if (inside <= 0)
+                continue;
+            const fine = 0.78 + 0.22 * ripple(r / 380) + 0.12 * (ripple(r / 90) - 0.5);
+            alpha += inside * band.alpha * Math.min(1.15, fine);
+            tone += inside * band.tone * (0.9 + 0.2 * ripple(r / 650 + 7));
+            weight += inside;
+        }
+        const t = weight > 0 ? Math.min(1, tone / weight) : 0;
+        data[x * 4] = Math.round(dark[0] + (light[0] - dark[0]) * t);
+        data[x * 4 + 1] = Math.round(dark[1] + (light[1] - dark[1]) * t);
+        data[x * 4 + 2] = Math.round(dark[2] + (light[2] - dark[2]) * t);
+        data[x * 4 + 3] = Math.round(Math.min(1, alpha) * 255);
+    }
+    return { data, width, inner: from / facts.radiusKm, outer: to / facts.radiusKm };
+}

package/dist/scene/shared.d.ts

@@ -0,0 +1,24 @@
+import { type SharedRenderer } from "@johnmorrisdotca/kazoku-ui/renderer";
+import type { ThreeParts } from "./body.ts";
+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 that re-exports only the parts the bodies use
+ * ships a few hundred kilobytes of three.js instead of all of it, and a page with no bundler gives the address of a module (an import map is the other way).
+ *
+ * @param load - Returns the three.js module, as a promise.
+ *
+ * @example
+ * ```ts no-run
+ * import { setThreeLoader } from "@johnmorrisdotca/wakusei-planets/element";
+ *
+ * setThreeLoader(() => import("three"));
+ * ```
+ */
+export declare function setThreeLoader(load: () => Promise<ThreeParts>): 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<ThreeParts>;
+    release(): void;
+};
+/** The renderer now, if one is made: for tests and for a page that wants its numbers. */
+export declare const currentRenderer: () => SharedRenderer<ThreeParts> | undefined;

package/dist/scene/shared.js

@@ -0,0 +1,55 @@
+// One shared renderer for the page, whichever element draws with it: every `<wakusei-body>` takes it from here, so the page keeps one WebGL context. 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 listeners = 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 that re-exports only the parts the bodies use
+ * ships a few hundred kilobytes of three.js instead of all of it, and a page with no bundler gives the address of a module (an import map is the other way).
+ *
+ * @param load - Returns the three.js module, as a promise.
+ *
+ * @example
+ * ```ts no-run
+ * import { setThreeLoader } from "@johnmorrisdotca/wakusei-planets/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;
+    listeners.add(onContext);
+    shared ??= createSharedRenderer({
+        load: () => loader(),
+        stillSize: 480,
+        onContext: (state) => {
+            for (const listener of listeners)
+                listener(state);
+        },
+    });
+    return {
+        renderer: shared,
+        release() {
+            listeners.delete(onContext);
+            elements -= 1;
+            if (elements <= 0) {
+                releaseTimer = setTimeout(() => {
+                    if (elements <= 0) {
+                        shared?.dispose();
+                        shared = undefined;
+                    }
+                }, 1000);
+            }
+        },
+    };
+}
+/** The renderer now, if one is made: for tests and for a page that wants its numbers. */
+export const currentRenderer = () => shared;

package/dist/scene/store.d.ts

@@ -0,0 +1,19 @@
+import type { BodyId } from "../facts.ts";
+import type { BodyLook } from "./look.ts";
+/** A body drawn by another package's element (the Earth, by chikyu-earth) instead of by this one: the element asks it for what to show. */
+export interface Delegate {
+    /** The line look: an element for the body, centred on a longitude and latitude (`"lon,lat"`). */
+    line(options: {
+        center: string;
+        size: number;
+    }): Promise<HTMLElement>;
+    /** The shaded and painted looks, drawn live: an element lit by the Sun at `time` (`"now"` or an ISO date). */
+    live(options: {
+        center: string;
+        time: string;
+        textureBase: string | null;
+    }): Promise<HTMLElement>;
+}
+export declare const looks: Map<BodyId, BodyLook>, waiting: Set<() => void>, delegates: Map<BodyId, Delegate>;
+/** Call `wake` whenever a look is registered; returns a function that stops it. */
+export declare function onRegister(wake: () => void): () => void;

package/dist/scene/store.js

@@ -0,0 +1,8 @@
+const KEY = Symbol.for("johnmorrisdotca.wakusei-planets.looks");
+const store = (globalThis[KEY] ??= { looks: new Map(), waiting: new Set(), delegates: new Map() });
+export const { looks, waiting, delegates } = store;
+/** Call `wake` whenever a look is registered; returns a function that stops it. */
+export function onRegister(wake) {
+    waiting.add(wake);
+    return () => waiting.delete(wake);
+}

package/dist/vec.d.ts

@@ -0,0 +1,19 @@
+export type Vec3 = readonly [number, number, number];
+export declare const RAD: number;
+export declare const DEG: number;
+export declare const add: (a: Vec3, b: Vec3) => Vec3;
+export declare const sub: (a: Vec3, b: Vec3) => Vec3;
+export declare const scale: (a: Vec3, k: number) => Vec3;
+export declare const dot: (a: Vec3, b: Vec3) => number;
+export declare const cross: (a: Vec3, b: Vec3) => Vec3;
+export declare const length: (a: Vec3) => number;
+export declare const unit: (a: Vec3) => Vec3;
+/** A direction from right ascension and declination in degrees. */
+export declare const fromRaDec: (ra: number, dec: number) => Vec3;
+/** The mean obliquity of the ecliptic at J2000, in degrees. */
+export declare const OBLIQUITY = 23.4392911;
+/** An equatorial vector (J2000) in ecliptic coordinates. */
+export declare const toEcliptic: (v: Vec3) => Vec3;
+/** Turn `v` about the unit axis `k` by `angle` degrees (Rodrigues). */
+export declare const turn: (v: Vec3, k: Vec3, angle: number) => Vec3;
+export declare const wrap360: (a: number) => number;

package/dist/vec.js

@@ -0,0 +1,32 @@
+// Three-number vectors and the few turns the drawings need. Pure, no allocation beyond the arrays themselves.
+export const RAD = Math.PI / 180;
+export const DEG = 180 / Math.PI;
+export const add = (a, b) => [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+export const sub = (a, b) => [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+export const scale = (a, k) => [a[0] * k, a[1] * k, a[2] * k];
+export const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+export const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+export const length = (a) => Math.hypot(a[0], a[1], a[2]);
+export const unit = (a) => {
+    const n = length(a);
+    return n === 0 ? [0, 0, 0] : [a[0] / n, a[1] / n, a[2] / n];
+};
+/** A direction from right ascension and declination in degrees. */
+export const fromRaDec = (ra, dec) => [Math.cos(dec * RAD) * Math.cos(ra * RAD), Math.cos(dec * RAD) * Math.sin(ra * RAD), Math.sin(dec * RAD)];
+/** The mean obliquity of the ecliptic at J2000, in degrees. */
+export const OBLIQUITY = 23.4392911;
+/** An equatorial vector (J2000) in ecliptic coordinates. */
+export const toEcliptic = (v) => {
+    const c = Math.cos(OBLIQUITY * RAD);
+    const s = Math.sin(OBLIQUITY * RAD);
+    return [v[0], v[1] * c + v[2] * s, -v[1] * s + v[2] * c];
+};
+/** Turn `v` about the unit axis `k` by `angle` degrees (Rodrigues). */
+export const turn = (v, k, angle) => {
+    const c = Math.cos(angle * RAD);
+    const s = Math.sin(angle * RAD);
+    const kv = cross(k, v);
+    const d = dot(k, v) * (1 - c);
+    return [v[0] * c + kv[0] * s + k[0] * d, v[1] * c + kv[1] * s + k[1] * d, v[2] * c + kv[2] * s + k[2] * d];
+};
+export const wrap360 = (a) => ((a % 360) + 360) % 360;

package/dist/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.3.0";

package/dist/version.js

@@ -0,0 +1 @@
+export const VERSION = "0.3.0";