Informatique Graphique

WebGL et Three.js

Guillaume Gilet

Html5

  • WebGL construit a partir de l'élément <canvas> d'html5
  • Programmation en javascript
  • Il faut un petit peu d'html5

Un exemple simple


<html>
 <head>
    <title>Mon appli WebGL</title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="./../js/Three.min.js" </script>
  </head>
  <body>
    <script>
      Ici va notre code javascript avec WebGL et Three.js
    </script>
  </body>
</html>
            

Three.js

  • github.com/mrdoob/three.js
  • Faciliter l'utilisation de WebGL
  • Fournit également Canvas et SVG
  • Définit :
    • Une Scène : Contient des objets
    • Une Caméra : Le point de vue
    • Un WebGLRenderer : Dessine la scène

Les bases

Créer la méthode de rendu (WebGLRenderer)


    var renderer = new THREE.WebGLRenderer();//Des paramètres (voir en TP)
    renderer.setSize(document.body.clientWidth, 
                     document.body.clientHeight);
          

L'attacher au document html


    document.body.appendChild(renderer.domElement);
          

Définir la couleur de fond


renderer.setClearColorHex(0xAAAAAA, 1.0);
renderer.clear();
          

Exemple 1

Ajoutons une caméra

    var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
          

On retrouve les paramètres intrinsèquesde la caméra


          PerspectiveCamera( fov, aspect, near, far );
  
  • fov : Field Of View : l'angle d'ouverture de la caméra
  • aspect : le rapport largeur/hauteur
  • near : la distance du plan proche
  • near : la distance du plan éloigné
  • voir ( ici ) pour rappel
Plaçons la caméra

On retrouve les paramètres extrinsèques de la caméra

  • Position
  • Orientation
  • voir ( ici ) pour rappel

Comme tout objet 3D, on peut définir


camera.position.set(10,10,300);
camera.rotation.set(0,0,0);
camera.up = new THREE.Vector3( 0 ,1, 0 );
camera.lookAt(new THREE.Vector3( 0 ,0, 0 );
  
Il faut une scène

On crée un objet Scene


 var scene = new THREE.Scene();
  

On crée un maillage (notre objet 3D)


   var sphere = new THREE.Mesh(new THREE.SphereGeometry(50,50,50),
                new THREE.MeshBasicMaterial({color: 0xFF0000}));
  

Et on l'ajoute à la scène


   scene.add(sphere);
  

Contient une géométrie et un matériau


   Mesh(geometry, material)
  
Une géométrie
  • A la main (les sommets, puis les faces)
    
     var geometry = new THREE.Geometry();
    
    geometry.vertices.push(new THREE.Vector3(-1,1,0));
    geometry.vertices.push(new THREE.Vector3(-1,-1,0));
    geometry.vertices.push(new THREE.Vector3(1,-1,0));
    
    geometry.faces.push( new THREE.Face3(0,1,2));
      
  • Prédéfinie
    
    geometry = new THREE.SphereGeometry(50,50,50);
      
  • A partir d'un modèle 3D d'entrée
    
       var loader = new THREE.JSONLoader();
        loader.load( "Bunny.js", function(geometry)
        {
        ...
        });
      
Un materiau pour décrire l'apparence des objets
  • Enormement d'options, de paramètres
  • Des materiaux prédéfinis (voir cours sur les materiaux)
    
          var materiau = new THREE.MeshBasicMaterial({color: 0xFF0000}));
    var materiau = new THREE.MeshLambertMaterial({color: 0xFF0000}));
    var materiau = new THREE.MeshPhongMaterial({color: 0xFF0000}));
      
  • Des matériaux crées par un shader GLSL (voir cours sur les shaders)
Jusqu'ici...

var renderer = new THREE.WebGLRenderer();
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xAAAAAA, 1.0);
renderer.clear();
var width = renderer.domElement.width;
var height = renderer.domElement.height;


 var camera = new THREE.PerspectiveCamera(45, width/height, 1, 10000);
    camera.position.z = 300;
var scene = new THREE.Scene();
var sphere = new THREE.Mesh(new THREE.SphereGeometry(50,50,50),
         new THREE.MeshBasicMaterial({color: 0x0055ff}));
scene.add(sphere);
  

Dessions la scène depuis la caméra


      renderer.render(scene, camera);
  

Exemple 2 - Une première forme

Transport de lumière

Ajoutons une lumière


var light = new THREE.PointLight();
light.position.set( 80, 150, 250 );
scene.add(light);

On retrouve les types de lumières classiques en informatique graphique


var light = new THREE.PointLight();
var light = new THREE.SpotLight();
var light = new THREE.AmbientLight();
var light = new THREE.HemisphereLight();

Un matériau qui interagit avec la lumière


THREE.MeshPhongMaterial( { ambient: 0x000000, 
                                     color: 0x0055ff, 
                                     specular: 0x555555, 
                                     shininess: 50 } ) );
          

Exemple 3 - Avec lumière

Comment gérer l'animation temps réel?
  • Principe : redessiner l'image toutes les 30 ms (au moins)
  • Utiliser la fonction requestAnimationFrame() de html5
    • Appele la fonction passée en argument (jusqu'a 60 fois par seconde)
    
      window.requestAnimationFrame(animate, renderer.domElement);
      
  • Une fonction animate() qui :
    • Affiche la scène
    • Caclule l'animation
    • Demande a nouveau une animation
    
       function animate(t) { 
        cube.rotation.set(1,t/800,1);          
        renderer.render(scene, camera);       
        window.requestAnimationFrame(animate, renderer.domElement);
          };
     

Exemple 4 - Avec animation

Contrôle de caméra

  • Three.js propose plusieurs mode de déplacement de caméra
  • 
        
    
    var controls = new OrbitControls( camera , renderer.domElement );
    
     

Exemple 5 - Avec controle de caméra