Après les graphiques, les vidéos, la 3D dans le navigateur

Par Tristan, mercredi 25 mars 2009. Lien permanent Standards

Avec Firefox 3, en juin 2008, apparaissait l'élément <canvas>, issu d'HTML 5. Je site la spécification telle qu'en cours de rédaction sur le site du W3C :

The canvas element represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.

En français ;

l'élément canvas représente un canevas de type bitmap, dépendant de la résolution. Il peut être utilisé pour afficher des graphes, des graphiques de jeux ou d'autres images visuelles à la volée.

Il s'agit donc d'une zone rectangulaire qui permet d'afficher une image bitmap (par opposition à "vectoriel") en deux dimensions.

Au moment où il programmait l'implémentation de canvas dans Gecko, le moteur de Firefox, Vlad Vukicevic lançait Canvas 3D, qui permet d'afficher de la 3D dans un élément canvas. Pour ne pas réinventer la roue, Vlad reprend le standard ouvert OpenGL ES et le rend utilisable dans canvas.

Un an et demi plus tard, Khronos (le consortium qui standardise OpenGL) annonce la création d'un standard ouvert et non payant pour la 3D accélérée sur le Web, alors que Google soutient l'initiative.

Communiqué de presse : Khronos Launches Initiative to Create Open Royalty Free Standard for Accelerated 3D on the Web ;
L'annonce par Vlad : 3D on the Web: It’s Go Time ;
Google : Version un standard ouvert pour la 3D sur le Web (c'est important ;
Chris Blizzard : bringing accelerated 3D to the web ;
Arun Ranganathan : 3D on the Web.

20 réactions

1 De Cédric - 25/03/2009, 20:04

Je voudrais pas jouer au troll, mais qu'en est-il du support de VRML/X3D ? Parce que là, bon c'est sympa de vouloir créer un nouveau standard pour la 3D, mais le W3C en a déjà créer 2 (VRML depuis 95 et X3D au début des années 2000) et AUCUN navigateur n'a jamais implémenté ces spécifications, obligeant les utilisateurs à installer un plugin. Résultat : Ces technos sont mortes avant mêmes d'avoir pu montrer ce qu'elles valaient

Bon personnellement je suis heureux que les gros acteurs du Net s'intéresse enfin à la 3D, mais là je n'ai vu aucune mention de ces 2 standards sur aucun des sites en liens (enfin si dans les commentaires, en cherchant bien), et pour le coup, ça fait bien réinvention de la roue non ?
2 De 3po - 25/03/2009, 20:06

je site -> je cite
3 De Thunderseb - 25/03/2009, 21:36

Est-ce que canvas serait un "concurrent" de SVG ?

J'ai l'impression que SVG, sur le Web, est mort avant même d'avoir vécu. A part les icônes sur Wikipedia, je n'ai jamais croisé d'images SVG (sauf des démos). Les navigateurs font la course au JavaScript et par la même, implémentent canvas. Quand on sait que l'implémentation de SVG est souvent imparfaite (et difficile, plus que celle de canvas), ne peut on pas penser que canvas va "supplanter" SVG ?

Si Microsoft embarque canvas dans son prochain IE et pas SVG, ça va vraiment sonner le glas du SVG sur le Web.

Je dis ça mais SVG et canvas sont différents, mais ils sont "capables des mêmes choses". Je ne sais pas trop quoi penser en fait, mais j'ai l'impression qu'on arrive à une bifurcation et un seul path sera choisi, de facto.
4 De Courier - 25/03/2009, 22:13

Ça me rappelle le "VRML", tout ça ! C'était il y a longtemps... vous z'avez pas connu...

Non, plus sérieusement, que de chemin parcouru !
5 De littlecharly - 25/03/2009, 22:58

Pourquoi ne pas utiliser le standard X3D, déjà existant?
6 De Baptiste - 25/03/2009, 23:20

Et on pourra faire des blog en 3D avec les commentaires dans un cube comme avec compiz?
7 De Pierre - 26/03/2009, 09:44

légèrement hors sujet mais adobe toujours concernant les formats libres pour les navigateurs : adobe vient de publier une librairie pour lire le format ogg via le player flash : http://labs.adobe.com/wiki/index.ph...
8 De Ombre - 26/03/2009, 10:05

@thunderseb : svg est un format vectoriel, rien à voir avec canvas qui au final n'est qu'une image bitmap. La différence se voit quand on zoome une page ou quand on l'imprime...

Et je ne parle des possibilité d'animer les éléments, de les rendre interactif ou de les styler en css.
9 De Luc Heinrich - 26/03/2009, 10:14

Je sais bien que tu es (très vaguement) partisan, Tristan, mais dire que l'élément canvas de Firefox 3 est issu d'HTML 5 me semble un moyen un peu mesquin d'éviter de dire qu'il est surtout issu de WebKit. Comment ça je vois le mal partout... :D
10 De laurentj - 26/03/2009, 12:48

@cedric : le W3C n'est aucunement à l'origine de WRML et de X3D. Faut pas confondre le W3C avec le consortium web3D

@cedric et @Thundersub : faut pas confondre document ET api. WRML/X3D/SVG, ce sont des descriptions de DOCUMENTS. Le but de canvas, c'est de fournir une API 2D (et la 3D avec khonos), pour faire du dessin de manière programmatique. On ne fait absolument pas la même chose avec des documents et avec une API. D'un coté on manipule des documents, qui representent des images, des scenes. On peut trimbaler un document où l'on veut. C'est statique. (on peut faire du pseudo dynamique en modifiant le DOM, mais bon..). Et de l'autre on fait du graphisme à la volée, sans reposer sur un document. C'est n'est pas persistant. Ça n'a pas de sens pour un jeu comme Quake/Doom d'avoir toute la description graphique d'un niveau de jeu dans un document, et ensuite de manipuler ce document à la volée. Ce serait beaucoup trop lourd. Il est préférable d'attaquer directement une surface de rendu avec une API.

Bref, pas du tout les mêmes usages.

@thunderseb : SVG n'est pas mort, loin de là. Il est implémenté maintenant sur tout les navigateurs (sauf IE). Et pour cause : le test Acid3 fait des tests sur l'implémentation de SVG. Bref, on pourrait voir apparaître de plus en plus de SVG.

@luc: je ne vois pas ce qu'il y a de mesquin. Canvas est défini dans HTML5. Depuis la première implémentation dans webkit, la spécification a évolué. Donc oui, l'élément canvas dans Firefox est issu de la spec actuelle de HTML5, pas de webkit.
11 De oomu - 26/03/2009, 14:01

@Luc Heinrich

le comportement de "canvas" a été formalisé au sein du WHATWG (puis w3C et donc html 5)

Webkit a été un des premiers à mettre en place un canvas fonctionnel

tout comme Mozilla ont été parmi les premiers sur d'autres technologies du navigateur

et Nitot a toujours parlé des avancées des autres navigateurs. D'ailleurs j'ai été au courant de plus d'un concurrent via le blog de Nitot.

vous voyez le mal là où il y en a pas. Nitot défend surtout la normalisation web et donc évidemment il va ramener tout au W3C HTML 5.
12 De laurentj - 26/03/2009, 14:47

Allez, hop, pour les septiques à propos de canvas, svg, X3d etc : http://ljouanneau.com/blog/post/200...
13 De Tristan - 26/03/2009, 15:15
Pourquoi se lancer dans Canvas3D via OpenGL plutot que par exemple VRML ? La raison est double :
1. VRML n'a pas de base de développeurs, plus d'élan (et n'en a jamais vraiment eu), alors qu'OpenGL est à même de concurrencer les APIs Direct3D de Microsoft
2. OpenGL s'est fait une place au soleil, ce qui fait qu'il est implémenté dans les accélérateurs graphiques d'aujourd'hui. C'est essentiel pour pouvoir tirer parti des capacités phénoménales de calcul qu'on trouve dans les cartes graphiques, y compris dans les systèmes embarqués (d'où le spécification OpenGL ES / Embedded Systems).
14 De Hybrid Son Of Oxayotl - 26/03/2009, 21:42

J'ai lu une traduction assez élégante pour bitmap, beaucoup plus que le terme anglais : image matricielle.
Voila, je te le recommande, Tristan.

Sinon, j'ai un commentaire qui apparemment n'est pas passé à cause d'une erreur de la base de donnée, et maintenant il semblerait que les commentaires sont fermés dessus.
J'y disais (en dehors de te préciser que je me demandais si la migration des gendarmes t'inspirait l'envie de te lancer toi aussi dans une migration) que j'ai un bug graphique sur le Standblog :
L'image d'en haut :
http://perso.ens-lyon.fr/jeanalexan...
devient parfois grisée :
http://perso.ens-lyon.fr/jeanalexan...
J'utilise la version de Firefox 3.0.7 empaquetée dans Ubuntu 8.10.
Le bug est récurrent, mais difficilement reproductible ;·).
15 De Keul - 27/03/2009, 13:10

Non, c'est reproductible :
Il suffit de donner le focus sur le bandeau et de sortir de la zone (sois avec du ctrl-shift-tab/ctrl-tab ou en cliquant dessus avec la souris et en la déplacant avant de relacher (pour ne pas suivre le lien), ou avec le bouton droit).
ça viens de la règle CSS
a:hover, a:focus {
color:maroon;
background:#e7e7e7;
}
qui change le fond (il faudrait remplacer le background par un background-color) ou n'activer cette règle que pour le menu.

Quand à SVG, si on le vois peu sur les pages web, c'est normal:
Le rendu d'une image svg dépends de sa complexitée,
Une image SVG peut faire quelques Kilo octets pour une très grande résolution et s'afficher rapidement (http://fr.wikipedia.org/wiki/Fichie...)
Ou elle peut prendre beaucoup plus de place, pour une résolution pondre et s'afficher bien plus lentement (http://fr.wikipedia.org/wiki/Fichie...).

J'ai déjà fait des logis/bannières pour des sites en vectoriel, mais le fichier publié est du matriciel.

l'avantage est l'agrandissement infini et la modification du contenu (textes, position des éléments)
l'image matricielle a globalement la même taille par rapport à sa dimension d'affichage.
L'inconvénient est la vitesse de rendu, et la taille pour une image complexe (on pourrais faire l'analogie avec la source et la version compilée d'un programme...)
16 De luc Heinrich - 29/03/2009, 10:45

@oomu & laurentj: désolé, mais non, l'élément canvas a été *crée* par Apple et initialement implémenté dans WebKit pour étendre les possibilités des widgets Dashboard d'OS X. Ce tag propriétaire et non-standard à l'époque a d'ailleurs déclenché une mini-vague de protestations (à mon avis justifée) dans la communeauté des développeurs web jusqu'à ce qu'il soit "pris en charge" par le WHATWG. C'est dit et expliqué un peu partout et notamment dans la doc technique Mozilla elle même, je cite: "<canvas> is based on the WHATWG canvas specification, which itself is based on Apple's <canvas> implemented in Safari" (https://developer.mozilla.org/En/Dr...).
17 De Luc Heinrich - 29/03/2009, 10:56

(désolé, j'ai appuyé sur 'envoyer' plutôt que 'prévisualiser' et mon dernier message est tronqué :)).

L'élément canvas de Firefox, disais-je donc, est issu de la spécification du WHATWG qui elle même s'est basée sur l'implémentation WebKit. Je considère donc tout à fait juste de dire que l'élément canvas de Firefox est issu de WebKit, par extension :p

La tagline de ce blog c'est "Tristan Nitot sur les standards du Web, les navigateurs et la technologie", donc à la base ma remarque n'était qu'une petite taquinerie pour Tristan, qui fait par ailleurs un boulot prodigieux pour le libre et le web en général. Alors bon, hein, Peace

Le vrai problème de toute façon ce sont les clowns de chez MSIE, si vous voyez ce que je veux dire...
18 De pell - 02/04/2009, 04:04

Bonjour. Premièrement, je tiens à préciser que je ne suis pas un expert dans le milieu informatique, mais j'ai un problème qui semble être en train d'en devenir un pour mes amis programmeurs...peut-être avez-vous une solution...

Je semble avoir un problème de rendu graphique avec Firefox (dernière version disponible en free download). Mon ordinateur est un Mac Book. En fait, voici les détails. J'ai une photo que je visualise sur Photoshop ou Preview qui a le contraste et la saturation désirés. Lorsque je télécharge (upload) la photo sur le web, ma photo devient très pâle et j'ai moins de contraste que l'original. J'ai noté que ma page web (peut importe laquelle) sur Firefox ne semble pas bien définie au niveau des couleurs (les blancs contiennent du jaune). Voilà, si vous avez des trucs ou des infos à ce sujet, merci de me le laisser savoir.
19 De jj@standblog.org - 02/04/2009, 16:18

ouaiiii vivement qu'on puisse faire des présentations en 3D avec du CSS, parce que sinon <canvas> vas nous faire revivre l'expérience des présentations à bases de tableaux mais ... en 3D.
20 De JM - 02/04/2009, 18:54

Pinaillage : il serait plus correct de traduire "game graphics" par "graphismes de jeux" et non "graphiques".