@johnmorrisdotca/wakusei-planets 0.0.0-stage → 0.3.0

package/dist/scene/body.js

@@ -0,0 +1,337 @@
+import { BODIES, ringReach } from "../facts.js";
+import { cross } from "../vec.js";
+import { BALL_FRAGMENT, bodyFragment, GLOW_FRAGMENT, GLOW_VERTEX, PAINTED_SURFACE, RING_FRAGMENT, RING_VERTEX, VERTEX } from "./glsl.js";
+import { lookOf } from "./look.js";
+import { ringStrip } from "./rings.js";
+/** A body that has no registered look is still drawn: a lit ball in its mean colour. */
+export function fallbackLook(facts) {
+    const c = [1, 3, 5].map((i) => (parseInt(facts.colour.slice(i, i + 2), 16) / 255).toFixed(3)).join(", ");
+    return { id: facts.id, surface: `vec4 surface(vec3 p) { float n = fbm(p * 5.0); return vec4(vec3(${c}) * (0.85 + 0.3 * n), 0.0); }` };
+}
+const col3 = (T, rgb) => new T.Vector3(rgb[0], rgb[1], rgb[2]);
+const v3 = (T, v) => new T.Vector3(v[0], v[1], v[2]);
+function makeBodyMaterial(T, look, painted) {
+    const a = look.atmosphere;
+    return new T.ShaderMaterial({
+        vertexShader: VERTEX,
+        fragmentShader: bodyFragment(painted ? PAINTED_SURFACE : look.surface, painted),
+        uniforms: {
+            uLight: { value: new T.Vector3(-0.6, 0.2, 0.77) },
+            uRelief: { value: (painted ? (look.painted?.relief ?? 0) : (look.relief ?? 0.6)) },
+            uAmbient: { value: look.ambient ?? 0.04 },
+            uLimb: { value: look.limb ?? 0 },
+            uWrap: { value: look.wrap ?? (a === undefined ? 0.04 : 0.3) },
+            uAtmos: { value: col3(T, a?.colour ?? [0, 0, 0]) },
+            uAtmosPow: { value: a?.power ?? 3 },
+            uEmissive: { value: look.emissive === true ? 1 : 0 },
+            uRingN: { value: new T.Vector3(0, 1, 0) },
+            uRingR: { value: new T.Vector2(1, 2) },
+            uRingOn: { value: 0 },
+            uRingTex: { value: null },
+            uMap: { value: null },
+        },
+    });
+}
+/** Set an object's matrix from three axes (columns), without letting three.js overwrite it. */
+function setBasis(T, object, x, y, z, sx = 1, sy = 1, sz = 1) {
+    object.matrixAutoUpdate = false;
+    object.matrixWorldAutoUpdate = false;
+    object.matrix.makeBasis(new T.Vector3(x[0] * sx, x[1] * sx, x[2] * sx), new T.Vector3(y[0] * sy, y[1] * sy, y[2] * sy), new T.Vector3(z[0] * sz, z[1] * sz, z[2] * sz));
+    object.matrixWorld.copy(object.matrix);
+}
+/**
+ * The shared-renderer item for a body: what `renderer.view(host, item)` shows. `state()` is read when the scene is built and `apply` moves it afterwards.
+ *
+ * @param T - The three.js module (the element passes the page's own).
+ * @param options - The body, the look, the key and the callbacks.
+ * @returns The item for kazoku-ui's shared renderer.
+ */
+export function createBodyItem(options) {
+    const facts = BODIES[options.id];
+    return {
+        key: options.key,
+        async build({ three: T, assets, width, height }) {
+            const look = lookOf(options.id) ?? fallbackLook(facts);
+            const wantPainted = options.look === "painted" && look.painted !== undefined;
+            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 scene = new T.Scene();
+            const camera = new T.OrthographicCamera(-1, 1, 1, -1, 0.1, 400);
+            camera.position.set(0, 0, 200);
+            const mesh = new T.Mesh(geometry, shader);
+            mesh.frustumCulled = false;
+            scene.add(mesh);
+            // rings: a picture of them when the look has one (painted), else the table's strip
+            const loadImage = (url) => new Promise((resolve, reject) => {
+                const loader = new T.TextureLoader();
+                loader.setCrossOrigin("anonymous");
+                loader.load(url, (t) => resolve(t), undefined, (e) => reject(e instanceof Error ? e : new Error("texture failed")));
+            });
+            const table = ringStrip(facts, 1024);
+            const photo = wantPainted && table !== null ? look.painted?.rings : undefined;
+            let photoTexture;
+            if (photo !== undefined) {
+                try {
+                    photoTexture = await loadImage(`${options.textureBase()}${photo.map}-${photo.width}.webp`);
+                }
+                catch {
+                    photoTexture = undefined;
+                }
+            }
+            const ringInner = photo !== undefined && photoTexture !== undefined ? photo.from / facts.radiusKm : (table?.inner ?? 1);
+            const ringOuter = photo !== undefined && photoTexture !== undefined ? photo.to / facts.radiusKm : (table?.outer ?? 2);
+            const ringKey = photoTexture !== undefined ? `${options.id}:p` : options.id;
+            let ringMesh;
+            let ringTexture;
+            let ringMaterial;
+            if (table !== null && look.emissive !== true) {
+                ringTexture = assets.acquire(`wk:ringtex:${ringKey}`, () => {
+                    if (photoTexture !== undefined) {
+                        photoTexture.magFilter = T.LinearFilter;
+                        photoTexture.minFilter = T.LinearFilter;
+                        photoTexture.generateMipmaps = false;
+                        photoTexture.wrapS = T.ClampToEdgeWrapping;
+                        photoTexture.colorSpace = T.NoColorSpace;
+                        return photoTexture;
+                    }
+                    const tex = new T.DataTexture(table.data, table.width, 1, T.RGBAFormat);
+                    tex.magFilter = T.LinearFilter;
+                    tex.minFilter = T.LinearFilter;
+                    tex.wrapS = T.ClampToEdgeWrapping;
+                    tex.needsUpdate = true;
+                    return tex;
+                }, (t) => t.dispose());
+                if (photoTexture !== undefined && ringTexture !== photoTexture)
+                    photoTexture.dispose();
+                const ringGeometry = assets.acquire(`wk:ring:${ringKey}`, () => new T.RingGeometry(ringInner, ringOuter, 256, 1), (g) => g.dispose());
+                ringMaterial = assets.acquire(`wk:ringmat:${ringKey}`, () => new T.ShaderMaterial({
+                    vertexShader: RING_VERTEX,
+                    fragmentShader: RING_FRAGMENT,
+                    side: T.DoubleSide,
+                    transparent: true,
+                    depthWrite: false,
+                    uniforms: { uRingTex: { value: ringTexture }, uRingR: { value: new T.Vector2(ringInner, ringOuter) }, uLight: { value: new T.Vector3(0, 0, 1) }, uRingN: { value: new T.Vector3(0, 1, 0) } },
+                }), (m) => m.dispose());
+                ringMesh = new T.Mesh(ringGeometry, ringMaterial);
+                ringMesh.frustumCulled = false;
+                scene.add(ringMesh);
+            }
+            // the glow of a star
+            let glow;
+            if (look.emissive === true) {
+                const glowGeometry = assets.acquire("wk:glow", () => new T.PlaneGeometry(6, 6), (g) => g.dispose());
+                const glowMaterial = assets.acquire("wk:glowmat", () => new T.ShaderMaterial({ vertexShader: GLOW_VERTEX, fragmentShader: GLOW_FRAGMENT, transparent: true, depthWrite: false, blending: T.AdditiveBlending, uniforms: { uColour: { value: new T.Vector3(1, 0.7, 0.3) } } }), (m) => m.dispose());
+                glow = new T.Mesh(glowGeometry, glowMaterial);
+                glow.position.z = -5;
+                glow.scale.setScalar(1);
+                glow.frustumCulled = false;
+                scene.add(glow);
+            }
+            // moons, made on first use
+            const moonMeshes = new Map();
+            const orbitLines = new Map();
+            const orbitMaterial = new T.LineBasicMaterial({ color: 0x8fa1b8, transparent: true, opacity: 0.4 });
+            let viewWidth = width;
+            let viewHeight = height;
+            // the picture
+            let textureWidth = 0;
+            let texture;
+            let loading = false;
+            let failed = false;
+            const tried = new Set();
+            let latest = options.state();
+            const loadTexture = (w) => {
+                const far = look.painted.far !== undefined && w >= look.painted.far;
+                return loadImage(`${far ? options.farBase() : options.textureBase()}${look.painted.map}-${w}.webp`);
+            };
+            const use = (t, w) => {
+                t.anisotropy = 4;
+                t.wrapS = T.RepeatWrapping;
+                t.colorSpace = T.NoColorSpace;
+                const previous = texture;
+                texture = t;
+                textureWidth = w;
+                paintedMaterial.uniforms.uMap.value = t;
+                mesh.material = paintedMaterial;
+                previous?.dispose();
+                options.report?.({ painted: true, width: w });
+            };
+            const fail = () => {
+                failed = true;
+                mesh.material = shader;
+                textureWidth = 0;
+                options.report?.({ painted: false, width: 0, failed: true });
+            };
+            if (wantPainted && paintedMaterial !== undefined) {
+                const widths = look.painted.widths;
+                try {
+                    use(await loadTexture(widths[0]), widths[0]);
+                }
+                catch {
+                    fail();
+                }
+            }
+            else {
+                options.report?.({ painted: false, width: 0 });
+            }
+            const orient = (state) => {
+                const { pole, meridian } = state.pose;
+                const east = cross(pole, meridian);
+                const ax = facts.axesKm;
+                const mean = facts.radiusKm;
+                const scaleX = ax ? ax[1] / mean : 1;
+                const scaleY = ax ? ax[2] / mean : 1 - facts.flattening;
+                const scaleZ = ax ? ax[0] / mean : 1;
+                setBasis(T, mesh, east, pole, meridian, scaleX, scaleY, scaleZ);
+                if (ringMesh !== undefined)
+                    setBasis(T, ringMesh, meridian, east, pole);
+            };
+            const frame = (state) => {
+                const aspect = viewWidth / Math.max(1, viewHeight);
+                const half = state.extent / Math.max(0.05, state.zoom);
+                const halfW = aspect >= 1 ? half * aspect : half;
+                const halfH = aspect >= 1 ? half : half / aspect;
+                const cx = state.panX * halfW;
+                const cy = state.panY * halfH;
+                camera.left = cx - halfW;
+                camera.right = cx + halfW;
+                camera.top = cy + halfH;
+                camera.bottom = cy - halfH;
+                camera.updateProjectionMatrix();
+            };
+            const moonFor = (id) => {
+                let m = moonMeshes.get(id);
+                if (m !== undefined)
+                    return m;
+                const f = BODIES[id];
+                const c = [1, 3, 5].map((i) => parseInt(f.colour.slice(i, i + 2), 16) / 255);
+                const material = assets.acquire(`wk:ball:${id}`, () => new T.ShaderMaterial({ vertexShader: VERTEX, fragmentShader: BALL_FRAGMENT, uniforms: { uLight: { value: new T.Vector3(0, 0, 1) }, uColour: { value: col3(T, c) } } }), (x) => x.dispose());
+                m = new T.Mesh(geometry, material);
+                m.frustumCulled = false;
+                moonMeshes.set(id, m);
+                scene.add(m);
+                return m;
+            };
+            const place = (state) => {
+                const moons = state.moons ?? [];
+                const aspect = viewWidth / Math.max(1, viewHeight);
+                const half = state.extent / Math.max(0.05, state.zoom);
+                const unitsPerPx = (2 * half) / Math.max(1, aspect >= 1 ? viewHeight : viewWidth);
+                const minR = (state.minMoonPx ?? 2.5) * unitsPerPx;
+                const live = new Set(moons.map((m) => m.id));
+                for (const [id, m] of moonMeshes)
+                    if (!live.has(id)) {
+                        scene.remove(m);
+                        moonMeshes.delete(id);
+                    }
+                for (const [id, o] of orbitLines)
+                    if (!live.has(id)) {
+                        scene.remove(o.line);
+                        o.line.geometry.dispose();
+                        orbitLines.delete(id);
+                    }
+                for (const moon of moons) {
+                    const f = BODIES[moon.id];
+                    const mesh2 = moonFor(moon.id);
+                    const r = Math.max(f.radiusKm / facts.radiusKm, minR);
+                    mesh2.position.set(moon.x, moon.y, moon.z);
+                    mesh2.scale.setScalar(r);
+                    mesh2.updateMatrix();
+                    mesh2.updateMatrixWorld(true);
+                    const mat = mesh2.material;
+                    mat.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                    if (moon.orbit !== undefined) {
+                        const held = orbitLines.get(moon.id);
+                        if (held === undefined || held.source !== moon.orbit) {
+                            if (held !== undefined) {
+                                scene.remove(held.line);
+                                held.line.geometry.dispose();
+                            }
+                            const g = new T.BufferGeometry();
+                            g.setAttribute("position", new T.BufferAttribute(moon.orbit, 3));
+                            const line = new T.Line(g, orbitMaterial);
+                            line.frustumCulled = false;
+                            scene.add(line);
+                            orbitLines.set(moon.id, { line, source: moon.orbit });
+                        }
+                    }
+                }
+                if (state.orbitColour !== undefined)
+                    orbitMaterial.color.set(state.orbitColour);
+            };
+            const apply = (state) => {
+                latest = state;
+                orient(state);
+                frame(state);
+                place(state);
+                if (ringMaterial !== undefined) {
+                    const light = v3(T, state.pose.light);
+                    const pole = v3(T, state.pose.pole);
+                    ringMaterial.uniforms.uLight.value.copy(light);
+                    ringMaterial.uniforms.uRingN.value.copy(pole);
+                    for (const mat of [shader, paintedMaterial]) {
+                        if (mat === undefined)
+                            continue;
+                        mat.uniforms.uRingOn.value = 1;
+                        mat.uniforms.uRingN.value.copy(pole);
+                        mat.uniforms.uRingR.value.set(ringInner, ringOuter);
+                        mat.uniforms.uRingTex.value = ringTexture;
+                    }
+                }
+                for (const mat of [shader, paintedMaterial])
+                    mat?.uniforms.uLight.value.copy(v3(T, state.pose.light));
+                if (glow !== undefined)
+                    glow.scale.setScalar(1);
+                // a sharper picture, when the disc is big enough to show it
+                if (wantPainted && !failed && !loading && look.painted !== undefined) {
+                    const aspect = viewWidth / Math.max(1, viewHeight);
+                    const discPx = (aspect >= 1 ? viewHeight : viewWidth) * (state.zoom / state.extent);
+                    const wanted = options.wantedWidth(discPx);
+                    const next = look.painted.widths.find((w) => w >= wanted) ?? look.painted.widths[look.painted.widths.length - 1];
+                    if (next > textureWidth && !tried.has(next)) {
+                        tried.add(next);
+                        loading = true;
+                        void loadTexture(next).then((t) => {
+                            loading = false;
+                            use(t, next);
+                            options.redraw();
+                        }, () => {
+                            loading = false;
+                        });
+                    }
+                }
+            };
+            apply(latest);
+            void ringReach;
+            return {
+                scene,
+                camera,
+                apply,
+                get textureWidth() {
+                    return textureWidth;
+                },
+                get painted() {
+                    return textureWidth > 0;
+                },
+                resize(w, h) {
+                    viewWidth = w;
+                    viewHeight = h;
+                    frame(latest);
+                    place(latest);
+                },
+                update() {
+                    return false;
+                },
+                dispose() {
+                    texture?.dispose();
+                    texture = undefined;
+                    for (const o of orbitLines.values())
+                        o.line.geometry.dispose();
+                    orbitMaterial.dispose();
+                    scene.clear();
+                },
+            };
+        },
+    };
+}

package/dist/scene/glsl.d.ts

@@ -0,0 +1,13 @@
+export declare const VERTEX = "\nvarying vec3 vObj;\nvarying vec3 vN;\nvarying vec3 vW;\nvoid main() {\n  vObj = vec3(position.z, position.x, position.y);\n  vN = normalize(normalMatrix * normal);\n  vec4 w = modelMatrix * vec4(position, 1.0);\n  vW = w.xyz;\n  gl_Position = projectionMatrix * viewMatrix * w;\n}";
+/** Noise, craters and the band palette, for the surface code of a body to call. */
+export declare const PRELUDE = "\nfloat hash13(vec3 p) { p = fract(p * 0.1031); p += dot(p, p.zyx + 31.32); return fract((p.x + p.y) * p.z); }\nvec3 hash33(vec3 p) { p = fract(p * vec3(0.1031, 0.1030, 0.0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx); }\nfloat vnoise(vec3 p) {\n  vec3 i = floor(p); vec3 f = fract(p); f = f * f * (3.0 - 2.0 * f);\n  return mix(mix(mix(hash13(i), hash13(i + vec3(1,0,0)), f.x), mix(hash13(i + vec3(0,1,0)), hash13(i + vec3(1,1,0)), f.x), f.y),\n             mix(mix(hash13(i + vec3(0,0,1)), hash13(i + vec3(1,0,1)), f.x), mix(hash13(i + vec3(0,1,1)), hash13(i + vec3(1,1,1)), f.x), f.y), f.z);\n}\nfloat fbm(vec3 p) { float a = 0.5; float s = 0.0; for (int i = 0; i < 5; i++) { s += a * vnoise(p); p = p * 2.03 + vec3(1.7, 9.2, 3.1); a *= 0.5; } return s; }\n// Craters: a bowl and a raised rim in each cell that has one. Returns a height, negative in a bowl.\nfloat craters(vec3 p, float freq, float amp, float seed) {\n  vec3 q = p * freq + seed; vec3 ip = floor(q); float h = 0.0;\n  for (int x = -1; x <= 1; x++) for (int y = -1; y <= 1; y++) for (int z = -1; z <= 1; z++) {\n    vec3 c = ip + vec3(float(x), float(y), float(z));\n    float on = step(0.52, hash13(c + 3.7));\n    vec3 ctr = c + hash33(c);\n    float rad = mix(0.12, 0.36, hash13(c + 17.3));\n    float d = length(q - ctr) / rad;\n    float bowl = d < 1.0 ? (d * d - 1.0) : 0.0;\n    float rim = d >= 1.0 ? exp(-pow((d - 1.0) * 5.0, 2.0)) * 0.3 : 0.0;\n    h += on * amp * rad * (bowl + rim);\n  }\n  return h;\n}\nfloat lon(vec3 p) { return atan(p.y, p.x); }\nfloat lat(vec3 p) { return asin(clamp(p.z, -1.0, 1.0)); }\nfloat wrapPi(float a) { return a - 6.2831853 * floor((a + 3.1415927) / 6.2831853); }\nvec3 dirOf(float lonDeg, float latDeg) { float lo = radians(lonDeg); float la = radians(latDeg); return vec3(cos(la) * cos(lo), cos(la) * sin(lo), sin(la)); }\n// One big round bowl with a rim, by longitude, latitude and angular radius in degrees. Negative inside.\nfloat bowl(vec3 p, float lonDeg, float latDeg, float radDeg, float depth) {\n  float d = acos(clamp(dot(p, dirOf(lonDeg, latDeg)), -1.0, 1.0)) / radians(radDeg);\n  return d < 1.0 ? depth * (d * d - 1.0) : depth * exp(-pow((d - 1.0) * 5.0, 2.0)) * 0.3;\n}\n// A soft oval on the body, 1 inside and 0 outside, by longitude and latitude in degrees.\nfloat oval(vec3 p, float lon0, float lat0, float rx, float ry, float soft) {\n  float dx = wrapPi(lon(p) - radians(lon0)) * cos(radians(lat0)) / radians(rx);\n  float dy = (lat(p) - radians(lat0)) / radians(ry);\n  return 1.0 - smoothstep(1.0 - soft, 1.0, sqrt(dx * dx + dy * dy));\n}";
+/** The fragment shader of a body: the surface code goes between the prelude and `main`. */
+export declare function bodyFragment(surface: string, painted: boolean): string;
+/** A painted body's surface code: the map by longitude and latitude, with the seam at 180 degrees left alone. */
+export declare const PAINTED_SURFACE = "\nvec4 surface(vec3 p) {\n  float u1 = atan(p.y, p.x) / 6.2831853 + 0.5;\n  float u2 = fract(u1 + 0.5) - 0.5;\n  float v = asin(clamp(p.z, -1.0, 1.0)) / 3.1415927 + 0.5;\n  vec2 a = vec2(u1, v); vec2 b = vec2(u2, v);\n  vec2 ax = dFdx(a); vec2 ay = dFdy(a); vec2 bx = dFdx(b); vec2 by = dFdy(b);\n  bool useA = dot(ax, ax) + dot(ay, ay) <= dot(bx, bx) + dot(by, by);\n  vec3 c = textureGrad(uMap, useA ? a : b, useA ? ax : bx, useA ? ay : by).rgb;\n  return vec4(c, dot(c, vec3(0.3, 0.59, 0.11)));\n}";
+export declare const RING_FRAGMENT = "\nprecision highp float;\nuniform sampler2D uRingTex;\nuniform vec2 uRingR;\nuniform vec3 uLight;\nuniform vec3 uRingN;\nvarying vec3 vL;\nvarying vec3 vW;\nvoid main() {\n  float u = (length(vL.xy) - uRingR.x) / (uRingR.y - uRingR.x);\n  if (u < 0.0 || u > 1.0) discard;\n  vec4 t = texture2D(uRingTex, vec2(u, 0.5));\n  float nl = dot(uRingN, uLight);\n  float side = nl * uRingN.z;\n  float bright = 0.16 + 0.84 * clamp(abs(nl) * 2.0, 0.0, 1.0);\n  if (side < 0.0) bright *= 0.38;\n  float b = dot(vW, uLight);\n  float closest = sqrt(max(dot(vW, vW) - b * b, 0.0));\n  float shadow = b < 0.0 ? smoothstep(1.02, 0.97, closest) : 0.0;\n  vec3 c = pow(t.rgb, vec3(2.2)) * bright * (1.0 - 0.93 * shadow);\n  gl_FragColor = vec4(pow(c, vec3(1.0 / 2.2)), t.a);\n}";
+export declare const RING_VERTEX = "\nvarying vec3 vL;\nvarying vec3 vW;\nvoid main() {\n  vL = position;\n  vec4 w = modelMatrix * vec4(position, 1.0);\n  vW = w.xyz;\n  gl_Position = projectionMatrix * viewMatrix * w;\n}";
+export declare const GLOW_VERTEX = "\nvarying vec2 vP;\nvoid main() { vP = position.xy; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }";
+export declare const GLOW_FRAGMENT = "\nprecision highp float;\nvarying vec2 vP;\nuniform vec3 uColour;\nvoid main() {\n  float r = length(vP);\n  if (r < 0.98) discard;\n  float a = exp(-(r - 1.0) * 2.4) * 0.62;\n  float streak = 0.82 + 0.18 * sin(atan(vP.y, vP.x) * 9.0 + r * 3.0);\n  a *= streak * smoothstep(3.0, 1.6, r);\n  gl_FragColor = vec4(uColour * a, a);\n}";
+/** A cheap lit ball for a moon seen small beside its planet. */
+export declare const BALL_FRAGMENT = "\nprecision highp float;\nuniform vec3 uLight;\nuniform vec3 uColour;\nvarying vec3 vObj;\nvarying vec3 vN;\nvarying vec3 vW;\n\nfloat hash13(vec3 p) { p = fract(p * 0.1031); p += dot(p, p.zyx + 31.32); return fract((p.x + p.y) * p.z); }\nvec3 hash33(vec3 p) { p = fract(p * vec3(0.1031, 0.1030, 0.0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx); }\nfloat vnoise(vec3 p) {\n  vec3 i = floor(p); vec3 f = fract(p); f = f * f * (3.0 - 2.0 * f);\n  return mix(mix(mix(hash13(i), hash13(i + vec3(1,0,0)), f.x), mix(hash13(i + vec3(0,1,0)), hash13(i + vec3(1,1,0)), f.x), f.y),\n             mix(mix(hash13(i + vec3(0,0,1)), hash13(i + vec3(1,0,1)), f.x), mix(hash13(i + vec3(0,1,1)), hash13(i + vec3(1,1,1)), f.x), f.y), f.z);\n}\nfloat fbm(vec3 p) { float a = 0.5; float s = 0.0; for (int i = 0; i < 5; i++) { s += a * vnoise(p); p = p * 2.03 + vec3(1.7, 9.2, 3.1); a *= 0.5; } return s; }\n// Craters: a bowl and a raised rim in each cell that has one. Returns a height, negative in a bowl.\nfloat craters(vec3 p, float freq, float amp, float seed) {\n  vec3 q = p * freq + seed; vec3 ip = floor(q); float h = 0.0;\n  for (int x = -1; x <= 1; x++) for (int y = -1; y <= 1; y++) for (int z = -1; z <= 1; z++) {\n    vec3 c = ip + vec3(float(x), float(y), float(z));\n    float on = step(0.52, hash13(c + 3.7));\n    vec3 ctr = c + hash33(c);\n    float rad = mix(0.12, 0.36, hash13(c + 17.3));\n    float d = length(q - ctr) / rad;\n    float bowl = d < 1.0 ? (d * d - 1.0) : 0.0;\n    float rim = d >= 1.0 ? exp(-pow((d - 1.0) * 5.0, 2.0)) * 0.3 : 0.0;\n    h += on * amp * rad * (bowl + rim);\n  }\n  return h;\n}\nfloat lon(vec3 p) { return atan(p.y, p.x); }\nfloat lat(vec3 p) { return asin(clamp(p.z, -1.0, 1.0)); }\nfloat wrapPi(float a) { return a - 6.2831853 * floor((a + 3.1415927) / 6.2831853); }\nvec3 dirOf(float lonDeg, float latDeg) { float lo = radians(lonDeg); float la = radians(latDeg); return vec3(cos(la) * cos(lo), cos(la) * sin(lo), sin(la)); }\n// One big round bowl with a rim, by longitude, latitude and angular radius in degrees. Negative inside.\nfloat bowl(vec3 p, float lonDeg, float latDeg, float radDeg, float depth) {\n  float d = acos(clamp(dot(p, dirOf(lonDeg, latDeg)), -1.0, 1.0)) / radians(radDeg);\n  return d < 1.0 ? depth * (d * d - 1.0) : depth * exp(-pow((d - 1.0) * 5.0, 2.0)) * 0.3;\n}\n// A soft oval on the body, 1 inside and 0 outside, by longitude and latitude in degrees.\nfloat oval(vec3 p, float lon0, float lat0, float rx, float ry, float soft) {\n  float dx = wrapPi(lon(p) - radians(lon0)) * cos(radians(lat0)) / radians(rx);\n  float dy = (lat(p) - radians(lat0)) / radians(ry);\n  return 1.0 - smoothstep(1.0 - soft, 1.0, sqrt(dx * dx + dy * dy));\n}\nvoid main() {\n  vec3 n = normalize(vN);\n  float shade = 0.82 + 0.3 * (fbm(normalize(vObj) * 4.0) - 0.5);\n  float diff = max(dot(n, uLight), 0.0);\n  vec3 c = pow(uColour * shade, vec3(2.2)) * (0.04 + 1.1 * diff);\n  gl_FragColor = vec4(pow(c, vec3(1.0 / 2.2)), 1.0);\n}";

package/dist/scene/glsl.js

@@ -0,0 +1,186 @@
+// The shader code shared by every body: noise, craters and bands for the realistic look, the lighting, and the ring and glow shaders. Strings only.
+export const VERTEX = /* glsl */ `
+varying vec3 vObj;
+varying vec3 vN;
+varying vec3 vW;
+void main() {
+  vObj = vec3(position.z, position.x, position.y);
+  vN = normalize(normalMatrix * normal);
+  vec4 w = modelMatrix * vec4(position, 1.0);
+  vW = w.xyz;
+  gl_Position = projectionMatrix * viewMatrix * w;
+}`;
+/** Noise, craters and the band palette, for the surface code of a body to call. */
+export const PRELUDE = /* glsl */ `
+float hash13(vec3 p) { p = fract(p * 0.1031); p += dot(p, p.zyx + 31.32); return fract((p.x + p.y) * p.z); }
+vec3 hash33(vec3 p) { p = fract(p * vec3(0.1031, 0.1030, 0.0973)); p += dot(p, p.yxz + 33.33); return fract((p.xxy + p.yxx) * p.zyx); }
+float vnoise(vec3 p) {
+  vec3 i = floor(p); vec3 f = fract(p); f = f * f * (3.0 - 2.0 * f);
+  return mix(mix(mix(hash13(i), hash13(i + vec3(1,0,0)), f.x), mix(hash13(i + vec3(0,1,0)), hash13(i + vec3(1,1,0)), f.x), f.y),
+             mix(mix(hash13(i + vec3(0,0,1)), hash13(i + vec3(1,0,1)), f.x), mix(hash13(i + vec3(0,1,1)), hash13(i + vec3(1,1,1)), f.x), f.y), f.z);
+}
+float fbm(vec3 p) { float a = 0.5; float s = 0.0; for (int i = 0; i < 5; i++) { s += a * vnoise(p); p = p * 2.03 + vec3(1.7, 9.2, 3.1); a *= 0.5; } return s; }
+// Craters: a bowl and a raised rim in each cell that has one. Returns a height, negative in a bowl.
+float craters(vec3 p, float freq, float amp, float seed) {
+  vec3 q = p * freq + seed; vec3 ip = floor(q); float h = 0.0;
+  for (int x = -1; x <= 1; x++) for (int y = -1; y <= 1; y++) for (int z = -1; z <= 1; z++) {
+    vec3 c = ip + vec3(float(x), float(y), float(z));
+    float on = step(0.52, hash13(c + 3.7));
+    vec3 ctr = c + hash33(c);
+    float rad = mix(0.12, 0.36, hash13(c + 17.3));
+    float d = length(q - ctr) / rad;
+    float bowl = d < 1.0 ? (d * d - 1.0) : 0.0;
+    float rim = d >= 1.0 ? exp(-pow((d - 1.0) * 5.0, 2.0)) * 0.3 : 0.0;
+    h += on * amp * rad * (bowl + rim);
+  }
+  return h;
+}
+float lon(vec3 p) { return atan(p.y, p.x); }
+float lat(vec3 p) { return asin(clamp(p.z, -1.0, 1.0)); }
+float wrapPi(float a) { return a - 6.2831853 * floor((a + 3.1415927) / 6.2831853); }
+vec3 dirOf(float lonDeg, float latDeg) { float lo = radians(lonDeg); float la = radians(latDeg); return vec3(cos(la) * cos(lo), cos(la) * sin(lo), sin(la)); }
+// One big round bowl with a rim, by longitude, latitude and angular radius in degrees. Negative inside.
+float bowl(vec3 p, float lonDeg, float latDeg, float radDeg, float depth) {
+  float d = acos(clamp(dot(p, dirOf(lonDeg, latDeg)), -1.0, 1.0)) / radians(radDeg);
+  return d < 1.0 ? depth * (d * d - 1.0) : depth * exp(-pow((d - 1.0) * 5.0, 2.0)) * 0.3;
+}
+// A soft oval on the body, 1 inside and 0 outside, by longitude and latitude in degrees.
+float oval(vec3 p, float lon0, float lat0, float rx, float ry, float soft) {
+  float dx = wrapPi(lon(p) - radians(lon0)) * cos(radians(lat0)) / radians(rx);
+  float dy = (lat(p) - radians(lat0)) / radians(ry);
+  return 1.0 - smoothstep(1.0 - soft, 1.0, sqrt(dx * dx + dy * dy));
+}`;
+/** The fragment shader of a body: the surface code goes between the prelude and `main`. */
+export function bodyFragment(surface, painted) {
+    return /* glsl */ `
+precision highp float;
+uniform vec3 uLight;
+uniform float uRelief;
+uniform float uAmbient;
+uniform float uLimb;
+uniform float uWrap;
+uniform vec3 uAtmos;
+uniform float uAtmosPow;
+uniform float uEmissive;
+uniform vec3 uRingN;
+uniform vec2 uRingR;
+uniform float uRingOn;
+uniform sampler2D uRingTex;
+${painted ? "uniform sampler2D uMap;" : ""}
+varying vec3 vObj;
+varying vec3 vN;
+varying vec3 vW;
+${PRELUDE}
+${surface}
+void main() {
+  vec3 p = normalize(vObj);
+  vec4 s = surface(p);
+  vec3 n = normalize(vN);
+  float mu = clamp(n.z, 0.0, 1.0);
+  if (uEmissive > 0.5) {
+    float edge = pow(mu, uLimb);
+    vec3 c = s.rgb * mix(vec3(1.0, 0.55, 0.25), vec3(1.0), edge) * (0.55 + 0.45 * edge);
+    gl_FragColor = vec4(c, 1.0);
+    return;
+  }
+  float dg = dot(n, uLight);
+  vec3 dpx = dFdx(vW); vec3 dpy = dFdy(vW);
+  float hx = dFdx(s.a); float hy = dFdy(s.a);
+  vec3 grad = cross(dpy, n) * hx + cross(n, dpx) * hy;
+  float det = dot(dpx, cross(dpy, n));
+  vec3 nb = normalize(abs(det) * n - sign(det) * uRelief * grad * 22.0);
+  float d = dot(nb, uLight);
+  float diff = clamp((d + uWrap) / (1.0 + uWrap), 0.0, 1.0) * smoothstep(-0.02 - uWrap * 0.6, 0.1 + uWrap * 0.8, dg);
+  if (uRingOn > 0.5) {
+    float den = dot(uLight, uRingN);
+    if (abs(den) > 1e-3) {
+      float t = -dot(vW, uRingN) / den;
+      if (t > 0.0) {
+        vec3 hp = vW + t * uLight;
+        float u = (length(hp) - uRingR.x) / (uRingR.y - uRingR.x);
+        if (u > 0.0 && u < 1.0) diff *= 1.0 - 0.88 * texture2D(uRingTex, vec2(u, 0.5)).a;
+      }
+    }
+  }
+  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 *= mix(1.0, pow(mu, 0.45), uLimb);
+  gl_FragColor = vec4(pow(lit, vec3(1.0 / 2.2)), 1.0);
+}`;
+}
+/** A painted body's surface code: the map by longitude and latitude, with the seam at 180 degrees left alone. */
+export const PAINTED_SURFACE = /* glsl */ `
+vec4 surface(vec3 p) {
+  float u1 = atan(p.y, p.x) / 6.2831853 + 0.5;
+  float u2 = fract(u1 + 0.5) - 0.5;
+  float v = asin(clamp(p.z, -1.0, 1.0)) / 3.1415927 + 0.5;
+  vec2 a = vec2(u1, v); vec2 b = vec2(u2, v);
+  vec2 ax = dFdx(a); vec2 ay = dFdy(a); vec2 bx = dFdx(b); vec2 by = dFdy(b);
+  bool useA = dot(ax, ax) + dot(ay, ay) <= dot(bx, bx) + dot(by, by);
+  vec3 c = textureGrad(uMap, useA ? a : b, useA ? ax : bx, useA ? ay : by).rgb;
+  return vec4(c, dot(c, vec3(0.3, 0.59, 0.11)));
+}`;
+export const RING_FRAGMENT = /* glsl */ `
+precision highp float;
+uniform sampler2D uRingTex;
+uniform vec2 uRingR;
+uniform vec3 uLight;
+uniform vec3 uRingN;
+varying vec3 vL;
+varying vec3 vW;
+void main() {
+  float u = (length(vL.xy) - uRingR.x) / (uRingR.y - uRingR.x);
+  if (u < 0.0 || u > 1.0) discard;
+  vec4 t = texture2D(uRingTex, vec2(u, 0.5));
+  float nl = dot(uRingN, uLight);
+  float side = nl * uRingN.z;
+  float bright = 0.16 + 0.84 * clamp(abs(nl) * 2.0, 0.0, 1.0);
+  if (side < 0.0) bright *= 0.38;
+  float b = dot(vW, uLight);
+  float closest = sqrt(max(dot(vW, vW) - b * b, 0.0));
+  float shadow = b < 0.0 ? smoothstep(1.02, 0.97, closest) : 0.0;
+  vec3 c = pow(t.rgb, vec3(2.2)) * bright * (1.0 - 0.93 * shadow);
+  gl_FragColor = vec4(pow(c, vec3(1.0 / 2.2)), t.a);
+}`;
+export const RING_VERTEX = /* glsl */ `
+varying vec3 vL;
+varying vec3 vW;
+void main() {
+  vL = position;
+  vec4 w = modelMatrix * vec4(position, 1.0);
+  vW = w.xyz;
+  gl_Position = projectionMatrix * viewMatrix * w;
+}`;
+export const GLOW_VERTEX = /* glsl */ `
+varying vec2 vP;
+void main() { vP = position.xy; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
+export const GLOW_FRAGMENT = /* glsl */ `
+precision highp float;
+varying vec2 vP;
+uniform vec3 uColour;
+void main() {
+  float r = length(vP);
+  if (r < 0.98) discard;
+  float a = exp(-(r - 1.0) * 2.4) * 0.62;
+  float streak = 0.82 + 0.18 * sin(atan(vP.y, vP.x) * 9.0 + r * 3.0);
+  a *= streak * smoothstep(3.0, 1.6, r);
+  gl_FragColor = vec4(uColour * a, a);
+}`;
+/** A cheap lit ball for a moon seen small beside its planet. */
+export const BALL_FRAGMENT = /* glsl */ `
+precision highp float;
+uniform vec3 uLight;
+uniform vec3 uColour;
+varying vec3 vObj;
+varying vec3 vN;
+varying vec3 vW;
+${PRELUDE}
+void main() {
+  vec3 n = normalize(vN);
+  float shade = 0.82 + 0.3 * (fbm(normalize(vObj) * 4.0) - 0.5);
+  float diff = max(dot(n, uLight), 0.0);
+  vec3 c = pow(uColour * shade, vec3(2.2)) * (0.04 + 1.1 * diff);
+  gl_FragColor = vec4(pow(c, vec3(1.0 / 2.2)), 1.0);
+}`;

package/dist/scene/look.d.ts

@@ -0,0 +1,106 @@
+import type { BodyId } from "../facts.ts";
+/**
+ * A rim of air: the colour it scatters (0 to 1 each), how strong it is and how thin the rim is.
+ *
+ * @example
+ * ```ts
+ * import { registerLook, type Atmosphere } from "@johnmorrisdotca/wakusei-planets/look";
+ *
+ * const air: Atmosphere = { colour: [0.5, 0.7, 1], strength: 0.4 };
+ * registerLook({ id: "venus", surface: "vec4 surface(vec3 p) { return vec4(vec3(0.9), 0.0); }", atmosphere: air });
+ * console.log(air.strength);
+ * ```
+ */
+export interface Atmosphere {
+    colour: readonly [number, number, number];
+    strength: number;
+    /** How thin the rim is: higher is thinner. Default 3. */
+    power?: number;
+}
+/**
+ * The painted look of a body: a surface map in the package's `textures` folder, as widths from the smallest up.
+ *
+ * @example
+ * ```ts
+ * import { type PaintedMap } from "@johnmorrisdotca/wakusei-planets/look";
+ *
+ * const map: PaintedMap = { map: "mars", widths: [512, 1024, 2048] };
+ * console.log(map.widths.length);
+ * ```
+ */
+export interface PaintedMap {
+    /** The file name before `-<width>.webp`, for example `mars`. */
+    map: string;
+    /** The widths made, smallest first: the smallest is drawn first and sharper ones are fetched when the view is zoomed in. */
+    widths: readonly number[];
+    /** The smallest width that is not in the npm package: it is fetched from the repository's own files (see `texture-far-base`). */
+    far?: number;
+    /** How much of the map's brightness is also relief. Default 0. */
+    relief?: number;
+    /** A picture of the body's rings for this look, one pixel high: colour and opacity from the inner edge to the outer, `width` samples. Used instead of the table's strip when it loads. */
+    rings?: {
+        map: string;
+        width: number;
+        from: number;
+        to: number;
+    };
+    /** The painted pictures' credit line, for the page. */
+    credit?: string;
+}
+/**
+ * What a body looks like in three.js: the shader code of its surface, how it glows, its atmosphere and its painted map.
+ *
+ * @example
+ * ```ts
+ * import { registerLook, type BodyLook } from "@johnmorrisdotca/wakusei-planets/look";
+ *
+ * const look: BodyLook = { id: "moon", surface: "vec4 surface(vec3 p) { return vec4(vec3(0.7), 0.0); }", ambient: 0.02 };
+ * console.log(registerLook(look).id);
+ * ```
+ */
+export interface BodyLook {
+    id: BodyId;
+    /** GLSL that defines `vec4 surface(vec3 p)`: `p` is the unit position on the body (x toward longitude 0 on the equator, y toward 90 degrees east, z the north pole); return the colour in `rgb` and the height in `a`. */
+    surface: string;
+    /** A glowing body (the Sun): no shading from outside light. */
+    emissive?: boolean;
+    atmosphere?: Atmosphere;
+    /** How much the disc darkens toward the limb, 0 to 1. Default 0. */
+    limb?: number;
+    /** How strongly the height shows as relief, 0 to 2. Default 0.6. */
+    relief?: number;
+    /** How far light wraps round the terminator: 0 is a hard edge (no air), 0.3 a soft one. Default 0.04, or 0.3 with an atmosphere. */
+    wrap?: number;
+    /** How much of the night side shows (0 to 1). Default 0.04. */
+    ambient?: number;
+    painted?: PaintedMap;
+}
+/**
+ * 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 declare function registerLook(look: BodyLook): BodyLook;
+/**
+ * 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 declare const lookOf: (id: BodyId) => BodyLook | undefined;