@docyrus/animaguru 0.26.0 → 0.28.0

package/templates/video/src/studies/three-film.ts

@@ -0,0 +1,42 @@
+import { Container, type Application } from "pixi.js";
+import copy from "../../shared/locales/en/style-studies.json";
+import { collectTexts } from "../kit/film-base";
+import type { ResourceTrack } from "../timeline-model";
+import { STUDY_DURATION } from "./model";
+import { THREE_STUDIES, type ThreeStudyId } from "./three";
+
+/** 3D studies are designed at 1920×1080 and scaled to the film's size. */
+export const THREE_STUDY_WIDTH = 1920;
+export const THREE_STUDY_HEIGHT = 1080;
+
+export function threeStudyChapters(id: ThreeStudyId) {
+  return [{ start: 0, end: STUDY_DURATION, label: copy.threeStyles[id].name, caption: copy.threeStyles[id].lines[0] }];
+}
+
+/** A 3D style study: a three.js stage (kit/three-stage.ts) with Pixi text and leaders on top. Every frame is a function of seconds. */
+export class ThreeStudyFilm {
+  captions = true;
+  readonly resources: ResourceTrack[];
+  private readonly root = new Container();
+  private readonly ready: Promise<(seconds: number) => void>;
+
+  constructor(private readonly app: Application, id: ThreeStudyId) {
+    app.stage.addChild(this.root);
+    this.root.scale.set(app.screen.width / THREE_STUDY_WIDTH, app.screen.height / THREE_STUDY_HEIGHT);
+    const study = copy.threeStyles[id];
+    this.resources = [
+      { id: "scene", label: copy.resourceScene, kind: "model", clips: [{ id: "scene", label: study.name, start: 0, end: STUDY_DURATION }] },
+      { id: "typography", label: copy.resourceText, kind: "text", clips: study.lines.map((label, i) => ({ id: `text-${i}`, label, start: 0, end: STUDY_DURATION })) },
+    ];
+    this.ready = THREE_STUDIES[id]().then((build) => build(this.root, study.lines));
+  }
+
+  get texts() { return collectTexts(this.root); }
+  get cues() { return []; }
+
+  async render(seconds: number) {
+    const update = await this.ready;
+    update(Math.min(Math.max(seconds, 0), STUDY_DURATION - 1e-5));
+    this.app.render();
+  }
+}

package/templates/video/src/style.css

@@ -74,7 +74,7 @@ main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 .resource-row { height: 39px; border-bottom: 1px solid #e6e8dc; }
 .resource-label { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 11px; background: #fbf9f3; border-right: 1px solid #d9dfcf; }
 .resource-icon { color: #819372; display: flex; flex: none; }.resource-icon svg { width: 14px; height: 14px; }
-.kind-text .resource-icon { color: #9a83b7; }.kind-captions .resource-icon { color: #ab914b; }.kind-audio .resource-icon { color: #438d7a; }.kind-video .resource-icon, .kind-image .resource-icon { color: #6388bd; }
+.kind-text .resource-icon { color: #9a83b7; }.kind-captions .resource-icon { color: #ab914b; }.kind-audio .resource-icon { color: #438d7a; }.kind-video .resource-icon, .kind-image .resource-icon { color: #6388bd; }.kind-model .resource-icon { color: #b0703f; }
 .resource-name { font-size: 10px; color: #596d52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .resource-state { margin-left: auto; font-size: 8px; color: #8b927e; }
 .resource-lane { position: relative; background-image: linear-gradient(to right, #dfe4d480 1px, transparent 1px); background-size: var(--resource-grid-step, 100px) 100%; }
@@ -84,6 +84,7 @@ main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 .kind-captions .resource-clip { background: #f4edcd; border-color: #e5d99f; color: #91792f; }
 .kind-audio .resource-clip { background: #d5e9df; border-color: #aed2c0; color: #3d7b62; }
 .kind-video .resource-clip, .kind-image .resource-clip { background: #dee8f4; border-color: #becfe8; color: #5b7fae; }
+.kind-model .resource-clip { background: #f4e5d8; border-color: #e6cbb3; color: #9a6136; }
 .resource-clip.active, .resource-clip:hover { opacity: 1; filter: saturate(1.12); }
 .resource-clip.selected { border-color: #2c6bd0; box-shadow: inset 0 0 0 1px #2c6bd0; opacity: 1; }
 .resource-clip:focus-visible { outline-offset: -2px; }

package/templates/video/src/timeline-model.ts

@@ -1,4 +1,4 @@
-export type ResourceKind = "graphics" | "image" | "video" | "text" | "captions" | "audio";
+export type ResourceKind = "graphics" | "image" | "video" | "text" | "captions" | "audio" | "model";
 export type ResourceClip = { id: string; label: string; start: number; end: number; source?: string };
 export type ResourceTrack = { id: string; label: string; kind: ResourceKind; clips: ResourceClip[] };