Building Interactive 3D Animation with a Bird and Building for Your Website
The design director assembled a 3D scene featuring an optimized model of a Stalin-era tower and an animated pigeon generated via neural network. Manual retopology reduced polygons from 400,000 to 17,000 for the building and from 1.5 million to just 1,000 for the bird. Integration into Spline with flight paths and skeletal animation delivered interactivity without overloading the browser.
Optimizing the Architectural Model
The original tower model in Stalinist style contained 402,383 polygons—typical for high-detail engineering tasks involving facades, coats of arms, and stars. Automatic optimization wasn’t suitable due to the need for precise geometric control. In Blender, vertex snapping was used: parallelepipeds were attached to key points and manually traced around contours.
Symmetry cut labor in half—only a quarter of the facade was built and mirrored. Final count: 17,693 polygons. Core geometry was simplified while facade details were preserved. In Spline, the model was converted into a point cloud with adjustable color, density, and particle size.
Mesh comparison shows the difference: the original is dense, while the optimized version uses large polygons on simple surfaces.
Generating and Retopologizing the Bird Model
For the pigeon, Tripo was used with the prompt "city bird with spread wings." The result was a 1.5-million-polygon model with flaws: a bump on the beak, crooked legs. Manual retopology in Blender involved outlining shapes, correcting proportions, and removing excess volume.
Animation-ready adjustments: legs positioned for movement, beak aligned. Simplified by over 1,000x—down to 1,284 polygons, sufficient for a small screen object. Retopology process: high-poly base → low-poly surface preserving silhouette.
Skeletal Animation Based on Real References
The skeleton consists of triangular bones inside the model, symmetric (half built + mirrored). Geometry binding to bones in Blender: rotating a bone moves the mesh.
References: slow-motion YouTube videos of pigeons—takeoff with wing flaps, leg extension, descent. Landing animation: target plane + keyframes.
Wing folding was simplified: scaling instead of per-feather animation, as detail isn’t visible at a distance. Micro-animations:
- Tail: up-down motion along bones.
- Head: rotation.
- Scratching: wing lift + head movement.
- Secondary actions: crouching before takeoff, twitching tail.
Micro-Animations and Site Integration
The bird appears in three short clips (arrival, landing, departure) within a small movable square controlled by JavaScript. Fit test on logo: design imported into Blender for surface fine-tuning.
Working in Spline: Trajectories and FPS
Exported from Blender at 24 FPS. In Spline: striped bird styling, circular flight path with center offset for natural motion. Camera: zoom out + centering increases field of view.
Challenges:
- FPS not fixed: 24+ on powerful PCs, lower on weak ones → wing flap desynchronization.
- Animation reset: minimized by keeping elements on-screen.
The building rotates with cursor; polygonal backside restored.
Tools and Workflow for Web 3D
- Blender: modeling, rigging, animation.
- Tripo: generating base models.
- Spline: scene assembly, interactivity, point clouds.
- After Effects: 2D animations for video.
Key Takeaways:
- Manual retopology drastically reduces load without sacrificing silhouette.
- Symmetry speeds up modeling by four times.
- Slow-mo references are essential for realistic skeletal animation.
- Spline requires workarounds: camera positioning for angle, trajectories for flight.
- 24 FPS + micro-animations deliver liveliness with minimal file weight.
Overall pipeline: generation → retopology → rigging → animation → export → Spline.
— Editorial Team
No comments yet.