De la 3D dans les navigateurs pour réenchanter les internautes

Nous venons de fêter les 30 ans du web. À l’occasion de cet anniversaire tout le monde se focalise sur les problèmes de gouvernance du web (fake news, jardins clôts…) et pas forcément sur ce qui fait sa force : les contenus. Certes, il ne faut pas minimiser les problèmes qui gangrènent actuellement l’internet, mais ces débats ne doivent pas monopoliser toute notre attention, sinon les internautes risquent petit à petit de se transformer en des utilisateurs passifs qui vont docilement passer leurs soirées devant Netflix, Youtube ou Instagram. Voilà pourquoi il est important de se soucier des contenus et de la capacité des sites web à attirer et retenir l’attention des internautes. Et c’est là où la 3D peut s’avérer très utile, à condition de l’utiliser à bon escient.

20 ans d’évolution des préoccupations numériques des entreprises

Le mois dernier, nous avons donc fêté les 30 ans du web. Issu du monde de la recherche (et plus particulièrement du CERN), le web était à l’origine un moyen pour les chercheurs de facilement partager leurs travaux. Le web s’est ensuite ouvert au grand public et aux sociétés privées pour devenir ce que l’on connait aujourd’hui : un meta-média sur lequel on peut trouver et faire tout et n’importe quoi.

Si les 10 premières années d’existence du web ont été plutôt confidentielles, car réservées à une élite de scientifiques et geeks, les 20 suivantes ont été une gigantesque course à l’armement pour les éditeurs de contenus / services et les annonceurs. Au cours de ces deux dernières décennies, les préoccupations “numériques” des marques sont passées par différentes étapes de maturation :

  • Au début, la priorité pour les marques était d’avoir leur site web (donc en HTML) ;
  • Ensuite, elles se souciaient d’avoir un site web original, qui se démarque de la concurrence (d’où la popularité d’outils permettant de créer des interfaces riches comme Flash) ;
  • Puis, elles se sont rendu compte qu’avoir un site web n’était pas suffisant, qu’il fallait avant tout s’assurer de son efficacité (la priorité à donc été donnée aux pratiques de SEO, d’optimisation de l’ergonomie et de maximisation de l’impact des landing pages) ;
  • Vint ensuite le raz-de-marée des médias sociaux et la recherche de création d’une communauté (nous connaissons tous la croissance fulgurante de Facebook qui en a découlée) ;
  • Ce raz-de-marée a été suivi du tsunami des smartphones avec la nécessité d’avoir un site web dont la mise en page puisse être adaptée aux petits écrans (la mode était alors au responsive design, un ensemble de technique de codage très pointues qui ont poussé les entreprises à utiliser des frameworks HTML comme Boostrap ou Foundation, ce qui ont fortement contribué à la standardisation des sites) ;
  • Le recours massif aux gabarits standardisés (donc des sites qui finissent tous par se ressembler) et le volume exponentiel de contenus disponibles ont à nouveau poussé les marques à chercher  à se différencier et à capter l’attention avec des visuels toujours plus spectaculaires (vidéos et images en pleine largeur dès la page d’accueil, parallax scrolling…).

Quand on compare le web d’aujourd’hui et celui d’il y a 20 ans (100 Websites That Shaped the Internet as We Know It), on se rend bien compte du chemin parcouru par des sites, services et contenus en ligne qui sont passés par tous les formats… pour se retrouver dans une impasse.

La dure réalité à laquelle les marques et organisations sont aujourd’hui confrontées est qu’il est devenu extrêmement difficile de capter l’attention d’un internaute, de le faire venir sur un site et de l’amener à réaliser une action (achat, inscription, remplissage d’un formulaire ou simple consultation d’un contenu). Voilà pourquoi les GAFA occupent une place aussi dominante aujourd’hui, c’est parce qu’en dehors des sites, applications et services de Google, Apple, Amazon et Facebook, les internautes ne s’intéressent à plus grand-chose, car ils n’ont besoin de rien d’autre.

TL;DR

Aujourd’hui, plus personne ne fait attention à rien. Ce n’est pas une plainte, mais le constat que toute l’attention des internautes est captée par une poignée d’applications mobiles (Facebook, Instagram, Twitter, YouTube…). L’utilisation du web par les internautes s’est petit à petit restreinte aux plus gros fournisseurs de contenus et services en ligne : les GAFA. La dernière Keynote de Apple en est la parfaite illustration : pourquoi s’embêter à chercher des articles, de la musique ou des films auprès de différentes sources alors qu’il est possible de le faire à travers les applications “officielles” (Apple doubles down on subscriptions). Et en prime, si vous payez également pour les contenus / services à travers un abonnement Apple, voir avec une carte de paiement Apple (Apple introduces its own credit card, the Apple Card), vous vous prémunissez des méchants affreux qui veulent vous piquer vos sous sur votre CB. Nous sommes là face à la pire tentative d’infantilisation des internautes depuis la création du web. Apple est en passe de réussir là où AOL et Microsoft ont échoué (It’s time for an ‘Apple Prime’ subscription bundle).

Nous sommes donc en 2019 et le web souffre d’un terrible problème d’infobésité. Une authentique saturation provoquée par un flot continu d’articles, messages, notifications… qui finissent par complètement accaparer l’attention des internautes jusqu’à annihiler leurs facultés de concentration et de mémorisation. Une étude menée par Microsoft en 2013 nous montrait ainsi que le délai d’attention moyen d’un internaute était de 8 secondes : You Now Have a Shorter Attention Span Than a Goldfish. Ça, c’était en 2013, soit il y a plus de 5 ans. Essayez donc d’imaginer à quoi doit ressembler la capacité de concentration d’un internaute aujourd’hui… Le sujet divise la communauté (Let’s Debunk the Attention Span Conspiracy), mais le problème est bien réel, il vous suffit de lever les yeux de votre smartphone et d’observer votre entourage pour vous en rendre compte.

Tout ceci se caractérise par des comportements extrêmes, notamment la mode du TL;DR, une abréviation utilisée dans les discussions en ligne par ceux qui veulent signifier aux autres qu’ils n’ont pas pris le temps de lire les différents messages (“Too Long ; Didn’t Read“), mais veulent néanmoins contribuer, participant ainsi à la cacophonie ambiante.

Vous pourriez me demander “à quoi ça sert de participer à une conversation si l’on ne prend pas le temps de lire ce que disent les autres ?”. Je ne sais pas… Mais toujours est-il qu’aujourd’hui, tous les éditeurs de contenus / services ou annonceurs sont confrontés au syndrome TL;DR. Pour espérer capter l’attention des internautes, il faut vraiment proposer une expérience différenciante, une expérience qui va faire sortir du lot vos contenus / services / messages / offres.

Partant du principe que nous sommes allez quasiment au bout de ce que l’on pouvait faire sur une page HTML “à plat” ; du plus sophistiqué (Shockwave) au plus efficace (Pure CSS) ; pour passer à la vitesse supérieure, il faut voir plus grand et rajouter une dimension.

Les débuts laborieux de la 3D dans le navigateur

Faire de la 3D dans un navigateur n’est pas réellement nouveau, car cela fait longtemps que l’on peut consulter des contenus 3D, mais c’est de la fausse 3D : des vues à 360° composées d’une multitude d’images ou des animations 3D qui ne sont en fait que des vidéos interactives chapitrées. Ce dont nous parlons là, ce sont des objets ou scènes 3D calculés et affichés en temps réel, de la 3D qui n’est ni simulée ni émulée, celle qui nécessite le recours à la puce graphique de l’ordinateur ou du smartphone.

Dans l’absolu, ça n’est pas un problème, puisque ces puces graphiques (GPU pour Graphical Processing Unit) sont installées par défaut pour que l’on s’en serve, mais les navigateurs web ont été conçus pour isoler le système (l’ordinateur) du réseau (le web). Laisser un site web accéder à la puce graphique (une ressource matérielle) enfreint une règle fondamentale. Il a donc fallu presque 20 ans pour faire évoluer les navigateurs et leur fournir un accès au GPU dans de bonnes conditions : performances, stabilité, sécurité… Sans un minimum de protection, la simple visite d’un site web pourrait transformer votre ordinateur en une station de minage de Bitcoins (Report Shows Cryptojacking Is Prime Example of Shift Towards Discreet Cyberattacks).

Un cap majeur a ainsi été franchi avec la mise au point d’un standard (WebGL, défini par le Khronos Group), dont la première version des spécifications a été publiée en 2011 et dont je vous parlais déjà il y a 10 ans : WebGL, le nouveau standard de la 3D sur le web. Depuis, le sujet de la 3D a régulièrement été abordé sur ce blog car c’est une approche des contenus en ligne qui ouvre d’immenses possibilités : Le retour de la revanche de la 3D en 2012 et De la 3D encore plus performante dans votre navigateur grâce à WebGL et WebCL en 2014.

La 3D est un sujet qui revient maintenant à la mode grâce à la réalité virtuelle et aux folles ambitions de Facebook et Microsoft pour ce qu’ils considèrent être comme la prochaine itération majeure du web (cf. Facebook Spaces et Windows Mixed Reality). Encore une fois, ce dont nous parlons ici est de pouvoir afficher et exploiter des contenus 3D en réalité virtuelle directement dans le navigateur, à travers un site web, donc sans avoir besoin d’installer une application.

Après des débuts très laborieux (qui se souvient de la grande époque de Flash 3D ?) et quelques digressions (e-commerce et 3D sont-ils compatibles ?), toutes les conditions techniques sont aujourd’hui réunies pour que la 3D puisse enfin s’incruster dans les pages web : les ordinateurs et smartphones disposent d’une puissance largement suffisante (avec un accès aux ressources matérielles simplifié grâce aux APIs), d’une large bande passante pour pouvoir télécharger des fichiers 3D volumineux (ADSL2+, fibre, 4G et bientôt 5G), de nombreuses bibliothèques d’éléments 3D (Sketchfab, Poly…), et d’un standard qui évolue dans le bon sens (WebXR).

Vous noterez qu’il n’y a pas que la réalité virtuelle qui stimule l’intérêt pour la 3D, car nous avons des usages très intéressants de la réalité augmentée sur les smartphones avec différentes approches proposées par SnapChat (Lens Studio), Amazon (Sumerian), Apple (ARKit), Google (ARCore)… Tout ceci est fort intéressant, mais là il s’agit de faire de la réalité augmentée avec une application native. Heureusement, certains travaillent d’arrache-pied pour pouvoir faire des choses équivalentes, mais avec un site web mobile. Il existe d’ailleurs un prototype réalisé par les équipes de Google (Chacmool Demo) qui illustre le potentiel de contenus 3D en réalité augmentée directement accessibles depuis un smartphone :

Avouez que c’est quand même autre chose que d’afficher de simples photos (Is 3D the future of the internet?). Au-delà de l’exploit technologique, le but recherché est bien de pouvoir capter et retenir l’attention d’internautes devenus complètement blasés et incapables de se concentrer plus de quelques secondes.

Making the web cool again!

À une époque, la 3D était un sujet pour les acteurs du commerce en ligne (cf. différentes initiatives mentionnées sur ce blog : Redfin propose la visite virtuelle en 3D des biens immobiliers, Mannequin 3D chez eBay et cabines d’essayage virtuelles chez Carrefour, GarageFuse relance l’intérêt des configurateurs 3D…). J’avais même donné une conférence sur ce sujet : Le web marketing en 3D.

Pourquoi prendre un tel risque (coûts de production, allongement des temps de chargement…) ? Tout simplement pour sublimer la présentation des produits. La recherche d’une mise en scène valorisante des produits est un objectif tout à fait légitime, mais le problème est que les coûts de production de l’environnement 3D restent élevés. Et je ne parle pas des modèles 3D, mais du module pour visualiser et interagir avec le modèle 3D. Certes, il existe des modules pour pouvoir afficher des objets en 3D comme le Sketchfab Player, mais c’est un player propriétaire et qui ne propose qu’un nombre limité d’interactions.

Il existe aussi des modules très sophistiqués, mais qui sont cantonnés à un usage en particulier, comme le viewer de Matterport qui permet de faire des visites virtuelles de biens immobiliers.

Sinon, il existe des outils pour vous simplifier la tâche comme BabyloneJS (une librairie javascript, donc pour les développeurs), des outils de développement comme Unity3D (pour créer des jeux vidéo) ou Adobe Dimension (pour créer des illustrations). En revanche, rien pour créer simplement des environnements 3D où l’on puisse manipuler des objets. C’est là où se positionnent de nouveaux entrants comme Naker qui se définit comme un outil de gestion de contenu pour le web 3D, le WordPress du commerce 3D. La promesse est forte (“Making the web cool again“), mais les cas d’usages sont plutôt intéressants : présentation produit, showroom, visite virtuelle, tutoriel 3D

Modèle 3D : Numerized

Des démonstrations qui feront souffler votre ordinateur portable, mais qui offrent un excellent compromis entre rapidité de chargement et richesse de mouvements et d’interaction. L’idée n’étant pas de faire tourner la scène 3D avec le plus de polygones possible, mais de proposer un outil de création 3D simple et efficace.

Pour une approche pragmatique de la 3D

Celles et ceux qui ont déjà pratiqué la 3D savent qu’il n’y a rien de très nouveau dans ce qui est présenté ici (affichage et manipulation d’objets 3D). Ce qui change, ce sont les coûts et délais de production. Il y a un parallèle intéressant à faire ici entre les applications 3D et la réalité augmentée. Les applications de réalité augmentée sur votre smartphone existent depuis 10 ans (notamment Métro Paris édité par la société française PresseElite, Cocorico !), mais il est possible d’en concevoir et d’en réaliser des équivalentes dans des délais et coûts dix fois inférieurs aujourd’hui. La préoccupation principale n’est plus la faisabilité technique, mais le coût.

L’objectif ultime est d’améliorer le potentiel de transformation d’un produit grâce à la 3D, tout en offrant un ROI imbattable. Et c’est là où ce type d’outil propose un compromis intéressant : troquer de la puissance brute contre de la simplicité et de la rapidité de mise en oeuvre.Il n’est donc plus question de chercher à réaliser un exploit technologique, un domaine où les dernières versions des moteurs 3D excellent (ils proposent maintenant des rendus photo-réalistes : Unity’s latest demo is a gorgeous sci-fi short starring a lifelike virtual hero et Epic’s stunning new Unreal demos show off high-end ray tracing and photorealism), mais de trouver le parfait compromis entre puissance et accessibilité, et de fournir les outils adéquats. En synthèse, de la 3D “good enough” pour stimuler les ventes. Je n’irai pas jusqu’à dire que ce parfait compromis est enfin trouvé, mais nous sommes définitivement sur la bonne voie : des contenus et services différenciants (en 3D temps réel), mais qui reposent sur des technologies standards (HTML, WebGL…) et sont soucieux du ROI.