WebGL & Three.js

Maël Nison - Epitech 2014
Nov 15, 2011

Javascript

C'est :

Bref historique

Pourquoi de la 3D dans un navigateur ?

Parlons de cette portabilité

Deux prérequis :

WebGL

Implémentation Javascript de l'API OpenGL ES2

Cela inclu également (via le langage GLSL) :

Exemple d'animation fluide et portable


Et au niveau du code ? ...

C'est juste imbuvable.


Inconvénients de WebGL

(et par extension d'OpenGL)

Ce sont des inconvénients bloquants pour les nouveaux utilisateurs

Three.js à la rescousse !

What is that ?

Les inconvénients ?


Les avantages ?

Peu importe, fais voir !



Et niveau code ?


Plus en détail


Three.js englobe trois éléments basiques :

Plus en détail - 2

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

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 :

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);
}());

Let's go.

Congratz

Vous connaissez maintenant les bases de Three.js

Mais il y a moyen de faire beaucoup mieux.

Pas encore convaincu ?

Nous voilà arrivés au terme de cette présentation.

Any questions ?