SCENEGOD/scenegod/web/render.js
type-two b773d29776 [m8-C] multi-shot sequencing — a film is now a first-class object
Sequences (ordered shots = scene + in/out + transition) with full validation,
CRUD, and a client-driven film render the server orchestrates: browser renders
each shot through the existing /render/* endpoints, server ffmpeg-concatenates
in order with cuts or xfade dissolves, muxes a film-level audio bed, reaps
after 48h. render.js refactored so there is one frame-post path in the repo
(captureFrames/withRenderSize/begin/end/poll); new web/film.js drives the loop.
Also fixes a pre-existing mux bug: no apad meant short audio truncated PICTURE.

Orchestrator: deploy compose/script now carry SCENEGOD_SEQUENCES + SCENEGOD_FILMS
volumes so shot lists survive a rebuild.

Verified live: demo-two-shot renders one 11.500s mp4 with a genuinely
compositing dissolve; a film built from the M7 templates (street wide ->
dissolve -> closer -> cut -> record store) renders 11.800s at 960x540.
15 test groups green.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-25 23:21:45 +10:00

119 lines
5.2 KiB
JavaScript

// render.js — draft + final video capture (Lane C, PLAN §4.3 / C-server §C5).
// Talks to Stage/Timeline through their public APIs only. No three.js import.
//
// draftRecord(stage, timeline) -> Promise<Blob> quick webm via MediaRecorder
// finalRender(stage, timeline, opts) -> Promise<url> deterministic PNG->ffmpeg mp4
//
// The pieces finalRender is built from are exported too — web/film.js drives the
// same loop once per shot of a multi-shot sequence (M8-C), so the frame-post path
// exists exactly once.
// All URLs are RELATIVE: the app serves at / locally and /scenegod/ in prod.
const sleep = ms => new Promise(r => setTimeout(r, ms));
// --- draft: record the live canvas while the timeline plays, once through ----
export function draftRecord(stage, timeline, { fps = 30, mimeType = 'video/webm' } = {}) {
const stream = stage.renderer.domElement.captureStream(fps);
const rec = new MediaRecorder(stream, MediaRecorder.isTypeSupported(mimeType) ? { mimeType } : {});
const chunks = [];
rec.ondataavailable = e => e.data.size && chunks.push(e.data);
return new Promise((resolve, reject) => {
rec.onstop = () => resolve(new Blob(chunks, { type: rec.mimeType || 'video/webm' }));
rec.onerror = reject;
rec.start();
timeline.seek(0);
timeline.play();
const stop = timeline.onTick(t => {
if (t >= timeline.duration) { timeline.pause(); rec.stop(); if (typeof stop === 'function') stop(); }
});
});
}
// --- render-session primitives (shared with film.js) -------------------------
// Render at exactly width x height, then put the viewport back however fn ends.
export async function withRenderSize(stage, width, height, fn) {
const canvas = stage.renderer.domElement;
const prev = { w: canvas.width, h: canvas.height, dpr: stage.renderer.getPixelRatio() };
stage.renderer.setPixelRatio(1);
stage.renderer.setSize(width, height, false); // false = don't touch CSS size
try { return await fn(); }
finally {
stage.renderer.setPixelRatio(prev.dpr);
stage.renderer.setSize(prev.w, prev.h, false);
}
}
export async function beginRender({ name = 'scene', fps = 30, width = 1920, height = 1080 } = {}) {
return postJSON('render/begin', { name, fps, width, height });
}
// Step [from, to) on the timeline and post those frames as 0..n-1 of renderId.
// Deterministic: timeline.step() is seek+evaluate, never wall-clock.
export async function captureFrames(stage, timeline, { renderId, from = 0, to, onProgress } = {}) {
const canvas = stage.renderer.domElement;
const total = Math.max(0, to - from);
const inflight = new Set();
for (let f = from; f < to; f++) {
timeline.step(f);
if (stage.syncVideos) await stage.syncVideos(timeline.time); // M6 video plates: seek + wait 'seeked'
stage.renderActiveCamera(null); // draw active cam (or director cam) to main canvas
const blob = await new Promise(res => canvas.toBlob(res, 'image/png'));
while (inflight.size >= 4) await Promise.race(inflight); // backpressure: <=4 in flight
const n = f - from;
const p = fetch(`render/${renderId}/frame/${n}`, { method: 'POST', body: blob })
.then(r => { if (!r.ok) throw new Error(`frame ${n}: ${r.status}`); })
.finally(() => inflight.delete(p));
inflight.add(p);
onProgress?.(n + 1, total);
}
await Promise.all(inflight);
return total;
}
export async function endRender(renderId, audio = []) {
return postJSON(`render/${renderId}/end`, { audio }); // scene audio[] muxed by ffmpeg
}
export async function pollRender(renderId, every = 500) {
let st;
do { await sleep(every); st = await getJSON(`render/${renderId}/status`); }
while (st.state === 'queued' || st.state === 'encoding');
if (st.state !== 'done') throw new Error('encode failed: ' + (st.log || st.state));
return `render/${renderId}/out.mp4`;
}
// --- final: step frame-by-frame (deterministic), upload PNGs, ffmpeg encode ---
export async function finalRender(stage, timeline, opts = {}) {
const { fps = 30, width = 1920, height = 1080, name = 'scene', audio = [], onProgress } = opts;
return withRenderSize(stage, width, height, async () => {
const total = Math.max(1, Math.round(timeline.duration * fps));
const { renderId } = await beginRender({ name, fps, width, height });
await captureFrames(stage, timeline, { renderId, from: 0, to: total, onProgress });
await endRender(renderId, audio);
return pollRender(renderId);
});
}
// trigger a browser download of a blob or url (draft webm / final mp4)
export function download(blobOrUrl, filename) {
const a = document.createElement('a');
a.href = typeof blobOrUrl === 'string' ? blobOrUrl : URL.createObjectURL(blobOrUrl);
a.download = filename;
a.click();
if (typeof blobOrUrl !== 'string') setTimeout(() => URL.revokeObjectURL(a.href), 1000);
}
export async function postJSON(url, body) {
const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body) });
if (!r.ok) throw new Error(`${url}: ${r.status} ${await r.text().catch(() => '')}`.trim());
return r.json();
}
export async function getJSON(url) {
const r = await fetch(url);
if (!r.ok) throw new Error(`${url}: ${r.status}`);
return r.json();
}