WebGL – Quand les navigateurs font de la 3D

WebGL – Quand les navigateurs font de la 3D

Depuis l’apparition du HTML5, on voit apparaître sur les sites internet, des animations de plus en plus réalistes et surtout contenant de plus en plus de 3D, ceci, bien entendu, sans utiliser un support vidéo, mais grâce aux possibilités des navigateurs, de plus en plus étendues.

Une première approche de la représentation 3D dans les navigateurs fut amorcée en 1994 par le « Virtual Reality Modelling Language », ou VRML. Il était alors nécessaire de télécharger un plugin pour permettre au navigateur d’interpréter des fichiers .wrl, qui composaient l’animation.

Puis fin 2009, Khronos Group et la fondation Mozilla créent WebGL, une spécification pour les navigateurs web, permettant d’interpréter le standard OpenGl, via l’API OpenGL ES. Au départ, peu de navigateurs étaient compatibles avec cette norme. On peux constater que maintenant, la plupart le sont (Oui même Internet Explorer …) :

 

Support WebGL ds navigateurs

 

Très bien, alors c’est quoi ce WebGL ?

Selon Khronos Group, son créateur :

WebGl  est un standard web d’affichage 3D, multi-plateformes, libre de droit, basé sur l’API Open GL ES 2.0, exploité au travers des éléments canvas du html5 en tant qu’interface du DOM … WebGL apporte à Internet la 3D, sans plugin, mis en place directement par le navigateur . Les principaux fournisseurs de navigateurs comme Apple ( Safari ) , Google ( Chrome ) , Mozilla ( Firefox ) et Opera ( Opera ) sont tous membres du Groupe de travail WebGL.

Pour faire plus simple, WebGl est un standard (les spécifications sont ici ) qui permet d’afficher des éléments en 3D, dans une page web, grâce à une API (Open GL ES 2.0) et les éléments <canvas>, introduit par le HTML5. Mais attention, WebGL n’est pas un langage ; On utilise le Javascript pour programmer les animations 3D, qui sont ensuite insérées dans le HTML à l’aide des éléments <canvas>.

Un des grands intérêts de WebGl, est de pouvoir utiliser, via OpenGl, les capacités des GPU des cartes graphiques pour les calculs d’affichage des objet 3D. Cela permet d’avoir de très bons rendus avec des temps de chargement acceptables.

WebGl est actuellement dans sa version 2.0 et semble être présent aujourd’hui sur la plupart des postes des internautes. Comme nous le montre le graphique ci-dessous, plus de 90% des devices (Mobiles – Desktops – Tablettes) permettent d’utiliser le WebGL, donc pourquoi s’en priver ?

Capture.1PNG

C’est parti je fais mon site en 3D avec WebGl

Pour cela, il va tout d’abord falloir s’armer de patience, et avoir quelques notions de développement 3D, OpenGl et Javascript. Heureusement il existe plein de librairies Javascript pour nous aider, et notamment threejs

Three.js : A JavaScript 3D Library which makes WebGL simpler.

Voici par exemple un petit morceau de code pour afficher une simple sphère en rotation (source : alsacreation)

var renderer, scene, camera, mesh;
init();
animate();

function init(){
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById('container').appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0, 0, 1000);
scene.add(camera);
var geometry = new THREE.SphereGeometry( 200, 32, 32 );
var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('metal.jpg', new  THREE.SphericalReflectionMapping()), overdraw: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var lumiere = new THREE.DirectionalLight( 0xffffff, 1.0 );
lumiere.position.set( 0, 0, 400 );
scene.add( lumiere );
}
function animate(){
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}

Et voici ce que cela donne en rendu :

Il faut donc à minima :

  • créer une scène ( objet scene )
  • créer une vue caméra ( objet camera)
  • placer cet objet camera dans la scene
  • créer un objet (un Mesh en langage 3D)
  • mettre le Mesh dans la scene et le positionner par rapport à la camera
  • créer un rendu

Vous allez maintenant pouvoir imaginer le travail nécessaire qu’il a fallu aux développeurs pour réaliser les sites/applications que nous allons voir plus loin …

C’est bien jolie la 3D, mais est-ce vraiment utile ?

Et bien cela dépend, comme souvent, du site que l’on veut faire, du budget, et de la cible que l’on veut toucher.
Les animations en WebGl ont l’avantage, par rapport à une simple vidéo, de permettre une grande interaction avec l’utilisateur, de se déplacer dans une scène, d’interagir avec des éléments … via la souris ou le clavier, ou, dans une utilisation plus poussée, grâce aux possibilités des téléphone mobiles (gps, accéléromètre, gyroscope…).
C’est aussi une technologie innovante, induisant une image positive en matière de nouvelle technologie ou d’innovation technique.

Voici quelques secteurs où la technologie WebGl semble être très présente, et à juste cause :

Visualisation de données

En temps réel ou non, WebGl semble très apprécié des développeurs pour permettre d’afficher des données complexes et permettre une représentation la plus visuelle possible (en 3d donc…).

On constate dans tous les cas que la représentation des données en 3D est plus agréable et plus compréhensible que le serait un simple graphique ou un tableau.

 Automobile/Aérospacial

A la pointe de l’innovation technique, les acteurs de ce secteur ont tout à gagner à utiliser les possibilités du WebGl. Il permet, d’une part, de créer des sites dynamiques, innovants, avec ou sans Realité Virtuelle, mais surtout de montrer qu’ils maîtrisent complètement leur environnement technique et utilisent les dernières technologies, jusque sur internet.

 

iberia1

Cinéma / Jeux vidéo

WebGl permet de créer des sites de plus en plus impressionnants, avec des animations poussées, des vidéos, et surtout des interactions avec l’utilisateur, un peu comme un jeu vidéo ou un film interactif. Une vraie mine d’or pour les acteurs des ces deux secteurs. En effet, ils permettent aux fans ou aux futurs spectateurs de se projeter dans l’univers du film ou du jeu vidéo avant sa sortie. Voici quelques exemples :

Au final …

WebGl ne touche pas seulement ces secteurs d’activité. C’est une technologie de plus en plus présente sur la toile, qui permet de faire des sites de plus en plus poussés. Plus que des sites, ce sont des expériences interactives que l’on nous propose, mélanges de vidéos, d’animations, de sons, d’interactions…
Il a su s’imposer comme un standard dans le développement d’applications 3D, notamment grâce à sa capacité à utiliser les GPU et les nombreuses librairies Javascript qui permettent de simplifier (un peu…) son intégration en HTML.

Pour terminer, voici un florilège des sites/applications trouvés ici et là sur la toile … et n’oubliez pas de brancher vos écouteurs.