@buoy-gg/shared-ui 7.0.22 → 7.0.24

package/lib/module/ui/backgrounds/variants/deepField.js

@@ -0,0 +1,347 @@
+"use strict";
+
+/**
+ * Deep Field — a faithful port of the Everlights `ParallaxDriftBackground`.
+ *
+ * The sibling `Starfield` preset is a cheap approximation of the same idea: 99
+ * stars quantised into five depth bands. This one reproduces the original's
+ * field exactly — same seed, same generator call order, same 160 stars, same
+ * `z = zNear + zSpan·√rnd()` far-plane bias, same sizes, brightnesses, palette
+ * and drift. Drop the constants below into the Skia version and you get the
+ * same sky.
+ *
+ * WHAT COULDN'T COME ACROSS 1:1, and what was done instead:
+ *
+ *  - **Continuous per-star speed.** The original runs a worklet per star, so
+ *    every one of the 160 drifts at its own `drift/z`. Here a distinct speed
+ *    means a distinct animated node, so SPEED (and only speed) is quantised
+ *    into 18 bands — banded uniformly in 1/z, which is what speed is
+ *    proportional to, so the steps are even. Size, brightness, colour and
+ *    twinkle phase all stay per-star and exact, and those are the properties
+ *    the eye actually reads as depth.
+ *
+ *  - **The soft bulb sprite.** The original bakes one 64px sprite (blurred halo
+ *    at r=6/α.30 over a blurred core at r=4/α1) and stamps it at `dia`. That is
+ *    why stars stay fine points even at dia=20 — the lit core is only ~13% of
+ *    the stamp. There is no blur primitive here, so each star is a small solid
+ *    core at that same 13%, and the nearer ones get one or two concentric
+ *    discs standing in for the halo. Far stars end up a single ~1px dot, which
+ *    is what the sprite renders them as anyway.
+ *
+ *  - **Additive blending.** `blendMode="plus"` becomes ordinary alpha
+ *    compositing. Over a near-black base the two agree except where stars
+ *    overlap, which at this density is rare.
+ *
+ * It costs roughly twice the cheap Starfield — see `registry.tsx` — which is
+ * the whole reason both are in the catalogue.
+ */
+
+import { memo } from "react";
+import { Animated, View } from "react-native";
+import { absoluteFill } from "../../../utils/absoluteFill.js";
+import { Base, RadialGlow, RasterLayer, useLoop, usePulse } from "../primitives.js";
+import { flattenOver, mulberry32, withAlpha } from "../rng.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// The original's shipping constants, verbatim.
+// ---------------------------------------------------------------------------
+const COUNT = 160;
+const DRIFT = 0.016; // horizontal travel/sec at z=1, as a fraction of width
+const BASE_DIA = 5; // sprite diameter px at z=1
+const Z_NEAR = 0.25;
+const Z_FAR = 1.0;
+const Z_SPAN = Z_FAR - Z_NEAR;
+const MAX_DIA = BASE_DIA / Z_NEAR;
+const TWINKLE = 0.08;
+
+/** The classic white/blue mix — `[r,g,b]` 0..1 in the original. */
+const PALETTE = ["#FFFFFF", "#B3D9FF", "#8CB3FF"];
+
+/** The backdrop the field sits on — also what `opaque` mode flattens against. */
+const BASE_COLOR = "#050609";
+
+/**
+ * Default speed bands. 18 is the point where stepping stops being visible:
+ * adjacent bands differ by ~6% in speed, well under what reads as a seam. The
+ * bench route sweeps this, since it is the main lever on cost.
+ */
+const BAND_COUNT = 18;
+/** Twinkle groups — bands are round-robined across these. */
+const TWINKLE_GROUPS = 4;
+const TWINKLE_MS = [4200, 4900, 5600, 6300];
+
+/** How the ±8% brightness wobble is applied. */
+
+/** How many concentric discs stand in for the sprite's blurred halo. */
+
+/**
+ * The original field, regenerated.
+ *
+ * The generator order matters as much as the seed: the source pulls fx, fy, z
+ * and tw off ONE mulberry32 stream per star, so drawing them in any other order
+ * — four separate `scatter()` calls, say — gives a different sky from the same
+ * seed. Built once at module load.
+ */
+function buildField(count) {
+  const rnd = mulberry32((0x5747 ^ count) >>> 0);
+  const stars = [];
+  for (let i = 0; i < count; i++) {
+    const fx = rnd();
+    const fy = rnd();
+    // Bias toward the far plane so close, fast streaks stay sparse.
+    const z = Z_NEAR + Z_SPAN * Math.sqrt(rnd());
+    const tw = rnd() * Math.PI * 2;
+    const dia = Math.min(BASE_DIA / z, MAX_DIA);
+    const near = (Z_FAR - z) / Z_SPAN; // 0 far → 1 near
+    stars.push({
+      fx,
+      fy,
+      z,
+      tw,
+      // 0.15·dia ≈ the sprite's lit core (r=4 of 64, blurred), with a 1.1px
+      // floor so the farthest stars still land on a pixel.
+      core: Math.max(1.1, dia * 0.15),
+      halo: dia * 0.3,
+      haloDiscs: z < 0.45 ? 2 : z < 0.7 ? 1 : 0,
+      alpha: 0.2 + 0.8 * near,
+      color: PALETTE[Math.floor((tw * 0.5 + 0.5) * PALETTE.length) % PALETTE.length]
+    });
+  }
+  return stars;
+}
+
+/**
+ * Fields by star count, built on demand.
+ *
+ * 160 is the real preset. The larger counts exist for AMPLIFIED benchmarking:
+ * at 160 the difference between two rendering structures is ~2 CPU points,
+ * which on real hardware sits under a noise floor several times that — so the
+ * variants are compared at a scale where the difference is unmistakable, and
+ * the structure that wins there is the one worth shipping at 160.
+ *
+ * Note the seed is `0x5747 ^ count`, exactly as the original does it, so each
+ * count is its own field rather than a prefix of a bigger one. That is fine
+ * here: only the 160 field has to match Everlights.
+ */
+const fieldCache = new Map();
+function getField(count) {
+  const cached = fieldCache.get(count);
+  if (cached) return cached;
+  const built = buildField(count);
+  fieldCache.set(count, built);
+  return built;
+}
+const FIELD = getField(COUNT);
+
+/**
+ * Bucket by 1/z (∝ speed) rather than by z, so the bands are evenly spaced in
+ * the quantity being quantised. Each band carries its member stars and the
+ * speed of its centre. Cached per count — the bench route asks for several.
+ */
+const bandCache = new Map();
+function buildBands(count, starCount) {
+  const key = `${count}:${starCount}`;
+  const cached = bandCache.get(key);
+  if (cached) return cached;
+  const field = getField(starCount);
+  const invNear = 1 / Z_NEAR; // 4
+  const invFar = 1 / Z_FAR; // 1
+  const span = invNear - invFar;
+  const buckets = Array.from({
+    length: count
+  }, () => []);
+  for (const star of field) {
+    const t = (1 / star.z - invFar) / span;
+    const idx = Math.min(count - 1, Math.max(0, Math.floor(t * count)));
+    buckets[idx].push(star);
+  }
+  const bands = buckets.map((stars, i) => ({
+    stars,
+    // z at the band's centre, back out of the 1/z bucketing.
+    z: 1 / (invFar + (i + 0.5) / count * span)
+  }));
+  bandCache.set(key, bands);
+  return bands;
+}
+const DeepBand = /*#__PURE__*/memo(function DeepBand({
+  bands,
+  index,
+  width,
+  height,
+  animated,
+  raster,
+  halo,
+  opaque,
+  drift,
+  opacity
+}) {
+  const band = bands[index];
+  // One full width of travel takes z / DRIFT seconds, exactly as in the
+  // original's `phase = fx - t·(drift/z)`.
+  const driftValue = useLoop(band.z / DRIFT * 1000, animated && drift);
+  const translateX = driftValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -width]
+  });
+  // Over a known backdrop an opaque colour is pixel-identical to the
+  // translucent one — the GPU just skips the blend.
+  const paint = (color, alpha) => opaque ? flattenOver(color, alpha, BASE_COLOR) : withAlpha(color, alpha);
+  const parts = [];
+  for (let i = 0; i < band.stars.length; i++) {
+    const star = band.stars[i];
+    const y = star.fy * height;
+    const discs = halo === "none" ? 0 : halo === "flat" ? star.haloDiscs > 0 ? 1 : 0 : star.haloDiscs;
+    // Drawn twice, one width apart, so the layer tiles seamlessly when the
+    // loop snaps back to 0.
+    for (let copy = 0; copy < 2; copy++) {
+      const x = star.fx * width + copy * width;
+      const key = `${i}-${copy}`;
+      for (let h = 0; h < discs; h++) {
+        const d = star.halo * (h === 0 ? 1 : 0.6);
+        parts.push(/*#__PURE__*/_jsx(View, {
+          style: {
+            position: "absolute",
+            left: x - d / 2,
+            top: y - d / 2,
+            width: d,
+            height: d,
+            borderRadius: d / 2,
+            // The sprite's halo is α.30 of the core; scaled by the star's own
+            // depth brightness like everything else.
+            backgroundColor: paint(star.color, star.alpha * 0.3)
+          }
+        }, `${key}-h${h}`));
+      }
+      parts.push(/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: x - star.core / 2,
+          top: y - star.core / 2,
+          width: star.core,
+          height: star.core,
+          borderRadius: star.core / 2,
+          backgroundColor: paint(star.color, star.alpha)
+        }
+      }, key));
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: width * 2,
+      height
+    },
+    // Fused mode puts the wobble on THIS layer instead of a wrapper above
+    // it, so the twinkle costs no extra composited surface.
+    opacity ? {
+      opacity,
+      transform: [{
+        translateX
+      }]
+    } : {
+      transform: [{
+        translateX
+      }]
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(RasterLayer, {
+      raster: raster,
+      style: {
+        width: width * 2,
+        height
+      },
+      children: parts
+    })
+  });
+});
+
+/**
+ * The four wobble values. The original wobbles each star by
+ * `1 + 0.08·sin(t·3 + tw)`; per-star that would be 160 nodes, so bands are
+ * round-robined across four pulses at slightly different periods — same ±8%
+ * amplitude, and the differing periods keep the sky from pulsing as a unit.
+ *
+ * Fixed count, called unconditionally, so hook order never varies with props.
+ */
+function useTwinkles(animated, enabled) {
+  const a = usePulse(TWINKLE_MS[0], animated && enabled);
+  const b = usePulse(TWINKLE_MS[1], animated && enabled);
+  const c = usePulse(TWINKLE_MS[2], animated && enabled);
+  const d = usePulse(TWINKLE_MS[3], animated && enabled);
+  const range = {
+    inputRange: [0, 1],
+    outputRange: [1 - TWINKLE, 1]
+  };
+  return [a.interpolate(range), b.interpolate(range), c.interpolate(range), d.interpolate(range)];
+}
+/**
+ * The tunable body. `DeepField` below is this with the shipping defaults; the
+ * bench route (`example-dev-build/app/bg-bench.tsx`) drives the knobs so every
+ * measured variant is this exact code, not a copy of it.
+ */
+export const DeepFieldTunable = /*#__PURE__*/memo(function DeepFieldTunable({
+  width,
+  height,
+  animated,
+  bandCount = BAND_COUNT,
+  raster = true,
+  twinkle = "group",
+  halo = "full",
+  opaque = false,
+  drift = true,
+  starCount = COUNT
+}) {
+  const bands = buildBands(bandCount, starCount);
+  const twinkles = useTwinkles(animated, twinkle !== "off");
+  const bandViews = [];
+  for (let i = 0; i < bandCount; i++) {
+    bandViews.push(/*#__PURE__*/_jsx(DeepBand, {
+      bands: bands,
+      index: i,
+      width: width,
+      height: height,
+      animated: animated,
+      raster: raster,
+      halo: halo,
+      opaque: opaque,
+      drift: drift,
+      opacity: twinkle === "fused" ? twinkles[i % TWINKLE_GROUPS] : undefined
+    }, i));
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(Base, {
+      color: BASE_COLOR
+    }), /*#__PURE__*/_jsx(RadialGlow, {
+      size: width * 1.7,
+      color: "#1E3A8A",
+      alpha: 0.16,
+      rings: 8,
+      falloff: 2.1,
+      style: {
+        position: "absolute",
+        left: -width * 0.35,
+        top: -width
+      }
+    }), twinkle === "group" ?
+    // Group mode: one full-screen Animated.View per pulse, each wrapping
+    // its share of the bands. Costs four extra composited surfaces.
+    Array.from({
+      length: TWINKLE_GROUPS
+    }, (_, g) => /*#__PURE__*/_jsx(Animated.View, {
+      style: [absoluteFill, {
+        opacity: twinkles[g]
+      }],
+      pointerEvents: "none",
+      children: bandViews.filter((_, i) => i % TWINKLE_GROUPS === g)
+    }, g)) : bandViews]
+  });
+});
+export const DeepField = /*#__PURE__*/memo(function DeepField(props) {
+  return /*#__PURE__*/_jsx(DeepFieldTunable, {
+    ...props
+  });
+});