Web GL : cours 5

Les matrices

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

Les matrices dans le debugger

Des maths, encore des maths...

  • Pas tant que ça !
  • Utile à connaître pour le long terme

Objectif

Une matrice

Utilisation d'une matrice

Coordonnées de points et coordonnées de vecteurs

Points et vecteur

(X,Y,Z,1) est un point

(X,Y,Z,0) est un vecteur

(A,B,C,0)+(D,E,F,0) → (A+D,B+E,C+F,0) est un vecteur

(A,B,C,0)-(D,E,F,0) → (A-D,B-E,C-F,0) est un vecteur

(A,B,C,1)+ (D,E,F,0) → (A+D ,B+E ,C+F ,1) est un point

(A,B,C,1)- (D,E,F,0) → (A-D ,B-E ,C-F ,1) est un point

(A,B,C,1)+(D,E,F,1) → (A+D,B+E,C+F,2) est illégal !!!

La matrice identité

  • Création d'une matrice 4x4 :
    • 
var mtx = new THREE.Matrix4();
  • Initialisation à la matrice identité :
    • 
mtx.identity();

La matrice de translation

Multiplication par un point :

La matrice de translation

Multiplication par un vecteur :

Alignement des vecteurs

Quiz

Utilisation de matrice

  • Initialisation avec données :
    • 
var mtx = new THREE.Matrix4(
    1, 0, 0, 12,
    0, 1, 0, 16,
    0, 0, 1, -5,
    0, 0, 0,  1 );
  • Matrice de translation :
    •  
mtx.makeTranslation( x, y, z );
    exemple : 
     
mtx.makeTranslation(12,16,-5 );
  • Exemple du bras robotique :
    •  
forearm.matrix = mtx;
forearm.matrixAutoUpdate = false;

La matrice de rotation

Complément

Le produit scalaire

A⃗ · B⃗ = cosinus entre A⃗ et B⃗ ×

longueur de A⃗ ×

longueur de B⃗

Axe de rotation

  • Matrice avec axe et angle de rotation :
    • 
mtx.makeRotationAxis( axis, theta );

Axe de rotation

Quel est l'axe de rotation ?

Quel est l'axe de rotation ?


Angle de rotation



Quel est l'axe de rotation bla ?
  • Axe de rotation :

    • , ,

  • Angle de rotation ?
  • Longueur du cylindre ?

En Three.js

            
// get deux coins diametralement  opposes au cube
// et calcul la direction et longueur du cylindre
var maxCorner = new THREE.Vector3(  1, 1, 1 );
var minCorner = new THREE.Vector3( -1,-1,-1 );
var cylAxis = new THREE.Vector3();
cylAxis.subVectors( maxCorner, minCorner );
var cylLength = cylAxis.length();
 
// prend le produit scalaire de cylAxis et du vecteur up
// pour avoir le cosinus de angle
cylAxis.normalize();
var theta = Math.acos(
    cylAxis.dot( new THREE.Vector3(0,1,0) ) );
version alternative : 
    
 
// version alternative :
var theta = Math.acos( cylAxis.y );

Pour inverser une rotation

  • Axe de rotation : (-1,0,1) inversé à (1,0,-1)
  • Angle de rotation : -θ inversé à θ

Le produit vectoriel


var rotationAxis = new THREE.Vector3();
rotationAxis.crossVectors( cylAxis, new THREE.Vector3(0,1,0) );


var negRotationAxis = new THREE.Vector3();
negRotationAxis.crossVectors( new THREE.Vector3(0,1,0), cylAxis );


// cas special : si rotationAxis est environ zero, le mettre a l'axe X,
// pour que l'angle soit 0 ou PI
if ( rotationAxis.length() == 0 )
{
    rotationAxis.set( 1, 0, 0 );
}
rotationAxis.normalize();

Le produit vectoriel

longueur(u⃗ ×v⃗) = sinus(θ)*longueur(u⃗ )*longueur( v⃗)

La matrice scale

La matrice scale

La matrice scale

Matrices miroir

Matrices miroir









alice.scale.z=-1;
Influence sur la visibilité des triangles ?

Matrices miroir









if (mtx.determinant() < 0 )
{
    console.log("miroir");
}

Quiz

Que deviennent les normales des triangles lorsqu'une matrice miroir est appliquée à la géométrie ?

Elles continuent à être cohérente :

Les zones de la matrice




Suite : L'éclairage

L'éclairage