Remotion-Video in Resolve-Timeline
Liest ein Remotion-Projekt, schreibt einen kleinen Adapter, der dessen Szenendaten in das film.json übersetzt, das das resolve-screen-tutorial-Skill erstellt, führt diesen Build aus und vergleicht das Ergebnis mit dem Remotion-Render.
Es handelt sich um einen Nachbau mit Resolve-Werkzeugen, nicht um eine Kopie der Pixel. React kann alles Mögliche zeichnen, während die Timeline Bilder, Keyframes und Fusion-Titel enthält. Der ehrliche Teil dieser Aufgabe besteht darin, dem Benutzer mitzuteilen, was sauber abgebildet wird, was angenähert wird und was nicht übertragen werden kann.
Vorbereitung
resolve-screen-tutorialliegt neben dem Ordner dieses Skills. Lies jetzt dessenSKILL.mdundreferences/film-format.md, da du dieses Format schreiben und dessen Build-Schritte befolgen wirst. Wenn es fehlt, teile dem Benutzer mit, dass dieses Skill es benötigt.- Das Remotion-Projekt hat seine Abhängigkeiten installiert. Sein eigener Code bleibt unverändert: Der Adapter liest ihn nur.
Schritte
1. Das Video lesen. Beginne bei src/Root.tsx für die ID der Komposition, fps, width, height und durationInFrames, folge dann zu den Szenenkomponenten und deren Daten. Frage nach, welche Komposition gemeint ist, wenn es mehrere gibt und die Anfrage es nicht sagt. Finde alle Assets unter public/.
2. Auflisten, was auf dem Bildschirm ist, und zuordnen. references/mapping.md enthält die Tabelle von Remotion-Bausteinen zu film.json. Lies sie jetzt. Sortiere jedes Element in eine von drei Gruppen:
- Direkt abbildbar: Vollbild-Screenshots, Kamerafahrten, ein Cursor, Ringe, Untertitel, Titelcards, Überblendungen.
- Angenähert: andere Easing-Funktionen, andere Übergänge, nicht installierte Webschriftarten, aufwändige Untertitelstylings.
- Nicht übertragbar: Diagramme, Partikel, 3D, Lottie, oder buchstabenweise animierter Text.
Wenn sich wichtige Elemente in der dritten Gruppe befinden, informiere den Benutzer vor dem Bauen und biete die Optionen aus references/mapping.md an. Wenn das Video überwiegend zu dieser Gruppe gehört, ist dieser Ansatz ungeeignet – sage dies, anstatt eine schlechte Kopie zu erstellen.
3. Ein Referenzvideo erstellen. Suche nach einem Render dieser Komposition in out/. Es ist gut, wenn es neuer als die Quellcode-Dateien der Komposition ist und durationInFrames Frames hat (überprüfe mit ffprobe). Eine kleinere Web-Kodierung ist in Ordnung und senkt die Werte nur geringfügig. Andernfalls rendere ein Video mit den eigenen Einstellungen der Komposition:
npx remotion render <composition id> out/<composition id>.mp4
4. Den Adapter schreiben. Platziere ihn in <project>/resolve/<composition id>/export-film.mjs und lasse ihn film.json daneben schreiben. Dieser Ordner ist der Filmordner für den Build. Füge build/ nur dann zur Ignorierliste des Projekts hinzu, wenn der Benutzer wünscht, dass diese Dateien im Repository bleiben, und committe nur, wenn darum gebeten wird.
Der Adapter soll die echten Daten des Videos importieren, sodass bei Änderungen an der Kopie oder am Timing eine erneute Ausführung die Änderung überträgt. references/mapping.md enthält ein Grundgerüst und die Berechnungen. Kopiere Werte nur dann von Hand, wenn sie in JSX verwoben sind, und teile dem Benutzer mit, um welche es sich handelt, da diese späteren Codeänderungen nicht folgen.
Lege das Branding aus den Farben, Schriftarten und dem Logo des Codes fest. Liste jede Schriftart auf, die das Video lädt, und überprüfe jede mit fonts_available. Wenn eine nicht installiert ist, frage, ob sie installiert oder durch eine ähnliche installierte ersetzt werden soll. Eine installierte Schriftart mit demselben Namen kann dennoch ein anderer Schnitt als die Webschriftart sein, mit geringfügig unterschiedlichen Breiten.
5. Bauen. Folge dem Build-Abschnitt von resolve-screen-tutorial's SKILL.md von Schritt 1 bis Schritt 4, wobei WORK auf den Filmordner gesetzt ist. Schritt 4's review_frames ist eine schnelle Überprüfung vor dem Rendern. Rendere dann wie in dessen Schritt 5, da der Vergleich das gesamte Video benötigt. Überspringe den Aufruf von review.py, da Schritt 6 hier dies mit dem Referenzvideo macht, und entferne deinen Render-Job, sobald du mit dem Vergleich fertig bist. Dessen Entscheidungen gelten auch hier: Teile dem Benutzer mit, in welchem Projekt dies landet, und ersetze niemals eine Timeline, die du nicht erstellt hast. Setze fps auf die Bildrate des Projekts. Zeiten in film.json sind in Sekunden, sodass das Timing auch dann gültig ist, wenn es von der Komposition abweicht.
6. Mit dem Remotion-Render vergleichen. Übergib das Referenzvideo an review.py:
python "<resolve-screen-tutorial>/scripts/review.py" "<WORK>" "<WORK>/build/render/review.mp4" "<reference video>"
Es gibt den SSIM (einen Ähnlichkeitswert, wobei 1 identisch bedeutet) für den Film und jede Szene aus, zusammen mit dem Frame, in dem jede Szene am schwächsten ist. Es schreibt nebeneinander angeordnete Blätter nach build/review/, Resolve links, und ssim-by-half-second.txt, das Probleme zeigt, die der niedrigste Frame einer Szene verbirgt. Öffne die Blätter. Für eine genauere Betrachtung füge --at <seconds> hinzu, um einen Moment in voller Größe zu erhalten, Resolve oben.
Als Richtwert: Screenshot-basierte Filme, die originalgetreu nachgebaut wurden, erzielten insgesamt 0,96 bis 0,97. Eine Szene, die deutlich unter ihren Nachbarn liegt, weist einen echten Unterschied auf – betrachte daher ihren niedrigsten Frame:
| Was du siehst | Übliche Ursache |
|---|---|
| Alles versetzt oder in falscher Größe | Skalierung oder Transformationsursprung im Adapter |
| Der gesamte Film zeitlich verschoben | Szenenstarts oder Überblendungsüberschneidung im Adapter |
| Kamera im Stillstand korrekt, in Bewegung falsch | Easing |
| Ein Ring etwas zu groß | CSS-Rahmen liegt innerhalb seiner Box, siehe film-format.md |
| Nur Text unterscheidet sich | Schriftart: ausgetauscht oder derselbe Name in einem anderen Schnitt |
Einige Unterschiede sind zu erwarten und müssen nicht behoben werden:
- Ein Highlight erscheint spät, weil es auf das Anhalten der Kamera wartet.
- Der Glanz eines Rings färbt die Innenseite des Rings, da sich eine Fusion-Unschärfe in beide Richtungen ausbreitet.
- Untertitel, Cursor und Ringe enden in der Mitte einer Überblendung, anstatt in der ausgehenden Szene zu verbleiben.
- Eine Karte nach der ersten animiert eine halbe Überblendung zu spät.
Korrigiere den Adapter, führe ihn erneut aus, dann führe plan.py und build_film erneut aus. Höre auf, wenn das, was übrig bleibt, Unterschiede sind, die du benennen kannst.
7. Bericht erstatten. Alles aus dem Abschnitt „Fertigstellung“ von resolve-screen-tutorial, plus:
- die SSIM-Werte
- die Liste der Unterschiede aus Schritt 6, jeweils mit Ursache
- alles aus der Gruppe „Nicht übertragbar“ und was du dagegen getan hast
- wo der Adapter liegt, wie man ihn erneut ausführt, und dass ein erneuter Build die Timeline ersetzt und daran vorgenommene Bearbeitungen löscht