Skip to content

feat: offer a three.js renderer in Code Animation with vendored addons - #10476

Merged
atomantic merged 2 commits into
mainfrom
claim/issue-10464
Oct 7, 2026
Merged

atomantic merged 2 commits into
mainfrom
claim/issue-10464

Conversation

@atomantic

Copy link
Copy Markdown
Owner

Summary

Code Animation gains a three renderer. The host vendors the installed three.js (0.186.1) plus a fixed addon allowlist, hashes the files, and supplies the import map itself, so a film writes import * as THREE from 'three' and never reaches a CDN.

  • Allowlist + hashing (server/services/codeAnimation/threeVendor.js): post-processing passes, RoundedBoxGeometry, the bloom/copy/output/bokeh shaders, RoomEnvironment, BufferGeometryUtils. The loader fails closed if any vendored module imports a relative path outside the set. Hashes land in a dependencies.json (same shape music-video documents record).
  • Export: staging a three film writes the host import map (replacing any the model wrote, CDN ones included) and vendor/* next to index.html. The existing render containment already serves only files inside the staged directory with script-src 'self', so no containment change was needed.
  • Preview / Download HTML: the opaque-origin sandbox cannot fetch ./vendor, so the client inlines the modules as data: URLs behind an import map (new GET /api/code-animation/vendor/three); the CSP only gains data: for scripts, and only for three films. Download HTML is a standalone file.
  • Prompt: RENDERER_GUIDANCE.three teaches the deterministic one-persistent-scene renderFrame(t) pattern plus the bloom-threshold, depth-of-field and shadow-map traps from Authored Three.js music-video worlds need a cinematic post stack (depth of field, bloom, grade) #10460 / Give authored Three.js music-video worlds depth of field, bloom and a graded finish via ctx.lens #10461. Other renderers' prompts are byte-identical.

Test plan

  • export.realBrowser.test.js: real Chrome runs a three film (EffectComposer + bloom + OutputPass + RoundedBoxGeometry) from the vendored files; renderFrame(0.25) called twice on the same page is pixel-identical (and differs from 0.75); the render is network-free; every vendored file's hash matches. Probed by dropping the vendor files — the test fails.
  • Unit: allowlist closure and hashes, import-map replacement, export staging, prompt contract, vendor route, client import-map rewrite, preview CSP/download.
  • npm run pregate green.

Closes #10464

#10464)

Code Animation can now be generated with a `three` renderer. The host vendors
the installed three.js plus a fixed allowlist of addons (post-processing,
RoundedBoxGeometry, shaders, RoomEnvironment, BufferGeometryUtils), hashes them
in a dependencies.json, and supplies the import map itself, so a film writes
`import * as THREE from 'three'` and never touches a CDN.

- Frame-exact export stages the host import map and the vendored modules beside
  the page; the render containment already serves only files in that directory.
- The sandboxed preview and Download HTML inline the same modules as data: URLs
  behind an import map (new GET /api/code-animation/vendor/three).
- The prompt teaches the deterministic renderFrame(t) pattern for three plus the
  bloom-threshold, depth-of-field and shadow-map traps from the spatial lens work.
- The existing renderers and their prompts are unchanged.
@atomantic
atomantic merged commit 9a6bbc8 into main Oct 7, 2026
13 checks passed
@atomantic
atomantic deleted the claim/issue-10464 branch October 7, 2026 10:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Code Animation: offer a three.js renderer with vendored addons

1 participant