Catégories
Astuces et Design

The Year of Greta by Superhero Cheesecake remporte le site du mois de février

Un projet passionnant illustrant la chronologie de l'ascension de Greta Thunberg à la tête d'un mouvement mondial, The Year of Greta by Superhero Cheesecake remporte le site du mois de février. Merci à tous ceux qui ont voté et tweeté, vous trouverez le gagnant du Pro Plan gratuit à la fin de l'article

Juste avant Noël, nous cherchions des effets visuels sympas, essayions de nouvelles choses et affinions nos compétences numériques. À cette époque, Greta Thunberg a été élue «Personne de l'année» par le magazine TIME, son élection recevant des opinions mitigées des deux côtés du spectre. Fascinés par ce contraste, nous avons décidé d'en faire notre sujet, bien qu'en fin de compte, notre objectif principal était de créer quelque chose de cool afin que nous puissions examiner de nouvelles idées et technologies que nous n'avions pas eu la chance d'explorer en détail auparavant.

Nous avons utilisé la pose de Greta de la couverture du magazine TIME, car c'était un moment qui a suscité beaucoup d'émotion. Certains étaient d'accord avec sa victoire tandis que d'autres se demandaient si elle le méritait. C'était exactement le sentiment que nous voulions évoquer avec le site. Nous avons invité nos amis de Colorbleed à nous aider avec le modèle 3D et à lui donner vie.

Nous sommes en 2019. Ce n'est pas le moment et le lieu des rêves. C'est le moment de se réveiller. C'est un moment de l'histoire où nous devons être bien éveillés. – Greta Thunberg

Les technologies

Initié comme un projet passion, nous nous sommes amusés à expérimenter, à mélanger les rôles de développeur et à essayer de nouvelles choses. Beaucoup de fonctionnalités visuelles sont le résultat d'expériences, en appuyant sur tous les boutons dat.gui et en espérant finir avec quelque chose d'intéressant.

➭ Assouplissement facile

Il n'y a rien de mieux qu'une bonne facilité. Avant de commencer chaque projet, nos concepteurs créent des exemples de mouvement. Ce sont de bonnes références à une animation finale, accélèrent le processus de développement et peuvent la rendre un peu plus unique. Pour ce projet, nous avons utilisé des exemples de mouvement d'idées qui ne sont jamais devenues un produit final.

Au fil des ans, nous avons déclaré notre amour pour la bibliothèque GSAP à maintes reprises. Il est petit, rapide, facile à utiliser et en constante amélioration. L'un de leurs plugins payants que nous utilisons souvent est leur ThrowPropsPlugin, ou depuis GSAP3, il s'appelle InertiaPlugin. Ce plugin nous aide à créer des accélérations fluides par rapport à la vélocité. C'est vraiment un excellent ajout pour les curseurs et les carrousels.

➭ Chargement des actifs

Presque tous les projets SHCC nécessitent un (pré) chargement de fichiers. En fait, nous aimons tellement le chargement de fichiers que nous avons construit notre propre chargeur de fichiers. Notre chargeur de fichiers accepte les chargeurs personnalisés plug and play qui peuvent gérer n'importe quel type de fichier n'importe où, à tout moment, et crée des files d'attente uniques contenant les ressources, la progression et son état. Comme le chargeur est super extensible, il est devenu courant de créer un nouveau chargeur chaque fois qu'un nouveau format de fichier arrive. Dans ce projet, nous avons utilisé des fichiers HDR qui nécessitent un chargeur personnalisé pour ThreeJS. Nous avons simplement étendu notre chargeur de fichiers pour utiliser ce nouveau type de fichier. Le chargeur de fichiers possède une API simple. Une file d'attente peut contenir différents types de fichiers, par exemple images, sons et vidéos, et peut être chargé en une seule fois, et peut également retourner la progression des fichiers chargés.

➭ ThreeJS

ThreeJS facilite beaucoup le travail avec WebGL. Et pour un projet où plusieurs personnes, ayant différentes expériences avec WebGL, plongent dans des éléments 3D, c'est un soulagement d'avoir ce cadre clair et simple. Il prend en charge toute la gestion des états WebGL redondants avec une API élégante et extensible. Avec l'essor de WebGL, il a gagné en popularité et propose désormais des mises à jour plus fréquentes.

➭ Typographie super nette

Il existe plusieurs stratégies qui peuvent être utilisées pour afficher du texte dans WebGL, mais c'est toujours un peu difficile. Dans les projets précédents, nous avons utilisé les textures de champ de distance signées multicanaux pour rendre la typographie super nette dans WebGL, mais malheureusement, le temps n'était pas de notre côté et à la place, nous avons utilisé les anciennes textures de masque, avec un certain déplacement dans le fragment shader.

Textures de masque de typographie
Textures de masque de typographie

Lighting Éclairage réaliste en temps réel

Pour ce projet, nous voulions expérimenter la mise en œuvre relativement nouvelle des lumières d'environnement dans ThreeJS. La principale raison d'utiliser l'éclairage d'environnement est qu'il ajoute un éclairage plus réaliste à la scène et est relativement bon marché pour un rendu en temps réel. Comme pour tous nos projets au Superhero Cheesecake, nous visons à ajouter autant de détails et de qualité que possible sans compromettre les performances. Environnements L'éclairage dans le rendu en temps réel était un moyen d'y parvenir.

Éclairage d'ambiance
Éclairage d'ambiance

Des informations plus détaillées sont écrites ici

L'éclairage d'environnement ajoute de la lumière à la scène comme si elle provenait d'une sphère entourant la scène. La lumière est généralement colorée à l'aide d'une image appelée carte de l'environnement. Une carte d'environnement peut faire correspondre l'éclairage (et les reflets) d'une scène à un emplacement réel, ou peut simplement être utilisée pour ajouter une variation intéressante à l'éclairage de la scène. Dans une configuration de rendu PBR, un éclairage environnemental réaliste est peu coûteux à rendre.

➭ Faire éclater ces ombres

L'occlusion ambiante est l'une des choses qui peuvent vraiment faire éclater votre scène. Il y a beaucoup de documentation sur ce qu'est l'Occlusion ambiante. L'application de l'occlusion ambiante permet une projection d'ombres plus réaliste. Le calcul est assez lourd en temps réel, c'est pourquoi nous avons précuit les ombres au préalable et l'avons appliqué comme texture à Greta.

Occlusion ambiante
Occlusion ambiante

➭ Souligner le mouvement circulaire

Nous avons mis en place quelques astuces pour souligner le mouvement circulaire. La scène entière est placée à l'intérieur d'une grande sphère avec une texture de bruit perlin qui tourne à côté de Greta. Cela rend la scène plus dynamique et mise en contexte. Si vous regardez attentivement la zone autour de Greta, vous verrez de petites particules flottant autour d'elle. La mise à l'échelle et la rotation de ces particules contribuent à améliorer la sensation de mouvement.

Mais principalement l'effet de biais sur les tuiles basé sur l'intensité du défilement fait l'affaire. Cela se fait dans le vertex shader. Le GPU est beaucoup plus rapide dans le calcul et la mise à jour de ces valeurs que lorsqu'il est fait avec JavaScript sur le CPU.

Effet d'inclinaison sur le défilement
Effet d'inclinaison sur le défilement

➭ Interaction

ThreeJS a un Raycaster intégré. C'est ce que nous avons utilisé pour vérifier si la souris (ou la saisie tactile sur mobile et tablette) intersecte l'un des types de contenu. Le lanceur de rayons tire des rayons (ou simplifiés, nous pourrions dire des «vecteurs» ou des «lignes») de la position de la souris dans la scène 3D et renvoie tous les objets qu'il frappe. Nous avons ajouté quelques lignes de code supplémentaires pour nous assurer que seuls les types de contenu à l'avant de la scène pouvaient être cliqués.

➭ Débogage

Pendant le développement, nous avons utilisé dat.gui. Ce petit outil facilite la manipulation des objets JavaScript lors du développement. Ces objets peuvent varier des valeurs d'animation à la manipulation de maillages, de caméras et de lumières, par ex. position, rotation et échelle.

Information d'entreprise

Superhero Cheesecake est un studio de création de boutique primé d'Amsterdam, dans le but de créer des expériences interactives inoubliables.Nous créons un travail numérique premium pour le web, mobile et expérientiel avec des agences de création et des marques mondiales – mettant la passion, la fierté et beaucoup d'huile de coude dans tout ce que nous faisons.

Découvrez plus de notre travail ici. Ou mieux encore, venez prendre une bière. C'est sur la maison.

Si vous avez voté pour le site du mois – merci de votre implication, le gagnant du plan Pro de l'année gratuite dans notre annuaire professionnel des designers est @emaliasa_, merci de nous DM sur Twitter pour réclamer votre prix!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *