Devlog

Devlog

Notizen aus der Entwicklung der kleinen interaktiven Szenen auf dieser Website – prozedurale Animation, Echtzeit-3D und die Tricks, die sie lebendig wirken lassen.

Aktualisiert Von ShengyuStudio

Ein Strichmännchen mit Two-Bone-IK animieren

Prozedurale Animation auf dem HTML-Canvas: ein IK-Solver in zehn Zeilen aus dem Kosinussatz, Gangzyklen, Füße ohne Rutschen, Keyframe-Spuren mit Easing, Squash and Stretch und Verlet-Haare.

Zum Artikel →

Ein stürmischer Ozean in three.js

Eine Summe aus Sinuswellen als einzige Quelle der Wahrheit, Normalen per finiter Differenzen, Gischt auf den Wellenkämmen per onBeforeCompile, ein Schiff, das ohne Physik hebt, stampft und rollt – und Nebel, Regen und Blitze, die den Sturm verkaufen.

Zum Artikel →

So haben wir einen begehbaren 3D-Wald in three.js gebaut

Prozedurales Gelände rund um einen gewundenen Bach, ein lichtbrechendes Wasserband, 25.000 instanzierte Grashalme mit Wind-Patch per onBeforeCompile, Bäume aus Blattkarten, Klick-zum-Gehen per Raycast auf den Boden sowie Bloom und Color Grading.

Zum Artikel →

Jeder Artikel dreht sich um eine Szene, die du auf unserer Website ausprobieren kannst: die Strichmännchen-Seite (jetzt Stickman Spear Run, ein Runner, in dem du springst und mit dem Speer zustößt – das Bewegungslabor ist als zweiter Modus dabei), Sturm voraus und Waldspaziergang. Genre-Listen und Empfehlungen findest du in unseren Guides.