Web GL : cours 6

L'éclairage

PF Villard d'après le cours de Eric Haines (Autodesk Inc.) disponible sur Udacity

Photons et particules










Lumières directionnelles


exemple avec three.js editor

Lumières directionnelles dans Three.js


var light = new THREE.DirectionalLight( 0xFFFAAD, 0.7 );
light.position.set( 200, 500, 600 );
scene.add( light );
Autre valeur équivalente ? 
           
light.position.set( 2, 5, 6 );
light.position.set( 0.02, 0.05, 0.06 );

Mettre en place une lumière directionnelle

  • fillScene()
  • Direction de la lumière : -200, 200, -400
  • Couleur : Blanche
  • Intensité : 1.5

→A faire en exercice sur le Drinking bird

Sources de lumière ponctuelle

exemple avec three.js editor :

Eclairage ambiant

Illumination indirecte

→= Eclairage ambiant


scene.add( new THREE.AmbientLight( 0x222222 ) );


var someMaterial = new THREE.MeshLambertMaterial( );
someMaterial.color.setRGB( 0.8,0.2,0.1);
someMaterial.ambient.copy( someMaterial.color );

→A faire en exercice sur le Drinking bird

Spotlight

→= Source de lumière dirigée ou projecteur

exemple avec three.js editor :

Spot light dans Three.js

  • Couleur : Blanche
  • Intensité : 1.5
  • Position : -400, 1200, 300
  • Angle : 20 degré
  • Exposant: 1
  • Position de la cible: 0, 200, 0

→A faire en exercice sur le Drinking bird

Rendu différé

Rendu différé

  • = Deferred Rendering
  • Variation 1 : deferred shading
  • Variation 2 : deferred lighting









Shadow maps










Caractéristiques du Shadow buffer

A quoi ressemble une image qui permet de stocker une shadow map ?

Deferred Shading

Positions+Normales+Materiel→geometry buffer (G-buffer)








  • G-Buffer de couleur
  • Z-Buffer
    •
  • G-Buffer de normales
    •
  • Résultat final
    •

Shadows dans THREE.JS


renderer.shadowMapEnabled = true;

spotlight.castShadow = true;

cube.castShadow = true;
cube.receiveShadow = true;


bbird.traverse( function ( object ) {
    if ( object instanceof THREE.Mesh ) {
        object.castShadow = true;
        object.receiveShadow = true;
    }
} );

// controls shadow bias:
spotlight.shadowBias = 0.0001;

→A faire en exercice sur le Drinking bird

Limites du shadow buffer










Exemple

Brouillard

Démo de brouillard

Brouillard dans Three.js

scene contient un attribut fog à construire :
  1. Brouillard linéaire
    2. 
Fog( hex, near, far )
    • hex : Couleur du brouillard
    • near : Distance minimum du brouillard
    • far : Distance maximum du brouillard
  2. Brouillard exponentiel
    3. 
FogExp2( hex, density )
    • hex : Couleur du brouillard
    • denisty : Densité du brouillard

scene.fog = new THREE.Fog( 0x0, 2000, 4000 );

Suite : Caméra

La caméra