3D-Videostudio

Video 3D Studio

Baue jeden Shot als Code, überprüfe Standbilder davon und rendere dann ein MP4 auf dem Rechner des Benutzers. Sprich mit dem Benutzer in seiner eigenen Sprache und in einfachen Worten. Viele, die danach fragen, haben noch nie Code geschrieben.

1. Projekt vorbereiten

Suche zuerst nach einem vorhandenen Projekt: einem Ordner mit tools/render.mjs und src/kit/. Wenn es eines gibt, füge eine neue Szene hinzu.

Andernfalls überprüfe node --version (18 oder neuer) und erstelle dann ein Projekt im aktuellen Ordner des Benutzers, benannt nach dem Shot:

node <this-skill-folder>/scripts/new-project.mjs video-<subject>

Sage dem Benutzer, dass dies ein paar Minuten dauert und etwa 1 GB Festplattenplatz benötigt, und dass der erste Render auch einen 130 MB großen Headless-Browser herunterlädt. Jeder spätere Befehl wird innerhalb des Projektordners ausgeführt.

2. Den Shot festlegen

Kläre Format, Länge, Motiv, Stimmung, Farben, genauen Wortlaut und etwaige Logo- oder Modelldateien. Frage nur nach Dingen, die das Ergebnis verändern würden und keinen sinnvollen Standardwert haben. Standardwerte: 9:16 für soziale Medien, ansonsten 16:9, 5 bis 8 Sekunden, 30 fps.

Schreibe vor dem Bauen einen kurzen Plan, da ein Shot mit einer klaren Idee besser rüberkommt als einer mit mehreren:

• Motiv: die eine Sache, die der Betrachter sehen soll
• Kamera: Objektiv und eine einzige Bewegung
• Licht: woher es kommt und was es zeigt
• Höhepunkt: der Moment, in dem die Hauptsache passiert, in Sekunden

Vom Benutzer bereitgestellte Dateien kommen in den public/-Ordner des Projekts.

3. Ausgehend von der nächstgelegenen Szene bauen

Die Anfrage dreht sich hauptsächlich um	Starte von	Nimmt entgegen
Ein Objekt oder Produkt	src/scenes/ProductOrbit.tsx	modelFile, color, backdrop
Ein Wort oder kurzer Titel	src/scenes/KineticTitle.tsx	text, fontFile, color, backdrop
Ein Logo	src/scenes/LogoReveal.tsx	logoFile, tagline, color, glow, backdrop
Ein Raum, Ort oder eine Atmosphäre	src/scenes/MorningRoom.tsx	wall, accent
Etwas Abstraktes, Flüssiges oder Shader-getriebenes	src/scenes/LiquidForm.tsx	look

Wenn die Anfrage nur diese Einstellungen ändert, übergib sie mit --set und lasse den Code unverändert. Andernfalls kopiere die Szene in eine neue Datei, registriere sie in src/Root.tsx und ändere die Kopie, so dass die Beispiele als Referenz verfügbar bleiben.

Bevor du Szenencode schreibst, lies references/toolkit.md, das auflistet, was das Kit bereitstellt. Für Entscheidungen zu Objektiv, Licht, Material und Timing lies references/craft.md.

Ohne eine Modelldatei baue das Objekt aus den Teilen des Kits: useLathe für alles Runde, useRoundedBox für alles Kastenartige, useExtrudedSvg für flache Silhouetten, gruppiert. Kleine Details wie Nähte, Ringe, Griffrillen, eingeprägter Text und leicht abgerundete Kanten machen ein einfaches Modell glaubwürdig. Gib jedem Objekt daher ein paar davon und eine Oberflächenkarte aus dem Kit. Eine einfache Farbe auf einer glatten Form sieht immer wie ein Platzhalter aus.

Was einen korrekten Render gewährleistet

Remotion rendert Frames in beliebiger Reihenfolge und in mehreren Browser-Tabs gleichzeitig, daher kann ein Frame nicht von dem vorherigen abhängen:

• Berechne alles, was sich ändert, mit useShot(). useState, useFrame-Animation, Math.random() und Date verursachen Flackern oder Sprünge, verwende stattdessen wobble und scatter für Zufälligkeit.
• Lade nur aus public/ über usePublicFile oder die darauf aufbauenden Hooks. Ein Render darf nicht vom Netzwerk abhängen.
• Behalte 3D innerhalb von <Stage>. Es besitzt die Render-Pipeline, füge daher keine zweite Render-Schleife hinzu und setze kein Tonemapping an anderer Stelle.
• Jeder Frame wird mehrfach gezeichnet und gemittelt, daher kommen weiche Schatten, echte Unschärfe und saubere Kanten. Alles, was innerhalb eines Frames unscharf sein soll, kommt in useEachSample.
• Platziere kleinen Text in einem normalen AbsoluteFill über der Stage, wie es LogoReveal macht. Er bleibt bei kleinen Größen schärfer als 3D-Text.

4. Standbilder vor dem Rendern überprüfen

npm run check
node tools/stills.mjs <Shot> --set format=vertical --count 5

Öffne jedes Bild, das der Befehl auflistet, und sieh es dir an. Du kannst kein Video anschauen, daher sind Standbilder die Art, wie du den Shot siehst. Um Bewegungen zu beurteilen, fordere Frames dicht beieinander um den Höhepunkt herum an, z. B. --frames 20,24,28,32.

Achte auf:

• Das Motiv ist im Bild und auf dem ersten Frame, dem letzten Frame und in der Mitte der Bewegung frei von den Rändern.
• In 9:16 sitzt nichts Wichtiges in den oberen 14% oder unteren 20%, wo Telefon-Apps ihre Buttons platzieren.
• Lichter behalten ihre Details und das Bild ist nicht ausgewaschen oder matschig.
• Text ist richtig geschrieben und jeder Buchstabe ist bis zu dem Zeitpunkt erschienen, an dem er lesbar sein sollte.
• Nichts schwebt, ragt durch etwas hindurch oder wirft einen Schatten mit sichtbaren Stufen.

Wenn etwas nicht stimmt, ändere eine Sache und überprüfe erneut, damit du erkennen kannst, was es behoben hat. references/troubleshooting.md listet die üblichen Symptome und Korrekturen auf.

Scanne dann alle Frames auf Blitze und Sprünge, mit denselben --set-Werten:

node tools/check-motion.mjs <Shot> --set format=vertical

Standbilder sampeln nur wenige Momente, daher kann ein Blitz, der ein paar Frames dauert, zwischen ihnen hindurchrutschen. Glatte, glänzende Oberflächen sind die übliche Ursache, da sie ein helles Licht auf einmal spiegeln können. Wenn der Befehl CHECK meldet, sieh dir die genannten Frames an und behebe sie vor dem Rendern, es sei denn, die plötzliche Änderung ist beabsichtigt, wie z. B. ein gezielter Schnitt.

5. Rendern

node tools/render.mjs <Shot> --set format=vertical --out out/<name>.mp4

Verwende --quality draft für einen Test mit halber Auflösung. In voller Qualität dauerten Shots von 5 bis 8 Sekunden 36 bis 88 Sekunden auf einer Desktop-Grafikkarte. Ohne eine solche sinkt das Tool auf 4 Durchläufe pro Frame, was viel gröber und immer noch viel langsamer ist. Sage dies dem Benutzer und führe lange Render im Hintergrund aus.

Gib dem Benutzer den Pfad zur MP4, ihr Format und ihre Länge sowie die benötigte Zeit an. Stelle klar, dass du Standbilder und Frame-zu-Frame-Änderungen überprüft hast und das Video nicht abgespielt hast.

6. Anmerkungen behandeln

Wende genau das an, was der Benutzer verlangt hat, und lasse alles andere unverändert, so dass eine Anmerkung wie „wärmeres Licht“ nicht auch die Bildaussage ändert. Überprüfe erneut Standbilder und rendere dann neu.

Grenzen, die du offen ansprechen solltest

• Es gibt keine echte Bewegungsunschärfe, daher können sehr schnelle Bewegungen abgehackt wirken. Halte sie moderat oder versuche --set fps=60.
• Die Beleuchtung ist kein vollständiges Raytracing. Schatten und Himmelsverdeckung sind weich und genau, aber Licht springt nicht von selbst, daher benötigen Innenräume zusätzliches Fülllicht.
• Remotion hat eine eigene Lizenz: kostenlos für Einzelpersonen und für Unternehmen mit bis zu 3 Personen, während größere Unternehmen eine kostenpflichtige Lizenz von remotion.dev benötigen. Erwähne dies, wenn der Benutzer scheinbar für ein Unternehmen arbeitet.