@johnmorrisdotca/wakusei-planets 0.5.1 → 0.7.0

package/dist/portrait/overlay.js

@@ -0,0 +1,172 @@
+// What is drawn over and under the bodies of a portrait, as plain shapes: the sky behind them (a few hundred stars, always the same ones), the rings of the moons' orbits, the names, and, while
+// editing, the chosen body's outline and the guides. The same shapes become an SVG overlay on the page and 2D canvas strokes in an exported picture, so the two always agree. Pure: no DOM.
+import { BODIES } from "../facts.js";
+import { lineSvg } from "../line.js";
+import { toScreen } from "./model.js";
+/** The sky's stars: the same ones every time, so a picture and its export agree. */
+export function starfield(count = 140) {
+    let seed = 20261103;
+    const next = () => {
+        seed = (seed * 1664525 + 1013904223) >>> 0;
+        return seed / 4294967296;
+    };
+    return Array.from({ length: count }, () => {
+        const big = next() > 0.9;
+        return { x: next(), y: next(), r: big ? 0.0016 : 0.0008 + next() * 0.0006, a: 0.35 + next() * 0.65 };
+    });
+}
+const STARS = starfield();
+/** The CSS behind the picture for a background (the stars are separate gradients, so the page draws them without a script). */
+export function backgroundCss(bg) {
+    if (bg === "transparent")
+        return "transparent";
+    if (bg === "gradient")
+        return "radial-gradient(120% 140% at 30% 20%, #1c3358 0%, #0d1a33 55%, #050914 100%)";
+    if (bg === "black")
+        return "#000";
+    const dots = STARS.map((s) => `radial-gradient(${(s.r * 1000).toFixed(1)}px ${(s.r * 1000).toFixed(1)}px at ${(s.x * 100).toFixed(2)}% ${(s.y * 100).toFixed(2)}%, rgba(255,255,255,${s.a.toFixed(2)}), transparent)`);
+    return `${dots.join(",")},radial-gradient(100% 120% at 50% 40%, #07101f 0%, #000 100%)`;
+}
+/** Paint the background onto a 2D canvas the size of the picture. */
+export function paintBackground(ctx, bg, width, height) {
+    if (bg === "transparent")
+        return;
+    if (bg === "gradient") {
+        const g = ctx.createRadialGradient(width * 0.3, height * 0.2, 0, width * 0.3, height * 0.2, Math.max(width, height) * 1.1);
+        g.addColorStop(0, "#1c3358");
+        g.addColorStop(0.55, "#0d1a33");
+        g.addColorStop(1, "#050914");
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, width, height);
+        return;
+    }
+    if (bg === "black") {
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, width, height);
+        return;
+    }
+    const g = ctx.createRadialGradient(width / 2, height * 0.4, 0, width / 2, height * 0.4, Math.max(width, height) * 0.8);
+    g.addColorStop(0, "#07101f");
+    g.addColorStop(1, "#000");
+    ctx.fillStyle = g;
+    ctx.fillRect(0, 0, width, height);
+    for (const s of STARS) {
+        ctx.fillStyle = `rgba(255,255,255,${s.a})`;
+        ctx.beginPath();
+        ctx.arc(s.x * width, s.y * height, Math.max(0.5, s.r * 1000), 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+const labelSize = (width) => Math.max(11, Math.min(15, width / 60));
+/** The orbit rings and the names for a picture of this size, and the selected body's outline and the guides when asked. */
+export function shapesOf(p, resolved, width, height, lang = "en", edit) {
+    const at = toScreen(resolved.camera, width, height);
+    const out = { circles: [], lines: [], texts: [] };
+    const byBody = new Map(resolved.placed.map((q) => [q.body, q]));
+    if (p.orbits) {
+        for (const moon of resolved.placed) {
+            const host = BODIES[moon.body].parent === undefined ? undefined : byBody.get(BODIES[moon.body].parent);
+            if (host === undefined)
+                continue;
+            const d = Math.hypot(moon.x - host.x, moon.y - host.y) * at.scale;
+            if (d > 2)
+                out.circles.push({ cx: at.px(host.x), cy: at.py(host.y), r: d, kind: "orbit" });
+        }
+    }
+    if (p.labels) {
+        const size = labelSize(width);
+        const boxes = [];
+        for (const q of resolved.placed) {
+            const text = BODIES[q.body].name[lang];
+            const w = [...text].reduce((n, c) => n + (c.charCodeAt(0) > 255 ? size : size * 0.58), 0);
+            const x = at.px(q.x);
+            const y = at.py(q.y) + Math.max(q.r * at.scale, 2) + size * 1.25;
+            const box = { x0: x - w / 2, x1: x + w / 2, y0: y - size, y1: y + size * 0.3 };
+            if (box.x0 < 0 || box.x1 > width || box.y1 > height + size)
+                continue;
+            if (boxes.some((b) => box.x0 < b.x1 && box.x1 > b.x0 && box.y0 < b.y1 && box.y1 > b.y0))
+                continue;
+            boxes.push(box);
+            out.texts.push({ x, y, text, size });
+        }
+    }
+    if (edit?.selected !== undefined) {
+        const q = resolved.placed[edit.selected];
+        if (q !== undefined)
+            out.circles.push({ cx: at.px(q.x), cy: at.py(q.y), r: Math.max(q.r * at.scale, 5) + 5, kind: "select" });
+    }
+    for (const g of edit?.guides ?? [])
+        out.lines.push(g.axis === "x" ? { x1: at.px(g.at), y1: 0, x2: at.px(g.at), y2: height } : { x1: 0, y1: at.py(g.at), x2: width, y2: at.py(g.at) });
+    return out;
+}
+const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const f = (n) => (Math.round(n * 100) / 100).toString();
+/** The shapes as SVG elements (no wrapper), in the picture's pixels. */
+export function shapesSvg(s) {
+    const circles = s.circles.map((c) => (c.kind === "orbit" ? `<circle cx="${f(c.cx)}" cy="${f(c.cy)}" r="${f(c.r)}" fill="none" stroke="#9fb4d6" stroke-opacity="0.45" stroke-width="1"/>` : `<circle cx="${f(c.cx)}" cy="${f(c.cy)}" r="${f(c.r)}" fill="none" stroke="#6ab7ff" stroke-width="2" stroke-dasharray="5 4"/>`));
+    const lines = s.lines.map((l) => `<line x1="${f(l.x1)}" y1="${f(l.y1)}" x2="${f(l.x2)}" y2="${f(l.y2)}" stroke="#ff5fa8" stroke-width="1" stroke-dasharray="4 3"/>`);
+    const texts = s.texts.map((t) => `<text x="${f(t.x)}" y="${f(t.y)}" font-size="${f(t.size)}" text-anchor="middle" font-family="system-ui,sans-serif" fill="#f2f6ff" stroke="#050914" stroke-width="3" stroke-opacity="0.8" paint-order="stroke" stroke-linejoin="round">${esc(t.text)}</text>`);
+    return [...circles, ...lines, ...texts].join("");
+}
+/** The shapes on a 2D canvas. */
+export function drawShapes(ctx, s, ratio = 1) {
+    ctx.save();
+    ctx.scale(ratio, ratio);
+    for (const c of s.circles) {
+        ctx.beginPath();
+        ctx.arc(c.cx, c.cy, c.r, 0, Math.PI * 2);
+        if (c.kind === "orbit") {
+            ctx.strokeStyle = "rgba(159,180,214,0.45)";
+            ctx.lineWidth = 1;
+            ctx.setLineDash([]);
+        }
+        else {
+            ctx.strokeStyle = "#6ab7ff";
+            ctx.lineWidth = 2;
+            ctx.setLineDash([5, 4]);
+        }
+        ctx.stroke();
+    }
+    ctx.setLineDash([4, 3]);
+    ctx.strokeStyle = "#ff5fa8";
+    ctx.lineWidth = 1;
+    for (const l of s.lines) {
+        ctx.beginPath();
+        ctx.moveTo(l.x1, l.y1);
+        ctx.lineTo(l.x2, l.y2);
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.textAlign = "center";
+    ctx.lineJoin = "round";
+    for (const t of s.texts) {
+        ctx.font = `${t.size}px system-ui, sans-serif`;
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = "rgba(5,9,20,0.8)";
+        ctx.strokeText(t.text, t.x, t.y);
+        ctx.fillStyle = "#f2f6ff";
+        ctx.fillText(t.text, t.x, t.y);
+    }
+    ctx.restore();
+}
+/**
+ * The portrait in the line look: one SVG, the bodies drawn one over another in the order of the list, each as a nested picture sized so its disc has the radius the layout gave it.
+ * Anything a body's rings or glow need past the disc is inside its own picture.
+ */
+export function lineScene(p, resolved, width, height, poses, lang = "en") {
+    const at = toScreen(resolved.camera, width, height);
+    const dark = p.bg !== "transparent";
+    const stroke = dark ? undefined : "#33415c";
+    const parts = [];
+    resolved.placed.forEach((q, i) => {
+        const facts = BODIES[q.body];
+        const reach = Math.max(facts.rings === undefined ? 1 : Math.max(...facts.rings.map((b) => b.to)) / facts.radiusKm, q.body === "sun" ? 1.08 : 1);
+        const fill = 0.94 / reach;
+        const rPx = Math.max(q.r * at.scale, 1.2);
+        const side = (2 * rPx) / fill;
+        const inner = lineSvg(q.body, { size: 480, fill, labels: false, pose: poses[i], lang, ...(stroke !== undefined ? { stroke } : {}) });
+        const nested = inner.replace(/^<svg [^>]*>/, () => `<svg x="${f(at.px(q.x) - side / 2)}" y="${f(at.py(q.y) - side / 2)}" width="${f(side)}" height="${f(side)}" viewBox="0 0 480 480" role="img" aria-label="${esc(facts.name[lang])}" overflow="hidden">`);
+        parts.push(nested);
+    });
+    return parts.join("");
+}

package/dist/portrait/pose.d.ts

@@ -0,0 +1,13 @@
+import { type Pose } from "../ephemeris.ts";
+import { type BodyId } from "../facts.ts";
+import { type Item } from "./model.ts";
+/** The pitch a body is drawn at when none is chosen: a little over the pole, more for a body with rings. */
+export declare const defaultPitch: (id: BodyId) => number;
+/**
+ * The pole and the prime meridian of a body in the picture's frame (x right, y up, z toward the viewer), after `seconds` of its own turning.
+ * With a date the body is turned as the Earth sees it then, and the item's `spin` is how far it is turned from that (from the longitude its portrait shows).
+ */
+export declare function poseOf(item: Pick<Item, "body" | "spin" | "tilt" | "pitch" | "turn">, ms: number | undefined, seconds: number, light: {
+    az: number;
+    el: number;
+}): Pose;

package/dist/portrait/pose.js

@@ -0,0 +1,31 @@
+// How one body of a portrait is turned: from its own spin, tilt and pitch, or from the sky at a date, then carried forward by its own turning. Pure.
+import { apparent } from "../ephemeris.js";
+import { BODIES } from "../facts.js";
+import { portrait } from "../pose.js";
+import { turn } from "../vec.js";
+import { lightVector } from "./model.js";
+/** The pitch a body is drawn at when none is chosen: a little over the pole, more for a body with rings. */
+export const defaultPitch = (id) => (BODIES[id].rings !== undefined ? 22 : 12);
+/**
+ * The pole and the prime meridian of a body in the picture's frame (x right, y up, z toward the viewer), after `seconds` of its own turning.
+ * With a date the body is turned as the Earth sees it then, and the item's `spin` is how far it is turned from that (from the longitude its portrait shows).
+ */
+export function poseOf(item, ms, seconds, light) {
+    const facts = BODIES[item.body];
+    const toSun = lightVector(light);
+    let pole;
+    let meridian;
+    if (ms !== undefined) {
+        const sky = apparent(item.body, ms);
+        pole = sky.pole;
+        meridian = turn(sky.meridian, pole, -(item.spin - (facts.showLon ?? 0)));
+    }
+    else {
+        const base = portrait(item.body, { spin: item.spin, pitch: item.pitch ?? defaultPitch(item.body), ...(item.tilt !== undefined ? { tilt: item.tilt } : {}) });
+        pole = base.pole;
+        meridian = base.meridian;
+    }
+    if (item.turn !== 0 && seconds !== 0)
+        meridian = turn(meridian, pole, item.turn * seconds);
+    return { pole, meridian, light: toSun };
+}

package/dist/portrait/scene3d.d.ts

@@ -0,0 +1,38 @@
+import type { Item3D, Scene3D } from "@johnmorrisdotca/kazoku-ui/renderer";
+import type { ThreeParts } from "../scene/body.ts";
+import "../bodies/all.ts";
+import { type Placed, type Resolved } from "./model.ts";
+/** Everything that decides how the scene looks at one draw. */
+export interface PortraitDraw {
+    placed: readonly Placed[];
+    camera: Resolved["camera"];
+    light: {
+        az: number;
+        el: number;
+    };
+    look: "realistic" | "painted";
+    /** The moment the sky is shown at, in milliseconds since 1970, or `undefined` for a portrait. */
+    ms: number | undefined;
+    /** Seconds of each body's own turning so far. */
+    seconds: number;
+    shadows: boolean;
+}
+export interface PortraitScene extends Scene3D {
+    apply(state: PortraitDraw): void;
+    /** Call `fn` right after the next draw, in the same task, while the canvas still holds the picture (it does not keep it after). */
+    afterDraw(fn: () => void): void;
+    /** The paintings the scene holds now. */
+    readonly bodies: number;
+}
+export interface PortraitItemOptions {
+    /** A key that changes whenever the picture would: the renderer keeps one still for each key. */
+    key: string;
+    state(): PortraitDraw;
+    textureBase(): string;
+    farBase(): string;
+    redraw(): void;
+}
+/**
+ * The item the shared renderer shows for a portrait: its `build` makes the scene, whose `apply` is handed each state.
+ */
+export declare function createPortraitItem(options: PortraitItemOptions): Item3D<ThreeParts>;

package/dist/portrait/scene3d.js

@@ -0,0 +1,123 @@
+import { createPainter } from "../scene/painter.js";
+import "../bodies/all.js";
+import { lightVector } from "./model.js";
+import { poseOf } from "./pose.js";
+/** The smallest a body is drawn, in CSS pixels across its radius, so a body at true scale is still a dot you can see. */
+const MIN_RADIUS_PX = 1.2;
+const occludersFor = (placed, index) => {
+    const me = placed[index];
+    const list = [];
+    placed.forEach((other, j) => {
+        if (j === index || other.body === "sun" || other.r <= 0)
+            return;
+        const dx = (other.x - me.x) / me.r;
+        const dy = (other.y - me.y) / me.r;
+        const rr = other.r / me.r;
+        const d2 = dx * dx + dy * dy;
+        if (d2 > 3600 || rr < 0.01)
+            return;
+        list.push({ d2, angle: (rr * rr) / Math.max(d2, 1e-6), o: [dx, dy, 0, rr] });
+    });
+    return list.sort((a, b) => b.angle - a.angle).slice(0, 6).map((l) => l.o);
+};
+/**
+ * The item the shared renderer shows for a portrait: its `build` makes the scene, whose `apply` is handed each state.
+ */
+export function createPortraitItem(options) {
+    return {
+        key: options.key,
+        build({ three: T, width, height }) {
+            const painter = createPainter({ textureBase: options.textureBase(), farBase: options.farBase() });
+            const scene = new T.Scene();
+            const camera = new T.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
+            const held = new Map();
+            let viewWidth = width;
+            let viewHeight = height;
+            let latest = options.state();
+            let after = [];
+            const ratio = () => Math.min(2, globalThis.devicePixelRatio || 1);
+            const drop = (id) => {
+                const one = held.get(id);
+                if (one === undefined)
+                    return;
+                scene.remove(one.painting.object);
+                one.painting.dispose();
+                held.delete(id);
+            };
+            const apply = (state) => {
+                latest = state;
+                const { placed, camera: cam } = state;
+                const present = new Set(placed.map((p) => p.body));
+                for (const id of [...held.keys()])
+                    if (!present.has(id) || held.get(id).look !== state.look)
+                        drop(id);
+                const aspect = viewWidth / Math.max(1, viewHeight);
+                const halfH = cam.h;
+                const halfW = halfH * aspect;
+                const pxPerUnit = viewHeight / (2 * halfH);
+                const slot = 7 * Math.max(1e-6, ...placed.map((p) => Math.max(p.r, MIN_RADIUS_PX / pxPerUnit)));
+                const far = (placed.length + 1) * slot;
+                const distance = far + 300 * Math.max(halfW, halfH);
+                camera.left = cam.x - halfW;
+                camera.right = cam.x + halfW;
+                camera.top = cam.y + halfH;
+                camera.bottom = cam.y - halfH;
+                camera.near = Math.max(1e-6, distance - far - slot);
+                camera.far = distance + slot;
+                camera.position.set(cam.x, cam.y, distance);
+                camera.updateProjectionMatrix();
+                const toSun = lightVector(state.light);
+                placed.forEach((p, i) => {
+                    let one = held.get(p.body);
+                    if (one === undefined) {
+                        const painting = painter.make(T, p.body, { look: state.look, invalidate: () => options.redraw(), ratio: ratio(), maxTexture: placed.length > 6 ? 1024 : 2048 });
+                        scene.add(painting.object);
+                        one = { painting, look: state.look };
+                        held.set(p.body, one);
+                    }
+                    const r = Math.max(p.r, MIN_RADIUS_PX / pxPerUnit);
+                    one.painting.object.position.set(p.x, p.y, i * slot);
+                    one.painting.object.scale.setScalar(r);
+                    const pose = poseOf(p, state.ms, state.seconds, state.light);
+                    one.painting.update({
+                        toSun,
+                        ms: state.ms ?? 0,
+                        radiusPx: r * pxPerUnit,
+                        pose: { pole: pose.pole, meridian: pose.meridian },
+                        ...(state.shadows ? { occluders: occludersFor(placed, i) } : {}),
+                    });
+                });
+            };
+            apply(latest);
+            return {
+                scene,
+                camera,
+                apply,
+                get bodies() {
+                    return held.size;
+                },
+                afterDraw(fn) {
+                    after.push(fn);
+                },
+                resize(w, h) {
+                    viewWidth = w;
+                    viewHeight = h;
+                    apply(latest);
+                },
+                update() {
+                    if (after.length > 0) {
+                        const run = after;
+                        after = [];
+                        queueMicrotask(() => run.forEach((fn) => fn()));
+                    }
+                    return false;
+                },
+                dispose() {
+                    for (const id of [...held.keys()])
+                        drop(id);
+                    scene.clear();
+                },
+            };
+        },
+    };
+}

package/dist/scene/body.d.ts

@@ -4,7 +4,7 @@ import type { Pose } from "../ephemeris.ts";
 import { type BodyFacts, type BodyId } from "../facts.ts";
 import { type BodyLook } from "./look.ts";
 /** The parts of three.js the bodies use: a page may hand over a module with only these (see `setThreeLoader`). */
-export type ThreeParts = Pick<typeof THREE, "AdditiveBlending" | "BufferAttribute" | "BufferGeometry" | "ClampToEdgeWrapping" | "DataTexture" | "DoubleSide" | "Line" | "LineBasicMaterial" | "LinearFilter" | "Mesh" | "NoColorSpace" | "OrthographicCamera" | "PlaneGeometry" | "RepeatWrapping" | "RGBAFormat" | "RingGeometry" | "Scene" | "ShaderMaterial" | "SphereGeometry" | "TextureLoader" | "Vector2" | "Vector3" | "WebGLRenderer">;
+export type ThreeParts = Pick<typeof THREE, "AdditiveBlending" | "BufferAttribute" | "BufferGeometry" | "ClampToEdgeWrapping" | "DataTexture" | "DoubleSide" | "Group" | "Line" | "LineBasicMaterial" | "LinearFilter" | "Mesh" | "NoColorSpace" | "OrthographicCamera" | "PlaneGeometry" | "RepeatWrapping" | "RGBAFormat" | "RingGeometry" | "Scene" | "ShaderMaterial" | "SphereGeometry" | "TextureLoader" | "Vector2" | "Vector3" | "WebGLRenderer">;
 /** One moon in a system view: its place in planet radii (viewer's frame) and the points of its orbit, if they changed. */
 export interface MoonDraw {
     id: BodyId;
@@ -23,6 +23,8 @@ export interface SceneState {
     panX: number;
     panY: number;
     moons?: readonly MoonDraw[];
+    /** The body is drawn as the sky shows it at a date: its real phase, with no light on the night side from a wrapped terminator or a rim of air. */
+    sky?: boolean;
     /** The smallest a moon is drawn, in CSS pixels across its radius. Default 2.5. */
     minMoonPx?: number;
     /** The colour of the orbit lines, `#rrggbb`. */

package/dist/scene/body.js

@@ -23,6 +23,7 @@ function makeBodyMaterial(T, look, painted) {
             uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
             uAtmos: { value: col3(T, a?.colour ?? [0, 0, 0]) },
             uAtmosPow: { value: a?.power ?? 3 },
+            uRimBase: { value: 0.12 },
             uEmissive: { value: look.emissive === true ? 1 : 0 },
             uRingN: { value: new T.Vector3(0, 1, 0) },
             uRingR: { value: new T.Vector2(1, 2) },
@@ -56,6 +57,8 @@ export function createBodyItem(options) {
             const geometry = assets.acquire("wk:sphere", () => new T.SphereGeometry(1, 128, 64), (g) => g.dispose());
             const shader = assets.acquire(`wk:body:${options.id}:r`, () => makeBodyMaterial(T, look, false), (m) => m.dispose());
             const paintedMaterial = wantPainted ? assets.acquire(`wk:body:${options.id}:p`, () => makeBodyMaterial(T, look, true), (m) => m.dispose()) : undefined;
+            const baseWrap = look.wrap ?? (look.atmosphere === undefined ? 0.04 : 0.3);
+            const baseAmbient = look.ambient ?? 0.04;
             const scene = new T.Scene();
             const camera = new T.OrthographicCamera(-1, 1, 1, -1, 0.1, 400);
             camera.position.set(0, 0, 200);
@@ -279,8 +282,15 @@ export function createBodyItem(options) {
                         mat.uniforms.uRingTex.value = ringTexture;
                     }
                 }
-                for (const mat of [shader, paintedMaterial])
-                    mat?.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                for (const mat of [shader, paintedMaterial]) {
+                    if (mat === undefined)
+                        continue;
+                    mat.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                    const sky = state.sky === true;
+                    mat.uniforms.uWrap.value = sky ? 0.02 : (mat === paintedMaterial ? baseWrap : baseWrap);
+                    mat.uniforms.uAmbient.value = sky ? 0.012 : baseAmbient;
+                    mat.uniforms.uRimBase.value = sky ? 0.02 : 0.12;
+                }
                 if (glow !== undefined)
                     glow.scale.setScalar(1);
                 // a sharper picture, when the disc is big enough to show it

package/dist/scene/glsl.js

@@ -61,6 +61,7 @@ uniform float uLimb;
 uniform float uWrap;
 uniform vec3 uAtmos;
 uniform float uAtmosPow;
+uniform float uRimBase;
 uniform float uEmissive;
 uniform vec3 uRingN;
 uniform vec2 uRingR;
@@ -70,7 +71,7 @@ ${painted ? "uniform sampler2D uMap;" : ""}
 varying vec3 vObj;
 varying vec3 vN;
 varying vec3 vW;
-${world ? "varying vec3 vV;" : ""}
+${world ? "varying vec3 vV;\nuniform int uOccN;\nuniform vec4 uOcc[6];" : ""}
 ${PRELUDE}
 ${surface}
 void main() {
@@ -103,10 +104,19 @@ void main() {
       }
     }
   }
+${world ? `  for (int i = 0; i < 6; i++) {
+    if (i >= uOccN) break;
+    vec3 oc = uOcc[i].xyz - vW;
+    float along = dot(oc, uLight);
+    if (along > 0.0) {
+      float miss = length(oc - along * uLight);
+      diff *= 1.0 - 0.92 * (1.0 - smoothstep(uOcc[i].w * 0.8, uOcc[i].w * 1.04 + 0.01, miss));
+    }
+  }` : ""}
   vec3 alb = pow(s.rgb, vec3(2.2));
   vec3 lit = alb * (uAmbient + (1.0 - uAmbient) * diff * 1.18);
   float rim = pow(1.0 - mu, uAtmosPow);
-  lit += pow(uAtmos, vec3(2.2)) * rim * (0.12 + 0.88 * clamp(dg * 1.6 + 0.35, 0.0, 1.0));
+  lit += pow(uAtmos, vec3(2.2)) * rim * (uRimBase + (1.0 - uRimBase) * clamp(dg * 1.6 + 0.35, 0.0, 1.0));
   lit *= mix(1.0, pow(mu, 0.45), uLimb);
   gl_FragColor = vec4(pow(lit, vec3(1.0 / 2.2)), 1.0);
 }`;

package/dist/scene/painter.d.ts

@@ -63,6 +63,13 @@ export interface PaintInfo {
     toSun: Vec3;
     ms: number;
     radiusPx: number;
+    /** The pole and the prime meridian to draw instead of the body's real ones at `ms` (a portrait's own pose), in the scene's axes. */
+    pose?: {
+        pole: Vec3;
+        meridian: Vec3;
+    };
+    /** Spheres that may shade this body from the Sun: x, y, z (from this body's centre) and radius, all in this body's radii, in the scene's axes. At most six are used. */
+    occluders?: readonly (readonly [number, number, number, number])[];
 }
 /**
  * One body made by the painter: an object of radius 1 at the origin for the caller to move and scale.

package/dist/scene/painter.js

@@ -87,6 +87,7 @@ function paint(T, id, context, bases) {
             uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
             uAtmos: { value: new T.Vector3(...(a?.colour ?? [0, 0, 0])) },
             uAtmosPow: { value: a?.power ?? 3 },
+            uRimBase: { value: 0.12 },
             uEmissive: { value: look.emissive === true ? 1 : 0 },
             uRingN: { value: new T.Vector3(0, 1, 0) },
             uRingR: { value: new T.Vector2(1, 2) },
@@ -94,6 +95,8 @@ function paint(T, id, context, bases) {
             uRingTex: { value: null },
             uMap: { value: null },
             uScale: { value: 1 },
+            uOccN: { value: 0 },
+            uOcc: { value: new Float32Array(24) },
         };
     };
     const material = (painted) => {
@@ -279,17 +282,23 @@ function paint(T, id, context, bases) {
             light.set(info.toSun[0], info.toSun[1], info.toSun[2]);
             const scale = group.scale.x || 1;
             if (look.emissive !== true) {
-                const { pole, meridian } = orientation(id, info.ms);
+                const { pole, meridian } = info.pose ?? orientation(id, info.ms);
                 const east = cross(pole, meridian);
                 basis(mesh, east, pole, meridian, scaleX, scaleY, scaleZ);
                 if (ringMesh !== undefined)
                     basis(ringMesh, meridian, east, pole);
                 poleVec.set(pole[0], pole[1], pole[2]);
             }
+            const occluders = info.occluders ?? [];
+            const shaded = Math.min(6, occluders.length);
             for (const m of materials) {
                 m.uniforms.uLight.value.copy(light);
                 m.uniforms.uScale.value = scale;
                 m.uniforms.uRingN.value.copy(poleVec);
+                m.uniforms.uOccN.value = shaded;
+                const packed = m.uniforms.uOcc.value;
+                for (let i = 0; i < shaded; i += 1)
+                    packed.set(occluders[i], i * 4);
             }
             if (ringMaterial !== undefined) {
                 ringMaterial.uniforms.uLight.value.copy(light);

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "0.5.1";
+export declare const VERSION = "0.7.0";

package/dist/version.js

@@ -1 +1 @@
-export const VERSION = "0.5.1";
+export const VERSION = "0.7.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johnmorrisdotca/wakusei-planets",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "Wakusei Planets 惑星 — The Sun, planets and moons for the web: each as a clean line drawing, a shaded realistic drawing or a painted surface map, with real sizes, axial tilt and rotation as data, and positions of the moons for any date and time. SVG for the lines, three.js (optional) for the rest.",
   "keywords": [
     "planets",
@@ -34,8 +34,10 @@
   "type": "module",
   "sideEffects": [
     "./dist/element.js",
+    "./dist/portrait/element.js",
     "./dist/bodies/*.js",
     "./src/element.ts",
+    "./src/portrait/element.ts",
     "./src/bodies/*.ts"
   ],
   "main": "./dist/index.js",
@@ -52,6 +54,11 @@
       "import": "./dist/element.js",
       "default": "./dist/element.js"
     },
+    "./portrait": {
+      "types": "./dist/portrait/element.d.ts",
+      "import": "./dist/portrait/element.js",
+      "default": "./dist/portrait/element.js"
+    },
     "./look": {
       "types": "./dist/scene/look.d.ts",
       "import": "./dist/scene/look.js",