dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/upstream/demos/03-isometric/js/night5.js

@@ -0,0 +1,180 @@
+// Reel v5.1 only (?v5=1): the NIGHT grade of ISOPOLIS. Jury note: the film sat between two light films and its lilac
+// matched 04-3d-render, so under v5 the city plays at night. Everything here re-grades the already-built scene
+// (world.js stays read-only, the default path never imports this file):
+//  - navy/indigo void + dim iso floor dots (the cyan ping and the hero wave glow stay),
+//  - a cool moon key + navy hemisphere instead of the warm sun (the three iso faces keep their light/mid/dark read),
+//  - deep indigo soil strata and tile/building albedos pulled toward navy,
+//  - warm amber windows (a few lit while the city grows, ~86 % light up with the hero wave, as in the film),
+//  - amber street lamps on the ring road that switch on as the hero wave passes them,
+//  - a sustained light column after the hit, lower bloom threshold, darker vignette, navy-glass callout cards.
+// Knobs (query, v5 only): nk = albedo scale, nsun/nhemi = moon/hemi intensity, nexp = exposure (applied in main.js).
+import * as THREE from 'three';
+import * as A from './anim.js';
+import { LAYER_GLOW } from './render.js';
+
+const C = (h) => new THREE.Color(h);
+
+export function applyNight(world, acc, cues, q, o = {}) {
+  const { scene, bgU, island, sun, onUpdate, hopPatch } = world;
+  const num = (k, d) => (q.get(k) != null ? +q.get(k) : d);
+  const K = num('nk', 0.8), SUN_I = num('nsun', 1.35), HEMI_I = num('nhemi', 1.25);
+  const skip = o.skip || new Set();
+
+  // ------------------------------------------------------------------ lights (re-set after every world.update)
+  let hemi = null, fill = null;
+  scene.traverse((ob) => { if (ob.isHemisphereLight) hemi = ob; else if (ob.isDirectionalLight && ob !== sun) fill = ob; });
+  const MOON = C('#9DB0FF'), HEMI_SKY = C('#5360C4'), HEMI_GND = C('#17153F'), FILL = C('#7A5CE0');
+  scene.environmentIntensity = 0.12;
+
+  // ------------------------------------------------------------------ void + floor
+  bgU.uTop.value.set('#' + (q.get('nbg') || '42489E')); bgU.uMid.value.set('#32368A'); bgU.uLow.value.set('#232770');
+  bgU.uTopK.value.set('#40448E'); bgU.uMidK.value.set('#32357E'); bgU.uLowK.value.set('#252866'); // pre-wave: greyer, same weight
+  bgU.uDot.value.set('#5B64C0');
+  bgU.uHot.value.set('#46D2DC'); // the cyan ping/wave: a touch softer, it carries more contrast on navy
+  const fu = acc.finalMat.uniforms;
+  fu.uVigColor.value.set(0.42, 0.42, 0.72); fu.uVignette.value = 0.3;
+  acc.bloom.threshold = num('nbt', 0.9); acc.bloom.strength = num('nbs', 0.2); acc.bloom.radius = num('nbr', 0.35);
+
+  // ------------------------------------------------------------------ albedos
+  // linear-space scale toward indigo: keeps each colour's hue identity (mint -> teal-navy, coral -> plum-rose) at night
+  const TINT = new THREE.Color(0.78, 0.84, 1.0);
+  // light colours are pulled down harder than mid tones (white clay 0.55 K, mint 0.72 K) so the island reads navy, not grey
+  const nightCol = (c, k = K) => { const l = 0.2126 * c.r + 0.7152 * c.g + 0.0722 * c.b; c.multiply(TINT).multiplyScalar(k * (1 - 0.45 * Math.min(l, 1))); return c; };
+  const KC = K * num('nkc', 1.0); // clay phase (before the hero wave repaints the city): darker still, the unlit city
+  const done = new Set();
+  const coreSet = new Set(); world.v5.core.traverse((ob) => coreSet.add(ob));
+  const instColored = new Set();
+  scene.traverse((ob) => { if (ob.isInstancedMesh && ob.instanceColor) instColored.add(ob.material); });
+  const winMats = [];
+  scene.traverse((ob) => {
+    if (!ob.isMesh || skip.has(ob)) return;
+    const mats = Array.isArray(ob.material) ? ob.material : [ob.material];
+    for (const m of mats) {
+      if (!m || done.has(m) || !m.isMeshStandardMaterial) continue;
+      done.add(m);
+      const u = m.userData.u;
+      const isCoreWin = u && u.uWinOn && coreSet.has(ob);
+      if (isCoreWin) continue; // the CORE is already ink + cyan: it reads as the lit hero tower at night as it is
+      if (!instColored.has(m)) nightCol(m.color);
+      m.envMapIntensity *= 0.6;
+      if (u && u.uClay) nightCol(u.uClay.value, KC);
+      if (u && u.uWinOn) { // facade windows: amber at night
+        u.uWinOn.value.set('#FFB85C'); u.uWinOff.value.set('#1C2052'); u.uClayWin.value.set('#23275A');
+        u.uEmit.value = num('nwin', 1.5); u.uLitFrac.value = Math.min(u.uLitFrac.value, 0.42);
+        winMats.push(m);
+      }
+      if (m.emissiveIntensity > 0 && m.emissive.getHex() !== 0) m.emissiveIntensity *= 1.6; // headlights, masts, drone eyes
+    }
+  });
+  // cloud puffs: moonlit, faint
+  scene.traverse((ob) => {
+    if (ob.isMesh && ob.material && ob.material.emissive && ob.material.emissive.getHex() === C('#F1EEFF').getHex()) {
+      ob.material.color.multiplyScalar(0.45); ob.material.emissive.set('#3A44A8'); ob.material.emissiveIntensity = 0.4; // faint blue moonlit puffs
+    }
+  });
+  // instance colours (tiles, water, trees) + the tiles' clay face attribute
+  const tmp = new THREE.Color();
+  scene.traverse((ob) => {
+    if (!ob.isInstancedMesh) return;
+    if (ob.instanceColor) {
+      for (let i = 0; i < ob.count; i++) { ob.getColorAt(i, tmp); ob.setColorAt(i, nightCol(tmp)); }
+      ob.instanceColor.needsUpdate = true;
+    }
+    const ac = ob.geometry.attributes.aClay;
+    if (ac && !ac.userData?.night) {
+      for (let i = 0; i < ac.count; i++) { tmp.setRGB(ac.getX(i), ac.getY(i), ac.getZ(i)); nightCol(tmp, KC); ac.setXYZ(i, tmp.r, tmp.g, tmp.b); }
+      ac.userData = { night: true }; ac.needsUpdate = true;
+    }
+  });
+  // soil strata (the uniforms are created in onBeforeCompile: override them there)
+  const STRATA = ['#3C4192', '#2C3076', '#23265F', '#1B1D4B'].map(C);
+  scene.traverse((ob) => {
+    const m = ob.material;
+    if (!ob.isMesh || !m || !m.customProgramCacheKey || !String(m.customProgramCacheKey()).includes('soil-v1') || m.userData.night) return;
+    m.userData.night = true;
+    const prev = m.onBeforeCompile;
+    m.onBeforeCompile = (sh, r) => { prev.call(m, sh, r); ['c1', 'c2', 'c3', 'c4'].forEach((k, i) => sh.uniforms[k].value.copy(STRATA[i])); };
+    m.needsUpdate = true;
+  });
+
+  // ------------------------------------------------------------------ street lamps on the ring road (outer curb)
+  const lampLoop = (() => { // same rounded-square loop as the road, offset to the outer curb
+    const a = 3.5 + 0.43, rc = 0.5 + 0.43, st = 2 * (a - rc), arc = Math.PI / 2 * rc, seg = st + arc, L = 4 * seg;
+    return { L, at(s) {
+      s = ((s % L) + L) % L; const k = Math.floor(s / seg), r = s - k * seg;
+      const starts = [[a, -(a - rc)], [a - rc, a], [-a, a - rc], [-(a - rc), -a]], dirs = [[0, 1], [-1, 0], [0, -1], [1, 0]];
+      const corners = [[a - rc, a - rc], [-(a - rc), a - rc], [-(a - rc), -(a - rc)], [a - rc, -(a - rc)]];
+      if (r < st) return { x: starts[k][0] + dirs[k][0] * r, z: starts[k][1] + dirs[k][1] * r };
+      const ang = [0, Math.PI / 2, Math.PI, -Math.PI / 2][k] + (r - st) / rc;
+      return { x: corners[k][0] + rc * Math.cos(ang), z: corners[k][1] + rc * Math.sin(ang) };
+    } };
+  })();
+  const PULSE_T = world.v5.PULSE_T, PULSE_V = cues.pulse_speed;
+  const postMat = new THREE.MeshStandardMaterial({ color: C('#2A2E62'), roughness: 0.5, envMapIntensity: 0.3 });
+  hopPatch(postMat);
+  const postGeo = new THREE.CylinderGeometry(0.014, 0.02, 0.5, 8).translate(0, 0.25, 0);
+  const armGeo = new THREE.BoxGeometry(0.1, 0.018, 0.028).translate(0.04, 0.5, 0);
+  const headGeo = new THREE.SphereGeometry(0.042, 14, 10);
+  const poolGeo = new THREE.CircleGeometry(0.5, 40).rotateX(-Math.PI / 2);
+  const poolVert = 'varying vec2 vP; void main(){ vP = position.xz / 0.5; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.); }';
+  const poolFrag = 'uniform float uI; uniform vec3 uCol; varying vec2 vP; void main(){ float r = length(vP); float a = uI * pow(max(1.0 - r, 0.0), 1.8); gl_FragColor = vec4(uCol * a, a); }';
+  const lamps = [];
+  const NL = 20;
+  for (let k = 0; k < NL; k++) {
+    const p = lampLoop.at((k + 0.25) / NL * lampLoop.L);
+    const g = new THREE.Group(); g.position.set(p.x, 0, p.z); island.add(g);
+    const post = new THREE.Mesh(postGeo, postMat); post.castShadow = true; g.add(post);
+    const arm = new THREE.Mesh(armGeo, postMat); arm.rotation.y = Math.atan2(p.x, p.z) + Math.PI / 2; g.add(arm); // arm leans over the road
+    const hm = new THREE.MeshStandardMaterial({ color: C('#FFE2A8'), roughness: 0.3, emissive: C('#FFB14E'), emissiveIntensity: 0 });
+    hopPatch(hm);
+    const head = new THREE.Mesh(headGeo, hm);
+    const inward = new THREE.Vector3(-p.x, 0, -p.z).normalize();
+    head.position.set(inward.x * 0.08, 0.49, inward.z * 0.08); g.add(head);
+    const pm = new THREE.ShaderMaterial({ uniforms: { uI: { value: 0 }, uCol: { value: C('#FFA94A') } }, vertexShader: poolVert, fragmentShader: poolFrag,
+      transparent: true, depthWrite: false, blending: THREE.AdditiveBlending });
+    const pool = new THREE.Mesh(poolGeo, pm); pool.position.set(inward.x * 0.18, 0.004, inward.z * 0.18); pool.layers.set(LAYER_GLOW); g.add(pool);
+    const r = Math.max(Math.abs(p.x), Math.abs(p.z));
+    lamps.push({ g, hm, pm, t0: cues.roads + 0.1 + k * 0.012, ta: PULSE_T + Math.max(r - 1.0, 0) / PULSE_V });
+  }
+  onUpdate((T) => {
+    for (const L of lamps) {
+      const s = A.spring(T - L.t0, 22, 0.5, 9);
+      L.g.visible = T > L.t0; L.g.scale.setScalar(Math.max(s, 1e-4));
+      const u = T - L.ta;
+      const on = u < 0 ? 0.18 : 1 + 1.6 * Math.exp(-u * 6); // dim before the hit, flash on as the wave passes, then steady
+      L.hm.emissiveIntensity = (T > L.t0 + 0.3 ? 1 : 0) * on * 2.4;
+      L.pm.uniforms.uI.value = u < 0 ? 0 : 0.55 * A.smooth(A.inv(0.12, 0.55, u));
+    }
+  });
+
+  // ------------------------------------------------------------------ light column: brighter, and it keeps burning
+  const beam = world.v5.beam;
+  const beam2 = world.v5.core.children.find((c) => c !== beam && c.material && c.material.uniforms && c.material.uniforms.uI && c.geometry.type === 'CylinderGeometry');
+  const hold = (T) => { const u = T - PULSE_T; return u <= 0 ? 0 : 0.8 * A.smooth(A.inv(0.15, 0.6, u)) * (1 - A.smooth(A.inv(7.72, 8.02, T))); };
+  const env = (T) => { const u = T - PULSE_T; return u < 0 ? 0 : (u < 0.012 ? u / 0.012 : Math.exp(-(u - 0.012) * 5.0)); };
+
+  // ------------------------------------------------------------------ callout cards: navy glass
+  const st = document.createElement('style');
+  st.textContent = `
+    .tg .face { background: rgba(26,29,78,0.94) !important; box-shadow: 0 0 0 1.5px rgba(125,246,247,0.35), 0 10px 0 -4px rgba(0,0,0,0.25) !important; }
+    .tg .lab, .tg .val { color: #F4F1FF !important; } .tg .en { color: #9FA8F0 !important; } .tg .unit { color: rgba(244,241,255,0.7) !important; }
+    .tg svg.lead polyline { stroke: rgba(190,198,255,0.75); } .tg svg.lead circle.kn { fill: #1A1D4E; stroke: rgba(190,198,255,0.75); }
+    .tg svg.spark line { stroke: rgba(190,198,255,0.25); } .tg .dot { box-shadow: 0 0 0 3px rgba(26,29,78,0.92) !important; }`;
+  document.head.appendChild(st);
+
+  // pose-time overrides. Call AFTER world.update(T).
+  function post(T) {
+    const kc = 1 - A.smooth(A.inv(PULSE_T, PULSE_T + 0.4, T)); // clay phase (no city lights yet): brighter moon + sky fill
+    sun.color.copy(MOON); sun.intensity = SUN_I * (1 + 0.45 * kc);
+    if (hemi) { hemi.color.copy(HEMI_SKY); hemi.groundColor.copy(HEMI_GND); hemi.intensity = HEMI_I * (1 + 0.3 * kc); }
+    if (fill) { fill.color.copy(FILL); fill.intensity = 0.35; }
+    const u = T - PULSE_T;
+    if (u > 0) {
+      beam.material.uniforms.uI.value = env(T) * 3.4 + 0.1 + hold(T);
+      if (beam2) beam2.material.uniforms.uI.value = env(T) * 0.6 + hold(T) * 0.35;
+    }
+  }
+  // link alpha of the column (white core) for linkAt
+  const columnA = (T) => Math.min(1, env(T) * 1.5 + hold(T) * 1.2);
+  return { post, hold, columnA, lamps };
+}

package/lib/motion/mgstyles/upstream/demos/03-isometric/js/render.js

@@ -0,0 +1,202 @@
+// Progressive accumulation renderer: N sub-renders per output frame, each with sub-pixel jitter (AA),
+// jittered sun direction (soft area shadows), sub-frame time (motion blur) and a rotated SSAO kernel.
+import * as THREE from 'three';
+import { FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { rng } from './anim.js';
+
+const LAYER_SOLID = 0, LAYER_GLOW = 1, LAYER_BG = 2;
+export { LAYER_SOLID, LAYER_GLOW, LAYER_BG };
+
+const aoVert = /* glsl */`varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`;
+const aoFrag = /* glsl */`
+precision highp float;
+uniform sampler2D tBeauty; uniform sampler2D tNormal; uniform sampler2D tDepth;
+uniform mat4 uProj; uniform mat4 uProjInv;
+uniform vec3 uKernel[16];
+uniform float uRadius, uStrength, uWeight, uSeed, uBias;
+varying vec2 vUv;
+vec3 viewPosAt(vec2 uv, float d){ vec4 v = uProjInv * vec4(uv*2.0-1.0, d*2.0-1.0, 1.0); return v.xyz / v.w; }
+float ign(vec2 p){ return fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715)))); }
+void main(){
+  vec4 beauty = texture2D(tBeauty, vUv);
+  float d = texture2D(tDepth, vUv).x;
+  float ao = 1.0;
+  if (d < 0.99999) {
+    vec3 P = viewPosAt(vUv, d);
+    vec3 N = normalize(texture2D(tNormal, vUv).xyz * 2.0 - 1.0);
+    float a = (ign(gl_FragCoord.xy) + uSeed) * 6.2831853;
+    vec3 rv = vec3(cos(a), sin(a), 0.37);
+    vec3 T = normalize(rv - N * dot(rv, N));
+    vec3 B = cross(N, T);
+    mat3 tbn = mat3(T, B, N);
+    float occ = 0.0;
+    for (int i = 0; i < 16; i++) {
+      vec3 Q = P + tbn * uKernel[i] * uRadius;
+      vec4 q = uProj * vec4(Q, 1.0);
+      vec2 quv = q.xy / q.w * 0.5 + 0.5;
+      float sd = texture2D(tDepth, quv).x;
+      if (sd >= 0.99999) continue;
+      vec3 S = viewPosAt(quv, sd);
+      float range = smoothstep(0.0, 1.0, uRadius / max(abs(P.z - S.z), 1e-4));
+      occ += (S.z >= Q.z + uBias ? 1.0 : 0.0) * range;
+    }
+    ao = clamp(1.0 - uStrength * occ / 16.0, 0.0, 1.0);
+  }
+  gl_FragColor = vec4(beauty.rgb * ao * uWeight, uWeight);
+}`;
+
+const finalFrag = /* glsl */`
+precision highp float;
+uniform sampler2D tAccum; uniform float uTime; uniform vec2 uRes; uniform float uExposure; uniform float uGrain;
+uniform float uVignette; uniform vec3 uVigColor;
+varying vec2 vUv;
+vec3 neutral(vec3 color){
+  const float startCompression = 0.8 - 0.04;
+  const float desaturation = 0.15;
+  float x = min(color.r, min(color.g, color.b));
+  float offset = x < 0.08 ? x - 6.25 * x * x : 0.04;
+  color -= offset;
+  float peak = max(color.r, max(color.g, color.b));
+  if (peak < startCompression) return color;
+  const float d = 1.0 - startCompression;
+  float newPeak = 1.0 - d * d / (peak + d - startCompression);
+  color *= newPeak / peak;
+  float g = 1.0 - 1.0 / (desaturation * (peak - newPeak) + 1.0);
+  return mix(color, vec3(newPeak), g);
+}
+vec3 toSRGB(vec3 c){ return mix(c * 12.92, 1.055 * pow(c, vec3(1.0/2.4)) - 0.055, step(0.0031308, c)); }
+float h12(vec2 p){ vec3 p3 = fract(vec3(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }
+void main(){
+  vec3 c = texture2D(tAccum, vUv).rgb * uExposure;
+  // vignette in linear light, tinted
+  vec2 q = vUv - 0.5; q.x *= uRes.x / uRes.y;
+  float v = smoothstep(0.35, 1.25, length(q));
+  c = mix(c, c * uVigColor, v * uVignette);
+  c = neutral(c);
+  c = toSRGB(clamp(c, 0.0, 1.0));
+  // film grain (seeded by frame time) + triangular dither against banding
+  vec2 px = gl_FragCoord.xy;
+  float fr = floor(uTime * 30.0 + 0.5);
+  float g = h12(px + fr * 37.17) + h12(px * 1.37 + fr * 11.3) - 1.0;
+  float lum = dot(c, vec3(0.299, 0.587, 0.114));
+  c += g * uGrain * (0.6 + 0.8 * lum * (1.0 - lum));
+  float dth = (h12(px + 0.5 + fr) - h12(px + 7.3 - fr)) / 255.0;
+  c += dth;
+  gl_FragColor = vec4(c, 1.0);
+}`;
+
+export class Accumulator {
+  constructor(renderer, width, height) {
+    this.r = renderer;
+    this.W = width; this.H = height;
+    const opts = { type: THREE.HalfFloatType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
+    this.rtNormal = new THREE.WebGLRenderTarget(width, height, { ...opts, depthTexture: new THREE.DepthTexture(width, height, THREE.FloatType) });
+    this.rtNormal.depthTexture.minFilter = THREE.NearestFilter;
+    this.rtNormal.depthTexture.magFilter = THREE.NearestFilter;
+    this.rtBeauty = new THREE.WebGLRenderTarget(width, height, { ...opts, depthBuffer: true });
+    this.rtAccum = new THREE.WebGLRenderTarget(width, height, { type: THREE.FloatType, minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, depthBuffer: false });
+    this.normalMat = new THREE.MeshNormalMaterial();
+    this.aoMat = new THREE.ShaderMaterial({
+      vertexShader: aoVert, fragmentShader: aoFrag,
+      uniforms: {
+        tBeauty: { value: this.rtBeauty.texture }, tNormal: { value: this.rtNormal.texture },
+        tDepth: { value: this.rtNormal.depthTexture },
+        uProj: { value: new THREE.Matrix4() }, uProjInv: { value: new THREE.Matrix4() },
+        uKernel: { value: Array.from({ length: 16 }, () => new THREE.Vector3()) },
+        uRadius: { value: 0.55 }, uStrength: { value: 1.05 }, uWeight: { value: 1 }, uSeed: { value: 0 }, uBias: { value: 0.015 },
+      },
+      depthTest: false, depthWrite: false,
+      blending: THREE.CustomBlending, blendEquation: THREE.AddEquation,
+      blendSrc: THREE.OneFactor, blendDst: THREE.OneFactor,
+      blendSrcAlpha: THREE.OneFactor, blendDstAlpha: THREE.OneFactor,
+    });
+    this.aoQuad = new FullScreenQuad(this.aoMat);
+    this.finalMat = new THREE.ShaderMaterial({
+      vertexShader: aoVert, fragmentShader: finalFrag,
+      uniforms: {
+        tAccum: { value: this.rtAccum.texture }, uTime: { value: 0 }, uRes: { value: new THREE.Vector2(width, height) },
+        uExposure: { value: 1.0 }, uGrain: { value: 0.022 }, uVignette: { value: 0.22 }, uVigColor: { value: new THREE.Color(0.78, 0.74, 0.95) },
+      },
+      depthTest: false, depthWrite: false,
+    });
+    this.finalQuad = new FullScreenQuad(this.finalMat);
+    this.bloom = new UnrealBloomPass(new THREE.Vector2(width, height), 0.28, 0.35, 1.6);
+    this.kernels = [];
+    const R = rng(1234);
+    for (let s = 0; s < 64; s++) {
+      const k = [];
+      for (let i = 0; i < 16; i++) {
+        // cosine-ish hemisphere, samples concentrated near the origin
+        let x, y, z, l;
+        do { x = R() * 2 - 1; y = R() * 2 - 1; z = R(); l = x * x + y * y + z * z; } while (l > 1 || l < 0.01);
+        const v = new THREE.Vector3(x, y, z + 0.08).normalize();
+        let sc = (i + R()) / 16; sc = 0.12 + 0.88 * sc * sc;
+        k.push(v.multiplyScalar(sc));
+      }
+      this.kernels.push(k);
+    }
+  }
+
+  // halton sequence for sub-pixel jitter
+  static halton(i, b) { let f = 1, r = 0; while (i > 0) { f /= b; r += f * (i % b); i = Math.floor(i / b); } return r; }
+
+  /**
+   * render one output frame
+   * @param scene, camera
+   * @param n number of sub-samples
+   * @param setup(i, n, sub) -> called before each sub-render; must update the scene for the sub-sample time,
+   *        the camera and the sun. sub = {jx, jy, u, v} (jitter px, disc sample)
+   */
+  frame(scene, camera, n, setup, t) {
+    const r = this.r;
+    const W = this.W, H = this.H;
+    r.autoClear = false;
+    r.setRenderTarget(this.rtAccum);
+    r.setClearColor(0x000000, 0);
+    r.clear(true, false, false);
+    for (let i = 0; i < n; i++) {
+      const jx = Accumulator.halton(i + 1, 2) - 0.5, jy = Accumulator.halton(i + 1, 3) - 0.5;
+      // disc sample (golden angle) for the light jitter
+      const rr = Math.sqrt((i + 0.5) / n), th = i * 2.399963;
+      const sub = { jx: jx * 1.15, jy: jy * 1.15, u: rr * Math.cos(th), v: rr * Math.sin(th), frac: (i + 0.5) / n };
+      setup(i, n, sub);
+      camera.setViewOffset(W, H, sub.jx, sub.jy, W, H);
+      camera.updateProjectionMatrix();
+      camera.updateMatrixWorld();
+      // normal + depth pass (solid only)
+      r.shadowMap.needsUpdate = false;
+      camera.layers.set(LAYER_SOLID);
+      scene.overrideMaterial = this.normalMat;
+      const bg = scene.background; scene.background = null;
+      r.setRenderTarget(this.rtNormal);
+      r.setClearColor(0x8080ff, 1);
+      r.clear(true, true, false);
+      r.render(scene, camera);
+      scene.overrideMaterial = null;
+      scene.background = bg;
+      // beauty pass
+      camera.layers.enableAll();
+      r.shadowMap.needsUpdate = true;
+      r.setRenderTarget(this.rtBeauty);
+      r.setClearColor(0x000000, 1);
+      r.clear(true, true, false);
+      r.render(scene, camera);
+      // ao + accumulate
+      const u = this.aoMat.uniforms;
+      u.uProj.value.copy(camera.projectionMatrix);
+      u.uProjInv.value.copy(camera.projectionMatrixInverse);
+      u.uKernel.value = this.kernels[i % 64];
+      u.uSeed.value = (i * 0.618034) % 1;
+      u.uWeight.value = 1 / n;
+      r.setRenderTarget(this.rtAccum);
+      this.aoQuad.render(r);
+    }
+    camera.clearViewOffset();
+    // bloom adds into the accumulation buffer, then grade to screen
+    this.bloom.render(r, null, this.rtAccum, 0, false);
+    this.finalMat.uniforms.uTime.value = t;
+    r.setRenderTarget(null);
+    this.finalQuad.render(r);
+  }
+}

package/lib/motion/mgstyles/upstream/demos/03-isometric/js/title.js

@@ -0,0 +1,167 @@
+// Title card set on the isometric floor plane: extruded ISOPOLIS letters that fall flat onto the dotted void floor,
+// plus a printed tagline decal. Everything lives in the bg (parallax 0.6) group, on the same plane as the dot grid.
+import * as THREE from 'three';
+import { parse } from 'opentype';
+import * as A from './anim.js';
+import { LAYER_GLOW } from './render.js';
+
+function glyphShapes(font, ch, size) {
+  const path = font.getPath(ch, 0, 0, size);
+  const sp = new THREE.ShapePath();
+  for (const c of path.commands) {
+    if (c.type === 'M') sp.moveTo(c.x, -c.y);
+    else if (c.type === 'L') sp.lineTo(c.x, -c.y);
+    else if (c.type === 'Q') sp.quadraticCurveTo(c.x1, -c.y1, c.x, -c.y);
+    else if (c.type === 'C') sp.bezierCurveTo(c.x1, -c.y1, c.x2, -c.y2, c.x, -c.y);
+  }
+  return sp.toShapes(false);
+}
+
+export async function buildTitle(world, cues, o) {
+  const { bgGroup, onUpdate, PAL } = world;
+  const buf = await (await fetch('/demos/03-isometric/assets/fonts/Unbounded-800-static.ttf')).arrayBuffer();
+  const font = parse(buf);
+  const FLOOR = o.floorY;
+  const size = o.size;           // em size in world units
+  const text = o.text;
+  const tracking = o.tracking ?? 0.02;
+
+  // plane basis: reading direction along -Z, letter-up along -X, thickness along +Y
+  const root = new THREE.Group();
+  root.matrixAutoUpdate = false;
+  const ex = new THREE.Vector3(0, 0, -1), ey = new THREE.Vector3(-1, 0, 0), ez = new THREE.Vector3(0, 1, 0);
+  const basis = new THREE.Matrix4().makeBasis(ex, ey, ez);
+  bgGroup.add(root);
+
+  const glyphs = font.stringToGlyphs(text);
+  const scale = size / font.unitsPerEm;
+  let x = 0;
+  const letters = [];
+  const inkMat = new THREE.MeshStandardMaterial({ color: new THREE.Color(PAL.ink), roughness: 0.55, metalness: 0, envMapIntensity: 0.5 });
+  const sideMat = new THREE.MeshStandardMaterial({ color: new THREE.Color('#4B45A0'), roughness: 0.6, metalness: 0, envMapIntensity: 0.4 });
+  for (let i = 0; i < glyphs.length; i++) {
+    const g = glyphs[i];
+    const ch = text[i];
+    const shapes = glyphShapes(font, ch, size);
+    const geo = new THREE.ExtrudeGeometry(shapes, { depth: o.depth, bevelEnabled: true, bevelThickness: o.bevel, bevelSize: o.bevel * 0.9, bevelSegments: 3, curveSegments: 14 });
+    geo.computeBoundingBox();
+    const bb = geo.boundingBox;
+    const cx = (bb.min.x + bb.max.x) / 2;
+    geo.translate(-cx, 0, 0); // pivot at the glyph centre on the baseline
+    const m = new THREE.Mesh(geo, [inkMat, sideMat]);
+    m.castShadow = true; m.receiveShadow = true;
+    const pivot = new THREE.Group();
+    pivot.position.set(x + cx, 0, 0);
+    pivot.add(m);
+    root.add(pivot);
+    letters.push({ pivot, m, t: cues.letters_start + i * cues.letters_step, i, w: bb.max.x - bb.min.x });
+    let adv = g.advanceWidth * scale;
+    if (i < glyphs.length - 1) adv += font.getKerningValue(g, glyphs[i + 1]) * scale;
+    x += adv + tracking * size;
+  }
+  const width = x - tracking * size;
+
+  // position the block: anchor = world point on the floor where the text centre sits
+  const anchor = o.anchor; // THREE.Vector3 on the floor (y = FLOOR)
+  const originLocal = new THREE.Vector3(-width / 2, -size * 0.36, 0); // centre the text block (cap height ≈ 0.72 em)
+  root.matrix.copy(new THREE.Matrix4().makeTranslation(anchor.x, FLOOR, anchor.z).multiply(basis).multiply(new THREE.Matrix4().makeTranslation(originLocal.x, originLocal.y, 0)));
+  root.matrixWorldNeedsUpdate = true;
+
+  // shadow catcher on the floor under the title
+  const catcher = new THREE.Mesh(new THREE.PlaneGeometry(1, 1).rotateX(-Math.PI / 2), new THREE.ShadowMaterial({ color: new THREE.Color('#3A2F8F'), opacity: 0.3 }));
+  catcher.receiveShadow = true;
+  catcher.scale.set(o.catcher[1], 1, o.catcher[0]);
+  catcher.position.set(anchor.x + 1.6, FLOOR + 0.001, anchor.z);
+  bgGroup.add(catcher);
+
+  // printed tagline + mono line (canvas decal lying on the floor, below the wordmark)
+  const cw = o.decalCW || 3072, chh = o.decalCH || 640;
+  const cv = document.createElement('canvas'); cv.width = cw; cv.height = chh;
+  const ctx = cv.getContext('2d');
+  const drawDecal = () => {
+    ctx.clearRect(0, 0, cw, chh);
+    ctx.fillStyle = PAL.ink;
+    ctx.textBaseline = 'alphabetic';
+    ctx.font = `700 ${o.tagPx}px 'HarmonyOS Sans SC'`;
+    const zh = o.tagline;
+    // manual tracking for CJK
+    let tx = 8;
+    for (const c of zh) { ctx.fillText(c, tx, o.tagPx * 1.02); tx += ctx.measureText(c).width + o.tagPx * 0.1; }
+    // cyan status dot + mono line
+    const my = o.tagPx * 1.02 + o.monoPx * (o.monoGap || 2.1);
+    ctx.fillStyle = PAL.data;
+    ctx.beginPath(); ctx.arc(8 + o.monoPx * 0.42, my - o.monoPx * 0.36, o.monoPx * 0.36, 0, Math.PI * 2); ctx.fill();
+    ctx.fillStyle = '#4A4394'; // round 2: >= 4.5:1 on the lavender floor
+    ctx.font = `500 ${o.monoPx}px 'JetBrains Mono'`;
+    let mx = 8 + o.monoPx * 1.35;
+    for (const c of o.mono) { ctx.fillText(c, mx, my); mx += ctx.measureText(c).width + o.monoPx * 0.06; }
+  };
+  drawDecal();
+  const tex = new THREE.CanvasTexture(cv);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 16;
+  tex.generateMipmaps = true;
+  tex.minFilter = THREE.LinearMipmapLinearFilter;
+  const decalU = { map: { value: tex }, uReveal: { value: 0 }, uReveal2: { value: 0 }, uSplit: { value: (o.tagPx * 1.3) / chh } };
+  const decalMat = new THREE.ShaderMaterial({
+    uniforms: decalU, transparent: true, depthWrite: false,
+    vertexShader: 'varying vec2 vUv; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.); }',
+    fragmentShader: /* glsl */`
+      uniform sampler2D map; uniform float uReveal, uReveal2, uSplit; varying vec2 vUv;
+      void main(){
+        vec4 c = texture2D(map, vUv);
+        bool top = (1.0 - vUv.y) < uSplit;
+        float r = top ? uReveal : uReveal2;
+        float m = 1.0 - smoothstep(r - 0.02, r, vUv.x);
+        gl_FragColor = vec4(c.rgb, c.a * m);
+      }`,
+  });
+  const dW = o.decalW, dH = dW * chh / cw;
+  const decal = new THREE.Mesh(new THREE.PlaneGeometry(dW, dH), decalMat);
+  // decal plane lies on the floor in the title's plane basis: its local x = reading dir, y = letter-up
+  decal.matrixAutoUpdate = false;
+  const dLocal = new THREE.Vector3(-width / 2 + dW / 2 + o.decalX, -size * 0.36 - o.decalGap - dH / 2, 0);
+  decal.matrix.copy(new THREE.Matrix4().makeTranslation(anchor.x, FLOOR + 0.002, anchor.z).multiply(basis).multiply(new THREE.Matrix4().makeTranslation(dLocal.x, dLocal.y, 0)));
+  decal.layers.set(LAYER_GLOW);
+  bgGroup.add(decal);
+
+  // thin rule under the wordmark, drawn on
+  const rule = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1).translate(0.5, 0, 0.5), new THREE.MeshStandardMaterial({ color: new THREE.Color(PAL.ink), roughness: 0.6 }));
+  rule.matrixAutoUpdate = false;
+  rule.castShadow = false; rule.receiveShadow = true;
+  bgGroup.add(rule);
+
+  onUpdate((T) => {
+    for (const L of letters) {
+      const tau = T - L.t;
+      const fall = 0.26;
+      let z = 0, tilt = 0, sq = 1, vis = true;
+      if (tau < -fall) vis = false;
+      else if (tau < 0) {
+        const u = (tau + fall) / fall;
+        z = 2.4 * (1 - u * u);
+        tilt = 1.25 * Math.pow(1 - u, 1.6);        // standing up -> falls flat onto the plane
+      } else {
+        const b1 = 0.14;
+        z = tau < b1 ? 0.12 * Math.sin(Math.PI * tau / b1) : (tau < b1 + 0.09 ? 0.03 * Math.sin(Math.PI * (tau - b1) / 0.09) : 0);
+        const e = Math.exp(-tau / 0.05);
+        sq = 1 - 0.35 * e * Math.cos(tau * 38);
+      }
+      L.pivot.visible = vis;
+      L.pivot.position.z = z;
+      L.pivot.rotation.x = tilt;
+      L.m.scale.set(1 + 0.08 * (1 - sq), 1 + 0.08 * (1 - sq), sq);
+    }
+    decalU.uReveal.value = A.easeInOutCubic(A.inv(cues.final, cues.final + 0.42, T)) * 1.03;
+    decalU.uReveal2.value = A.easeInOutCubic(A.inv(cues.final + 0.14, cues.final + 0.62, T)) * 1.03;
+    decal.visible = T > cues.final - 0.01;
+    // rule: grows along the reading direction
+    const ru = A.easeInOutCubic(A.inv(cues.final - 0.12, cues.final + 0.4, T));
+    rule.visible = ru > 0.001;
+    const rl = new THREE.Vector3(-width / 2, -size * 0.36 - o.decalGap * 0.45, 0);
+    rule.matrix.copy(new THREE.Matrix4().makeTranslation(anchor.x, FLOOR, anchor.z).multiply(basis)
+      .multiply(new THREE.Matrix4().makeTranslation(rl.x, rl.y, 0))
+      .multiply(new THREE.Matrix4().makeScale(Math.max(ru, 1e-4) * width, 0.035, 0.02)));
+  });
+  return { root, letters, width, catcher, decal, tex, redraw: () => { drawDecal(); tex.needsUpdate = true; } };
+}