Communitygithub.com

3D-Zoom-Erklärvideo

Erstelle ein codiertes 3D-Erklärvideo (MP4) mit unendlichem Zoom, bei dem eine kontinuierliche Kamerafahrt über mehrere Größenordnungen reist – mit Live-Messung auf dem Bildschirm und bekannten Objekten als Maßstab.

Was ist 3D-Zoom-Erklärvideo?

Dieses Skill erstellt eine spezielle Art von 3D-Erklärvideo (MP4), das Größenverhältnisse besser als jedes Diagramm vermittelt: Es startet auf einem bekannten Objekt, zoomt ohne einen einzigen Schnitt hinein, zeigt eine sich ständig ändernde Zahl als Maßstab und endet mit einer überraschenden Tatsache. Das Referenzvideo „Nichts ist wirklich scharf“ zeigt einen Rasierecklinge, 26 Halbierungen und ein einzelnes Eisenatom – die Kante ist 300 Atome breit. Das Projekt basiert auf Three.js und wird mit einem Headless-Chrome auf der GPU gerendert, dann mit ffmpeg komprimiert – es kommen keine Video-Generierungsmodelle zum Einsatz. Es ist ideal, um zu erklären, wie klein/groß/dünn/scharf/tief etwas wirklich ist, und folgt einem bewährten Rezept: kontinuierliche Kamerafahrt, Live-Messbalken, wechselnde Oberflächendetails, vertraute Maßstabsobjekte und ein klares Fazit. Die Arbeit beginnt mit Recherche, dann wird das vorhandene Template (`assets/template/`) kopiert, die Szene in `main.js` angepasst (Parameter wie Startgröße, Halbierungen, Objektliste, Kamerapfad) und über Einzelbilder iteriert, bevor das finale Video gerendert wird. Das Skill unterstützt Sprachausgabe auf Anfrage und erzeugt standardmäßig stumme Videos in 1920x1080, 30 fps, 40-50 Sekunden Laufzeit.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/igm61799-cloud/zoom-explainer-3d/tree/HEAD

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht 3D-Zoom-Erklärvideo?

Ein Format, das Größenverhältnisse besser erklärt als jedes Diagramm: Beginne mit einem Objekt, das jeder kennt, fliege ohne einen einzigen Schnitt hinein, behalte eine Zahl auf dem Bildschirm, die dem Zuschauer sagt, wie weit er gekommen ist, und ende mit einer Tatsache, die er nicht erwartet hat. Das Referenzergebnis für dieses Skill ist „Nichts ist wirklich scharf“: eine Rasierklinge, 26 Halbierungen, ein Eisenatom und die Aussage, dass die Kante immer noch etwa 300 Atome breit ist.

assets/template/ ist dieses fertige Projekt. Beginne damit, nicht mit einer leeren Datei: Die schwierigen Teile (Zoomen über acht Größenordnungen ohne Präzisionsverlust, Details, die sich mit dem Maßstab ändern, Schärfentiefe, ein deterministischer Renderer) sind dort bereits gelöst und haben mehrere Durchgänge erfordert, um richtig zu funktionieren.

Das Rezept

Behalte alle fünf bei. Jede tut ihren Dienst.

  1. Eine durchgehende Einstellung. Der ganze Sinn ist, dass der Zuschauer nie die Orientierung verliert. Ein Schnitt setzt sein Größenverständnis zurück.
  2. Eine Live-Messung. Ein dünner Balken, der am Motiv verankert ist, eine Zahl, die sich mit jedem Bild ändert, eine Zählung der Halbierungen (oder Verdopplungen) und zwei oder drei Wörter für das, was gerade zu sehen ist. Der Balken ist das Einzige, was der Zuschauer lesen muss, also muss er ehrlich sein: Seine Länge in der Szene ist wirklich die angezeigte Zahl.
  3. Das Motiv ändert seinen Charakter auf jeder Skala. Politur wird zu Schleifspuren, dann zu Splittern, dann zu Kristallkörnern, dann zu einer abgerundeten Kante, dann zu Atomen. Wenn die Oberfläche drei Sekunden lang gleich aussieht, wirkt der Zoom wie Stillstand.
  4. Objekte zum Größenvergleich. Wenn der Zoom jede Größenordnung durchläuft, liegt ein vertrautes Objekt dieser Größe neben dem Motiv mit Namen und Größe: Salzkorn, Haar, rotes Blutkörperchen, Bakterium, Virus, Transistor, Antikörper, DNA. Sie verwandeln eine abstrakte Zahl in „kleiner als ein Virus“.
  5. Ein Höhepunkt. Schnell wieder dorthin zurückzoomen, wo du angefangen hast, und die eine Zahl zeigen, für die die Reise unternommen wurde.

Arbeitsablauf

1. Recherche vor der Modellierung

Das Video ist nur dann gut, wenn es wahr ist. Suche die tatsächlichen Maße (Websuche, Primärquellen wo möglich) und notiere für das Motiv und jedes skalierte Objekt: die Größe, die Quelle und alles, was du vereinfachst. Die Geometrie wird dann aus diesen Zahlen aufgebaut, sodass das Bild nicht von den Fakten abweichen kann. Gib dem Benutzer am Ende die Quellen und die Vereinfachungen an; er wird danach gefragt.

Wähle 6 bis 9 Maßstabsobjekte, jedes mindestens etwa 3x kleiner als das vorherige. Näher als das und ihre Beschriftungen überlappen sich; weiter auseinander als etwa 30x und der Bildschirm bleibt Sekunden lang leer.

2. Zeige den Plan, wenn es hilft

Wenn der Benutzer darum gebeten hat, zuerst den Plan zu sehen, oder wenn die Aufgabenstellung wirklich Wahlmöglichkeiten offen lässt (Sprachausgabe oder stumm, Sprache, was der Höhepunkt ist), gib eine kurze Tabelle: Zeit, Maßstab, was zu sehen ist, Objekt zum Größenvergleich. Ansonsten fahre fort; ein Plan, den niemand will, verzögert nur den ersten Render.

3. Projekt einrichten

cp -r <skill>/assets/template <project>/ && cd <project> && npm install
node render.mjs --stills 1,10,20,30,40

Der zweite Befehl sollte den GPU-Namen ausgeben und fünf JPEGs in out/ schreiben. Wenn er SwiftShader oder llvmpipe meldet, rendert er auf der CPU und das dauert Stunden: Behebe die GPU-Flags, bevor du weitermachst (siehe references/pitfalls.md).

4. Szene anpassen

main.js ist eine Datei, in Abschnitte unterteilt. Lies references/techniques.md, bevor du etwas Strukturelles änderst; es erklärt, warum jeder Teil so gebaut ist, wie er ist. Was sich für ein neues Thema normalerweise ändert:

Abschnitt in main.jsWas ersetzt werden muss
KonstantenPhysikalische Daten in Metern, Startgröße L0, Anzahl der Halbierungen HMAX, Zeitachse
MotivoberflächeDer Querschnitt prof(), die ausgeschnittene Kontur, die Tabelle der Oberflächenmerkmale FEATS (Wellenlänge, Typ, Stärke)
Feinste SkalaDas Atomgitter (oder woraus auch immer die letzte Stufe besteht)
Objekte zum GrößenvergleichDie addObj(name, sizeText, sizeInMetres, geometry, material, placement)-Liste
OverlayLABELS (was auf jeder Zoomstufe zu sehen ist), die letzte Bildunterschrift
KamerapfadK_AZ, K_EL, K_TY, K_D, K_AP als Funktionen der Zoomstufe

Für ein Motiv mit einer anderen Form (ein Chip, ein Blatt, ein Blatt Papier) behalte die Mechanik bei und ersetze das Profil und die Merkmale. Für einen Zoom nach außen verwende die gleiche Zeitachse rückwärts und sage „verdoppelt“.

5. Betrachte Standbilder vor dem Rendern des Films

Rendere 8 bis 10 Standbilder, die über die Zeitachse verteilt sind, setze sie mit ffmpeg zu Kontaktbögen zusammen und lies sie. Dann korrigiere, was du siehst, und wiederhole den Vorgang. Diese Schleife bringt die Qualität; jedes Problem in der ersten Version des Referenzfilms war in Standbildern sichtbar, aber keines im Code. Überprüfe insbesondere:

  • Belichtung. Der erste Durchgang ist fast immer überbelichtet. Metall sollte meist dunkel mit definierten Glanzlichtern sein.
  • Alles, was vom Bildrand abgeschnitten wird, besonders Maßstabsobjekte in der Nähe des oberen Rands.
  • Beschriftungen über hellen Bereichen oder übereinander. Halte die Maßbeschriftung im leeren Schwarz.
  • Ob jede Stufe so aussieht, wie ihre Beschriftung sagt. Wenn die Beschriftung „Körner“ sagt und das Bild Streifen zeigt, ist eines davon falsch.
  • Das erste und letzte Bild, da dies das Vorschaubild und die Pointe sind.
ffmpeg -y -i a.jpg -i b.jpg -i c.jpg -i d.jpg -filter_complex "[0][1]hstack[t];[2][3]hstack[u];[t][u]vstack,scale=1920:-1" sheet.jpg

6. Rendern und Ergebnis überprüfen

node render.mjs --full --o video.mp4            # --audio vo.wav hinzufügen, falls es eine Erzählung gibt

Führe es im Hintergrund aus; ein 45-Sekunden-Film in 1080p dauert auf einer dedizierten GPU ein paar Minuten. Überprüfe dann die Datei selbst, nicht die zuvor erstellten Standbilder: Miss Dauer und Größe, extrahiere ein Übersichtsgitter und extrahiere sechs aufeinanderfolgende Bilder aus einem belebten Abschnitt, um nach Flackern zu suchen. Feine prozedurale Details komprimieren schlecht, also erwarte große Dateien und erstelle bei Bedarf eine kleinere Kopie:

ffmpeg -i video.mp4 -vf "fps=1/3,scale=640:-1,tile=4x4" -frames:v 1 overview.jpg
ffmpeg -ss 13 -i video.mp4 -vf "crop=960:540:480:270,tile=3x2" -frames:v 1 consecutive.jpg
ffmpeg -i video.mp4 -vf scale=1280:720 -c:v libx264 -preset slow -crf 25 -maxrate 4200k -bufsize 8400k small.mp4

Sage klar, was du überprüft hast und was nicht. Bildgitter beweisen, dass das Bild richtig ist; sie beweisen nicht, dass die Bewegung sich richtig anfühlt, also sage, dass der Benutzer es ansehen sollte.

Standardwerte

  • Stumm. Keine Musik, keine Soundeffekte, keine Sprachausgabe, es sei denn, es wird danach gefragt. Das Format trägt sich selbst, und das Referenzvideo, von dem es stammt, hatte keine Erzählung.
  • Text ist nur Daten und Namen. Die Messung, die Halbierungszahl, was zu sehen ist, die Namen und Größen der Maßstabsobjekte, eine letzte Zahl. Wenn eine Erzählung hinzugefügt wird, entferne jedes Label, das die Stimme bereits sagt, weil das Lesen und Hören derselben Wörter die Aufmerksamkeit teilt.
  • 1920x1080, 30 fps, 40 bis 50 Sekunden, gerendert mit 1,5-facher Geschwindigkeit und dann herunterskaliert. Für vertikale Videos ändere W und H und überprüfe jedes Standbild erneut; die Komposition überträgt sich nicht von selbst.
  • Beschriftungen in der Sprache des Publikums des Benutzers, was nicht immer die Sprache ist, in der sie chatten. Frage bei Unklarheit nach.

Sprachausgabe hinzufügen

Nur, wenn danach gefragt wird. Schreibe das Skript als kurze Zeilen, die jeweils zu einer Stufe gehören, generiere oder erhalte das Audio, ermittle die Wortzeitpunkte (faster-whisper funktioniert gut), und steuere dann den Zoom über das Audio: Die Zoomstufe wird eine keyframed Funktion der Zeit, die während einer Zeile, die eine Stufe erklärt, pausiert und zwischen den Zeilen weiterzoomt. Übergib das Audio an render.mjs --audio. Lass während jeder Pause etwas Kleines passieren (ein Lichtstreifen, ein ankommendes Objekt, vibrierende Atome), sonst wirkt ein angehaltener Zoom eingefroren.

Referenzdateien

  • references/techniques.md – wie die Vorlage funktioniert und warum: Skalierung um den Fokuspunkt, skalenbegrenzte prozedurale Details, Kugel-Impostoren, Schärfentiefe, im physikalischen Raum verankerte Objekte, der deterministische Renderer. Vor strukturellen Änderungen lesen.
  • references/pitfalls.md – bereits aufgetretene Fehler und ihre Behebungen. Lesen, wenn ein Render falsch aussieht oder ein Tool sich falsch verhält.
  • MASTER_PROMPT.md – ein ausfüllbarer Prompt zum Starten eines neuen Videos, sowie Themenideen, die zum Rezept passen.

Verwandte Skills