avril 2012 – French Coding

L’histoire du WebGL

WebGL

La nouvelle révision du language HTML, le HTML5 est en plein essor. Le HTML5 vise à simplifier l’écriture du code HTML au niveau de la sémantique en ajoutant des nouvelles balises telles que <canvas> <video> <article> <audio>.

L’adoption des changements au HTML5 est avance à grande vitesse. Tous les grands navigateurs (Opéra, Chrome, Firefox et Internet Explorer) offrent un support préliminaire à avancé de la majorité des nouvelles fonctionnalités impliquées dans l’ajout de ces nouvelles balises.

Dans le cas qui m’intéresse est l’ajout de la balise <canvas>. Cette balise agit comme une zone dans laquelle on peu faire rendre des animations dans le navigateur sans l’aide d’extensions additionnelles.

C’est ici qu’entre en scène le WebGL. Le WebGL est la technologie par laquelle les animations en 3D sont possible à l’intérieur d’un navigateur web grâce à la balise <canvas> et le javascript. Le WebGL ne requiert aucune extension additionnelles pour fonctionner.

Histoire
Vers la fin des 1990, la technologie VRML (Virtual Reality Modelling Language) avait été mis de l’avant sur le web. Cette technologie permettait de faire un rendu 3D d’image et de autoriser l’interaction entre l’animation et l’utilisateur.

Le concept était simple. Programmer des animations dans un fichier texte, télécharger ce fichier par un navigateur web grâce à un à l’extension VRML et faire afficher le rendu 3D. Le principal défaut du VRML était sa demande exigeante en bande passante à une époque où les connexions les plus rapides étaient des connexion 56Kbps.

Le WebGL a été fondé vers la fin 2009 par la fondation Mozilla et le groupe Khronos. Le but de l’alliance, représentant les plus gros joueurs de l’industrie de l’informatique, est de définir des API et des standards de programmation pour faire des animations et des jeux en 3D par un navigateur web.

C’est le groupe Khronos qui est en charge de l’évolution de l’API OpenGL et tous ces dérivés (OpenCL, OpenGL ES, etc.).

À présent

Le standard WebGL n’est pas encore à la version finale 1.0. Ceci veut dire qu’il y a toujours place à des révisions par le groupe Khronos. Tant et aussi longtemps que la spécification WebGL ne sera pas finale, il est peu possible que les navigateurs web l’implémentent pleinement. De plus, aucune date de remise n’a été suggérée pour cette spécification.

Le support pour OpenGL est encore très immature avec les navigateurs web. Pour le moment, la seule façon de voir de vos propres yeux des animations WebGL est de télécharger les versions dites de développement de ceux-ci (Firefox 4 Beta et les versions développement de Chromium).

L’un des joueurs importants qui cherche à se positionner dans le WebGL est Google. Dans la dernière année, Google a mis en place une librairie permettant de faire des animations 3D nommée O3D. Cette librairie augmente est utilisée conjointement avec WebGL et augmente ses fonctionnalités.
Le futur

Il y a actuellement quelques démonstrations du WebGL qui représentent assez bien le potentiel de cette technologie.

Beach : http://www.youtube.com/watch?v=uofWfXOzX-g. Cette vidéo a pour but de démontrer le potentiel de faire rendre des animations 3D avec des effets de qualité dans un navigateur avec fluidité.

Quake 2 (Note : Violence incluse mais démo hautement impressionnante) : http://www.youtube.com/watch?v=fyfu4OwjUEI. A pour but de démontrer qu’il est possible de faire exécuter un jeu avec de l’interaction en temps réel dans un navigateur web.

Conclusion

L’objectif du WebGL est donc d’avoir un API inspiré du OpenGL avec des bases assez solide pour afficher des animations 3D tout en étant assez léger pour qu’un appareil peu puissant tel un téléphone style iPhone ou Android soit en mesure d’afficher les animations.

Le WebGL est donc supporté par un sérieux groupe désirant à rendre possible la programmation d’animations et de jeux en trois dimentions avec Javascript en temps réel. Les enjeux sont énormes car étant donné que le WebGL vise le marché des navigateurs web, il doit être aussi possible d’afficher les même animations en 3D sur les téléphones mobiles.

L’utilisation du point virgule dans son code

La programmation est une pratique encore bien jeune. Comme toute chose en quête de maturité, il est normal de remettre en question l’ordre établi.

Un débat a fait rage dans la communauté Javascript vis-à-vis l’utilisation du point virgule dans son code.

L’argument de base de la part du développeur de la librairie Bootstrap est qu’il est possible d’écrire du code avec la plus petite trace possible en tirant profit du Automatic Semicolon Insertion (ASI).

La spécification du langage Javascript mentionne les règles pour qu’un point virgule soit ajouté automatiquement lors de son interprétation.

Par exemple, le code suivant :
return a + b
Va être interprété de la façon suivante dans la majorité des compilateurs :
return; a + b;

Or, il s’avère que ce code est incompatible avec la librairie de minification écrite par Douglas Crockford JSMIN. L’idée est que JSMIN ne tenait pas compte du ASI dans la minification du code car il s’agit d’une béquille introduite lors de la conception de JavaScript.

La réponse de Douglas Crockford a été assez brutale

Le point vient du fait qu’il est préférable de séparer les instructions dans le code par des points virgule en dépit de l’espace supplémentaire que cela peut prendre. La même idée est applicable aux expressions telles que les if ou les boucles for, par exemple. Il faut toujours inclure les accolades pour ces derniers.

Cet épisode de l’histoire de Javascript est un exemple qui illustre comment les optimisations prématurées sont à la source de 97% de tous les maux que nous éprouvons en programmation.

Au final, il faut toujours garder en tête que nous écrivons notre code pour des humains qui auront la tâche de lire à leur tour et non pour des compilateurs qui auront comme tâche de l’interpréter bêtement.

Firefox – Nouvelles fonctionnalités d’inspection

Travaillant dans le domaine du développement web, j’ai toujours l’habitude d’alterner le navigateur web que j’utilise dans mes tâches courantes.

Cette semaine, j’ai fais l’utilisation du navigateur Firefox Nightly afin d’avoir une idée d’où s’en va le développement du navigateur de Mozilla.

Firefox Nightly est le navigateur qui est la sortie quotidienne de la branche de développements du navigateur. C’est dans cette branche de développements que se retrouvent les fonctionnalités expérimentales et parfois brisées.

Le principal ajout qui m’a intéressé est l’ajout d’un inspecteur HTML et de styles CSS au même titre que Firebug directement dans le navigateur.

La vue 3D de votre code HTML

Certains pourront dire que le nouvel inspecteur de styles de Firefox imite sommairement les fonctionnalités de Firebug. Ce qui est à retenir cependant est que cet inspecteur permet d’afficher le contenu de votre DOM en 3D en utilisant WebGL pour alimenter le tout.

En plus de donner la représentation 3D de votre structure HTML, il est possible d’interagir avec votre page web en cliquant avec votre souris sur le modèle 3D.

Les possiblités sont les suivantes :

Glisser vers le haut, bas, gauche et droite : Permet de changer l’angle de vue de votre structure HTML
Clic : Permet de sélectionner un élément dans le DOM
Scroll : Permet de faire un zoom sur votre structure HTML.

Pour les gens qui ne tenteront pas d’installer Firefox Nightly sur leur ordinateur, vous pouvez voir un aperçu vidéo de la fonctionnalité de prévisualisation 3D de votre DOM sur Youtube.