Web GL : cours 3

Couleur et matériel

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

démo sur les couleurs

Définir le couleurs

  • Définir un matériaux
    • 
var sphereMaterial= 
    new THREE.MeshLambertMaterial();
  • Définir la couleur avec THREE.Color
    • 
sphereMaterial.color.r = 1.0;
sphereMaterial.color.g = 0.0;
sphereMaterial.color.b = 0.0;
  • Autre solution :
    • 
sphereMaterial.color.setRGB
	(0.855, 0.647, 0.125);
						
    
sphereMaterial.color.setHex(0x1280FF);

Couleur en hexadecimal





Magenta

  • (Rouge est (1,0,0)
  • (Vert est (0,1,0)
  • (Bleu est (0,0,1)

Comment coder la couleur Magenta ?

R G B

Les attributs des sommets

  • Points définis par X,Y,Z et R,G,B
  • Exemple : 
    • 
var color1 = new THREE.Color( 0xF08000 );//orange
var color2 = new THREE.Color( 0x808000 );//olive
var color3 = new THREE.Color( 0x0982FF );//bright blue
geometry.faces[0].vertexColors = 
	[ color1, color2, color3 ];

Interpolation de couleurs

  • Variation linéaire de 0 à 1

Couleur diffuse


Matériaux diffus

  • MeshBasicMaterial → MeshLambertMaterial
  • C= ambient + couleur* ∑ (N⃗.L⃗i)
  • Cela s'appelle le modèle Lambertien 

material = new THREE.MeshBasicMaterial( 
   { color: 0x80fc66, shading: THREE.FlatShading } );
material.color.setRGB( red, green, blue );
var newRed = material.color.r * 0.7;
material.ambient.setRGB( ... );

Utilisation de normale douce

  • = Smooth shading
  • MeshBasicMaterial → MeshLambertMaterial
  • ne pas forcer à THREE.FlatShading comme précédemment

Démo

  • couleur = KA*material+KD*material*(N⃗.L⃗)

Matériaux spéculaire

  • Modèle de Phong :

    • couleur spéculaire = max(N⃗.H⃗, 0)n

Matériaux spéculaire

couleur spéculaire = max(N⃗.H⃗, 0)n

Matériaux spéculaire 


new THREE.MeshPhongMaterial( { 
    color: 0x996633, 
    specular: 0x050505,
    shininess: 100
} )

Démo

Transparence

Alpha blending


Transparence et THREE.js

  • Faire d'abord un rendu des objets opaques avec le Z-buffer
  • Mettre le alpha blending à On
  • Faire le rendu des objets transparents ordonnés du plus loin au plus proche

var movingBoxMaterial = new 
      THREE.MeshLambertMaterial(
      { color: 0xE53319, opacity: 0.7, 
      transparent: true } );

Suite : Transformations

Le cours sur les transformations

s