Post de Julien Probst

Voir le profil de Julien Probst, visuel

Graphisme & Interaction ⚔️ Conquérir coeurs et marchés avec des expériences digitales.

🎩✨ [𝗦𝗲𝗰𝗿𝗲𝘁 𝗱𝗲 𝗠𝗮𝗴𝗶𝗰𝗶𝗲𝗻 #𝟭] Comment on colle une tonne d'animations dans un site web sans qu'il pèse le poids d'un âne mort ? Cette semaine, je vous partage les secrets de fabrication qui ont rendu notre dernière créa pour Beyond Aero possible ✈️ Parmi les éléments clé, l'association de deux systèmes 3D : 🏡 𝗦𝘂𝗿 𝗹𝗮 𝗽𝗮𝗴𝗲 𝗱'𝗮𝗰𝗰𝘂𝗲𝗶𝗹, 𝗰'𝗲𝘀𝘁 𝗱𝗲 𝗹𝗮 𝟯𝗗 "𝘁𝗲𝗺𝗽𝘀 𝗿𝗲𝗲𝗹".  On navigue dans la scène quand on déroule avec la souris et votre ordinateur fait les calculs de la géométrie en 3D et de la lumière en temps réel. Bref, c'est "pour de vrai" et si on vous laissait le contrôle, vous pourriez aller voir derrière l'avion, en dessous, zoomer sur les roues, etc... 👩✈️ 𝗦𝘂𝗿 𝗹𝗮 𝗽𝗮𝗴𝗲 𝗱𝗲 𝗹'𝗮𝘃𝗶𝗼𝗻 "𝗢𝗻𝗲", 𝗰'𝗲𝘀𝘁 𝗱𝗲 𝗹𝗮 𝟯𝗗 𝗽𝗿𝗲𝗰𝗮𝗹𝗰𝘂𝗹𝗲𝗲. Ca signifie que j'ai déjà fait tourner une "simulation" de la scène sur mon ordinateur, et qu'on a enregistré le résultat. Au déroulé, vous faites simplement jouer la vidéo image par image. 𝗣𝗼𝘂𝗿𝗾𝘂𝗼𝗶 𝘁𝗮𝗻𝘁 𝗱𝗲 𝘁𝗿𝗮𝗰𝗮𝘀 ? Parce que chaque technique a son moment pour briller : 🏡 𝗟𝗮 𝗽𝗮𝗴𝗲 𝗱'𝗮𝗰𝗰𝘂𝗲𝗶𝗹 vise l'effet waouh : fluide, artistique, fidèle à la marque, et légère comme une plume (moins de 4Mo). 👩✈️ 𝗟𝗮 𝗽𝗮𝗴𝗲 "𝗢𝗻𝗲" détaille la technologie de propulsion avec une précision fidèle à la projection des ingénieurs, photoréaliste avec des textures riches. Le tout positionné précisément dans l'écran. Plus complexe et moins performant en temps réel (il y aurait beaucoup de 3D à charger). Donc on effectue un pré-rendu de la séquence et on joue des images. 𝗣𝗼𝘂𝗿𝗾𝘂𝗼𝗶 𝗰'𝗲𝘀𝘁 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝘁 𝗱𝗮𝗻𝘀 𝗻𝗼𝘁𝗿𝗲 𝗽𝗵𝗶𝗹𝗼𝘀𝗼𝗽𝗵𝗶𝗲 ? Parce que c'est le résultat d'une logique précise : D'abord, on définit le but et le contenu de chaque élément de l'expérience. Ensuite, son look. Et enfin, la technologie pour le concrétiser. Demain, on vous explique comment on a fait tenir 600 images sur la page "One" en moins de 12Mo. Restez branchés ! 😉

Marco BARONI

Fondateur @PolitWire - IA & Data Analysis pour la politique médiatique du monde entier | Newsletter ❤️ Love My Product (abonnez-vous le lancement)

9 mois

Je n'ai pas tout compris. Three.js utilise un système de pre-rendu ? Ou c'est d'abord fabriqué dans Unreal et exporter au format vidéo?

Vincent Camerano

Expériences digitales inoubliables 💎 | Creative Developer / Founder @ Iron Velvet ⚔️

10 mois

En plus, dans les deux cas, la méthodologie est vraiment cool pour itérer rapidement et arriver au meilleur résultat possible 🔥

Voir plus de commentaires

Identifiez-vous pour afficher ou ajouter un commentaire

Explorer les sujets