Sites d’inspiration et expériences immersives de référence en WebGL pour designers UX/UI et développeurs créatifs

WebGL (abréviation pour Web Graphics Library) est une technologie de plus en plus répandue en développement Web. Il permet d’intégrer des rendus graphiques 2D et 3D interactifs dans la plupart des navigateurs modernes et s’agence au code HTML, aux composants de page et à la plupart des normes Web courantes. Les projets d'applications immersives et interactives avancées et d’ambitieux projets de jeux utilisent le WebGL, l'application la plus courante et la plus connue étant Google Maps.

Certaines des expériences de marque les plus inspirantes et les plus spectaculaires émergent de l'utilisation des fonctionnalités WebGL dans des plateformes Web plus standard. Voici notre condensé des sites Web de référence WebGL les plus actuels pour inspirer les designers UX/UI, les développeurs créatifs et les stratèges de marque. Les applications incluent la gamification, la modélisation 2D ou 3D de structures, d'éléments ou de produits, le storytelling, les illustrations animées, les graphiques animés ou les motifs de particules aléatoires, le tout dans un rendu 3D en temps réel dans votre navigateur.

Bonne lecture!

Taking Shape | Presented by Adobe Substance 3D

Superbes compositions et des textures créant une expérience immersive bien ficelée.

Summer Afternoon - A WebGL experiment

Une expérimentation technique multi-joueur à la fois charmante et apaisante.

Infinite Passerella

Démonstration technique d’agence mettant en lumière les capacités WebGL (cloth simulation, génération procédurale de motifs, armatures, post-processing).

KPR

Une expérience immersive conduite par des animations fluides sur des compositions d’assets 2D et 3D.

Configurateur E-Commerce Lacoste - Draw It Yourself

Le configurateur de polo Lacoste a fait parler de lui pour ses multiples prouesses techniques: cloth simulation, transitions, customisation interactive de textures, gestion des performances…

BlueYard Capital

Pour les amoureux des particules !

Independent Designer & Art Director Portfolio

Une visionneuse en WebGL 2D, réalisée sans framework. Fluide, élégant, minimaliste et impeccable.

WONDERLAND | Brand Experience Design Studio

Dans cette galerie en 3D immersive, le WebGL est utilisé comme moyen de navigation

Magical Reflections: a virtual art experience

Les galeries d’art virtuelles sont nombreuses en ligne, celle-là fait partie des plus réussies.

Moonfall AR Experience | Explore the Megastructure

Sortez votre téléphone, cette expérience utilise la réalité augmentée.

Montblanc Legend Red - The Race

Quoi de plus engageant qu’un jeu ?

Atmos

Ce projet vous fait traverser un ciel nuageux à mesure que vous scrollez. Probablement le mécanisme de navigation le plus efficace pour la narration.

Crosswire

Une caméra orthographique est utilisée pour offrir des animations originales en vue isométrique.

Moooi

Ce site a été fait avec Pixi.js, un framework WebGL 2D, ce qui en fait un excellent exemple de comment le WebGL peut être utilisé pour des animations 2D.

XRS

Pour présenter un produit, une modélisation 3D vaut parfois mieux qu’un long discours!

Références WebGL moins récentes mais néanmoins incontournables pour votre inspiration

Prometheus Fuels

Ce site utilise le WebGL pour transmettre son message en racontant une histoire.

Nomadic Tribe

Dans un style hommage au dessinateur Moebius, cette expérience montre à quel point illustrations et 3D se marient bien.

Orano

Ici le WebGL est utilisé pour mettre en avant précision et complexité technologique.

The Sea we breathe

Le WebGL sert ici à transmettre un message fort au plus grand nombre, d’une manière impactante et engageante.

Il nous serait impossible de lister tous les sites WebGL qui nous ont impactés tant ils sont nombreux ! Mais une chose est sûre, que ce soit pour raconter une histoire, présenter un produit, engager les utilisateurs à travers un jeu ou simplement pour sublimer un site, l’usage du WebGL ne connaît presque pas de limite et garantit toujours un impact visuel fort et mémorable.

L’UX design : frein à la créativité ou un défi créatif à relever ?