Animation 3D pour le web : tour et pigeon dans Spline

Créer une animation 3D interactive avec un pigeon et un immeuble pour votre site web

Le directeur artistique a conçu une scène 3D mettant en vedette un modèle optimisé d’un immeuble de l’ère stalinienne et une pigeonne animée via réseau neuronal. La retopologie manuelle a réduit le nombre de polygones de 400 000 à 17 000 pour l’immeuble, et de 1,5 million à seulement 1 000 pour l’oiseau. L’intégration dans Spline avec des trajectoires de vol et une animation squelettique a permis une interactivité fluide sans surcharger le navigateur.

Optimisation du modèle architectural

Le modèle original de l’immeuble, dans le style stalinien, comptait 402 383 polygones — typique pour des projets techniques exigeant une grande précision, comme les façades, les armoiries ou les étoiles. L’optimisation automatique n’était pas adaptée, car elle aurait compromis le contrôle géométrique précis. Dans Blender, on a utilisé le verrouillage de sommets : des parallélépipèdes ont été fixés aux points clés et tracés manuellement autour des contours.

La symétrie a réduit de moitié le travail — seulement un quart de la façade a été construit puis miroité. Total final : 17 693 polygones. La géométrie principale a été simplifiée tout en conservant les détails de la façade. Dans Spline, le modèle a été converti en nuage de points avec des paramètres ajustables pour la couleur, la densité et la taille des particules.

Un comparatif des maillages montre la différence : le modèle initial est dense, tandis que la version optimisée utilise de grands polygones sur les surfaces simples.

Génération et retopologie du modèle de pigeon

Pour le pigeon, Tripo a été utilisé avec la requête « oiseau urbain aux ailes déployées ». Le résultat était un modèle de 1,5 million de polygones, mais avec des défauts : une bosse sur le bec, des pattes tordues. La retopologie manuelle dans Blender a consisté à dessiner les formes, corriger les proportions et supprimer les volumes superflus.

Ajustements pour l’animation : pattes positionnées pour le mouvement, bec aligné. Réduction de plus de 1 000 fois — passé à 1 284 polygones, suffisant pour un objet visible à petite échelle. Processus de retopologie : modèle haute-résolution → surface basse-résolution préservant la silhouette.

Animation squelettique basée sur des références réelles

Le squelette est composé d’os triangulaires à l’intérieur du modèle, symétriques (demi-construction + miroir). Liaison de la géométrie aux os dans Blender : faire pivoter un os fait bouger le maillage.

Références : vidéos YouTube au ralenti de pigeons — décollage avec battement d’ailes, extension des pattes, descente. Animation d’atterrissage : cible plane + keyframes.

Le repli des ailes a été simplifié : mise à l’échelle au lieu d’une animation par plume, car les détails ne sont pas visibles de loin. Micro-animations :

• Queue : mouvement haut-bas le long des os.
• Tête : rotation.
• Grattage : soulèvement de l’aile + mouvement de tête.
• Actions secondaires : accroupissement avant le décollage, sursaut de queue.

Micro-animations et intégration au site

L’oiseau apparaît dans trois courtes séquences (arrivée, atterrissage, départ) dans un petit carré déplaçable contrôlé par JavaScript. Test d’adaptation au logo : le design importé dans Blender pour affiner la surface.

Travail dans Spline : trajectoires et FPS

Exporté depuis Blender à 24 FPS. Dans Spline : style de pigeon rayé, trajectoire circulaire avec décalage central pour un mouvement naturel. Caméra : zoom arrière + centrage augmente le champ de vision.

Problèmes rencontrés :

• FPS non fixe : 24+ sur PC puissant, plus bas sur machines faibles → désynchronisation du battement d’ailes.
• Réinitialisation de l’animation : minimisée en gardant les éléments à l’écran.

L’immeuble tourne avec le curseur ; le dos polygonal est restauré.

Outils et flux de travail pour le 3D web

• Blender : modélisation, rigging, animation.
• Tripo : génération de modèles de base.
• Spline : assemblage de scène, interactivité, nuages de points.
• After Effects : animations 2D pour vidéos.

Points clés :

• La retopologie manuelle réduit fortement la charge sans sacrifier la silhouette.
• La symétrie accélère la modélisation jusqu’à quatre fois.
• Les références au ralenti sont essentielles pour une animation squelettique réaliste.
• Spline nécessite des contournements : positionnement de caméra pour l’angle, trajectoires pour le vol.
• 24 FPS + micro-animations donnent vie à l’animation avec un poids de fichier minimal.

Flux global : génération → retopologie → rigging → animation → export → Spline.

— Editorial Team