{/* eslint-disable-next-line @next/next/no-img-element */}
@@ -282,7 +300,7 @@ export default function CrowdPrevizPage() {
+
Crowd direction
-
+
Camera
-
+
On set
);
}
diff --git a/docker-compose.yml b/docker-compose.yml
index b14e638..956fc24 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,6 +5,10 @@ services:
restart: unless-stopped
+ # Login for /previz/ (gitignored; created once on the server, see DEPLOY.md)
+ volumes:
+ - ./docker/auth:/etc/nginx/auth:ro
+
networks:
- npm_default
diff --git a/docker/nginx.conf b/docker/nginx.conf
index 20f95db..da034b8 100644
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -23,6 +23,16 @@ server {
add_header Cache-Control "public, max-age=604800";
}
+ # Client previz pages: password protected (file lives on the server, see DEPLOY.md).
+ # ^~ beats the media regex above, so nothing in here gets a public cache header
+ # and Cloudflare never serves it to someone who hasn't logged in.
+ location ^~ /previz/ {
+ auth_basic "Two Tales VFX previz";
+ auth_basic_user_file /etc/nginx/auth/previz.htpasswd;
+ add_header Cache-Control "private, no-store";
+ try_files $uri $uri/ $uri.html =404;
+ }
+
# Offline worker for /set must always be revalidated so updates roll out
location = /set/sw.js {
add_header Cache-Control "no-cache";
diff --git a/package.json b/package.json
index a3d21b9..8cc2c15 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
- "lint": "eslint"
+ "lint": "eslint",
+ "previz:pdf": "next build && node scripts/previz-pdf.mjs crowd"
},
"dependencies": {
"next": "16.3.8",
diff --git a/public/previz/crowd/crowd-previz.pdf b/public/previz/crowd/crowd-previz.pdf
new file mode 100644
index 0000000..2b1f7f1
Binary files /dev/null and b/public/previz/crowd/crowd-previz.pdf differ
diff --git a/scripts/previz-pdf.mjs b/scripts/previz-pdf.mjs
new file mode 100644
index 0000000..28d7319
--- /dev/null
+++ b/scripts/previz-pdf.mjs
@@ -0,0 +1,103 @@
+// Prints a /previz page from the static export to a PDF next to its assets.
+// npm run build && node scripts/previz-pdf.mjs crowd
+// Drives Edge/Chrome over the DevTools protocol instead of --print-to-pdf: Chrome sizes the
+// print layout from the paper it is given, not from CSS @page, so the paper (A4 landscape)
+// has to be passed here for the desktop layout to kick in.
+import { spawn } from "node:child_process";
+import { createReadStream, existsSync, mkdtempSync, statSync, writeFileSync } from "node:fs";
+import { createServer } from "node:http";
+import { tmpdir } from "node:os";
+import { extname, join, resolve } from "node:path";
+
+const slug = process.argv[2] ?? "crowd";
+const out = resolve("out");
+const dest = resolve("public/previz", slug, `${slug}-previz.pdf`);
+
+const browser =
+ process.env.CHROME ??
+ [
+ "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe",
+ "C:/Program Files/Google/Chrome/Application/chrome.exe",
+ "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+ "/usr/bin/google-chrome",
+ ].find(existsSync);
+if (!browser) throw new Error("No Chrome/Edge found; set CHROME=/path/to/browser");
+if (!existsSync(join(out, "previz", slug, "index.html"))) throw new Error("Run `npm run build` first");
+
+const types = { ".html": "text/html", ".css": "text/css", ".js": "text/javascript", ".jpg": "image/jpeg", ".png": "image/png", ".svg": "image/svg+xml", ".mp4": "video/mp4", ".woff2": "font/woff2", ".txt": "text/plain" };
+const server = createServer((req, res) => {
+ let file = join(out, decodeURIComponent(new URL(req.url, "http://x").pathname));
+ if (existsSync(file) && statSync(file).isDirectory()) file = join(file, "index.html");
+ if (!file.startsWith(out) || !existsSync(file)) return res.writeHead(404).end();
+ res.writeHead(200, { "Content-Type": types[extname(file)] ?? "application/octet-stream" });
+ createReadStream(file).pipe(res);
+}).listen(0);
+const port = server.address().port;
+
+const proc = spawn(browser, [
+ "--headless=new",
+ "--disable-gpu",
+ "--remote-debugging-port=0",
+ `--user-data-dir=${mkdtempSync(join(tmpdir(), "previz-pdf-"))}`,
+ "about:blank",
+]);
+const wsUrl = await new Promise((ok, fail) => {
+ let buf = "";
+ proc.stderr.on("data", (d) => {
+ buf += d;
+ const m = buf.match(/DevTools listening on (ws:\/\/\S+)/);
+ if (m) ok(m[1]);
+ });
+ proc.on("exit", () => fail(new Error("Browser exited early")));
+});
+
+// Attach to the blank tab and talk to it
+const targets = await (await fetch(wsUrl.replace("ws://", "http://").replace(/\/devtools\/browser\/.*/, "/json"))).json();
+const ws = new WebSocket(targets.find((t) => t.type === "page").webSocketDebuggerUrl);
+await new Promise((ok) => ws.addEventListener("open", ok, { once: true }));
+let id = 0;
+const pending = new Map();
+const events = [];
+ws.addEventListener("message", ({ data }) => {
+ const msg = JSON.parse(data);
+ if (msg.id && pending.has(msg.id)) {
+ const { ok, fail } = pending.get(msg.id);
+ pending.delete(msg.id);
+ if (msg.error) fail(new Error(msg.error.message));
+ else ok(msg.result);
+ } else if (msg.method) events.push(msg.method);
+});
+const send = (method, params = {}) =>
+ new Promise((ok, fail) => {
+ pending.set(++id, { ok, fail });
+ ws.send(JSON.stringify({ id, method, params }));
+ });
+
+try {
+ await send("Page.enable");
+ await send("Page.navigate", { url: `http://localhost:${port}/previz/${slug}/` });
+ while (!events.includes("Page.loadEventFired")) await new Promise((r) => setTimeout(r, 100));
+ // Lazy images and fonts: load everything, then give layout a beat
+ await send("Runtime.evaluate", {
+ expression: `Promise.all([document.fonts.ready, ...[...document.images].map(i => (i.loading = "eager", i.decode().catch(() => {})))])`,
+ awaitPromise: true,
+ });
+ await new Promise((r) => setTimeout(r, 500));
+ const { data } = await send("Page.printToPDF", {
+ landscape: true,
+ paperWidth: 8.27, // A4, inches (landscape swaps them)
+ paperHeight: 11.69,
+ marginTop: 0,
+ marginBottom: 0,
+ marginLeft: 0,
+ marginRight: 0,
+ printBackground: true,
+ scale: 0.68, // lays out ~1650px wide: each section fits a page
+ });
+ writeFileSync(dest, Buffer.from(data, "base64"));
+ console.log(`Wrote ${dest} (${Math.round(Buffer.byteLength(data, "base64") / 1024)} KB)`);
+} finally {
+ ws.close();
+ proc.kill();
+ server.close();
+}
-
+
-
+
-
+
-
+
Shot list
-
The drone starts behind the audience and flies forward toward the truck stage. Height and camera tilt stay
@@ -297,7 +315,7 @@ export default function CrowdPrevizPage() {
After the hero shot, the drone flies to a single marked position and holds still. No camera movement. The @@ -326,7 +344,7 @@ export default function CrowdPrevizPage() {
We track the hero drone move in 3D, then place each plate as a flat layer on the ground behind the real
@@ -340,7 +358,7 @@ export default function CrowdPrevizPage() {
Six shots, two setups
@@ -351,7 +369,7 @@ export default function CrowdPrevizPage() {
Briefing the extras
@@ -385,16 +403,16 @@ export default function CrowdPrevizPage() {
the comp, so that's where arms need to stay down.
-
Notes for DOP and drone op
Production and VFX
Ticks are saved on this device only.
+Ticks are saved on this device only.