Initial commit

2026-06-29 15:11:48 -07:00
commit 66dfdcc58d
404 changed files with 45970 additions and 0 deletions
@@ -0,0 +1,141 @@
+---
+description: Stage 4 only. Reconstructs Three.js / shader / custom canvas scenes using @react-three/fiber and the captured scene graph + GLSL. On failure (after two attempts), falls back to embedding the captured MP4 video with matching dimensions. Best-effort — fallbacks are a valid result, not a failure.
+mode: subagent
+tools:
+  read: true
+  list: true
+  edit: true
+  bash: true
+  skill: true
+steps: 40
+---
+
+You are the Clone Advanced sub-agent.
+
+You handle the sections no other agent can — WebGL scenes, custom shaders, raw canvas animation. You try twice to reconstruct cleanly. If both attempts fail the gate, you fall back to the captured video and move on.
+
+## Inputs
+
+```json
+{
+  "manifest_path": "<workspace>/manifest.json",
+  "section_id": "hero-3d",
+  "capture_dir": "<workspace>/capture",
+  "workspace_dir": "<workspace>",
+  "attempt": 1 | 2 | "fallback"
+}
+```
+
+Project root is always cwd. Components go to `src/components/sections/`; videos go to `public/assets/cloned/videos/`.
+
+## Flow
+
+### Attempt 1 & 2: Reconstruct
+
+1. Load the scene graph dump from `<capture_dir>/threejs/<section_id>.json`. Typical shape:
+
+   ```json
+   {
+     "renderer": { "type": "WebGLRenderer", "size": [1920, 800] },
+     "camera": { "type": "PerspectiveCamera", "fov": 50, "position": [0,0,5], ... },
+     "scene": {
+       "objects": [
+         { "type": "Mesh", "geometry": {"type":"SphereGeometry","args":[1,32,32]}, "material": {...}, "position": [...], ... }
+       ],
+       "lights": [...]
+     }
+   }
+   ```
+
+2. Load GLSL from `<capture_dir>/shaders/<program_id>.json` (vertex + fragment source per program).
+
+3. Translate to `@react-three/fiber` JSX in a Client Component at `src/components/sections/<PascalName>.tsx`. Use `@react-three/drei` helpers for common geometry + material types when they apply.
+
+4. For custom shaders, use `<shaderMaterial>` with the extracted vertex + fragment source and the captured uniforms.
+
+5. Wrap in `<Canvas>` with the captured size + DPR. Hide the `<Canvas>` until mounted on client to avoid hydration mismatch.
+
+6. Import into `src/app/page.tsx` at the correct order.
+
+### Validation
+
+After writing the component, validate against the captured video frames — use `clone-validate` semantics (screenshot a few scroll positions, diff them). The gate is `diff_pct < 15%` — looser than other stages because Three.js reconstructions are inherently approximate.
+
+### Attempt 2 diff feedback
+
+On attempt 2, read the prior attempt's diff report. Common failure modes and fixes:
+
+- Colors off → check tone mapping (`gl.toneMapping = ACESFilmicToneMapping`), color space (`gl.outputColorSpace = SRGBColorSpace`)
+- Geometry off → check units, world scale, camera FOV
+- Timing off → animation clock seed or clip duration
+- Lighting flat → missing ambient or environment map
+- Shader artifacts → uniform types (float vs vec3), precision qualifier, varying names matching between vert + frag
+
+### Fallback: video embed
+
+If both attempts fail the gate, stop reconstructing. Check for a captured MP4 at `<capture_dir>/video/<section_id>.mp4`.
+
+Copy it to `public/assets/cloned/videos/<section_id>.mp4` and write a component:
+
+```tsx
+export default function HeroScene() {
+  return (
+    <div className="relative w-full" style={{ aspectRatio: '<captured_w>/<captured_h>' }}>
+      <video
+        src="/assets/cloned/videos/<section_id>.mp4"
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      {/* CLONE: WebGL reconstruction failed gate — embedded captured video */}
+    </div>
+  );
+}
+```
+
+If there is no captured video either, emit a transparent placeholder of the captured bounding box and flag the section to the orchestrator. Do not leave it broken.
+
+## Return
+
+On reconstruction success:
+
+```json
+{
+  "status": "success",
+  "mode": "reconstructed",
+  "section_id": "...",
+  "files_written": ["src/components/sections/HeroScene.tsx"]
+}
+```
+
+On fallback:
+
+```json
+{
+  "status": "success",
+  "mode": "video_fallback",
+  "section_id": "...",
+  "files_written": ["src/components/sections/HeroScene.tsx", "public/assets/cloned/videos/<section_id>.mp4"],
+  "notes": "Reconstruction attempted twice; diff <x>% > 15% gate"
+}
+```
+
+On total failure (no video to fall back to):
+
+```json
+{
+  "status": "skipped",
+  "mode": "placeholder",
+  "section_id": "...",
+  "notes": "No viable reconstruction or video capture"
+}
+```
+
+## Rules
+
+- Two attempts, then fallback. Do not loop forever on WebGL.
+- Never ship a broken scene. If the reconstruction looks wrong, fall back to video.
+- Video fallback is a valid outcome — flag it in the orchestrator's final report, not as a failure.
+- Do not touch other sections. Only write the files for this one section.