WebGL & Three.js

Maël Nison - Epitech 2014
Nov 15, 2011

Javascript

C'est :

Un langage de script
Un langage conçu pour le web
Un langage qui n'a rien à voir avec Java

Bref historique

Première génération :
Faire tourner des chiens autour du curseur
Seconde génération :
Contenu dynamique, ère Ajax
Troisième génération :
Application enrichies, Google Apps
Quatrième génération :
3D !

Pourquoi de la 3D dans un navigateur ?

Pousser plus loin l'expérience utilisateur (World Flights)
Pour réaliser des outils distribués (VideoFX)
Parce que c'est beau (Ellie Goulding's Lights)
Portabilité accrue (à relativiser)

Parlons de cette portabilité

Deux prérequis :

Un navigateur à jour
- Mozilla Firefox 4+
- Google Chrome / Chromium 9+
- Opera 12 ... mais en développement.
- Safari 5.1 ... mais désactivé. Sauf pour les ads Apple.
- IE8+ ... Avec Chrome Frame.
Un driver de carte graphique à jour

WebGL

Implémentation Javascript de l'API OpenGL ES2

Cela inclu également (via le langage GLSL) :

Vertex shaders
Code chargé du préprocessing des vertices (position etc)
Fragment shaders
Code chargé du postprocessing des faces (couleur etc)

Exemple d'animation fluide et portable

Inconvénients de WebGL

(et par extension d'OpenGL)

API à contre courant du JavaScript
Code 'boilerplate'
Verbosité extrème
Debug complexe

Ce sont des inconvénients bloquants pour les nouveaux utilisateurs

What is that ?

Bibliothèque JavaScript
Remplace l'API WebGL
Génère les shaders à la volée
Dispose d'un grand nombre d'helpers

Les inconvénients ?

Jeune (premier commit le 23 mars 2010)
Volatile (changements réguliers d'API)
Aucune documentation complète

Les avantages ?

Très grande simplicité
Mis à jour très régulièrement
Support réactif
Pléthore d'exemples divers
Open-source

Peu importe, fais voir !

Et niveau code ?

Près de deux fois moins de lignes au total
Taille de la fonction d'animation : 3 lignes
Uniquement du JavaScript : pas de GLSL
Modèle objet simple

Plus en détail

Three.js englobe trois éléments basiques :

Un mode d'affichage (appelés Renderer)
Une scène contenant les objets
Les objets 3D eux-même !

Plus en détail - 2

Les objets 3D sont eux-même composés de deux autres éléments :

Une géometrie, contenant la position des vertices
Un materiaux, contenant les informations du rendu 3D

Les objets regroupant ces deux éléments sont appelés des meshes

D'autres types d'objets existent. Ex : les caméras

On récapitule

Pour afficher une sphère, on aura besoin :

d'un Renderer
d'une Scene
d'une Camera
d'une Geometry
d'un Material
d'un Mesh

Petit interlude

Connaissez-vous The Game ?

Retour au sujet : Initialisation de notre Renderer

var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

Rajoutons-nous un oeil

var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000);
scene.add(camera);

Une sphère à afficher, peut-être ?

var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000);
scene.add(camera);

var geometry = new THREE.SphereGeometry(10, 20, 20);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Et enfin, la boucle d'affichage

var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000);
scene.add(camera);

var geometry = new THREE.SphereGeometry(10, 20, 20);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

(function loop() {
  window.requestAnimationFrame(loop);
  renderer.render(scene, camera);
}()); // <-- Ne faites pas attention à cette syntaxe ;)

Et 'voilà', c'est prêt !

... hem, on ne voit pas grand chose.

La caméra et la sphère sont à la même position.

var renderer = new THREE.WebGLRenderer();
renderer.setSize(500, 500);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000);
camera.translateZ(100); // <-- On recule la caméra !
scene.add(camera);

var geometry = new THREE.SphereGeometry(10, 20, 20);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

(function loop() {
  requestAnimFrame(loop);
  renderer.render(scene, camera);
}());

Cette fois c'est bon.

\o/

Que la lumière soit !

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000);
camera.translateZ(100);
scene.add(camera);

var light = new THREE.PointLight(0xffffff); // <-- On créer un spot
light.translateZ(100); // <-- Même emplacement que la caméra
scene.add(light);

var geometry = new THREE.SphereGeometry(10, 20, 20);
var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading }); // <-- Pour voir les effets
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

(function loop() {
  requestAnimFrame(loop);
  renderer.render(scene, camera);
}());

Et la lumière fût.

Ok, soyons un peu plus dynamiques.

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, 1, .1, 10000);
camera.translateZ(100);
scene.add(camera);

var light = new THREE.PointLight(0xffffff);
light.translateZ(100);
scene.add(light);

var geometry = new THREE.SphereGeometry(10, 20, 20);
var material = new THREE.MeshPhongMaterial({ color: 0xff0000, shading: THREE.FlatShading });
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

(function loop() {
  requestAnimFrame(loop);
  mesh.rotation.x += .02; // <-- juste ça,
  mesh.rotation.y += .02; // <-- et ça !
  renderer.render(scene, camera);
}());