Informatique Graphique

Prise en main de Three.js

Guillaume Gilet

Première étape : éditer l'html

Pour débuter

  • Une page Web template a télécharger (ici)
  • Commençer par créer un renderer WebGL
  • Ajouter une caméra perspective
  • Ajouter un objet simple (sphère,cube,torus), avec un matériau basique (MeshBasicMaterial)
  • Effectuer le rendu de la scène
  • Les détails sont dans le cours

Histoire de caméra

  • Modifier les paramètres intrinsèques et extrinsèques de la caméra et observer le résultat
  • Il est important d'être à l'aise avec le modèle caméra et ses différents paramètres
  • Essayez de définir l'orientation de la caméra grâce à la fonction lookAt
  • Observer les différences entre projection perspective et projection orthographique

Matériaux

  • Les matériaux représentent un modèle d'approximation de la fonction de BRDF qui définit l'interaction lumière matériaux
  • A quelle approximation correspond le matériau MeshBasicMaterial ?
  • Changer le matériau de la sphère en un matériau de Lambert (MeshLambertMaterial)
  • Ajouter une lumière ponctuelle (PointLight)de couleur blanche
  • Que peut-on constaster sur le modèle d'illumination ?

Illumination

  • Faites varier les paramètres de couleur de la lumière et de couleur diffuse du matériau et constater les résultats
  • Essayer maintenant d'ajouter une lumière de type ambiant (AmbiantLight) dans la scène. Quelle est son influence ?
  • Expérimenter avec l'eclairage et les matériaux en ajoutant plusieurs lumières de couleur et nature différentes et en faisant varier la couleur et la nature du materiau

Histoire de caméra (bis)

  • Il existe plusieurs méthode pour contrôler la caméra avec la souris
    • Télécharger les scripts (FirstPersonControl,Orbitcontrol)
    • Déclarer ces scripts dans l'en tête de votre fichier afin de pouvoir les utiliser
    • Instancier une variable correspondant a l'objet FirstPersonControls
    • Afin de pouvoir interagir avec la scène, il faut appeler la fonction render régulièrement
    • Pour cela, déclarer une fonction animate qui affichera la scène à intervalle régulier (cf cours)

Animation

  • Faites varier le paramètre rotation de votre objet en fonction du temps
  • Faites varier le paramètre position de votre objet en fonction du temps
  • Essayer de faire varier les paramètres du matériau (la couleur par exemple) en fonction du temps
  • Essayer de le même manière d'animer la position de la lumière

Repère de scène

  • Beaucoup d'objets sont définis en fonction d'un autre repère 3D
  • Cela crée une définition hierarchique
  • Créer un objet AxisHelper et l'ajouter à la scène
    • Cela matérialise le repère 3D de la scène

Hierarchie d'objet

  • A partir d'une scène vide créer un objet3D (appelons le A) et ajouter à cet objet un objet AxisHelper et un objet Cube
  • Que ce passe-t-il maintenant lorsqu'on déplace/fait tourner/redimensionne A ? lorsqu'on déplace/fait tourner/redimensionne le cube ?
  • Ce mécanisme permet de définir facilement des hierarchies d'objets

Une scène avec plusieurs repères mobiles

  • Un plan à placer horizontalement pour définir le sol
  • Un objet en rotation sur lui même dont la position décrit un cercle au dessus de ce plan
  • Un objet en rotation sur lui même dont la position décrit une orbite autour de l'objet précédent
  • Pour les plus courageux, essayer d'accrocher la caméra à un des objets de la scène

Histoire de modèles

  • Les scènes avec les objets prédéfinis manquent de diversité
  • Three.js permet l'ajout de modèles 3D définis à base polygones.
  • Plusieurs formats sont disponibles (collada, js, binaire...)

Principe du chargement

  • Un objet Three.js est composé d'une géométrie et d'une apparence
  • La géométrie est maintenant lue dans un fichier contenant le modèle
  • Exemple : le chargeur d'objet JSON 
    
                       var loader = new THREE.JSONLoader();
                       loader.load( "Bunny.js", function(geometry));
  • avec function(geometry) une fonction callback (appelée lorsque le chargement est fini avec la géométrie en paramètre)

La fonction callback

  • En général, crée un objet avec un matériau et l'ajoute à la scène
  • Exemple : 
    
                      function(geometry){
  var material = new THREE.MeshBasicMaterial( {color: 0xffffff}  );
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  • Egalement, on retrouve souvent dans cette fonction les traitements géométriques appliqués au modèle (calcul des normales...)

Le lapin, le lapin

  • Voici un modèle en format json (Bunny.js)
  • Essayez de charger ce modèle et de l'afficher au centre de votre scène
  • Attention, ce modèle à une taille de 1 et peut donc nécessiter (en fonction de votre scène) une mise à l'echelle avant d'être visible (modifier pour cela le champ scale de la géométrie)

Attention au chargement des objets locaux

  • Les navigateurs modernes interdisent par défaut l'accès à des fichiers locaux
  • Il faut modifier la configuration de votre navigateur pour pouvoir charger des modèles présents sur votre compte
  • Suivre la documentation ici
  • Il existe différents chargeurs de géométrie (par exemple ColladaLoader) disponible dans la librairie three.js
  • Essayez de charger un autre modèle disponible sur internet (il existe de nombreux plugins dans three.js pour convertir les modèles en json)

Question d'interface

  • Il est souvent utile d'avoir une interface afin de modifier directement les paramètres de votre scène
  • Afin de simplifier, nous utiliserons le script dat.GUI (a inclure dans votre fichier)
  • La documentation est ici
  • Essayez (après avoir lu la documentation) de réaliser une interface permettant de changer
    • La position et l'orientation de votre objet
    • La position et la couleur de la lumière
    • Le matériau et la couleur de votre objet

Habillage et texture

  • Les modèles dans une application 3D sont rarement de couleur uniforme
  • Pour rajouter de la diversité, il est possible d'utiliser une image (une texture) pour habiller la géométrie
  • Cela modifiera la couleur de la surface de l'objet
  • Il faut pour cela créer un objet texture : 
    
                  var texture = new THREE.ImageUtils.loadTexture( './matexture.png');
  • et indiquer au matériau de l'objet de l'utiliser : 
    
                  materiau.map = texture;

Habillage du lapin

  • Pour pouvoir utiliser une texture, les modèles doivent avoir des coordonnées de texture
  • Les textures doivent correspondre avec le modèle
  • Essayez d'habiller le lapin avec cette texture
  • Essayez maintenant avec une texture arbitraire
  • Il existe de nombreux paramètres pour un matériau avec texture (repetition, echantillonnage...)
  • Utilisez votre interface pour manipuler ces paramètres et observez le résultat

Pour aller plus loin

Il existe un grand nombre d'exemples, de démos utilisant WebGL, il est possible pour chacune de regarder le code source afin de mieux comprendre les mécanisme des divers effets (par exemple Exemple - WebGL Water).

A vous de chercher, de comprendre et de progresser