http://www.interfacesriches.fr Toute l'actualité des interfaces riches (Flash, HTML5, 3D...) Wed, 26 Jun 2013 08:12:39 +0000 fr-FR hourly 1 http://wordpress.org/?v=3.5.3-alpha Google Maps + WebGL = Google Earth http://www.interfacesriches.fr/2013/06/03/google-maps-webgl-google-earth/ http://www.interfacesriches.fr/2013/06/03/google-maps-webgl-google-earth/#comments Mon, 03 Jun 2013 08:37:53 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=5388 J’ai toujours considéré Google Earth comme une sorte de jeu vidéo dans lequel on se téléporte d’un endroit à un autre, on survol les immeubles et on plonge au plus profond des océans. Le problème est qu’il faut installer ce logiciel et que l’interface peut être complexe à manipuler (à cause d’une navigation en 3D). Nous avions donc chez Google d’un côté le très fonctionnel Google Maps, avec ses itinéraires et ses adresses, et le très récréatif Google Earth de l’autre. Mais tout a changé le mois dernier avec l’annonce d’une nouvelle version majeure : Meet the new Google Maps, A map for every person and place.

La nouvelle version de Google Maps n’est pour le moment accessible que sur invitation, et les places sont chères tant ce nouveau service est spectaculaire. Il y a d’une part une nouvelle mise en page où la carte recouvre tout l’écran et les éléments sont posés par dessus :

La nouvelle interface de Google Maps
La nouvelle interface de Google Maps

Il y a ensuite une personnalisation de la carte en temps réel en fonction de votre historique de recherche. Puisque l’on parle de temps réel, il y a également les horaires des prochains trains / métros qui sont pris en compte dans les itinéraires proposés :

Les horaires des transports en commun dans le nouveau Google Maps
Les horaires des transports en commun dans le nouveau Google Maps

Mais la grande nouveauté est incontestablement la possibilité d’afficher une vue 3D des villes avec les bâtiments. Comme vous pouvez le constater, ce sont les mêmes contenus que dans Google Earth, mais avec une interface simplifiée :

La vue 3D des bâtiments dans le nouveau Google Maps
La vue 3D des bâtiments dans le nouveau Google Maps

Pour le moment les bâtiments ne sont disponibles que pour quelques villes (NY, Rome…), mais le rendu est splendide et parfaitement fluide. Encore plus impressionnant, cette nouvelle version propose une vue d’ensemble de la Terre avec affichage des formations nuageuses en temps réel :

La Terre vue du ciel de Google Maps
La Terre vue du ciel de Google Maps

Ce mode de visualisation est d’autant plus spectaculaire que la transition se fait en douceur. Cerise sur le gâteau, en reculant la perspective au maximum, vous avez une vue de la Terre depuis l’espace avec les étoiles en arrière-plan ainsi que la limite jour / nuit :

La Terre et la Voie Lactée en arrière-plan
La Terre et la voie lactée en arrière-plan

Cette dernière vue est tout simplement splendide, et d’autant plus bluffante que chaque étoile est à sa place, car les coordonnées sont très précises. Tout ceci étant disponible sans aucun plug-in grâce à WebGL. Disponible depuis de nombreuses années, cette nouvelle version de Google Maps sera la première application à très grande échelle (WebGL, le nouveau standard de la 3D sur le web).

C’est donc un authentique tour de force de la part des équipes de Google, qui n’en sont pas à leur premier essai (WebGL Experiments), et surtout une grande victoire pour la 3D dans le navigateur. Des sessions ont déjà été organisées pour décrire les aspects techniques lors du dernier Google I/O (Google Maps + HTML5 + Spatial Data Visualization), mais ce sont avant tout les aspects fonctionnels qui sont à travailler, car il me semble plutôt compliqué de manipuler une interface 3D avec des périphériques conçus pour la 2D (souris, clavier ou pavé tactile). Vous avez la possibilité d’investir dans un SpaceNavigaotr 3D, mais peut-être la solution se trouve-t-elle dans les interfaces gestuelles

]]> http://www.interfacesriches.fr/2013/06/03/google-maps-webgl-google-earth/feed/ 0 De magnifiques représentations de données en 3D grâce à WebGL et HTML5 http://www.interfacesriches.fr/2012/02/10/de-magnifiques-representations-de-donnees-en-3d-grace-a-webgl-et-html5/ http://www.interfacesriches.fr/2012/02/10/de-magnifiques-representations-de-donnees-en-3d-grace-a-webgl-et-html5/#comments Fri, 10 Feb 2012 17:26:10 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=1285 Les interfaces de visualisation de données en 3D sont courantes sur le web, j’ai déjà eu l’occasion de vous en parler sur ce blog. Par contre, avec l’avènement de l’accélération matérielle et de WebGL, ces représentations 3D peuvent maintenant être affichées dans le navigateur sans passer par un plugin comme Flash ou Java. Je vous propose de découvrir trois exemples récents.

Commençons par le très spectaculaire CNN Ecosphere, une initiative lancée à l’occasion de la conférence des Nations Unies sur les changements climatiques qui c’est déroulée en fin d’année dernière.

La visualisation 3D des tweets de la conférence #COP17

L’idée était de représenter les conversations sur Twitter autour de la conférence sous la forme d’arbres qui se développent de façon fractal autour de notre planète (plus il y a de conversations et plus les arbres poussent). Il est également possible de filtrer les branches par thématique et par pays. Réalisée avec WebGL, la représentation est très gourmande en ressources puisqu’il y a plus de 20.000 discussions et votre ordinateur aura sûrement un peu de mal à les afficher avec fluidité…

Deuxième exemple avec Yahoo! C.O.R.E. Data Visualization, une interface de visualisation des contenus publiés sur Yahoo!. Fondée sur le Content Optimization and Relevance Engine, cette initiative vise à illustrer le volume très important des infos et données publiées par Yahoo!, mais également de démontrer leur capacité à filtrer et analyser ces contenus : Think you’re unique? Let Yahoo’s data trove be the judge. L’interface se présente sous la forme d’un carrousel affichant les 5 dernières actus avec des options de filtrage sur les côtés et une réglette pour remonter le temps en bas. Un nuage de points est affiché en fond de page, chaque point représente une photo et une news qui est affichée au survol de la souris :

L'interface de visualisation de Yahoo!

Là encore une représentation en 3D temps réel, mais qui est beaucoup plus fluide que la précédente.

Dernier exemple avec PhiloGL, un framework de visualisation de données fondé sur WebGL. Plusieurs représentations sont proposées, notamment les routes aériennes (World Airlines Routes) et l’évolution des températures (Temperature Anomalies from 1880 to 2010).

Les routes aériennes visualisées en 3D avec PhiloGL

Ces interfaces de visualisation sont non seulement très spectaculaires, mais aussi parfaitement fluides. C’est donc une combinaison parfaite pour rendre des données plus sexy et faire passer des messages. WebGL serait-elle donc la technologie idéale pour faire de la 3D en temps réel dans le navigateur ? Non, car Microsoft ne l’a toujours pas implémenté dans Internet Explorer, mais il existe néanmoins un plugin  : IEWebGL (un plugin pour remplacer un plugin ? Oui je sais…).

Pour voir d’autres exemples de ce qu’il est possible de faire avec WebGL, je vous renvoie vers les WebGL Experiments de Google ou vers le site francophone WebGL.fr.Si vous avez d’autres exemples, n’hésitez pas à les mentionner dans les commentaires.

]]> http://www.interfacesriches.fr/2012/02/10/de-magnifiques-representations-de-donnees-en-3d-grace-a-webgl-et-html5/feed/ 3 Les domaines d’application de la 3D pour le web http://www.interfacesriches.fr/2011/11/29/les-domaines-dapplication-de-la-3d-pour-le-web/ http://www.interfacesriches.fr/2011/11/29/les-domaines-dapplication-de-la-3d-pour-le-web/#comments Tue, 29 Nov 2011 12:06:19 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=1225 J’étais la semaine dernière invité au salon Entreprissimo de Dijon pour participer à une table ronde sur la 3D. L’occasion de revenir sur les progrès considérables faits en matière de 3D dans la navigateur (2011 sera-t-elle l’année de la 3D grâce à Chrome et Firefox (et Flash) ? et Flash Player 11 inaugure une nouvelle ère pour le web 3D).

Il faut dire que les débuts laborieux de la 3D sur le web sont loin derrière et qu’entre WebGL et Flash 3D, les choses sont maintenant bien plus simples. La 3D est devenu plus accessible et surtout beaucoup moins complexe à mettre en oeuvre. Une aubaine car il existe de nombreux usages :

Loin des promesses surréalistes de l’époque Second Life (l’avenir du web est à la 3D), les technologies sont maintenant beaucoup plus mûres et les usages vont se développer. Mais j’aurais largement l’occasion d’en reparler…

]]> http://www.interfacesriches.fr/2011/11/29/les-domaines-dapplication-de-la-3d-pour-le-web/feed/ 1 2011 sera-t-elle l’année de la 3D grâce à Chrome et Firefox (et Flash) ? http://www.interfacesriches.fr/2010/12/20/2011-sera-t-elle-lannee-de-la-3d-grace-a-chrome-et-firefox-et-flash/ http://www.interfacesriches.fr/2010/12/20/2011-sera-t-elle-lannee-de-la-3d-grace-a-chrome-et-firefox-et-flash/#comments Mon, 20 Dec 2010 14:38:15 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=946 J’ai déjà eu l’occasion de vous parler de 3D dans le navigateur ainsi que de WebGL. Mais à l’époque, j’en parlais au futur. Il semblerait pourtant que cette spécification d’affichage 3D dans le navigateur soit sur le point d’être généralisée grâce aux toutes dernières versions des navigateurs Chrome (Chrome 9 Sandboxes Flash and Adds WebGL Support) et Firefox (WebGL introduced in Gecko 2).

Pour mémoire, WebGL est une spécification développée par le Khronos Group qui permet d’animer des objets 3D dans votre navigateur en utilisant directement la puce graphique et non le processeur. Ça, c’est la théorie, car dans la pratique une animation conséquente monopolise toujours une bonne partie des ressources du processeur. Ceci étant dit, rappelons que cette spécification est encore en développement et qu’elle va encore subir de nombreuses améliorations afin d’optimiser son mode de fonctionnement (qui sollicite à la fois le DOM via javascript, l’API WebGL et le pilote OpenGL).

Jusqu’à présent, les rares expérimentations présentées me faisaient penser aux megademo de mon fidèle Amiga 500, mais commencent à sortir des choses tout à fait aptes à convaincre le grand public et les annonceurs. À commencer par le tout récent Google Body Browser. Cette application permet ainsi d’explorer les différentes couches du corps humain :

Explorer un corps humain avec Google Body Browser

L’animation est incroyablement fluide et il est possible d’observer l’anatomie du sujet sous tous les angles en jouant même sur la transparence des différentes couches. Cerise sur le gâteau, il y a même un moteur de recherche :

Détail des os du pied dans Google Body Browser

Voici donc une première démonstration de force de Google qui entend bien coiffer Firefox au poteau sur le domaine de la 3D avec une section entièrement dédiée à WebGL sur le site Chrome Experiments. Il est ainsi possible d’admirer un certain nombre de démos techniques comme cet aquarium que l’on peut observer sous différents angles en choisissant le nombre de poissons :

Un aquarium et des poissons, mais pas de Flash

Il y a aussi des choses plus abstraites et artistiques comme ce champ où le vent anime de façon aléatoire plus d’un millier de hautes herbes :

Plus de 500 herbes hautes animées de façon aléatoire

Mais on y trouve aussi des applications plus concrètes comme ce configurateur qui permet de personnaliser une figurine en 3D :

Customisez votre personnage avec WebGL

En cherchant dans Google, il est également possible de trouver tout un tas d’expérimentations récentes avec WebGL comme celle proposée par les équipes de KataLab qui ont créé un univers virtuel reposant sur cette technologie : WebGL powers 3D virtual world on the Web. Ce KataSpace n’a ainsi rien à envier à ce que l’on peut voir sur Second Life :

KataSpace, l'univers virtuel exploitant WebGL

Alors ça y est ? Les technologies standards ont donc remporté la bataille de la 3D en temps réel dans le navigateur ? Non pas tout à fait dans la mesure où Flash n’a pas dit son dernier mot, loin de là. Même si les dernières générations de navigateur sortiront en début d’année, il faudra tout de même quelques années avant de renouveler de façon significative le parc. Par contre, il faut 3 mois à Adobe pour déployer une nouvelle version de Flash, et la prochaine itération (nom de code Molehill) sera un authentique bon en avant : Introducing the Molehill 3D APIs.

Au final ce n’est ni Adobe, ni Google, ni Firefox, ni aucun acteur qui va remporter la bataille, car tout le monde va en profiter quelle que soit la technologie utilisée : les producteurs de contenus, les éditeurs de jeux en ligne, les internautes… Attendez-vous donc à une année 2011 particulièrement riche en contenus 3D.

]]> http://www.interfacesriches.fr/2010/12/20/2011-sera-t-elle-lannee-de-la-3d-grace-a-chrome-et-firefox-et-flash/feed/ 3 Le point sur la 3D dans votre navigateur http://www.interfacesriches.fr/2010/03/24/le-point-sur-la-3d-dans-votre-navigateur/ http://www.interfacesriches.fr/2010/03/24/le-point-sur-la-3d-dans-votre-navigateur/#comments Wed, 24 Mar 2010 21:07:34 +0000 Frédéric Cavazza http://www.interfacesriches.fr/?p=783 Faire de la 3D dans un navigateur est un sacré challenge, tout simplement car ils n’avaient pas été prévus pour ça. Il n’empêche, la pression de la part des éditeurs de jeux en ligne est toujours plus forte. De ce fait, une course à la montre à donc été entamée depuis quelques temps pour combler cette lacune (lacune ?) et faire tourner de la 3D dans nos navigateurs.

Plusieurs technologies sont ainsi en concurrence et le choix n’est pas évident car on peut difficilement les comparer. J’ai déjà eu de nombreuses occasions de vous en parler, mais je souhaite au travers de ce billet faire le point avec vous et éventuellement en apprendre sur des technologies et produits que je ne connais pas (encore). Il ne s’agit pas ici de dresser une liste exhaustive des technologies mais plutôt de voir où en sont les trois plus prometteuses.

Il y a tout d’abord Flash associé à la librairie Papervision3D qui permet de faire des choses tout à fait intéressantes. Le principal avantage est que Flash est installé sur plus de 95% des ordinateurs. Illustration avec OGCOpen, une simulation de golf :

Simulation de golf avec Papervision3D
Simulation de golf avec Papervision3D

La communauté est très active autour de ce projet mais il y a plusieurs problèmes :

Hypothèse optimiste : Adobe décide d’investir officiellement dans le projet (pour l’intégrer dans les futures versions) et lance un environnement de production dédié dans Flash Builder 5.

Il y a ensuite Unity3D, une technologie propriétaire dont les principaux avantages sont les performances et la maturité de l’environnement de production (la prochaine version 3 s’annonce encore plus impressionnante).

Le rendu 3D de Unity 3
Le rendu 3D dans Unity

Problèmes :

Hypothèse optimiste : Unity est racheté ou financé par un gros éditeur et atteint la taille critique pour s’imposer sur le marché.

Citons enfin WebGL, le standard promulgué par le Khronos Group (cf. WebGL, le nouveau standard de la 3D sur le web) qui progresse à grand pas. En témoigne CopperLicht, un moteur Javascript exploitant WebGL et proposant à la fois de très bonne performances et un environnement de production dédié (cf. Copperlicht: A new WebGL 3D Engine).

Le moteur 3D de CopperLicht en action
Le moteur 3D de CopperLicht en action

WebGL semble donc être un bon compromis entre les deux technologies citées plus haut en combinant performance, ouverture et au moins un éditeur d’un environnement de production. Gros problème : WebGL n’est supporté que par les navigateurs de dernière génération (par exemple Webkit sur Mac).

Vous l’aurez donc compris, le choix n’est pas simple et il faut bien peser le pour et le contre avant de miser sur une technologie : Performances, maturité, viabilité, ouverture… La clé de cette course étant la domination d’un marché qui s’annonce très juteux : Les Rich Internet Games.

Merci de mettre en commentaire toute information complémentaire sur ces technologies ou sur des alternatives (ou même sur un benchmark).

]]> http://www.interfacesriches.fr/2010/03/24/le-point-sur-la-3d-dans-votre-navigateur/feed/ 14