Autor: 希彼赫
Live ausprobieren Über dieses Projekt
„Reh im Wald“ ist eine Echtzeit-Szene in three.js, die im Browser läuft: Ein junges Reh streift durch einen Wald aus Riesenzedern im Stil von Yakushima, während Sonnenlicht durch Lücken im Kronendach fällt, das Gras sich im Wind wiegt und Schmetterlinge um die Blumen gaukeln. Gehen Sie mit ihm spazieren, sammeln Sie die Lichtpunkte, wechseln Sie zwischen Tag und Mondnacht — oder überlassen Sie es der filmischen Kamera und nehmen Sie direkt auf der Seite ein Video auf.
Das Reh wurde mit der Tripo API erstellt — Generierung, Smart Low-Poly, Prüfung der Riggabilität und automatisches Vierbeiner-Rigging — und als geriggtes GLB exportiert; der Wald ist vollständig prozedural. Texturen von Poly Haven (CC0).
Am besten erleben Sie es in einem Desktop-Browser mit Tastatur; auf dem Smartphone tippen Sie auf den Boden, um das Reh loszuschicken, und ziehen, um die Kamera zu drehen.
Highlights
- Steuern Sie das Reh mit WASD oder klicken Sie auf den Boden, um es dorthin zu schicken; halten Sie Shift gedrückt, um zu traben, und ziehen Sie, um die Kamera zu drehen
- Laufen Sie in die leuchtenden Lichtpunkte, um sie einzusammeln — sind alle neun beisammen, erklingt eine Kaskade von Windspielklängen und die Lichtsäulen flammen auf; drücken Sie E oder klicken Sie auf das Reh, und es schaut zu Ihnen auf
- Mit R wechseln Sie zwischen Tag und Mondnacht, mit G kommt eine Bö auf, die das Gras niederdrückt und die Schmetterlinge auseinanderstieben lässt
- Mit C schalten Sie auf die filmische Kamera, mit V nehmen Sie direkt auf der Seite ein Video mit Ton auf; H blendet das Tastenfeld aus
Technische Analyse
Das Reh · Mit Tripo generiert und automatisch geriggt
Das Reh stammt aus einer Pipeline mit der Tripo API — Modellgenerierung, Smart Low-Poly, Prüfung der Riggabilität und automatisches Vierbeiner-Rigging — und kommt als GLB mit rund 15.000 Dreiecken, einem Vierbeiner-Skelett aus 41 Knochen und PBR-Texturen heraus. Die Seite lädt es mit GLTFLoader und skaliert es auf eine Kopfhöhe von etwa 1,55 m, die Größe eines Sikahirschs.
Das Tripo-Rig ist sauber benannt: Jedes Bein ist in Limb_0 bis Limb_3 unterteilt, Wirbelsäule, Hals und Kopf sind der Reihe nach nummeriert. So findet der Code jedes Bein, die Wirbelsäule und den Hals über den Namen und steuert sie direkt an — ohne Knochen für Knochen von Hand zuzuordnen. Ein Shader färbt das Fell im rotbraunen Sommerkleid eines Sikahirschs und streut eine Reihe heller Flecken entlang des Rückens; die Flecken sind an Bind-Pose-Koordinaten gebunden und bleiben beim Laufen fest auf der Haut, und im Gegenlicht bekommt das Fell einen warmen Saum.
Gangart · Ein Gang, live auf dem Rig berechnet
Der Gang wird beim Laden der Seite per IK auf diesem Rig berechnet. Zuerst kommen die Hufbahnen: Am Boden gleitet jeder Huf exakt mit der Geschwindigkeit des Körpers nach hinten; in der Luft hebt er sich, greift nach vorn und setzt wieder auf. Die Beine treten in der Reihenfolge links hinten, links vorn, rechts hinten, rechts vorn, jedes etwa 70 % der Zeit am Boden, während der Körper nur leicht wippt und schaukelt. Jedes Bein wird mit dreigliedriger IK gelöst, die oberes und unteres Segment im Winkel der Bind-Pose hält; beim Anheben eines Vorderbeins knickt das Handgelenk zusätzlich ein. Der gesamte Gang wird in eine Schleife aus 48 Frames gebacken und an den AnimationMixer übergeben.
Die Wiedergabegeschwindigkeit ist die Körpergeschwindigkeit geteilt durch die Geschwindigkeit, mit der die Hufe nach hinten gleiten — ob das Reh gemächlich geht oder mit gedrückter Shift-Taste trabt, die Hufe rutschen nie. Steht es still, dreht der Code die vier Knochen vom oberen Rücken bis zum Kopf: Das Reh grast eine Weile, hebt den Kopf, um zur Seite zu schauen, und senkt ihn wieder — und sobald es losläuft, kommt der Hals hoch.
Der Wald · Komplett im Code gewachsen
Abgesehen vom Reh entsteht im Wald alles im Code; die einzigen Texturen sind CC0-Sets von Poly Haven für Zedernrinde, moosigen Fels und Waldboden. Die Riesenzedern sind rund 44 m hoch: Hauptbäume im Vordergrund bekommen eigene Meshes, die Reihen dahinter werden gebündelt mit InstancedMesh gezeichnet, und die Stammkrümmung nutzt in Shader und JS dieselbe Formel, damit die Äste an den gebogenen Stämmen haften bleiben. Zwischen den Riesen wächst eine Schicht junger Bäume von 8–17 m, und Sträucher, Farne, Felsen und umgestürzte Stämme füllen das Unterholz.
Der Boden ist mit 120.000 instanziierten Grashalmen bedeckt, die sich im Vertex-Shader wiegen; drücken Sie G für eine sechssekündige Bö, die das Gras niederdrückt und die Schmetterlinge aufscheucht. Das Gras weiß außerdem, wo das Reh ist, und biegt sich um es herum zur Seite. Achtzehn Schmetterlinge gaukeln träge um die Blumen, bis das Reh näher kommt und sie aufschreckt, und 70 fallende Blätter mit Stielen und Adern trudeln herab und leuchten auf, wenn sie durch die Lichtsäulen fallen.
Licht · Volumetrische Lichtsäulen und Sonnenflecken
Das Kronendach besteht aus einigen Hundert abgeflachten Blattbüscheln; beim Platzieren wird jedes entlang des Sonnenlichts auf den Boden projiziert und von 29 vorgegebenen Strahlpunkten ferngehalten, damit das Licht in einzelnen Säulen fällt. Das volumetrische Licht tastet jeden Sichtstrahl schrittweise ab und sampelt dabei die Shadow Map der Sonne in halber Auflösung; anschließend wird es mit Distanznebel, ACES-Tone-Mapping, Bloom und FXAA zusammengesetzt.
Die Schatten sind als weiche PCSS-Schatten neu geschrieben — je weiter vom verdeckenden Objekt entfernt, desto weicher die Kante —, und die durch das Kronendach fallenden Lichtflecken werden im Lichtraum berechnet, sodass Gras, Rinde, Reh und Lichtsäulen dasselbe Muster teilen. Staub in der Luft leuchtet nur innerhalb der Lichtsäulen auf und verschwindet im Schatten fast völlig. Drücken Sie R, und die Szene blendet in drei Sekunden zur Nacht über: Die Sonne wird zu kühlem Mondlicht, die Lichtsäulen werden schwächer, und die Lichtpunkte glimmen wie Glühwürmchen.
Kamera & Aufnahme · Direkt auf der Seite filmen
Drücken Sie C für die filmische Kamera: Sie umkreist das Reh langsam, steigt und sinkt, und die gesamte Benutzeroberfläche ist ausgeblendet. Drücken Sie V zum Aufnehmen — MediaRecorder zeichnet die WebGL-Canvas samt Ton mit 60 fps und 16 Mbit/s auf und speichert MP4, wo der Browser es unterstützt, sonst WebM; die Qualitätsstufe bleibt während der Aufnahme fixiert, damit die Auflösung mitten im Clip nicht springt.
Jeder Klang wird live mit Web Audio synthetisiert: ein Windspielton für jeden gesammelten Lichtpunkt, der eine pentatonische Tonleiter hinaufsteigt, und ein Rauschen, wenn eine Bö aufkommt. Die Auflösung passt sich der Bildrate an und geht bei Framedrops eine Stufe herunter; mit 1 / 2 / 3 fixieren Sie niedrige, mittlere oder hohe Qualität von Hand.
