7ammad/teardown-cinema

Teardown Cinema

Gleiche Engine wie teardown (three.js-Code, eine Uhr, Einzelbild-Aufnahme, programmierte Musik), gegenteiliger Zweck. Teardown erklärt, hat daher Panels. Cinema zeigt, hat daher nichts auf dem Bildschirm außer der Welt. Arbeitsbeispiel mit allen Dateien: example/orison in dieser Fertigkeit (der 30-Sekunden-Film Orison und seine interaktive Seite).

Benötigt die teardown-Fertigkeit daneben für node_modules (three, esbuild, playwright), sims/capture.mjs und sfx/. Capture benötigt nicht Playwrights eigenes Chromium: setze CHROMIUM auf das installierte Chrome. Falls der Download stockt, funktioniert Chrome auch.

Die Methode, der Reihe nach

1. Ein Meisterbild. Erzeuge ein komplexes Bild mit einem leistungsstarken Bildmodell. Mit der Codex-App: codex exec --skip-git-repo-check -s workspace-write -C <verz> - < anweisung.txt. Die Anweisung verlässt deine Maschine, daher vertrauliche Inhalte fernhalten. Frage nach etwas mit benennbarer Struktur: einer Kuppel, Rippen, Ringen, Bändern. Codex berichtet nicht, welches Bildmodell verwendet wurde.
2. Texturplatten aus dem Meisterbild. Hänge es mit -i master.png an und erzeuge flache, frontale, gleichmäßig beleuchtete Platten: Glasscheibe, Metallornamentik auf reinem Schwarz, Seide, ein Planet auf Schwarz, ein Ringquerschnitt, ein Lebewesen von oben. Schwarz ist das, was weggeschnitten wird. Diese Platten sind der Grund, warum das Ergebnis die Details des Gemäldes bewahrt. Erzeuge eine nach der anderen.
3. Vermesse das Meisterbild, dann baue es nach. Lies Proportionen des Bildes in Pixeln ab und wandle sie in Welteinheiten um, bevor du Geometrie schreibst. Fast jeder frühe Fehler war eine Proportion, die niemand gemessen hatte.
4. Ein Input steuert den Körper. Wähle den Takt des Lebewesens oder der Maschine, schreibe ihn in JS und GLSL und positioniere jeden Teil daraus im Vertex-Shader. Nichts ist keyframed. Siehe shared/kin.js, shared/glsl.js.
5. Einstellungen, kein Rundflug. Eine Liste von Einstellungen, jede eine reine Funktion der Zeit darin, mit harten Schnitten und einer Farbkorrektur pro Einstellung. Schnitte machen den Film aus. Siehe orison-film/shots.js.
6. Vergleiche bei jedem Durchlauf mit dem Meisterbild. Rendere das Heldenbild neben dem Original und notiere die Unterschiede. Korrigiere, wiederhole.
7. Musik in Code auf der gleichen Zeitachse mit teardowns sfx/. Siehe score.py.
8. Die Seite ist dieselbe Welt mit einer anderen Hand an der Kamera. Scrollen wählt einen Punkt auf einem Pfad, ein Klick ist ein Takt, ein Ziehen schaut umher. Siehe orison-live/.

Aufbau

mein-film/
  brief/            Meisterbild und Anweisungen
  assets/           Platten, als .jpg (in die Seite eingebettet)
  shared/           Die Welt: kin.js, glsl.js, sky.js, creature.js, world.js
  mein-film-film/     main.js, shots.js, timeline.json
  mein-film-live/     main.js, path.js, audio.js, body.html, style.css
  score.py

Befehle

Aus dem Filmordner ausführen. SKILL_DIR ist diese Fertigkeit, T die benachbarte teardown-Fertigkeit. In Windows PowerShell 5.1 npx.cmd und npm.cmd verwenden und kein &&.

node "$SKILL_DIR/build.mjs" ./mein-film-film ./mein-film-live
export CHROMIUM="C:/Program Files/Google/Chrome/Application/chrome.exe"    # capture kann das installierte Chrome verwenden

# Ein Einzelbild oder ein Blatt mit gewählter Qualität: --config zeigt auf {"samples": N}
node "$T/sims/capture.mjs" mein-film-film --size 1920x1080 --dpr 1 --config s.json --still 12.5 --out frame.png
node "$T/sims/capture.mjs" mein-film-film --size 1920x1080 --dpr 1 --config s.json --stills 3,8,12,18,23,29 --cols 3 --out sheet.png

# Der gesamte Film
node "$T/sims/capture.mjs" mein-film-film --size 1920x1080 --dpr 1 --fps 24 --crf 15 --config s.json --out silent.mp4
python "$T/run_sfx.py" score.py
ffmpeg -i silent.mp4 -i teardown-out/my-score.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest -movflags +faststart film.mp4

--stills kachelt durch eine Palette, daher zeigen Blätter falsche Streifenbildung. Farbe und Streifen auf den Einzelbildern daneben beurteilen.

Was kit/cinema.js dir gibt

new Cinema({canvas, samples, fps, shutter, msaa}), dann cine.frame(t, draw, look).

Ein Filmbild ist der Durchschnitt von N Unterbildern. Jedes Unterbild verschiebt die Zeit innerhalb des Verschlusses (echte Bewegungsunschärfe), die Kamera auf der Linsenscheibe bei gehaltener Fokusebene (echte Tiefenschärfe, auch durch transparente Schichten) und einen Subpixel-Offset (Anti-Aliasing). Gedithertes Ray Marching konvergiert damit. Die Nachbearbeitung läuft einmal auf dem gemittelten HDR-Bild: Bloom, anamorphotischer Streak, Lichtstrahlen zu einem Punkt, ACES, Farbkorrektur, Korn, Vignette. samples: 1 ist dieselbe Pipeline für Live-Seiten.

Zahlen von einem Laptop mit integrierter Radeon 780M, bei 1920x1080: 32 Samples pro Bild dauerten 2,3 Sekunden pro Bild inklusive Kodierung: 27 Minuten für 30 Sekunden Film bei 24 fps. Ein Entwurf bei 960x480 und 4 Samples dauerte 41 Sekunden für den gesamten Film, also Entwürfe großzügig nutzen. Die Live-Seite lief mit 37 bis 51 fps über den gesamten Scroll bei 1600x900 und höher in Punktmessungen ohne weitere Last. Prüfe gpu: in der Capture-Ausgabe; ein Software-Renderer bedeutet, dass die GPU-Flags nicht gegriffen haben.

Regeln, die über Erfolg oder Misserfolg entschieden haben

• Kein Text im Bild. Keine Beschriftungen, Zahlen, Titel oder Untertitel. Das Bild trägt es.
• Genau ein three.js bündeln. build.mjs erzwingt das. Eine zweite Kopie in der Nähe des Films (ein projekteigenes node_modules) scheitert still: Die Reflexionsumgebung verliert ihre Unschärfestufen und Metall wird dunkel.
• Das gerenderte Bild in gleicher Größe neben das Meisterbild legen und die Unterschiede auflisten. Zuerst Proportionen, dann Farbe. Positionen in Pixeln messen und in Richtungen umrechnen. Der größte Teil der Ähnlichkeit bei Orison entstand durch diese Durchgänge.
• Tiefenschärfe nur für kleine Dinge gering halten. Starke Unschärfe auf einem Giganten lässt es wie ein Miniaturbild wirken. Die Linsenradien des Films liegen bei 0,012 bis 0,03 Einheiten bei einem 26-Einheiten-Lebewesen.
• Zeit- und Linsen-Samples dürfen keine gemeinsame Sequenz haben. Wenn doch, zeichnet die Unschärfe sichtbare Bögen. Goldener Winkel für die Linse, Halton-Basis 5 für die Zeit.
• Niemals pow() auf einen Wert anwenden, der negativ werden kann. D3D gibt NaN zurück, und ein NaN-Pixel breitet sich durch Bloom als schwarze Rechtecke aus. Schreibe x*x. max(1.-ndv,0.), nicht 1.-ndv. Das Kit bereinigt auch seine Eingaben.
• Umgkehrter smoothstep(a, b, x) mit a > b gibt unter Windows 0 zurück. Schreibe 1.-smoothstep(b,a,x).
• Gespiegelte Platten auf einer sich verjüngenden Oberfläche: Mit Mercator abbilden, damit Zellen rund bleiben, und nur die großen Zellen der Platte spiegeln. Die feinen werden in der Nähe zu Konfetti.
• Panels im Lichtstrahl müssen klarer, nicht heller sein. Sonst wird das Innere eines Glaskörpers nie lesbar.
• Eine dunkle Öffnung braucht etwas Lebendiges darin. Ein schwaches Leuchten durch Nebel trägt es bis zum ersten Takt.
• Live-Wolken: Halbe Auflösung mit einem gleitenden Durchschnitt; dichter nahe der Kamera marchen. Wolken sind weich, daher geht nichts verloren.
• Die erste Sekunde einer Live-Seite ist Shader-Kompilierung. Vor dem ersten Bild kompilieren und in der Zwischenzeit einen kleinen Puls anzeigen, keinen Ladetext.

Regeln für die Live-Seite

Alles aus teardowns Live-Regeln gilt (Qualitätsstufen, Shader vorwärmen). Außerdem: Mit dem Meisterbild öffnen und in 3D überblenden, sobald die Shader bereit sind; Qualitätsstufen wieder hochschalten, wenn die Bilder sich erholen, nicht nur runter; keine Beschriftungen auf der Seite; ein zugänglicher Name auf der Leinwand und auf allen Buttons; ein Klickziel von mindestens 44 px; Ton startet erst nach der ersten Geste; der Körper beruhigt sich nach einem Takt, anstatt endlos zu steigen; die Qualität wird anhand der gemessenen Bildrate ohne Nachfrage reduziert.

Überprüfung

Du kannst kein Video ansehen, aber du kannst Einzelbilder lesen. Zuerst ein Blatt jeder Einstellung, dann Einzelbilder für das, was das Blatt anzeigt, dann --stills every:0.2 --from A --to B über einen Übergang hinweg. Ein Blatt mit einem Bild pro Sekunde der endgültigen Kodierung lesen: das zeigt, was der Encoder geschrieben hat. Die Musik mit ffmpeg -af ebur128=peak=true messen. Eine Person muss den Film dennoch einmal ansehen und die Musik hören; das bei der Berichterstattung erwähnen.

Für einen Host, der ein eigenes Dokumentengerüst hinzufügt, wie z. B. ein Claude Artifact, mit FRAGMENT=1 bauen und den Namen mit PAGE_TITLE setzen: es schreibt auch <name>.fragment.html.