3D-Animation fürs Web: Turm und Taube in Spline

Interaktive 3D-Animation mit Taube und Gebäude für deine Website

Der Design-Direktor erstellte eine 3D-Szene mit einem optimierten Modell eines Stalinturms und einer animierten Taube, die mittels KI generiert wurde. Durch manuelle Retopologie wurden die Polygone des Gebäudes von 400.000 auf 17.000 reduziert und die der Taube von 1,5 Millionen auf nur 1.000. Die Integration in Spline mit Flugpfaden und Skelettanimation sorgte für interaktive Elemente, ohne den Browser zu überlasten.

Optimierung des Architekturmodells

Das ursprüngliche Turmmodell im Stil der Stalinzeit hatte 402.383 Polygone – typisch für detaillierte technische Modelle mit Fassaden, Wappen und Sternen. Eine automatische Optimierung war aufgrund der notwendigen geometrischen Präzision nicht geeignet. In Blender wurde Vertex-Snap verwendet: Parallelepiped-Formen wurden an Schlüsselpunkten angebracht und manuell um Konturen herum nachgezeichnet.

Symmetrie halbierte die Arbeitszeit – nur ein Viertel der Fassade wurde gebaut und dann gespiegelt. Endstand: 17.693 Polygone. Die Grundgeometrie wurde vereinfacht, während Details der Fassade erhalten blieben. In Spline wurde das Modell in eine Punktewolke umgewandelt, deren Farbe, Dichte und Partikelgröße anpassbar sind.

Ein Mesh-Vergleich zeigt den Unterschied: Das Original ist dicht gepackt, während die optimierte Version große Polygone auf einfachen Flächen nutzt.

Generieren und Retopologisieren des Vogelmodells

Für die Taube wurde Tripo mit dem Prompt "Stadttaube mit ausgebreiteten Flügeln" verwendet. Das Ergebnis war ein 1,5-Millionen-Polygon-Modell mit Mängeln: Beule am Schnabel, schief stehende Beine. In Blender erfolgte manuelle Retopologie durch Umrisszeichnung, Proportionskorrektur und Überflüssiges entfernen.

Anpassungen für Animation: Beine positioniert für Bewegung, Schnabel ausgerichtet. Um mehr als das 1.000-fache vereinfacht – auf 1.284 Polygone, ausreichend für ein kleines Bildschirmelement. Retopologie-Prozess: Hochpoly-Grundlage → Niedrigpoly-Oberfläche mit Erhalt der Silhouette.

Skelettanimation basierend auf echten Referenzen

Das Skelett besteht aus dreieckigen Knochen innerhalb des Modells, symmetrisch (die Hälfte gebaut + gespiegelt). Geometrie-Bindung an Knochen in Blender: Drehen eines Knochens bewegt die Mesh-Geometrie.

Referenzen: Langsamlauf-Videos von Tauben auf YouTube – Abheben mit Flügelschlag, Beinverlängerung, Sinkflug. Landeanimation: Ziel-Ebene + Keyframes.

Flügelklappern wurde vereinfacht: Skalierung statt Einzel-Feather-Animation, da Details aus der Ferne nicht sichtbar sind. Mikroanimationen:

• Schwanz: Auf-Ab-Bewegung entlang der Knochen.
• Kopf: Rotation.
• Krabbeln: Flügelhebung + Kopfbewegung.
• Nebenaktionen: Hocken vor Abheben, Zucken des Schwanzes.

Mikroanimationen und Website-Integration

Die Taube erscheint in drei kurzen Clips (Ankunft, Landung, Abflug) innerhalb eines kleinen, per JavaScript steuerbaren Quadrats. Passform-Test am Logo: Design in Blender importiert, Oberfläche feinjustiert.

Arbeiten in Spline: Trajektorien und FPS

Export aus Blender bei 24 FPS. In Spline: gestreifte Vogeloptik, kreisförmiger Flugpfad mit zentrischer Verschiebung für natürliche Bewegung. Kamera: Zoom-Out + Zentrierung erhöht den Sichtbereich.

Herausforderungen:

• FPS nicht fest: 24+ auf leistungsstarken PCs, niedriger auf schwachen Geräten → Flügelschlag-Desynchronisation.
• Animation zurücksetzen: Minimiert durch Halten von Elementen im Sichtfeld.

Das Gebäude rotiert mit dem Cursor; die polygonale Rückseite wurde wiederhergestellt.

Tools und Workflow für Web-3D

• Blender: Modellierung, Rigging, Animation.
• Tripo: Erzeugung von Basismodellen.
• Spline: Szenenbau, Interaktivität, Punktewolken.
• After Effects: 2D-Animationen für Videos.

Wichtige Erkenntnisse:

• Manuelle Retopologie reduziert die Last drastisch, ohne die Silhouette zu beeinträchtigen.
• Symmetrie beschleunigt die Modellierung um das Vierfache.
• Langsam-Lauf-Referenzen sind essenziell für realistische Skelettanimationen.
• Spline erfordert Workarounds: Kamerapositionierung für Blickwinkel, Trajektorien für Flugbewegungen.
• 24 FPS + Mikroanimationen liefern Lebendigkeit mit minimaler Dateigröße.

Gesamter Workflow: Generierung → Retopologie → Rigging → Animation → Export → Spline.

— Editorial Team