perspective-illusion

Illusion de perspective

Les modèles dans templates/ sont des scènes complètes et fonctionnelles, alors commencez par l'un d'eux :

• street.html est une rue japonaise avec des poteaux, des cônes, un passage piéton et un ciel rouge.
• market.html est un supermarché japonais avec une allée, des présentoirs, des paniers rouges et des rangées de lumières.

Les deux partagent le même rig de caméra, la même timeline et le même passage d'illustration. Seule la section de la scène diffère.

Configuration (par dossier de projet)

mkdir -p ~/Movies/edits/<date>-<name>/stills && cd $_
printf '{"type":"module"}' > package.json && npm i [email protected] [email protected]
cp ~/simcraft/skills/perspective-illusion/templates/{street.html,render.mjs} .
node render.mjs street.html x --stills=0.2,1,2,4,6     # vérifier d'abord les images (stills/st_<t>.png)
node render.mjs street.html out.mp4                     # boucle de 7 s, 1920x1080, flou de mouvement 4 sous-images (~2,5 min)

L'astuce, en quatre parties

1. Disposer la scène le long d'un seul axe (une rue ou une allée s'éloignant selon -z), avec des objets alignés les uns derrière les autres : des poteaux ou colonnes au même x, un bâtiment ou un mur du fond à l'extrémité. Un téléobjectif à 2° depuis 400 m aplatit le tout en une seule élévation. Les poteaux alignés se superposent en un seul, et les longs murs latéraux disparaissent de profil.
2. Ne jamais incliner ni tourner la caméra. Elle fait toujours face directement le long de l'axe, de niveau, de sorte que les verticales restent verticales. Pour « regarder vers le bas » ou « regarder vers le haut », utilisez le décalage d'objectif (H, la position de l'horizon dans le cadre), comme un objectif à décentrement. Chaque plan est défini par {x, y (hauteur de la caméra), zf, W, fov, H, lay, cs}.
3. Morphing entre les plans sous forme de dolly zooms. W reste cadré sur le plan de mise au point zf pendant que le fov change. Chaque paramètre évolue sur une seule courbe monotone cubique à travers toutes les clés, de sorte que la vitesse ne saute jamais.
4. Tricher pendant les phases plates. Les objets (cônes, paniers) glissent vers ou s'éloignent de la caméra uniquement pendant les arrêts sur image plate, où ce mouvement est invisible. C'est ainsi qu'une rangée devient une diagonale (« échange avant/arrière »). Ils peuvent également être dessinés plus grands dans la vue plate (cs).

Correspondance avec une vidéo de référence (faites ceci, ne devinez pas)

• Extrayez ses images à chaque plan. Ensuite, pour chaque plan, mesurez :
  • où se trouvent le point de fuite et l'horizon (donnant H),
  • où atterrissent deux éléments de largeur connue (donnant x et W),
  • le bord proche et lointain d'un élément de longueur connue, comme un passage piéton (donnant la hauteur de la caméra y, la distance et le fov). Les nombres résolus sont dans les commentaires du modèle.
• Regroupez ses images en une palette (k-means sur 4 images) et utilisez ces couleurs exactes.
• Comparez ses images côte à côte avec les vôtres aux mêmes horodatages après chaque modification.

Le passage d'illustration (pourquoi ça a l'air dessiné, pas rendu)

La page effectue trois passes : couleur (cel-shading deux tons), normales de l'espace de vue avec profondeur, et un masque d'ombre provenant uniquement du soleil. Un shader final effectue ensuite trois tâches :

• Traits d'encre partout où la profondeur (seconde différence, de sorte que le sol plat vu de profil n'est pas encré) ou les normales changent. Le poids varie selon le bruit et la recherche vacille légèrement, de sorte que les lignes ne sont pas parfaitement droites. Le seuil de profondeur augmente avec la distance.
• Hachurage dans l'ombre projetée uniquement : ton refroidi et fines hachures diagonales, atténuées sur les surfaces vues presque de profil.
• Ciel (ou plafond) peint à plat là où il n'y a pas de géométrie.

Problèmes rencontrés, pour que vous ne les répétiez pas

• Un commentaire // ajouté à une instruction sur une seule ligne a englouti scene.add(sun), ce qui a laissé le masque noir et tout hachuré. Utilisez /* */, ou une nouvelle ligne.
• Les sols coplanaires qui se chevauchent scintillent au loin. Faites en sorte que les morceaux de sol se rencontrent bord à bord plutôt.
• Une lumière rasante sur les murs à un angle faible donne un auto-ombrage tacheté. Gardez la lumière clé à environ 45° de l'avant, et empêchez les colonnes pleine hauteur et les plafonniers de projeter des ombres.
• Les textes ne doivent jamais apparaître dans les images générées ni sur les panneaux. La signalétique est uniquement constituée de formes.
• Vérifiez les images fixes avant chaque rendu complet, et exécutez la vérification de mouvement (motion_check.py de vox-explainer).