Comment WebGL réinvente l'héritage de Flash
Vous rappelez-vous tous ces projets avec des interactions exceptionnelles, des animations époustouflantes et des effets sonores accompagnants palpitants qui ont abouti à une expérience utilisateur extrêmement immersive? Ouais, les chances sont celles qui ont été créées avec l'aide de Flash.
Cependant, je déteste l'admettre, l'ère de cette plateforme multimédia riche a pris fin. Flash est enfin mort. Mais n'ayez crainte! Comme cela arrive souvent quand une porte se ferme, une autre s'ouvre et Flash est lentement remplacé par un successeur plus frais et plus vigoureux. Des technologies comme WebGL , et accompagnant les bibliothèques JavaScript comme Three.js sont en croissance rapide - permettant aux développeurs de créer des projets de type Flash, sans les problèmes de sécurité qui les accompagnent.
Aujourd'hui, nous allons nous concentrer sur WebGL et Three.js. Ce couplage est une option puissante pour les UX immersives.
WebGL et Three.js
WebGL sert de base pour fournir des instruments permettant de manipuler des graphiques interactifs en 3D et en 2D. Cela vous donne la possibilité de combiner ses éléments avec des éléments HTML et de les combiner avec d'autres composants de la page ou de l'arrière-plan.
Three.js est une bibliothèque Javascript avec une liste de fonctionnalités haut de gamme qui vous permettent d'utiliser des scènes, des caméras, des lumières, de la géométrie, etc. Il est destiné à libérer le potentiel de WebGL en ajoutant des fonctionnalités supplémentaires à la plate-forme. Il est facile de créer des animations 3D accélérées par GPU sans avoir recours à des plug-ins de navigateur.
Problèmes de compatibilité
Avec les technologies modernes, vous êtes toujours pris dans un dilemme: créez un projet "unique" qui fonctionnera sur différents appareils et offrir une expérience utilisateur cohérente, ou mettez tout en jeu et impressionnez instantanément le public que vous pouvez atteindre .
Avec WebGL et Three.js, c'est la même histoire. Safari, Opera et la majorité des navigateurs mobiles (et sans parler d'Internet Explorer) sont comme une mouche dans votre Chardonnay. Malheureusement, de nombreux utilisateurs sont bloqués par les anciens navigateurs, la compatibilité est donc un obstacle, mais le support augmente (ce qui est plus que ce que l'on peut dire pour Flash) et à condition que vous ne l'utilisiez pas Three.js sont d'excellentes options.
Exemples
Vide
Vide est une expérience de Hi-ReS !, un studio de création basé à Londres. Les développeurs ont voulu faire abstraction des limitations inhérentes aux plates-formes et aux navigateurs modernes et tester les limites des technologies actuelles. Il semble qu'ils l'ont cloué.
Il s'agit d'une application purement bureautique alimentée par des fonctionnalités WebGL et Web Audio. Avec Howler.js, GSAP et Coffee Collider, Three.js a participé à la création de ce terrain de jeu exceptionnel qui attire inexorablement les visiteurs en ligne dans un voyage qui ressemble beaucoup à un livre numérique.
Remodeler l'excellence
Cette campagne interactive dédié à l'anniversaire de Sennheiser est une odyssée épique qui combine non seulement des paysages de science-fiction spectaculaires, mais aussi de nombreuses caractéristiques et détails de pointe. C'est une expérience Chrome pure qui permet aux visiteurs de participer à la formation et à la mise en forme d'un monument sonore. Bien que la phase de formation ait été achevée, un million de personnes dans tout le monde ont participé à l'événement. Vous êtes invités à faire votre propre contribution, à examiner cette sculpture de sons massive et à profiter de la vidéo d'introduction et de l'exécution de qualité supérieure.
Bruno Quintela
Le portfolio personnel de Bruno Quintela est une expérience WebGL en temps réel qui démontre le potentiel de l'artiste et les possibilités des technologies Web actuelles. Utilisez votre souris pour examiner la scène en profondeur. Faites-le glisser dans des directions différentes pour voir ce qui est caché à l'intérieur de cette masse de polygones 3d correctement placés avec des surfaces brillantes. L'idée constitue une excellente ouverture pour le site Web qui laisse une première impression forte et durable.
Test de particules
Ce projet présente un tourbillon de tubes de particules moins ordonnés et moins organisés qui dégagent une ambiance high-tech. Il y a un centre de contrôle qui vous encourage à jouer avec des attributs tels que le rayon d'un nuage de forme cylindrique, la densité des tubes, la hauteur, l'échelle et plus encore. Le concept est fascinant.
Shader d'eau
Cet artiste a réussi à imiter une surface d'eau en imitant le comportement naturel du liquide. La forme convexe et la surface ondulée avec des reflets du soleil comme finitions recréent une scène vraiment réaliste qui attire le regard dès la première seconde.
Tête de particules WebGL
Comme ils l'étaient quand Flash a réussi, les particules font fureur de nos jours. Des animations de différentes tailles et types peuvent être vues dans de nombreux projets et ce travail est un tel. La version subtile d'une tête qui rappelle vaguement un robot intelligent de type humain des romans d'Isaac Asimov est un véritable chef-d'œuvre. Non seulement la réalisation surprend, mais aussi son comportement. Il réagit aux mouvements de la souris en inclinant naturellement la tête vers la droite, la gauche, le haut et le bas.
Texte 3D Confetti dynamique
L'effet de texte est l'un des moyens d'agrémenter les interfaces ennuyeuses avec une note de jeu et de fraîcheur, tout en mettant l'accent sur le lettrage requis. Rachel Smith solution d'inspiration confettis va certainement aider à enrichir le design avec des émotions vives et placer le titre sur la scène centrale. Tapez un mot dans le champ de saisie ci-dessous pour voir toute la magie. Des pièces géométriques 3D vibrantes et vives vont façonner la demande et rendre le résultat joliment interactif.
3D Panorama Viewer
Three.js est utile dans des projets communs, comme le prouve Max Chuhryaev. Sa solution transforme facilement les images panoramiques en un détail essentiel de l'expérience utilisateur. Il a une perspective agréable et une caméra qui se déplace lentement: ensemble, ils vous font sentir une partie de la composition. Cela va bien avec les paysages, les paysages urbains et les intérieurs, permettant aux utilisateurs de profiter de la beauté du multimédia statique.
Générateur de Motif Triangle
Cette expérience vous donne un arrière-plan polygonal fantastique avec une belle sensation 3D. Il agit également comme un terrain de jeu où vous pouvez rendre certaines zones plus lumineuses et d'autres plus claires: utilisez simplement votre souris. Le panneau d'options vous permet de régler une grande partie des détails de la toile, y compris les paramètres de lumière, de maillage, de rendu et même d'exportation.