kasaframe 0.0.0-stage → 0.1.3

package/packages/motion/src/transition3d/shatter.ts

@@ -0,0 +1,104 @@
+import * as THREE from "three";
+import { clamp } from "@kasaframe/core";
+import { hump, rr, seg, shatterRig, tileAmount, tileGrid, tiles, type Tile } from "./rig.ts";
+import { aim, bridgeSky, disposeTree, imageMaterial, raw, sky, type Kit } from "./world.ts";
+
+// 칸 꼭짓점을 칸 번호의 같은 식으로 셈한다 — 이웃 칸의 맞닿은 모서리가 비트까지 같아야 조립된 그림에 금이 안 간다
+function tileGeometry(aspect: number, cols: number, rows: number, c: number, r: number): THREE.BufferGeometry {
+  const x = (i: number) => -aspect / 2 + (aspect * i) / cols;
+  const y = (j: number) => -0.5 + j / rows;
+  const g = new THREE.BufferGeometry();
+  g.setAttribute("position", new THREE.BufferAttribute(new Float32Array([x(c), y(r), 0, x(c + 1), y(r), 0, x(c + 1), y(r + 1), 0, x(c), y(r + 1), 0]), 3));
+  g.setAttribute("uv", new THREE.BufferAttribute(new Float32Array([c / cols, r / rows, (c + 1) / cols, r / rows, (c + 1) / cols, (r + 1) / rows, c / cols, (r + 1) / rows]), 2));
+  g.setIndex([0, 1, 2, 0, 2, 3]);
+  return g;
+}
+
+const ROWS = 9;
+
+export function shatter(k: Kit) {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const scene = new THREE.Scene();
+  // 깨진 틈으로 보이는 하늘은 앞 화면 → 뒤 화면 평균 밝기로 넘어간다(bridgeSky) — 밝은 화면 틈으로 어두운 하늘이 번쩍이면 섬광으로 잡힌다
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [0, 0, -1], amt: 0.3, pow: 8 });
+  scene.add(air);
+  const { cols } = tileGrid(env, ROWS);
+  const sides: { tile: Tile; mesh: THREE.Mesh; c: THREE.Vector3 }[][] = [[], []];
+  for (const side of [0, 1] as const) {
+    const mat = imageMaterial(side === 0 ? k.from.texture : k.to.texture, { double: true, back: side === 0 ? pal.accent : pal.glow });
+    tiles(env, side, ROWS).forEach((tile, i) => {
+      const mesh = new THREE.Mesh(tileGeometry(aspect, cols, ROWS, i % cols, Math.floor(i / cols)), mat);
+      mesh.matrixAutoUpdate = false;
+      scene.add(mesh);
+      sides[side].push({ tile, mesh, c: new THREE.Vector3(tile.c[0], tile.c[1], 0) });
+    });
+  }
+
+  // 맞은 자리에서 튀는 빛 조각
+  const n = 260;
+  const ix = rr(seed, 7, -0.2, 0.2) * aspect;
+  const iy = rr(seed, 8, -0.15, 0.15);
+  const dirs = Array.from({ length: n }, (_, i) => {
+    const a = rr(seed, 3100 + i, 0, Math.PI * 2);
+    const sp = rr(seed, 3400 + i, 0.4, 2.2);
+    return [Math.cos(a) * sp, Math.sin(a) * sp, rr(seed, 3700 + i, -0.6, 1.2)];
+  });
+  const sparkPos = new Float32Array(n * 3);
+  const sparkGeo = new THREE.BufferGeometry();
+  sparkGeo.setAttribute("position", new THREE.BufferAttribute(sparkPos, 3));
+  const sparkMat = new THREE.PointsMaterial({ color: raw(pal.glow), size: 0.018, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending });
+  const sparks = new THREE.Points(sparkGeo, sparkMat);
+  scene.add(sparks);
+
+  const m = new THREE.Matrix4();
+  const q = new THREE.Quaternion();
+  const axis = new THREE.Vector3();
+  const pos = new THREE.Vector3();
+  const scl = new THREE.Vector3();
+  const back = new THREE.Matrix4();
+  return {
+    frame(u: number) {
+      aim(k.cam, shatterRig(u, env).cam);
+      bridgeSky(k, air, u);
+      for (const side of [0, 1] as const) {
+        for (const { tile, mesh, c } of sides[side]) {
+          const a = tileAmount(u, tile, side);
+          if (a === 0) {
+            mesh.visible = true;
+            mesh.matrix.identity();
+          } else if (side === 0 && a >= 1) {
+            mesh.visible = false;
+          } else {
+            mesh.visible = true;
+            const travel = side === 0 ? a * 0.8 + a * a * 1.6 : a * 1.8;
+            pos.set(c.x + tile.vel[0] * travel, c.y + tile.vel[1] * travel, tile.vel[2] * travel);
+            q.setFromAxisAngle(axis.set(...tile.axis), tile.spin * a * Math.PI * 0.7);
+            const s = side === 0 ? 1 - 0.75 * a : 1 - 0.3 * a;
+            scl.set(s, s, s);
+            m.compose(pos, q, scl);
+            back.makeTranslation(-c.x, -c.y, 0);
+            mesh.matrix.multiplyMatrices(m, back);
+          }
+          mesh.matrixWorldNeedsUpdate = true;
+        }
+      }
+      const burst = seg(u, 0.02, 0.75);
+      for (let i = 0; i < n; i++) {
+        const d = dirs[i];
+        const f = burst * (1.2 + burst);
+        sparkPos[i * 3] = ix + d[0] * f;
+        sparkPos[i * 3 + 1] = iy + d[1] * f - 0.4 * burst * burst;
+        sparkPos[i * 3 + 2] = 0.02 + d[2] * f;
+      }
+      sparkGeo.attributes.position.needsUpdate = true;
+      sparkMat.opacity = clamp(hump(seg(u, 0, 0.8)) * 1.5);
+      sparks.visible = u > 0 && u < 0.8;
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}

package/packages/motion/src/transition3d/space.ts

@@ -0,0 +1,173 @@
+import * as THREE from "three";
+import { LAND_CARD, LAND_Z, RISE_WALL, landRig, liftOf, riseRig, seg, type HeroBox } from "./rig.ts";
+import { aim, bridgeSky, disposeTree, gridPlane, imageMaterial, sky, type ImageMaterial, type Kit, type KindRun, type Screen } from "./world.ts";
+
+/** 화면 비율로 준 주인공 상자(왼쪽 위가 0, CSS 처럼) */
+export interface HeroRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+interface Hero {
+  box: HeroBox;
+  color: THREE.Color;
+}
+
+const CENTER: HeroRect = { x: 0.3, y: 0.38, w: 0.4, h: 0.24 };
+const WHITE = new THREE.Color(1, 1, 1);
+
+function toBox(r: HeroRect, aspect: number): HeroBox {
+  return { x: (r.x + r.w / 2 - 0.5) * aspect, y: 0.5 - (r.y + r.h / 2), w: r.w * aspect, h: r.h };
+}
+
+// 2D 에서 칠한 색 그대로 3D 블록 옆면에 — 같은 것은 2D·3D 에서 같은 색이어야 한 물체로 읽힌다
+function colorOf(el: Element, fallback: string): THREE.Color {
+  const cs = getComputedStyle(el);
+  const solid = (c: string) => !!c && c !== "transparent" && !/rgba\([^)]*,\s*0\)$/.test(c);
+  const css = solid(cs.backgroundColor) ? cs.backgroundColor : solid(cs.color) ? cs.color : fallback;
+  return new THREE.Color().setStyle(css, THREE.LinearSRGBColorSpace);
+}
+
+/**
+ * 살아 있는 장면 화면에서 주인공 상자를 잰다 — 장면이 stage.hero 로 짚은 [data-kf-hero], 없으면 가장 넓은 글 덩어리.
+ * 그림만 있는 화면(정지 그림·영상)이면 준 상자(rect), 그것도 없으면 가운데
+ */
+function heroOf(screen: Screen, aspect: number, rect: HeroRect | undefined, accent: string): Hero {
+  const box = screen.box;
+  if (rect || !box) return { box: toBox(rect ?? CENTER, aspect), color: new THREE.Color().setStyle(accent, THREE.LinearSRGBColorSpace) };
+  const br = box.getBoundingClientRect();
+  let el: Element | null = box.querySelector("[data-kf-hero]");
+  if (!el) {
+    let best = 0;
+    for (const cand of Array.from(box.querySelectorAll("div,span,h1,h2,p"))) {
+      if (!cand.textContent?.trim() || cand.children.length > 3) continue;
+      const r = cand.getBoundingClientRect();
+      const a = r.width * r.height;
+      if (a > best && a < br.width * br.height * 0.6) {
+        best = a;
+        el = cand;
+      }
+    }
+  }
+  const r = el?.getBoundingClientRect();
+  if (!el || !r || br.width < 1 || r.width < 1) return { box: toBox(CENTER, aspect), color: new THREE.Color().setStyle(accent, THREE.LinearSRGBColorSpace) };
+  const fx = (r.left - br.left) / br.width;
+  const fy = (r.top - br.top) / br.height;
+  const clip = (v: number) => Math.min(1, Math.max(0, v));
+  const x = clip(fx);
+  const y = clip(fy);
+  return { box: toBox({ x, y, w: clip(fx + r.width / br.width) - x, h: clip(fy + r.height / br.height) - y }, aspect), color: colorOf(el, accent) };
+}
+
+/**
+ * 장면 판 하나 + 그 위 주인공 블록. 원점은 판의 아래 가장자리 가운데(눕고 서는 축). size 는 판 높이
+ * — 블록 윗면은 판 그림의 같은 자리를 잘라 붙여, 솟기 전과 후가 같은 그림이다
+ */
+function page(map: THREE.Texture, aspect: number, size: number) {
+  const group = new THREE.Group();
+  const mat = imageMaterial(map, { double: true });
+  const plane = new THREE.Mesh(new THREE.PlaneGeometry(aspect * size, size), mat);
+  plane.position.y = size / 2;
+  group.add(plane);
+  const top = imageMaterial(map);
+  const side = (k: number) => new THREE.MeshBasicMaterial({ color: new THREE.Color(), transparent: true, userData: { k } });
+  const sides = [side(0.78), side(0.78), side(0.9), side(0.6), side(0.5)];
+  const block = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), [sides[0], sides[1], sides[2], sides[3], top, sides[4]]);
+  group.add(block);
+  // 솟은 자리의 그늘 — 비스듬히 볼 때 판에 같은 그림이 두 번 보이지 않게 눌러 둔다
+  const socket = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0, depthWrite: false }));
+  group.add(socket);
+  return {
+    group,
+    mats: [mat, top] as ImageMaterial[],
+    /** wash — 판을 그 색(하늘) 쪽으로 물들이는 몫. 멀어지는 판 가장자리가 하늘 위에서 칸마다 쓸려 섬광으로 잡히지 않게 */
+    set(hero: Hero, lift: number, alpha: number, wash = 0, tone?: THREE.Color) {
+      const h = hero.box;
+      const e = Math.max(lift, 1e-4);
+      block.visible = lift > 1e-4;
+      block.position.set(h.x * size, (h.y + 0.5) * size, e / 2);
+      block.scale.set(h.w * size, h.h * size, e);
+      top.uniforms.uvRect.value.set((h.x - h.w / 2) / aspect + 0.5, h.y - h.h / 2 + 0.5, h.w / aspect, h.h);
+      // 옆면은 2D 색에 바탕을 조금 섞어 — 진한 옆면이 카메라 가까이 화면을 크게 쓸면 섬광 검사(frame.flash)에 걸린다
+      for (const s of sides) {
+        s.color.copy(hero.color).lerp(WHITE, 0.35).multiplyScalar(s.userData.k as number);
+        if (tone) s.color.lerp(tone, wash);
+      }
+      socket.visible = block.visible;
+      socket.position.set(h.x * size, (h.y + 0.5) * size, 0.0008);
+      socket.scale.set(h.w * size, h.h * size, 1);
+      (socket.material as THREE.MeshBasicMaterial).opacity = 0.45 * Math.min(1, lift / (liftOf(h) * size));
+      for (const m of [mat, top]) {
+        m.uniforms.opacity.value = alpha;
+        m.uniforms.tintAmt.value = wash;
+        if (tone) m.uniforms.tint.value.copy(tone);
+      }
+      for (const s of sides) s.opacity = alpha;
+      group.visible = alpha > 0;
+    },
+  };
+}
+
+/** rise(2D→3D) — 앞 장면 판이 바닥으로 눕고 주인공이 블록으로 서며, 카메라가 그 위를 지나 뒤 장면 벽 앞에 선다 */
+export function rise(k: Kit, o: { hero?: HeroRect }): KindRun {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const scene = new THREE.Scene();
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [0, 0, -1], amt: 0.2, pow: 4 });
+  scene.add(air);
+  // 눕은 판에 이어지는 바닥 — 정지한 옅은 모눈이라 공간의 깊이만 알린다
+  scene.add(gridPlane({ color: pal.accent, y: -0.5, width: aspect * 3, depth: RISE_WALL + 1, z: -(RISE_WALL + 1) / 2, focus: -RISE_WALL }));
+  const a = page(k.from.texture, aspect, 1);
+  a.group.position.set(0, -0.5, 0);
+  scene.add(a.group);
+  const wall = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), imageMaterial(k.to.texture));
+  wall.position.set(0, 0, -RISE_WALL);
+  scene.add(wall);
+  return {
+    frame(u) {
+      const hero = heroOf(k.from, aspect, o.hero, pal.accent);
+      const s = riseRig(u, env, hero.box);
+      a.group.rotation.x = s.lie;
+      aim(k.cam, s.cam);
+      bridgeSky(k, air, u);
+      // 블록이 다 선 뒤 카메라가 고개를 드는 동안 판·블록이 하늘 색으로 물든다 — 빠르게 쓸려 가는 판과 블록이 칸마다 밝음·어둠을 오가지 않게
+      a.set(hero, s.lift, 1, 0.92 * seg(u, 0.18, 0.5, "inOutCubic"), air.material.uniforms.top.value);
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}
+
+/** land(3D→2D) — 앞 장면(3D 샷 끝 화면) 앞 공간에 누운 판이 일어서고, 카메라가 다가가 그 판이 뒤 장면 첫 화면이 된다 */
+export function land(k: Kit, o: { hero?: HeroRect }): KindRun {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const scene = new THREE.Scene();
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [0, 0, -1], amt: 0.2, pow: 4 });
+  scene.add(air);
+  const back = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), imageMaterial(k.from.texture));
+  scene.add(back);
+  const b = page(k.to.texture, aspect, LAND_CARD);
+  b.group.position.set(0, -LAND_CARD / 2, LAND_Z);
+  scene.add(b.group);
+  return {
+    frame(u) {
+      const hero = heroOf(k.to, aspect, o.hero, pal.accent);
+      const s = landRig(u, env, hero.box);
+      b.group.rotation.x = s.lie;
+      aim(k.cam, s.cam);
+      bridgeSky(k, air, u);
+      b.set(hero, s.lift, s.alpha, 0.85 * (1 - seg(u, 0.3, 0.85, "inOutCubic")), air.material.uniforms.top.value);
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}

package/packages/motion/src/transition3d/whip.ts

@@ -0,0 +1,78 @@
+import * as THREE from "three";
+import { FIT, hump, rr, seg, whipRig } from "./rig.ts";
+import { aim, bridgeSky, disposeTree, dust, frameRing, imageMaterial, raw, sky, type Kit, type KindRun } from "./world.ts";
+
+/**
+ * 휙 넘기기 — 카메라는 제자리에서 돌고, 앞 판은 정면·뒤 판은 옆(90°)에 선다. 둘레에 판과 빛줄을 둘러
+ * 도는 동안 화면이 쓸려 지나간다(렌더 모션 블러를 켜면 줄무늬로 번진다)
+ */
+export function whip(k: Kit): KindRun {
+  const { aspect, pal, seed } = k;
+  const env = { aspect, seed };
+  const side = whipRig(0, env).side;
+  const scene = new THREE.Scene();
+  // 하늘은 앞 화면 → 뒤 화면 평균 밝기로 서서히 넘어간다(bridgeSky) — 두 화면 사이로 다른 밝기의 하늘이 쓸려 지나가면 섬광으로 잡힌다
+  const air = sky({ top: pal.deep, bottom: pal.deep, glow: pal.accent, dir: [-side, 0, -1], amt: 0.2, pow: 3 });
+  scene.add(air);
+  const at = (yaw: number, r: number, y = 0): THREE.Vector3 => new THREE.Vector3(-Math.sin(yaw) * r, y, -Math.cos(yaw) * r);
+
+  const place = (mesh: THREE.Object3D, yaw: number, r: number, y = 0) => {
+    mesh.position.copy(at(yaw, r, y));
+    mesh.rotation.y = yaw;
+    scene.add(mesh);
+  };
+  const fromMat = imageMaterial(k.from.texture);
+  const toMat = imageMaterial(k.to.texture);
+  place(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), fromMat), 0, FIT);
+  place(new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), toMat), (side * Math.PI) / 2, FIT);
+
+  // 사이를 메우는 판 — 앞·뒤 그림을 흐리게 눌러 쓴다. 정면·옆 판 자리(꽉 찬 시야)는 비운다
+  for (let i = 0; i < 7; i++) {
+    const f = (i + 0.5) / 7;
+    const yaw = side * (Math.PI / 2) * (0.12 + f * 0.76) + rr(seed, 200 + i, -0.05, 0.05);
+    const s = rr(seed, 220 + i, 0.45, 0.8);
+    const mat = imageMaterial((i % 2 ? k.from : k.to).soft(), { double: true, back: pal.deep });
+    mat.uniforms.bias.value = 3;
+    // 하늘과 비슷한 밝기로 — 판과 하늘이 칸마다 밝음·어둠으로 엇갈리지 않게 눌러 둔다
+    mat.uniforms.opacity.value = 0.35;
+    const g = new THREE.Group();
+    g.add(new THREE.Mesh(new THREE.PlaneGeometry(aspect * s, s), mat));
+    g.add(new THREE.Mesh(frameRing(aspect * s, s, 0.008), new THREE.MeshBasicMaterial({ color: raw(pal.glow), transparent: true, opacity: 0.6, blending: THREE.AdditiveBlending, depthWrite: false })));
+    place(g, yaw, FIT * rr(seed, 240 + i, 1.4, 2.4), rr(seed, 260 + i, -0.5, 0.5));
+  }
+  // 빛줄 — 수평으로 둘러 선 얇은 띠. 돌 때 시야를 가로질러 지나간다
+  for (let i = 0; i < 18; i++) {
+    const yaw = side * (Math.PI / 2) * rr(seed, 300 + i, -0.1, 1.1);
+    const bar = new THREE.Mesh(
+      new THREE.PlaneGeometry(rr(seed, 320 + i, 0.3, 1.2), rr(seed, 340 + i, 0.006, 0.02)),
+      new THREE.MeshBasicMaterial({ color: raw(i % 3 ? pal.accent : pal.glow), transparent: true, opacity: 0.8, blending: THREE.AdditiveBlending, depthWrite: false }),
+    );
+    place(bar, yaw, FIT * rr(seed, 360 + i, 2.6, 4.5), rr(seed, 380 + i, -1.2, 1.2));
+  }
+  const n = 500;
+  const pts = new Float32Array(n * 3);
+  for (let i = 0; i < n; i++) {
+    const p = at(rr(seed, 400 + i, -Math.PI, Math.PI), FIT * rr(seed, 1400 + i, 2.5, 6), rr(seed, 2400 + i, -2, 2));
+    pts.set([p.x, p.y, p.z], i * 3);
+  }
+  scene.add(dust(pts, pal.glow, 0.02));
+
+  return {
+    frame(u) {
+      aim(k.cam, whipRig(u, env).cam);
+      bridgeSky(k, air, u);
+      // 가장 빠르게 쓸리는 동안 두 판의 대비를 하늘(두 화면 평균) 쪽으로 누른다 — 진짜 셔터가 번져 대비가 죽는 것처럼.
+      // 밝고 어두운 무늬가 섞인 화면이 빠르게 쓸리면 칸마다 밝음·어둠이 여러 번 오가 섬광으로 잡힌다. 양 끝은 0 이라 경계 프레임은 그대로
+      const wash = 0.65 * hump(seg(u, 0.12, 0.88));
+      for (const m of [fromMat, toMat]) {
+        m.uniforms.tint.value.copy(air.material.uniforms.top.value);
+        m.uniforms.tintAmt.value = wash;
+      }
+      k.renderer.clear(true, true, true);
+      k.renderer.render(scene, k.cam);
+    },
+    dispose() {
+      disposeTree(scene);
+    },
+  };
+}