Le WebGL, superman de l'interactivité

24 août 2015   by Z Team
Back
Imaginer le digital dans une nouvelle dimension.  


Avec l’avènement des Oculus Rift, l’essai des Google Glass et la commercialisation d’imprimantes spécifiques, l’ère de la 3D va toucher de plus en plus de personnes et de secteurs. Mais est-il possible d’avoir le même type d’expérience sur notre navigateur, que l’on soit sur ordinateur ou mobile ? Et finalement, que tirer de cette expérience ?


Un peu d’histoire 

Proposer des expériences en 3 dimensions a toujours été une tendance du web (visites virtuelles, démonstrations produits, jeux, …). Depuis les années 2000, beaucoup d’expériences ont été tentées, notamment avec la technologie Flash. Ces essais ont cependant été très ponctuels et difficiles à mettre en œuvre. Ils nécessitaient en plus l’installation d’un plug-in, ce qui était un frein pour l’utilisateur.


Dynamiser les contenus par la technologie.


Le WebGL, de la 3D dynamique sous navigateur 

Le WebGL est un langage de programmation qui permet d'afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre du navigateur web (source : Wikipedia). Il utilise les performances des cartes graphiques sans surcharger le processeur de votre ordinateur ou mobile. Ce langage utilise tous les éléments composant une image en 3 dimensions : une scène, des formes et objets 3D, des textures et matériaux, des lumières, des caméras virtuelles... Il permet une très grande interactivité avec cette même scène : 360°, zoom et dézoom, animation, changement d’angle, etc… 


Le web et les apps, un monde en 2D 

Depuis 4 ou 5 ans, la tendance de l’expérience utilisateur et de la création d’interface est au Flat Design. Inventé par Microsoft pour leur OS Mobile, le Flat Design a été très largement repris par Google et par l’ensemble des web designers. Le Flat Design (ou « design plat ») est un style de design d'interface graphique caractérisé par son minimalisme. Il se base sur l'emploi de formes simples, de couleurs vives et de jeux de typographie (source : Wikipedia).
Les limites de ce système d’expression tiennent dans son nom : s’il apporte un vrai confort à l’utilisateur en terme de navigation et de lisibilité de l’information, il tend à uniformiser les interfaces et l’expérience utilisateur. Le contenu reste alors le principal élément de différenciation.


Vers plus de profondeur et de personnalité.


Le Material design, l’introduction à Z 

C’est pourquoi Google vient de mettre en place de nouvelles propositions en terme de création digitale sous le nom de Material Design.

« Nous avons relevé le défi de créer un langage visuel pour nos utilisateurs, un langage qui synthétise les principes habituels d’une bonne conception avec l’innovation et les possibilités de la technologie et de la science » a précisé Google à propos du Material design.

Ce « nouveau » langage visuel propose une approche de l’interface basée sur des animations et des perspectives qui donnent plus de personnalité et de profondeur à l’expérience utilisateur ainsi créée.
Quand nous parlons de perspective et de profondeur, nous pouvons résumer cela à l’ajout d’une troisième dimension : l’axe Z.

L’espace peut être défini selon trois axes : X, Y et Z. Là où le Flat Design n’évolue que selon les deux axes X et Y, le Material design propose d’explorer l’axe Z.
Ceci est un premier pas intéressant mais qui, au final, n’exploite que peu l’espace de l’axe Z, contrairement à ce que peuvent offrir les possibilités du WebGL.


Lier l’utile au créatif.


Quels sont les avantages du WebGL pour l’utilisateur ?

Les exemples de WebGL sont déjà nombreux (vous pouvez consulter différents exemples sur Chrome Experiment) et appliqués dans de multiples domaines.


1. Plus de détails :

Grâce au WebGL, un utilisateur peut prévisualiser un produit qui l’intéresse en l’inspectant sous tous les angles.

JVC
http://3de-commerce.com/webgl/product-visualizations/video-camera-jvc-gy-hd100-super-high-poly/
https://sketchfab.com/models/9683ee9d1f2443ac87da4ed79282b0ac
https://sketchfab.com/models/653c5c50627749c185dbaccf38a64745
https://sketchfab.com/models/141f5235a6e142edaad67d5f416cefa4


2. Plus de profondeur :

Le contenu est mis en avant par des animations 3D qui captent l’attention. Le WebGL est très efficace pour l’illustration de statistiques ou les récits de voyage.

NY Times
http://www.nytimes.com/interactive/2015/01/09/sports/the-dawn-wall-el-capitan.html
http://www.nytimes.com/interactive/2015/03/19/upshot/3d-yield-curve-economic-growth.html?_r=3&abt=0002&abg=1


3. Plus de sensations et d’expériences :

La 3D permet de plonger l’utilisateur dans une expérience multi-sensorielle impossible dans un univers 2D.

Raw
https://www.g-star.com/en_nl/newdenimarrivals
http://maratropa.com/


4. Plus d’interactivité :

L’interactivité est une des clefs du WebGL : interagir avec des objets ou des formes pour un storytelling immersif.

Deejo
http://my.deejo.fr/
https://boda.sensors.jp/


5. Plus de ludisme :

Communiquer par le jeu, inviter l’utilisateur à vivre une expérience : la 3D déploie l’horizon des possibles.

Rainbow Road
http://rainbowroad.jp/special03/
http://inspirit.unboring.net/
 

6. Plus de beauté :

Le WebGL, c’est aussi une expérience graphique et créative.

Particles
http://www.iamnop.com/particles/
http://petitsapin.com/webgl/curlnoise2d/
http://myshards.com/


Quels sont les secteurs qui peuvent tirer un avantage de cette technologie ?

Tous les secteurs peuvent utiliser cette technologie, même si certains sont précurseurs : le jeux vidéo, la visualisation de données, la cartographie, la représentation de lieux, l’enseignement, la vidéo interactive, l’art et le design et bien entendu la présentation de produits et d’objets.

Webgl Water
Voici quelques exemples :

http://www.mecabricks.com/en/workshop
http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/
http://www.ro.me/
http://madebyevan.com/webgl-water/
http://www.vill.ee/eye
http://www.zolabo.com/projects/hdi/


Vivre une expérience grâce à des spécialistes.


Le WebGL est-il simple à mettre en œuvre ?

Le WebGL est une programmation complexe et fastidieuse. Il existe heureusement des bibliothèques Javascript performantes qui proposent des outils pour aider les développeurs. La plus connue est « Three.js » créée par Mr Doob. En général, la mise en œuvre d’une expérience WebGL doit faire appel à des professionnels spécialisés sur ce sujet.


Quels sont les métiers du WebGL ?

Ce sont principalement des développeurs qui viennent du domaine du jeu vidéo et du monde de la 3D. Ces développeurs doivent avoir une vision créative de la programmation tout en ayant de bonnes connaissances mathématiques. Ils travaillent en collaboration avec des directeurs artistiques et des modélisateurs 3D qui vont concevoir l’expérience sur des logiciels comme Maya ou Cinema 4D, l’export vers le WebGL étant possible.
logo ultranoir
logo ultranoir