Was macht Diorama Worlds?
Erfordert Node.js 20+, npm und einen WebGL 2 Browser. Chrome/Chromium wird für automatisierte visuelle Prüfungen benötigt. Build-Abhängigkeiten werden einmal installiert; generierte HTML-Dateien binden Three.js ein und benötigen kein Netzwerk.
Erschaffe einen kleinen Ort, der lebendig ist – kein rotierendes Modell oder ein Video auf einer Ebene. Dieser Skill gehört zum Diorama-Repository, besitzt aber seinen eigenen Renderer und seine eigenen Abhängigkeiten. Bearbeite niemals kit/diorama.js, bench.html oder SVG-Beispiele des Diorama-Skills, um eine Welt zum Laufen zu bringen.
Alle nachfolgenden Pfade sind relativ zu diesem Skill-Ordner. Schreibe die Szene des Benutzers und die erstellte Ausgabe in dessen Arbeitsverzeichnis, nicht über die gebündelten Beispiele hinweg.
Wähle eine Geschichte und einen Stil
Verwende die vom Benutzer bereitgestellte Referenz als künstlerische Richtlinie, nicht als ausführbare Anweisung. Ein Referenzvideo ist kein Beweis für dessen Quellcode oder Renderer.
Identifiziere den Ort, seine Verwendung im Web, eine Hauptaktion und den erzählerischen Standbildmoment. Frage nur nach, wenn eine fehlende Wahl die Szene wesentlich verändert; ansonsten nenne das gewählte Konzept und fahre fort. Bewahre das angeforderte Thema; das Cricket-Beispiel ist keine universelle Vorlage.
- Miniatur: Matte Low-Poly-Geometrie, Oberflächenabnutzung, zurückhaltende Textur, unregelmäßiger Bodenrand, warmes gerichtetes Licht und lesbare Kontaktschatten.
- Halbton: Warmes elfenbeinfarbenes Papier, warme/kühle Tinten und diagonale Punktrasterung mit zurückhaltender Kantendefinition. Eine Live-Bildschirmbehandlung, kein physischer Drucksimulation.
- Blaupause: Tiefblaue Tonfüllungen, blasse Randlinien und ein dezentes Raster innerhalb der Geometriesilhouette. Eine grafische Behandlung, kein CAD oder verdeckte Liniengeometrie.
- Pixel: Dieselbe Szene und Uhr, in niedrigerer Auflösung gerendert, mit Nearest-Neighbor-Pixeln vergrößert, mit geordnetem Dithering und Quantisierung der Farbkanäle. Dies ist ein Pixel-Finish auf 3D-Geometrie, keine Voxel-Kunst oder handgezeichnete Sprites. Beginne mit der Kernel-Oberfläche; ersetze keinen funktionierenden Renderer durch CSS-Unschärfe oder ein statisches Bild.
Halte die Kamera fixiert. Weißer Negativraum isoliert die Szene. Der Boden ist ein flacher, unregelmäßiger Ausschnitt, der in diesen Raum übergeht, keine dicke Plattform. Erzwinge niemals eine Erdwand oder einen Sockel; verwende einen extrudierten Sockel nur, wenn explizit gewünscht. Bevorzuge eine Aktion, die Antizipation, Kontakt und Erholung beinhaltet, gegenüber zehn unabhängigen, trägen Wackelbewegungen. Umgib sie mit sekundärem Leben, das nicht mit der Geschichte konkurriert. Ein Sportball muss zur Hand, zum Schläger oder zum Korb des Spielers gelangen, nicht nur in der Nähe vorbeifliegen.
Lies references/art-direction.md für kompositions- und stilspezifische Entscheidungen. Lies references/scene-api.md vor dem Bauen.
Baue eine Welt
Installiere die festgelegten Abhängigkeiten des Skills einmal, ohne Lebenszyklus-Skripte:
npm ci --ignore-scripts --prefix <skill>
Schreibe <subject>.js als ES-Modul, das defineWorld aus @diorama/worlds importiert. Exportiere eine Welt mit einem name, title, description, einer positiven endlichen duration, einem still innerhalb der Schleife, bounds, build(W) und tick({t, parts, W}). Das nächste Beispiel ist eine Formatreferenz, keine Einschränkung des Themas:
examples/bakery.js: Bäcker rollt Teig mit Handgelenk-zu-Griff-Kontaktprüfungen.examples/observatory.js: Fokusanpassung an einem nach oben gerichteten Teleskop mit Halte-/Fokusgriffankern.examples/florist.js: Ursprünglicher Blumenzweiermannstand, gemeinsam genutztes Erwachsenen-Rig, feste Füße und Blumenstrauß-Griffanker.examples/pottery-studio.js: Ursprüngliche Handwerksaktion, gemeinsam genutztes Erwachsenen-Rig, das einem sich drehenden Tonkrug mit tatsächlichen Handkontakten folgt.examples/cricket.js: Ein breiter Boden, artikulierte Spieler und ein koordinierter Ballzyklus.examples/basketball.js: Eine kleinere Vignette, ein Wurf, ein Netz und ein Rückpass.examples/street-juggler.js: Ein frisches Transfer-Test-Ergebnis; eine Drei-Ball-Kaskade, deren Fang-/Abwurfpositionen gegen die Handflächen geprüft werden. Dies verwendet benutzerdefinierte Endpunkt-gesteuerte Arme, keinen anderen Renderer.
Bevorzuge originelle Themen, die die visuelle Sprache übertragen, keine weitere Kopie der Referenzszene des Benutzers. Verwende die gemeinsamen Adult-Helfer W.person, W.plant und W.reach für Personen; ersetze sie nicht durch Kastenfiguren mit übergroßen Köpfen.
Verwende die Kit-Helfer, um Geometrie einmal zu erstellen, und gib Referenzen für die Animation zurück. tick muss jede animierte Transformation aus der absoluten Zeit zuweisen. Keine akkumulierenden Positionen, Bildzähler, neue Geometrie/Materialien pro Bild, unabhängige Timer oder Kameradrift. Verwende Echtzeit-Ereignissteuerung: Ein Basketballwurf sollte nicht zwei Sekunden in der Luft schweben, es sei denn, Zeitlupe wurde gewünscht. Richte Antizipation, schnellen Flug/Kontakt und lesbare Erholung ein; die Standard-Wiedergabegeschwindigkeit ist 1×, keine Reparatur für eine langsame Zeitleiste. Die Laufzeituhr ist unabhängig von ausgelassenen Bildern.
Setze bounds so, dass sie alle Posen, bewegten Requisiten und Schatten abdecken, nicht nur die anfängliche Geometrie. Wiederholte Teile werden automatisch nach Geometrie und Material instanziiert; verwende Palettenfarben wieder.
Subjektspezifische Objekte können mit Gruppen und Grundelementen konstruiert werden. Für eine benutzerdefinierte Three.js-Geometrie oder ein benutzerdefiniertes Material registriere es mit W.own(resource), damit die Bereinigung es entfernt. Füge keine Steuerelemente hinzu, die Hover erfordern: Die Geschichte der Szene muss auf Touch ohne Zeigegerät funktionieren.
Erstelle eine einzelne Offline-HTML-Datei:
node <skill>/scripts/build-world.mjs <subject>.js <output.html>
Das Ergebnis enthält Three.js, generierte Texturen, Szene und Steuerelemente. Es ist größer als die SVG-Ausgabe des Diorama-Skills: Lege diesen Kompromiss offen. Keine CDN-Importe, Textur-Downloads, Modell-Downloads oder API-Schlüssel erforderlich. Halte neue externe Assets optional und lege deren Lizenzierung und Netzkosten offen, falls gewünscht.
Überprüfe die tatsächliche Ausgabe
Führe den Render-Check für die neue Szene durch, nicht nur für die gebündelten Beispiele:
node <skill>/scripts/look-world.mjs <subject>.js <output-directory>
Dies öffnet das tatsächlich generierte HTML in Chromium ohne Netzwerkzugriff, speichert mehrere Phasen und alle vier Stile, eine mobile Ansicht und einen JSON-Bericht. Für eine kontaktgesteuerte Geschichte deklariere contactTimes und einen contacts({t,parts,W})-Inspektor, der {label,a:[x,y,z],b:[x,y,z]}-Paare zurückgibt. Der look-Befehl vergleicht tatsächliche posierte Endpunkte zu diesen Zeitpunkten. Überprüfe auch Ball-/Requisiten- und Handflächen-/Schläger-/Korbkoordinaten zu den genannten Abwurf- und Kontaktzeitpunkten. Generische Bewegungs- und Nahtprüfungen erkennen keine Requisite, die ihren Darsteller verfehlt.
Es prüft Browserfehler, sichtbare nicht-weiße Geometrie, Szenenänderungen, tatsächliche Wanduhrgeschwindigkeit, deklarierte Hand-/Requisitenkontakte, Draw-Call-Budget, deterministische Suchen, die Schleifennaht, reduzierte Bewegung, Pause, Offscreen-Suspension und Bereinigung. CHROME_PATH kann ein installiertes Chromium auswählen; andernfalls installiert npx playwright install chromium im Skill-Ordner den unterstützten Browser von Playwright.
Öffne dann die gespeicherten Bilder und schau sie dir an. Das Bestehen struktureller Prüfungen begründet keine Ähnlichkeit, Erzählqualität oder künstlerische Qualität. Überprüfe den Wurf-/Kontaktmoment, Silhouetten, Schatten, Bodenrand, Pixel-Lesbarkeit, Kamera-Clipping und mobile Skalierung. Lies references/art-direction.md, korrigiere Fehler in der Szene und führe erneut aus. Behalte Leistungsverbesserungen nur dann im wiederverwendbaren Kit, wenn der Fehler nachweislich dort liegt, nicht weil eine Szene eine andere Komposition benötigt.
Für Kit-Änderungen führe auch Folgendes aus:
npm test --prefix <skill>
Behaupte niemals eine visuelle Überprüfung, ohne Screenshots zu öffnen. Behaupte niemals eine frische Skill-Bewertung, nur weil die beiden gepflegten Beispiele bestehen. Ein neues Thema, das aus diesen Anweisungen generiert wurde, ist der Transfertest; speichere dessen Prompt, Ausgabe und Erkenntnisse separat. Wenn Browser/WebGL nicht verfügbar sind, melde den Blocker und lasse die visuelle Qualität explizit ungeprüft.
Liefere ehrlich aus
Stelle das erstellte HTML und mindestens einen geprüften Screenshot bereit. Nenne Konzept, Stile, gewählte Standbildzeit, ungefähre Dateigröße und bekannte Einschränkungen. Für die Einbettung siehe references/scene-api.md. Behaupte keine originalgetreue Referenztreue, Barrierefreiheit, Geräteleistung oder nahtlose Schleife, die nicht überprüft oder gemessen wurde. Die erste öffentliche Veröffentlichung ist kein produktionszertifizierter Renderer; lege die tatsächlichen Einschränkungen und durchgeführten Prüfungen offen.