3D-animacja dla webu: wieża i gołąb w Spline

Tworzenie interaktywnej animacji 3D z gołąbem i budynkiem na stronie internetowej

Początkowy model wieży w stylu stalinańskim zawierał 402 383 poligony — typowy poziom szczegółowości dla zadań inżynierskich z precyzyjnymi detalami fasad, herbowymi elementami i gwiazdami. Automatyczna optymalizacja nie była możliwa ze względu na konieczność dokładnej kontroli geometrii. W programie Blender wykorzystano przytwierdzenie do wierzchołków oryginalnego modelu: tworzono prostopadłościany przyciągane do punktów i ręcznie obrysowywano kontury.

Symetria znacznie zmniejszyła koszty pracy: zbudowano tylko jedną czwartą fasady, a resztę odbito lustrzanie. Efekt końcowy to 17 693 poligonów. Podstawowa geometria została uproszczona, ale detale fasady zachowane. W Spline model przekształcono w chmurę punktów z możliwością dostosowania koloru, gęstości i rozmiaru cząsteczek.

Porównanie siatek pokazuje różnicę: oryginał jest gęsty, optymalizowany — z dużymi polygonami na prostych powierzchniach.

Generowanie i retopologia modelu ptaka

Do stworzenia gołębia użyto Tripo z promptem "city bird with spread wings". Otrzymano model o 1,5 miliona poligonów z wadami: nadmiar na dziobie, zniekształcone łapy. Ręczna retopologia w Blenderze: obrysowanie konturów, poprawa proporcji, usunięcie nadmiaru objętości.

Dostosowanie do animacji: rozstawienie łap do ruchu, wyprostowanie dzioba. Uproszczenie ponad 1000-krotnie — do 1284 poligonów, wystarczających dla małego obiektu na ekranie. Proces retopologii: model wysokopoligonowy → powierzchnia niskopoligonowa z zachowaniem konturu.

Animacja szkieletowa oparta na referencjach

Szkielet to trójkątne kości wewnątrz modelu, symetryczny (połowa + odbicie). Przypisanie geometrii do kości w Blenderze: obrót kości przesuwa mesh.

Referencje: nagrania gołębi w czasie zwolnionym na YouTube: lądowanie z przyspieszeniem skrzydeł, wyprostowanie łap, spadek. Animacja lądowania: cel – płaszczyzna + kluczowe klatki.

Złożenie skrzydeł uprościło się: skalowanie zamiast pojedynczych piór, ponieważ szczegółowość nie jest widoczna z daleka. Mikroanimacje:

• Ogon: w górę-w dół po kościach.
• Głowa: obroty.
• Czesanie: podniesienie skrzydła + ruch głowy.
• Działania pomocnicze: zgięcie przed startem, drżenie ogona.

Mikroanimacje i integracja na stronie

Ptak pojawia się w trzech filmikach (przybycie, lądowanie, odlot) w małym kwadracie przemieszczanym przez JS. Dopasowanie do logo: eksport projektu do Blendera do korekty powierzchni.

Praca w Spline: trajektorie i FPS

Eksport z Blendera (24 FPS). W Spline: wzory pasujące do ptaka, okrągła trajektoria + przesunięcie środka dla naturalności. Kamera: oddalenie + wyśrodkowanie zwiększa kąt widzenia.

Problemy:

• FPS nie jest stały: 24+ na mocnych komputerach, mniej na słabszych → rozbieżność machania skrzydeł.
• Reset animacji: minimalizowano wyjściem poza ekran.

Budynek obraca się wokół kursora, tylna część z poligonami została przywrócona.

Narzędzia i proces dla web3D

• Blender: modelowanie, riggering, animacja.
• Tripo: generowanie podstawowego modelu.
• Spline: montaż sceny, interaktywność, chmura punktów.
• After Effects: animacja 2D do filmów.

Co ważne:

• Ręczna retopologia krytycznie zmniejsza obciążenie bez utraty konturu.
• Symetria przyspiesza modelowanie czterokrotnie.
• Referencje w czasie zwolnionym są niezbędne do realistycznej animacji szkieletowej.
• Spline wymaga trików: pozycjonowanie kamery dla kąta, trajektorie do lotu.
• 24 FPS + mikroanimacje zapewniają żywotność przy niewielkim ciężarze.

Pełny pipeline: generacja → retopologia → riggering → animacja → eksport → Spline.

— Editorial Team