Imaginez un monde ou pour jouer à votre jeu favori, il vous suffit d’aller sur un navigateur web et de taper le nom du jeu. Avec la technologie dont nous parlons aujourd’hui, ce futur n’est pas si loin (la preuve).
Alors oui, la 3D existe déjà sur nos navigateurs.
Vous avez sûrement déjà vu ces applications qui permettent de créer une cuisine directement sur navigateur web, ou de visiter un intérieur de voiture, mais vous savez aussi sûrement que ce type de contenu requiert le célèbre plugin Flash player. En effet, Flash, le langage utilisé, a besoin du plugin d’Adobe pour fonctionner sur un navigateur, mais plus pour longtemps !
Depuis 2009, un nouveau standard web permettant de créer des pages intégrant du contenu 3D fait surface.
WebGL, basé sur le standard 3D Open GL.
WebGL est basé sur la balise Canvas de HTML. Cette balise permet de créer dessins et animations grâce à JavaScript.
Pas besoin de Plug-in, mais les rendus restent assez limités. Par exemple, le petit dinosaure de Google quand on n’a pas de connexion est dans un canvas. Et grâce à webGL, canvas devient un véritable moteur de rendu 3D. Comme dans un logiciel de 3D comme Unity, il est possible de créer une vue et de la déplacer dans un environnement 3D (scène). On peut créer dans cette scène des objets en donnant des points de coordonnées.
Alors bien sûr, la 3D en JavaScript, pour ce qui est des calculs, cela peut vite devenir assez brutal. Il existe heureusement des bibliothèques comme three.js, ou des développeurs ont créé des fonctions pour simplifier notre travail avec webGL. Voici un exemple basique de ce qui est possible avec webGL et three.js :
Pour créer la brique :
D’abord on crée en JavaScript une fonction init() dans laquelle on mettra notre code. Puis on crée la fenêtre de rendu canvas, et on initialise ensuite la scène.
On ajoute et on place dans la scène la caméra (point de vue). Vient ensuite la création des objets géométriques (mesh) que l’on place dans l’environnement 3D que l’on vient de faire.
On les ajoute ensuite à la scène et c’est terminé.
Pour l’animation de la rotation, c’est une autre fonction indépendante de init().
Grâce à la bibliothèque, c’est très simple grâce à la méthode rotation à laquelle j’ai ajouté une valeur en x et une autre en y.
Pour les interracteurs, j’ai simplement créé des boutons en HTML, avec des listeners en JS.
Ce qui donne à WebGL son énorme potentiel, c’est qu’il permet de porter canvas sur la carte graphique de l’ordinateur.
Des rendus performants avec des formes complexes et textures haute définition sont ainsi possibles,
Tout ça sur une page Web, dans une fenêtre dont on définit la taille, sans plug-in.
En plus c’est du JavaScript, langage bien connu des développeurs.
Toutes les interractions avec l’utilisateur permises par javascript avec le DOM (les éléments de la page, et donc du canvas lui-même) sont donc permises avec webGL :
On peut créer des menus complexes, et un utilisateur peut littéralement piloter la vue 3D, puisque JavaScript peut détecter les interractions clavier.
Imagine, des jeux en 3D sur navigateur !
Le meilleur est que ça existe déjà :
Le développeur Bandon Jones a recréé l’univers de Quake 3 sur ce site : http://media.tojicode.com/q3bsp/
Ou alors une version simplifiée de Wipeout ici : http://hexgl.bkcore.com/playD
C’est seulement la carte pour l’instant mais ça donne une idée des possibilités de cet outil, dont on continuera d’entendre parler surement un long moment.
Votre réaction