9 utilisations brillantes de la 3D dans la conception Web
La 3D sur le Web est vraiment arrivée en 2011 avec le lancement de WebGL, une API JavaScript permettant de rendre des graphiques 3D dans un navigateur compatible sans utiliser de plugins. Et les années suivantes ont vu beaucoup d'enthousiasme pour les possibilités de la 3D parmi les concepteurs Web.
Ce battage médiatique initial peut s'être calmé ces dernières années. Mais le développement de la 3D en ligne s'est poursuivi à un rythme soutenu, et il existe des implémentations assez impressionnantes; des visuels «wow factor» qui agissent principalement comme preuve de concept, aux utilisations réfléchies de la 3D visant carrément à créer une expérience Web exceptionnelle.
Dans cet article, nous listons quelques utilisations récentes de la 3D sur le Web (certaines petites et subtiles, certaines flashy et épiques) pour inspirer vos propres projets. Oh, et si vous avez remarqué une bonne utilisation de la 3D dans la nature, partagez un lien dans les commentaires.
01. Acko.net
Si vous recherchez un exemple de ce que la 3D basée sur un navigateur peut apporter au Web, ne cherchez pas plus loin que Acko.net, le site personnel du développeur Web Steven Wittens. Il présente un bel en-tête animé inspiré du street art; c'est une idée simple mais merveilleusement exécutée.
Wittens l'a créé en utilisant une combinaison de CSS 3D et WebGL. «La torsion de chaque ruban n'est pas générée arbitrairement, mais mathématiquement dérivée», explique-t-il. «Il incarne le principe différentiel du transport parallèle. La direction ascendante change parallèlement à chaque courbe, ce qui signifie que les rubans ne tournent jamais sur place. Ils ne tournent que lorsqu'ils le veulent naturellement. Par conséquent, le type de design a sa propre volonté. »
Vous pouvez lire l'histoire complète de la façon dont il l'a assemblé dans ce billet de blog . Et si l'animation ne fonctionne pas dans votre navigateur, vous pouvez la vérifier dans cette vidéo .
02. Comètes de Campo Alle
Depuis son lancement en février, ce site Web a déjà remporté une tonne de récompenses, et il n’est pas difficile de comprendre pourquoi. Créée pour promouvoir le vin italien Campo Alle Comete, elle représente une ville flottante en 3D, «où rêve et magie peuvent enfin se rencontrer». Les qualités imaginatives du design, mariées à la finesse de la mise en œuvre, sont assez stupéfiantes, et c'est vraiment un plaisir de se balader dans ce monde fantastique à l'aide de votre souris.
- 7 nouveaux outils de conception graphique pour vous simplifier la vie
Construit par des studios italiens Ce et Monogrille , cette brillante utilisation de la 3D sur le Web a été créée en utilisant WebGL et GSAP avec three.js et AngularJS.
03. Stripe.com
Implémentation beaucoup plus simple de la 3D, cet icosaèdre interactif et rotatif n'en est pas moins très efficace pour présenter une gamme d'options de menu de manière cool et originale. Présent sur le site de la plateforme de paiement Stripe, il a été conçu par Bill Labus, sur la base d'une idée de Krithika Muthukumar, qui travaille sur le marketing produit chez Stripe.
«Elle envisageait un moyen de représenter visuellement une charge Stripe du point de vue de Radar, qui utilise l'apprentissage automatique pour noter les charges entrantes et prédire la probabilité qu'elles soient légitimes ou frauduleuses», explique Labus. «L'apprentissage automatique est assez abstrait de par sa nature, donc un objet 3D semblait être un moyen efficace de rendre le concept plus tangible.»
L'apprentissage automatique est assez abstrait de par sa nature, donc un objet 3D semblait être un moyen efficace de rendre le concept plus tangible
Bill Labus
La principale technologie utilisée pour cela est WebGL, bien qu’il s’agisse d’une API de bas niveau, explique Labus. «Nous avons choisi three.js comme cadre de plus haut niveau qui résume via WebGL et simplifie le chargement des objets, la configuration de l'éclairage et des matériaux, etc. En fait, nous avons eu la chance de constater que three.js inclut un icosaèdre par défaut comme l'une de ses primitives intégrées.
«La version initiale utilisait simplement la primitive intégrée. Cependant, nous avons décidé plus tard que nous voulions des bords arrondis sur la forme pour mieux correspondre à l'utilisation esthétique 3D existante ailleurs sur stripe.com , nous avons donc rendu un icosaèdre arrondi dans Cinema4D et l'avons chargé en tant qu'objet dans three.js. Les étiquettes de sommet qui représentent les divers attributs d'une charge ne sont pas rendues dans l'environnement 3D, mais comme des éléments HTML normaux au-dessus du canevas 3D. Il s'agissait de garantir un rendu de la plus haute qualité pour le texte et de faciliter la localisation.
'Lors de l'animation de l'icosaèdre, nous calculons les positions des sommets, ainsi que le fait qu'ils soient ou non actuellement visibles ou masqués derrière l'objet, puis nous utilisons ces informations pour positionner et afficher / masquer les éléments d'étiquette.
«Un autre élément qui n'est pas rendu dans l'environnement 3D est l'ombre projetée par l'objet. Parce qu'il est suffisamment diffus, nous avons pu simplement brouiller un derrière le canevas 3D, sans que l'on remarque que la forme de l'ombre ne correspond pas parfaitement à la forme de l'icosaèdre. Cela a été fait principalement pour des raisons de performances, car les ombres diffuses de grande taille sont généralement l'un des effets les plus coûteux à rendre, en particulier dans une boucle d'animation. '
04. Diane Martel
Nous avons déjà vu du texte Web dans le style du générique d'ouverture de Star Wars, mais jamais comme ça. Le site Web de la réalisatrice et chorégraphe américaine de vidéoclips Diane Martel (mieux connue pour la vidéo «Blurred Lines») utilise cet appareil à bon escient pour présenter les titres de son travail sur sa page d’accueil.
Utilisez votre souris pour les tourner et les faire pivoter pendant qu'ils défilent, survolez un titre pour révéler plus d'images fixes ou cliquez sur la page entière. Ce site coloré et impressionnant a été conçu par Ben Wegsheider , dont le propre site Web propose également de jolies astuces 3D.
05. Cartes du système d'exploitation
D'une utilisation amusante et frivole de la 3D à une utilisation complète et fonctionnelle. Hier, Ordnance Survey, l’agence nationale de cartographie du Royaume-Uni et l’un des plus grands producteurs mondiaux de cartes, a mis à jour son système OS Maps primé, présentant une cartographie 3D précise de la campagne britannique.
Aimé par les marcheurs, les cyclistes et les autres personnes qui traversent les collines et les vallées du Royaume-Uni, OS Maps est disponible sur le Web et sous forme d'application. «Plus de 750 000 itinéraires y sont stockés et l'élément 3D vous permettra de mieux voir les itinéraires et de savoir si l'itinéraire est réalisable», révèle l'attaché de presse Keegan Wilson.
La cartographie 3D, qui a été construite avec des détails spectaculaires à l'aide de lasers incroyablement précis, est disponible sur le Web uniquement pour les abonnés OS Maps. Cependant, toute personne souhaitant enquêter et jeter un coup d'œil peut le faire grâce à un essai gratuit de sept jours.
06. Terre 2050
Pour célébrer son 20e anniversaire, le géant de la sécurité Kaspersky a lancé un projet interactif qui invite les utilisateurs à discuter du monde du futur, des opportunités qu'il apporte et des menaces qu'il pourrait engendrer. En son centre se trouve Earth 2050, un site sympa construit par le studio de Moscou Possible qui invite les designers et illustrateurs à télécharger leurs visions du futur via un portail interactif.
La page d'accueil présente une planète Terre en rotation divisée en zones géographiques, chacune comprenant une prévision sur un certain aspect de la vie en 2050. Tout designer, illustrateur ou artiste peut télécharger son travail et les membres du public peuvent dire s'ils croient que certaines prédictions se réaliseront.
«Notre concept a été inspiré par Google Street View et des jeux PC comme UFO et Civilization, ainsi que par les perspectives futuristes de Kaspersky Lab eux-mêmes», explique l'équipe de Possible. «Le globe créait en utilisant nativement WebGL, HTML5, CSS3, JS, WebGL et PHP 7. La construction de l'interface impliquait l'optimisation de la bande passante et la mise en cache standard du navigateur, les modules de contenu, le codage, les modules WebGL avec la planète, la navigation et l'édition de panorama.»
07. Titouan Mathis
Titouan Mathis, un développeur Web basé à Strasbourg, en France, dispose d'un site Web très simple qu'il utilise pour créer un lien vers son site Twitter, Instagram et employeur Studio Meta. Mais il l'anime avec une touche amusante de 3D interactive et animée: trois motifs constamment en spirale qui ont l'air super élégants et avec lesquels vous ne pouvez pas vous empêcher de jouer.
«L'inspiration est principalement venue de choses que je rencontre au cours de ma journée», explique Mathis. «Parfois, toutes ces choses se mélangent et une idée me vient à l'esprit. Je vais essayer de le recréer et de jouer avec les formes pour trouver de jolis moyens d'interagir avec elles. '
Les trois animations ont toutes été créées avec HTML, CSS et JavaScript, avec Vue.js aidant en termes de structure, et le code est disponible sur GitHub si vous voulez le vérifier. «Le plus grand défi technique était la performance», ajoute Mathis. «Ma familiarité avec HTML, CSS et JavaScript permet un prototypage rapide d'idées, mais animer de nombreux éléments DOM peut rapidement devenir assez lourd pour le navigateur. Mes prochaines animations seront certainement créées avec Three.js ou une bibliothèque similaire. »
08. Les magiciens saison 2
Sur une autre carte interactive, cette fois pour le monde fictif de l'émission fantastique télévisée branchée The Magicians. Agence britannique Unité 9 L'équipe de programmeurs a utilisé Three.js, WebGL et GLSL pour développer cette carte brillamment interactive, où les utilisateurs peuvent se lancer dans des quêtes et en savoir plus sur la deuxième saison. Des créatures fantastiques aux anciens dieux, chaque quête hebdomadaire reflète le thème de chaque épisode. Même si vous ne regardez pas l'émission, cette utilisation immersive du Web 3D vaut toujours le détour.
09. Poursuite du son
Nous terminerons avec quelque chose qui est tout simplement amusant. Évitez les obstacles, attrapez les objets et créez votre propre bande son à travers votre course musicale folle, dans cette expérience WebGL folle. Destiné à la fois aux utilisateurs occasionnels de bureau / mobiles et aux passionnés de réalité virtuelle (il est compatible avec Google Cardboard), c'est une excellente vitrine pour l'intelligence 3D de l'agence de création parisienne Biborg . Chaque fois que vous y jouez, les environnements sont différents, et c'est très addictif ... soyez prévenu!
