Translate, rotate, scale: matrices

Une tête qui tourne, deux oreilles qui suivent

Quand j'enseignais, un exercice revenait chaque année : « tu déplaces une figure, puis tu la fais tourner. Est-ce la même chose si tu inverses ? » Presque toute la classe répondait oui, et presque toute la classe se trompait. Il suffisait de dessiner un triangle sur une feuille, de le pousser de deux carreaux puis de pivoter la feuille autour du coin, et de recommencer dans l'autre sens.

Le chat du Labo me l'a reposé en vrai. Sa tête suit ton pointeur : elle tourne à gauche, à droite, elle penche. Or cette tête porte deux oreilles, deux yeux, des moustaches. Je n'ai pas écrit une ligne pour déplacer chaque oreille. J'ai juste dit à la tête de tourner, et tout ce qui lui est attaché a suivi.

Le mécanisme derrière ce petit miracle s'appelle une matrice de transformation. C'est le sujet de cette leçon : ce que contient une matrice, pourquoi elle a quatre lignes et quatre colonnes, pourquoi l'ordre des opérations change le résultat, et comment une hiérarchie d'objets s'en sert.

Position, rotation, échelle : trois réglages, une matrice

Tout objet three.js (un Object3D, donc un Mesh, un Group, une lumière) a trois réglages : position (où il est), rotation (comment il est tourné) et scale (de combien il est étiré). Ce sont les seuls que tu manipules.

À chaque image, three.js les range dans une seule matrice 4×4, object.matrix, composée dans cet ordre : T × R × S. Elle agit sur un point de droite à gauche : le point est d'abord étiré par S, puis tourné par R, puis déplacé par T.

const cat = new THREE.Group();
cat.position.set(0, 0, 0.02);       // T : où
cat.rotation.y = Math.PI / 2;       // R : tourné d'un quart de tour
cat.scale.setScalar(1.3);           // S : agrandi de 30 %

cat.updateMatrix();                  // matrix = T × R × S
console.log(cat.matrix.elements);    // 16 nombres, rangés colonne par colonne

Deux lignes de cette scène viennent du chat étoile : le groupe du chat est agrandi avec cat.scale.setScalar(1.3), et sa tête est un sous-groupe posé à head.position.set(0, 0.47, 0.04). Ces deux réglages finissent chacun dans une matrice.

Dans le code, tu n'écris presque jamais de matrice à la main : tu règles position, rotation et scale, et three.js recalcule la matrice quand il en a besoin. Elle devient utile quand tu veux comprendre ce qui se passe, ou quand tu triches pour de bon, comme on va le faire plus bas.

Pourquoi quatre lignes, et pas trois ?

Une rotation de l'espace se range dans une matrice 3×3 : trois nombres en entrée, trois en sortie, chacun combinaison des trois autres. L'échelle aussi. Mais pas la translation. Déplacer un point, c'est lui ajouter un vecteur : (x, y, z) + (tx, ty, tz). Or une multiplication par une matrice 3×3 envoie toujours l'origine sur l'origine. Aucune matrice 3×3 ne peut donc pousser l'origine ailleurs : la translation n'est pas une transformation linéaire.

L'astuce, qu'on appelle les coordonnées homogènes, tient en une phrase : on ajoute une quatrième coordonnée w = 1 au point, et on passe en 4×4. La translation se loge alors dans la dernière colonne, et le même produit de matrices gère les trois opérations d'un coup :

// (x, y, z, 1) devient (x + tx, y + ty, z + tz, 1)
// | 1 0 0 tx |   | x |   | x + tx |
// | 0 1 0 ty | × | y | = | y + ty |
// | 0 0 1 tz |   | z |   | z + tz |
// | 0 0 0  1 |   | 1 |   |   1    |

La même idée explique pourquoi les directions n'ont pas de position : un vecteur direction se note avec w = 0, donc la dernière colonne ne peut pas le déplacer. Une flèche qu'on translate reste la même flèche.

L'ordre compte : tourner puis avancer, ce n'est pas avancer puis tourner

Revenons à l'exercice de classe, avec des nombres. Prends la translation T de 2 vers la droite, (2, 0, 0), et la rotation R d'un quart de tour autour de y, 90°. Applique-les à un point qui part de l'origine.

Tourner puis avancer (la matrice T × R) : l'origine tourne sur elle-même, donc ne bouge pas, puis glisse de 2 vers la droite. Elle arrive en (2, 0, 0). Et un point placé à un pas devant elle, en (0, 0, 1), tourne vers la droite et finit en (3, 0, 0).

Avancer puis tourner (la matrice R × T) : l'origine glisse en (2, 0, 0), puis c'est tout le décor qui pivote autour de l'origine du monde. Le point part sur l'arrière et arrive en (0, 0, -2). Le même point (0, 0, 1) finit en (1, 0, -2).

Mêmes ingrédients, mêmes valeurs, deux endroits différents : (2, 0, 0) contre (0, 0, -2). On dit que le produit de matrices n'est pas commutatif. Dans three.js, la bonne manière de lire T × R est : « l'objet est d'abord tourné sur lui-même, puis posé à sa place ». C'est ce que font position et rotation d'un objet, et c'est presque toujours ce que tu veux.

Pour le voir sans qu'aucun objet ne s'en mêle, on peut construire les deux matrices soi-même :

const rotation = new THREE.Matrix4().makeRotationY(Math.PI / 2);
const move = new THREE.Matrix4().makeTranslation(2, 0, 0);

const turnThenMove = new THREE.Matrix4().multiplyMatrices(move, rotation);  // T × R
const moveThenTurn = new THREE.Matrix4().multiplyMatrices(rotation, move);  // R × T

ghost.matrixAutoUpdate = false;     // on pilote la matrice nous-mêmes
ghost.matrix.copy(moveThenTurn);

À toi de tourner le chat

Voici un chat articulé : le corps est un Group, la tête et la queue en sont les enfants, et la queue elle-même est une chaîne de trois segments emboîtés. Elle ondule toute seule. La boule jaune marque sa pointe, et le texte en dessous donne la 4^e colonne de sa matrice monde, donc sa position réelle dans la scène.

Le fantôme bleu est obtenu avec les matrices du dessus, sans passer par position ni rotation. Il reçoit les mêmes valeurs que le chat (l'angle et la position x). Fais tourner le corps à 90° avec x = 2, puis bascule entre « Translation puis rotation » et « Rotation puis translation » : une seule des deux place le fantôme sous le chat. Ensuite bouge la courbure de la queue et regarde les trois segments suivre.

Parents et enfants : matrixWorld

Un objet a deux matrices. matrix est la matrice locale : sa position, sa rotation et son échelle par rapport à son parent. matrixWorld est la matrice monde : sa place réelle dans la scène. Le lien entre les deux est un simple produit :

// matrixWorld = parent.matrixWorld × matrix locale
child.matrixWorld.multiplyMatrices(parent.matrixWorld, child.matrix);

Comme chaque parent a lui-même un parent, le produit se déroule de la racine vers la feuille. C'est ce que fait three.js à chaque image, dans scene.updateMatrixWorld(), que le rendu appelle pour toi.

Dans le chat étoile, la structure est exactement celle-là :

const cat = new THREE.Group();
cat.scale.setScalar(1.3);
tree.add(cat);                       // le chat est un enfant de l'arbre

const head = new THREE.Group();
head.position.set(0, 0.47, 0.04);    // décalage local, par rapport au corps
cat.add(head);

// plus loin, dans la boucle d'animation
head.rotation.y += (pointer.x * 0.45 - head.rotation.y) * Math.min(1, dt * 3);

La dernière ligne ne touche qu'un seul nombre : l'angle de la tête. Mais comme les oreilles, les yeux et les moustaches sont enfants de head, leur matrixWorld contient le produit par celle de la tête, et ils tournent avec elle. Et comme le chat est lui-même un enfant de l'arbre, quand l'arbre se balance (tree.rotation.z), le chat se balance avec lui sans que l'animation du chat n'en sache rien.

C'est le rôle de THREE.Group : un objet vide qui n'a rien à dessiner, juste une matrice et des enfants. Il sert de charnière.

Dans cette scène, la queue n'est pas une chaîne de groupes : c'est un tube dont la courbe est recalculée à chaque image, ce qui donne une forme plus souple. La chaîne de segments de la démo montre le même principe, à l'état brut : le segment 3 est enfant du 2, qui est enfant du 1, qui est enfant du corps.