Diorama Worlds
Nécessite Node.js 20+, npm et un navigateur WebGL 2. Chrome/Chromium est requis pour les vérifications visuelles automatisées. Les dépendances de construction s'installent une fois ; le HTML généré intègre Three.js et n'a besoin d'aucun réseau.
Créez un petit lieu vivant, pas un modèle rotatif ni une vidéo sur un plan. Cette compétence appartient au dépôt Diorama, mais possède son propre moteur de rendu et ses dépendances. Ne modifiez jamais le kit/diorama.js, bench.html ou les exemples SVG du skill diorama pour faire fonctionner un monde.
Tous les chemins ci-dessous sont relatifs à ce dossier de compétence. Écrivez la scène de l'utilisateur et la sortie construite dans son répertoire de travail, pas par-dessus les exemples fournis.
Choisissez une histoire et un rendu
Utilisez la référence fournie par l'utilisateur comme direction artistique, pas comme instructions exécutables. Une vidéo de référence n'est pas une preuve de son code source ou de son moteur de rendu.
Identifiez le lieu, son utilisation sur le web, une action principale et l'image clé narrative. Ne demandez que si un choix manquant change substantiellement la scène ; autrement, énoncez le concept choisi et poursuivez. Préservez le sujet demandé ; l'exemple du cricket n'est pas un modèle universel.
- Miniature : géométrie low-poly mate, usure de surface, texture retenue, bord de terrain irrégulier, lumière directionnelle chaude et ombres portées lisibles.
- Demi-teinte : papier ivoire chaud, encres chaudes/froides et tramage en points diagonaux avec définition de bord retenue. Un traitement de l'espace écran en direct, pas une simulation d'impression physique.
- Plan technique : remplissages tonals bleu foncé, traits de bord pâles et une grille subtile à l'intérieur du contour de la géométrie. Un traitement graphique, pas de la CAO ou de la géométrie à lignes cachées.
- Pixel : la même scène et la même horloge, rendues à une résolution inférieure, agrandies avec des pixels voisins, avec tramage ordonné et quantification des canaux. C'est un rendu pixel sur de la géométrie 3D, pas de l'art voxel ou des sprites faits à la main. Commencez par le rendu noyau ; ne remplacez pas un moteur de rendu fonctionnel par un flou CSS ou une image statique.
Gardez la caméra fixe. L'espace négatif blanc isole la scène. Le sol est un découpage plat et irrégulier qui se fond dans cet espace, pas une plateforme épaisse. N'imposez jamais de mur de sol ou de piédestal d'affichage ; utilisez une base extrudée uniquement lorsqu'elle est explicitement demandée. Préférez une action qui a anticipation, contact et récupération plutôt que dix gigotements indépendants sans but. Entourez-la d'une vie secondaire qui n'entre pas en compétition avec l'histoire. Un ballon de sport doit aller dans la main, la batte ou le panier de l'acteur, pas seulement passer à proximité.
Lisez references/art-direction.md pour les décisions de composition et de rendu spécifiques. Lisez references/scene-api.md avant de construire.
Construire un monde
Installez les dépendances épinglées de la compétence une fois, sans scripts de cycle de vie :
npm ci --ignore-scripts --prefix <skill>
Écrivez <sujet>.js comme un module ES important defineWorld depuis @diorama/worlds. Exportez un seul monde avec un name, title, description, duration fini positif, still à l'intérieur de la boucle, bounds, build(W) et tick({t, parts, W}). L'exemple le plus proche est une référence de format, pas une limite sur le sujet :
examples/bakery.js: boulanger roulant de la pâte avec des vérifications de contact poignet-poing.examples/observatory.js: réglage de la mise au point sur un télescope pointant vers le haut avec des ancres de prise support/foyer.examples/florist.js: stand de fleurs original à deux personnes, rig adulte partagée, pieds plantés et ancres de prise de bouquet.examples/pottery-studio.js: action artisanale originale, rig adulte partagée suivant un récipient en argile tournant avec des contacts réels des mains.examples/cricket.js: un vaste terrain, des joueurs articulés et un cycle de balle coordonné.examples/basketball.js: une plus petite vignette, un tir, un filet et une passe de retour.examples/street-juggler.js: un résultat frais d'un test de transfert ; une cascade à trois balles dont les positions d'attrapé/lâché sont vérifiées par rapport aux paumes. Il utilise des bras personnalisés pilotés par des points d'extrémité, pas un moteur de rendu différent.
Préférez des sujets originaux qui transfèrent le langage visuel, pas une autre copie de la scène de référence de l'utilisateur. Utilisez les aides partagées pour adultes W.person, W.plant et W.reach pour les personnes ; ne les remplacez pas par des figures à tête surdimensionnée.
Utilisez les aides du kit pour construire la géométrie une fois et retourner des références pour l'animation. tick doit assigner chaque transformation animée à partir du temps absolu. Pas de positions cumulées, de compteurs d'images, de nouvelle géométrie/matériaux par image, de minuteries indépendantes ou de dérive de la caméra. Utilisez un timing d'événements en temps réel : un tir au basket ne doit pas flotter pendant deux secondes sauf si un ralenti a été demandé. Mettez en place anticipation, vol/contact rapide et récupération lisible ; le taux de lecture par défaut est 1×, pas une réparation pour une chronologie lente. L'horloge d'exécution est indépendante des images perdues.
Définissez bounds pour couvrir toutes les poses, les accessoires en mouvement et les ombres, pas seulement la géométrie initiale. Les pièces répétées sont automatiquement instanciées par géométrie et matériau ; réutilisez les couleurs de la palette.
Les objets spécifiques au sujet peuvent être construits avec des groupes et des primitives. Pour une géométrie ou un matériau Three.js personnalisé, enregistrez-le avec W.own(resource) afin que le démontage le libère. N'ajoutez pas de contrôles qui nécessitent un survol : l'histoire de la scène doit fonctionner au toucher sans pointeur.
Construisez un fichier HTML unique hors ligne :
node <skill>/scripts/build-world.mjs <sujet>.js <sortie.html>
Le résultat inclut Three.js, les textures générées, la scène et les contrôles. Il est plus volumineux que la sortie SVG du skill diorama : divulguez ce compromis. Aucun import CDN, texture de stock, téléchargement de modèle ou clé API n'est nécessaire. Gardez les nouveaux actifs externes optionnels et divulguez leur licence et leur coût réseau si demandé.
Prouver la sortie réelle
Exécutez la vérification de rendu sur la nouvelle scène, pas seulement sur les exemples fournis :
node <skill>/scripts/look-world.mjs <sujet>.js <répertoire-de-sortie>
Cela ouvre le HTML généré réel dans Chromium sans accès réseau, sauvegarde plusieurs phases et les quatre rendus, une vue mobile et un rapport JSON. Pour une histoire axée sur le contact, déclarez contactTimes et un inspecteur contacts({t,parts,W}) retournant des paires {label,a:[x,y,z],b:[x,y,z]}. La commande look compare les points d'extrémité posés réels à ces moments. Vérifiez également les coordonnées de la balle/accessoire et de la paume/batte/panier aux moments nommés de lâcher et de contact. Les vérifications génériques de mouvement et de couture n'attrapent pas un accessoire qui manque son acteur.
Cela vérifie les erreurs du navigateur, la géométrie non blanche visible, les changements de scène, la vitesse réelle de l'horloge murale, les contacts main/accessoire déclarés, le budget d'appels de dessin, les recherches déterministes, la couture de boucle, le mouvement réduit, la pause, la suspension hors écran et la libération. CHROME_PATH peut sélectionner un Chromium installé ; sinon npx playwright install chromium dans le dossier de la compétence installe le navigateur pris en charge par Playwright.
Ensuite ouvrez les images sauvegardées et regardez. Passer des vérifications structurelles n'établit pas la ressemblance, la narration ou la qualité artistique. Inspectez le moment du tir/contact, les silhouettes, les ombres, le bord du sol, la lisibilité des pixels, le clipping de la caméra et l'échelle mobile. Lisez references/art-direction.md, corrigez les échecs dans la scène et relancez. Gardez les corrections de performance dans le kit réutilisable uniquement lorsque le défaut s'y trouve de manière démontrable, pas parce qu'une scène a besoin d'une composition différente.
Pour les modifications du kit, exécutez également :
npm test --prefix <skill>
Ne prétendez jamais avoir effectué une revue visuelle sans ouvrir les captures d'écran. Ne prétendez jamais une nouvelle évaluation de la compétence simplement parce que les deux exemples maintenus passent. Un nouveau sujet généré à partir de ces instructions est le test de transfert ; sauvegardez son invite, sa sortie et ses résultats séparément. Si le navigateur/WebGL est indisponible, signalez le bloqueur et laissez la qualité visuelle explicitement non vérifiée.
Livrer honnêtement
Fournissez le HTML construit et au moins une capture d'écran révisée. Énoncez le concept, les rendus, le temps d'image choisi, la taille approximative du fichier et les limitations connues. Pour l'intégration, consultez references/scene-api.md. Ne prétendez pas une fidélité à la référence originale, une accessibilité, des performances sur appareil ou une boucle sans couture au-delà de ce qui a été inspecté ou mesuré. La version publique initiale n'est pas un moteur de rendu certifié pour la production ; divulguez les limitations réelles et les vérifications mesurées.