Communitygithub.com

ascorblack/video-skills

Regeln für 3D-Animationen für Videos im Browser (three.js → Einzelbild-Rendering) – Körper- und Handanimationen aus der Ego-Perspektive, Kontakt von Händen mit Objekten und Oberflächen, Mischen von Posen und Winkeln, Figuren verschieben, schlüssiges Gehen, Leuchteffekte, Kontaktschatten, prozedurale Materialien, Kollisions- und Ruckel-Detektoren. Verwende dies beim Erstellen, Animieren oder Prüfen von 3D-Szenen, Figuren, Händen, Gegenständen in Händen oder Licht in einem Video.

Was ist video-skills?

Diese Skill-Sammlung definiert bewährte Praktiken und Regeln für die 3D-Animation in Browser-Videos, die auf Three.js und Einzelbild-Rendering basieren. Sie stützt sich auf Lektionen aus früheren Projekten, insbesondere einem Egoshooter-3D-Video und einem sowjetischen Wissenschafts-/Diastil-Videoprojekt. Die Skill deckt die korrekte Handhabung von Körper und Händen aus der Ego-Perspektive ab, einschließlich Ärmel, Manschetten und Kontakt mit Oberflächen. Sie enthält Regeln für flüssige Bewegungen: Mischen von Posen und Winkeln mit `lerpAng`, gewichtete Posenwechsel über 0,25–0,6 Sekunden statt harter Umschaltungen, und nahtlose Übergänge zwischen Animationsblöcken. Für die Interaktion mit Objekten wird empfohlen, Gegenstände an der Hand zu befestigen (nicht am Körper) und den Charakter so zu verschieben, dass die Hand auf dem Kontaktpunkt liegt. Schrittlängen werden aus der zurückgelegten Distanz abgeleitet, nicht aus der Zeit, um Schlupf zu vermeiden. Weitere Regeln umfassen Kontaktschatten für Bodenhaftung, prozedurale Materialien (Holz, Leuchten, Bildschirme), Lichterführung sowie Kollisions- und Ruckel-Detektoren, die bis zum finalen Rendering laufen, aber dennoch eine manuelle Sichtprüfung von Schlüsselszenen erfordern. Zusätzlich wird die Verwendung von gebackenem Pose-Smoothing bei Multiprozess-Rendering empfohlen. Die Skill-Markdown-Datei ist in Abschnitte unterteilt: Körper & Hände, Bewegung, Materialien & Licht sowie Frame-Checks. Verwandte Skills für Rendering (`video-render`) und Hand-Synchronisation (`video-ui-capture`) werden separat behandelt.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ascorblack/video-skills/tree/HEAD/ru/skills/video-3d-animation

In Ihrer bevorzugten KI fragen

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

Dokumentation

3D-Animation

Jede Regel stammt aus Lektionen früherer Videos; in eckigen Klammern steht die Quelle (Legende unten).

Kurze Regeln

  1. Hände, Oberkörper, Beine und Schuhe ständig in der Szene lassen, nicht nur einschalten, wenn die Kamera nach unten schaut. [3D]
  2. Jeden Posenwechsel mit Gewicht und Mischung über 0,25–0,6 s durchführen, nicht mit einem Schalter if (t > a). [3D]
  3. Winkel nur auf dem kurzen Weg mischen (lerpAng). [3D]
  4. Den nächsten Animationsblock an der Position beginnen, an der der vorherige endete, nicht an einem Wegpunkt. [3D]
  5. Ein Objekt in der Hand über Kontakt halten: Den Charakter so verschieben, dass die Hand auf dem Punkt liegt [3D]; das Objekt an der Hand befestigen, nicht am Körper [Wissenschaft].
  6. Füße 0–6 mm unter die Oberfläche setzen, nicht darüber [Wissenschaft]; die Hand auf der Oberfläche genau bis zur Fingerkuppe anheben [3D].
  7. Den Schritt aus der zurückgelegten Distanz ableiten, nicht aus der Zeit. [Wissenschaft]
  8. Beim Multiprozess-Rendering Posen gebacken und vorab glätten, der Seite die fertigen Korrekturen übergeben. [3D]
  9. Kontaktschatten geben das meiste „Bodenständigkeit“ für den geringsten Preis. [3D]
  10. Kollisions- und Ruckel-Detektoren bis zum finalen Rendering laufen lassen, aber Vollformat-Frames in Aktionsmomenten trotzdem mit eigenen Augen prüfen. [3D]

Details

  • body-and-hands.md — Körper und Hände aus der Ego-Perspektive, Ärmel und Manschette, Kontakt mit Oberflächen und Möbeln.
  • motion.md — Mischen von Posen und Winkeln, Animationsblöcke, Figuren verschieben, „Leben“ zwischen den Textzeilen, Figuren und Objekte.
  • materials-and-light.md — Leuchteffekte, Schatten, Holz, Abrundungen, Bildschirme, Schriftarten, Scheinwerferkegel.
  • frame-checks.md — Kollisions- und Ruckel-Detektoren, was sie nicht sehen.

Rendering und Beschleunigung — Skill video-render; Synchronisation der Hände in der Szene mit der UI-Aufzeichnung — Skill video-ui-capture.

Quellen

  • [3D] — Lektionen aus einem 3D-Ego-Video im Browser (three.js → Einzelbild-Rendering).
  • [Wissenschaft] — Lektionen aus einem Video im Stil sowjetischer Wissenschaftspopularisierung und Diafilme der frühen 1970er Jahre (Animation flacher Figuren und Objekte).

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

ascorblack/video-skills

Правила звука для роликов — фоновая музыка и звуковое оформление, совпадение звука с картинкой, сведение голоса и музыки (LUFS, истинный пик, приглушение), удлинение музыки без стыков, синтез дикторской озвучки (дословность, темп), архивный «эфирный» голос с помехами, сдача звука и работа с API-ключами. Используй, когда делаешь, сводишь, проверяешь или правишь музыку, звуковые эффекты, озвучку или микс ролика.

ascorblack/video-skills

Правила рендера и оптимизации роликов из HTML/браузерных кадров — грабли покадрового рендера с перемоткой (твины, CSS-анимации, transform, aspect-ratio, SVG use, тяжёлые слои), детерминизм и повторяемость, где уходит время рендера, кодирование на NVENC с битрейтом, воркеры, отвязанный от сессии рендер, вшивание звука без перерендера картинки, проверка готового файла (ffprobe) и хранение версий. Используй, когда рендеришь, ускоряешь, кодируешь, пересобираешь или сдаёшь готовое видео.

ascorblack/video-skills

Правила записи интерфейса программы для роликов, презентаций и gif — покадровая съёмка браузера в виртуальном времени (headless Chrome, beginFrame), демо-стенд с выдуманными данными, курсор, метки во время записи, запасы в начале и конце дубля, лист кадров, наезды и обрезка записи, экран программы в стилизованном кадре, версия на другом языке с теми же кликами и синхронизация рук в 3D-сцене с записью. Используй, когда снимаешь, режешь, ускоряешь или вставляешь в ролик запись экрана приложения.

ascorblack/video-skills

Rules for the visuals of videos about programs and popular-science videos — diagrams and connector lines, terms with applied examples, how long to hold a slide, transitions without jerking, camera push-ins, titles and figures in the frame, stylization in the manner of Soviet popular science and filmstrips (palette, fonts, grain, vignette). Use when designing, drawing or editing frames, slides, diagrams, titles, transitions or the style of a video, and when checking frames before assembly.

Verwandte Skills