• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 05/01/2016

Les vecteurs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Cette annexe risque d'être votre plus grande alliée si vous voulez réellement comprendre le fonctionnement de la plupart des effets que nous étudierons dans la partie 3.
Nous allons ici étudier ce qu'est un vecteur, ce qu'est la normalisation d'un vecteur, comment on fait le produit scalaire de deux vecteurs, comment on fait leur produit vectoriel, mais surtout, à quoi tout cela peut servir. Je me doute que vous avez probablement déjà appris ces concepts à l'école, mais vous a-t-on déjà donné une utilisation pratique de ces outils mathématiques forts pratiques que sont les vecteurs ? Non ? Et bien je vais vous en donner une :)
Vous verrez, lorsqu'on a un objectif, l'apprentissage d'un concept est tout de suite plus simple.

Les vecteurs, notions de base

Il est avant-tout important de savoir additionner et soustraire deux vecteurs, ces opérations très simples sont la base des vecteurs mais on les utilise tout le temps, il est donc important de les maîtriser.

Attention préparez-vous, car ce chapitre va pleuvoir de schémas. Je me baserai sur une illustration 2D, mais les calculs que je ferai sont tout à fait appliquables en 3D, et heuresement, car c'est notre objectif.

Un vecteur, c'est quoi ?

Vous pouvez comparer un vecteur avec une direction. Un vecteur marche aussi bien en 1D, qu'en 2D et qu'en 3D, les principes sont les mêmes.

Oui mais un vecteur, ça ressemble à quoi ?

Je vous propose de voir mon premier schéma, qui illustre un plan 2D et un vecteur dessiné dans ce plan :

Image utilisateur

Cette barre rouge au milieu est un vecteur, comme vous le voyez, elle représente une direction.
Ce vecteur v s'écrit comme ceci :

v(1; 1)

Le premier chiffre représente la composante x, et le second la composante y. Pour les vecteurs 3D, il y a une 3eme composate : la composante z. Ici notre vecteur peut être transformé en vecteur 3D, il aura donc une composante z nulle :

v(1; 1; 0)

Puisqu'un vecteur représente une direction, on part du principe qu'un vecteur commence toujours au point (0; 0).

L'addition de vecteurs

L'addition de vecteurs sert à obtenir une coordonnée finale dans l'espace résultante de plusieurs vecteurs.
Comme l'illustre le schéma ci-dessous, mes deux vecteurs additionnés donnent naissance à un 3eme point qui est le résultat de l'addition des vecteurs a et b :

Image utilisateur

Vous pouvez toujours additionner un vecteur à un autre, et ainsi vous ballader librement dans l'espace, c'est un peu le principe qui est utilisé pour les caméras dans les jeux vidéos : la position de la caméra est représentée par un vecteur auquel on en additionne d'autres afin de déplacer la caméra.

Pour additionner deux vecteurs mathématiquement, on procède à l'addition de chaque composante du vecteur a par la même composante chez le vecteur b :

a(1; 0) + b(0; 1) = v(1; 1)

Soit :

v.x = a.x + b.x
v.y = a.y + b.y

Essayons d'additionner plusieurs vecteurs entres eux.
Nous allons additionner 3 vecteurs : a, b et c.
Voici ces trois vecteurs :

Image utilisateur

Euh, comment on additionne tout ça ?

Je vais vous représenter tout ces vecteurs autrement. On peut schématiser l'addition comme ceci :

Image utilisateur

Ici, le vecteur résultant, v, se calcule ainsi :

v.x = a.x + b.x + c.x
v.y = a.y + b.y + c.y

Ce qui donne :

v.x = -2 + 2 + 1
v.y = 1 + 2 + -2

Nous obtenons donc le vecteur v(1; 1).

Notez que l'ordre d'addition n'a pas d'importance : 2+1 = 1+2
Voyez ci-dessous l'illustration d'un autre ordre d'addition : on retombe exactement au même endroit qu'avant (1; 1) :

Image utilisateur
L'addition de vecteurs pour trouver une moyenne

L'addition de vecteurs peut également servir à trouver un vecteur moyen entre plusieurs vecteurs, en fait c'est ce que nous avons fait jusqu'à maintenant, mais à présent si nous considérons la position résultante de l'addition de plusieurs vecteurs comme une direction et non une position, nous obtenons en fait la direction moyenne de tous les vecteurs additionnés.

Reprenons notre premier schéma sur l'addition des vecteurs :

Image utilisateur

Nous voyons ici que le vecteur résultant est positionné exactement entre a et b. Il est souvent utile de connaître une moyenne entre plusieurs directions, à présent vous savez comment faire, il suffit d'additionner toutes ces directions entres elles.

La soustraction de vecteurs

La soustraction de vecteurs est utilisée pour connaître le vecteur qui va d'un point à un autre.
Supposez que vous ayez les coordonnées dans l'espace de deux objets A et B, et que vous vouliez connaître le vecteur qui va de A vers B, ou de B vers A, il va vous falloir utiliser la soustraction de vecteurs.

Ca me servira à quoi de connaître le vecteur qui va de A vers B ?

Imaginez par exemple que vous vouliez programmer une animation fluide qui déplace l'objet A vers l'objet B, il vous faudra connaître la direction dans laquelle déplacer A, la soustraction de vecteurs est inévitable.

Voici un schéma de base pour illustrer ce que nous recherchons :

Image utilisateur

Nous allons calculer le vecteur v en soustrayant A à B. Cela fonctionne exactement de la même façon que l'addition, rien de plus simple :

v.x = B.x - A.x
v.y = B.y - A.y

Ce qui revient à effectuer le calcul suivant :

v.x = -2 - 3
v.y = 1 - 2

Nous obtenons le vecteur v(-5; -1). Si nous le traçons dans le plan, nous obtenons... ceci :

Image utilisateur

Héé, c'est pas du tout ça !

Mais si, il suffit de placer l'origine du vecteur sur le point A et nous obtenons ce que nous cherchions.

Longueur et normalisation

Une question de longueur

Avant de voir ce qu'est la normalisation d'un vecteur, il nous faut d'abord voir ce qu'est sa longueur et ce qu'elle représente.

La longueur d'un vecteur, c'est quoi ?

La longueur d'un vecteur, c'est la distance qui sépare le point (0; 0) du point pointé par le vecteur dont on veut connaître la longueur.
Lorsque nous dessinons ceci :

Image utilisateur

Il est aisé de s'appercevoir que la longueur du vecteur v est de 1.
En revanche, la longueur d'un vecteur comme nous en avons vu tout à l'heure :

Image utilisateur

est moins évidente, il nous faut la calculer.

Calculer la longueur d'un vecteur

Vous connaîssez probablement Pythagore, ce Grec philosophe et mathématicien de l'antiquité ? Non ? Mais alors connaîssez-vous seulement son théorème ? Si vous ne le connaîssez pas, vous risquez d'avoir quelques difficultés à comprendre cette partie du chapitre.

La longueur d'un vecteur se calcule ainsi :

Image utilisateur

Dans le cas d'un vecteur à 3 dimensions, le calcul est le même, il suffit de rajouter la composante z comme ceci :

Image utilisateur

longueur est égal à la longueur du vecteur v.
Il est possible d'illustrer le calcul de la longueur de notre vecteur à deux dimensions v :

Image utilisateur

Nous remarquons ici la présence d'un triangle rectangle, sur lequel on a en fait tout simplement appliqué le théorème de Pythagore ;)

La normalisation

La normalisation d'un vecteur revient à donner une norme de 1 à sa longueur. Ce qui veut dire que la longueur d'un vecteur normalisé est toujours de 1.

Représentation de la normalisation

Il est possible d'illustrer la normalisation d'un vecteur par un simple schéma :

Image utilisateur

Soit 1 le rayon de ce cercle, tout vecteur partant du point (0; 0) et ayant une longueur de 1 touchera pile poil un endroit de la courbe de ce cercle.

Quel est l'utilité de la normalisation ?

L'utilité est difficile à démontrer pour l'instant, nous verrons cela plus bas lorsque nous parlerons du produit scalaire.

Calcul de la normalisation

Effectuer une normalisation est très simple, surtout si l'on sait calculer la longueur d'un vecteur et qu'on a bien compris le principe de la normalisation.

Il suffit en fait de diviser chaque composante du vecteur (x, y, z (si 3D)) par la longueur du vecteur, et nous obtenons un vecteur normalisé.
Rappelez-vous du calcul de la longueur d'un vecteur, vu plus haut. Nous avons donc une valeur appelée longueur qui est la longueur de notre vecteur v.
Puisque la normalisation d'un vecteur signifie qu'il faut diviser chaque composante du vecteur par la longueur du vecteur, le calcul s'effectue ainsi :

v.x = v.x / longueur;
v.y = v.y / longueur;

Il faut bien sûr rajouter ce calcul :

v.z = v.z / longueur;

si le vecteur est en 3D.

Notez que pour un vecteur 4D (c'est-à-dire avec une composante w), la normalisation de ce dernier revient à diviser chacune de ses trois premières composantes par w au lieu de longueur.

Si vous recalculez la longueur d'un vecteur normalisé, vous verrez que le résultat sera 1.

Une application pratique

Je vous propose de voir une première utilisation pratique des vecteurs normalisés, car je suis sûr que vous vous demandez à quoi la normalisation peut servir.

Souvenez-vous de notre schéma avec nos objets A et B, nous avions réussi à créer un vecteur qui allait de A vers B :

Image utilisateur

(notez qu'ici je n'ai pas dessiné le vecteur normalisé)

Supposons que nous normalisons ce vecteur et que nous l'appelons v.

Avec la normalisation, on sait de combien on se déplace : on se déplace toujours de 1. Supposons que vous ayez considéré en OpenGL que 1 = 1 mètre, alors vous êtes sûrs qu'en additionnant un vecteur normalisé à un point celui-ci se déplacera d'un mètre dans la direction indiquée par le vecteur.

Ainsi, en additionnant v à A, nous sommes sûrs et certains que A se déplacera d'un mètre dans la direction de B. Et si nous voulons qu'il se déplace d'un centimètre, comme nous avons un vecteur normalisé, nous n'aurons qu'à diviser celui-ci par 100 avant de l'additionner à A pour qu'il se déplace d'un centimètre.

Et voilà, vous savez maintenant normaliser un vecteur et vous en servir pour une utilisation basique. Nous allons voir maintenant une technique de calcul qui nécessite obligatoirement des vecteurs normalisés : le produit scalaire.

Le produit scalaire (dot product)

Le produit scalaire se dit dot product en anglais.
Vous avez peut-être déjà entendu parler du produit scalaire, mais savez-vous comment le calculer et surtout, à quoi il peut servir ? Non ? Et bien nous allons voir ça :)

Le produit scalaire comme calculateur d'angles

Effectuer le produit scalaire de deux vecteurs, c'est connaître l'angle qu'il y a entre deux vecteurs. Voici un schéma qui illustre assez bien ce que nous voulons calculer :

Image utilisateur

Bon, là je vous l'accorde, l'angle se devine facilement. Mais il se devine seulement, car en programmation 3D il ne s'agit pas de deviner, il s'agit de calculer.

Si nous prenons deux vecteurs, (3; 2; 5) et (0; 2; 1) par exemple, comment, à partir de ces données, pourriez-vous calculer l'angle qui sépare ces deux vecteurs ? Le produit scalaire sert à calculer cela.

Ça marche aussi en 3D ?

Bien sûr ! sinon cela n'aurait aucun intérêt.

Nous supposerons par la suite que tous nos vecteurs sont normalisés.

Le calcul du produit scalaire

En supposant que vous ayez deux vecteurs, a et b, et que vous souhaitez connaître leur produit scalaire, le calcul est, pour des vecteurs 2D :

dot = (a.x * b.x) + (a.y * b.y)

Et en 3D, on rajoute la composante Z, aussi simplement que cela :

dot = (a.x * b.x) + (a.y * b.y) + (a.z * b.z)

Euh, c'est bien joli ce dot, mais c'est quoi ? C'est la valeur de l'angle ?

Non, mais c'est le cosinus de l'angle.

Si dot vaut 1, les deux vecteurs pointent dans la même direction (0°).
Si dot vaut 0, alors les deux vecteurs pointent dans deux directions qui sont à angle droit (90°).

Et donc logiquement, quand dot est entre 0 et 1, l'angle est compris entre 90° et 0°.

Mais moi je veux un angle en degrès précis, ça va me servir à quoi sinon ? Et que vaut dot quand les vecteurs sont séparés par plus de 90° ? Et puis à quoi ça sert de calculer le produit scalaire ?

Tout d'abord, pour obtenir l'angle, il suffit d'utiliser la simple fonction mathématique arc cosinus (cos-1() sur les calculatrices) sur notre valeur dot.
Mais attention, arc cosinus ne fonctionne pas sur des nombres négatifs, et lorsque l'angle qui sépare deux vecteurs est supérieur à 90°, dot prend alors une valeur négative, et on ne peut alors plus calculer l'angle qui sépare nos vecteurs.

Mais rassurez-vous, en 3D cela sera inutile, nous nous contenterons de vérifier si dot se situe entre 0 et 1, sinon on considèrera sa valeur comme étant de 0.

Ah ouais, mais alors il sert à quoi ce produit scalaire ?

Pour vous répondre en quelques mots : à calculer le taux de reception de lumière d'un plan.
Nous étudierons cela plus en détail lorsque nous apprendrons à gérer la lumière dans la 3eme partie du tutoriel.

Pour clore, retenez que :

  • Le produit scalaire sert à calculer l'angle entre deux vecteurs.

  • Le produit scalaire ne fonctionne que sur des vecteurs normalisés !

Le produit vectoriel (cross product)

Le produit vectoriel sert à calculer le vecteur perpendiculaire à deux autres vecteurs. Le produit vectoriel se dit cross product (produit croisé) en anglais, mais vous voudriez peut-être savoir à quoi cela sert avant d'apprendre à le calculer ? Pas de problème.

Notion de "normale" d'une face

Nous allons commencer simplement.

Toute face (surface plane) possède une normale. Prenons par exemple votre table de bureau, c'est une surface plane. Sa normale pointe pile poil vers le plafond (vers le haut).

Voici comment schématiser la normale d'une face :

Image utilisateur

Voici un cube. J'ai dessiné (à l'aide de Blender) pour chaque face du cube, sa normale. Comme vous pouvez le voir, la normale d'une face plane est un vecteur qui est perpendiculaire à la face.

Quel est le rapport avec le produit vectoriel ?

Et bien le produit vectoriel permet de calculer cette normale, uniquement grâce aux positions des sommets qui la composent :)

Calcul du produit vectoriel

Il est temps maintenant de représenter le produit vectoriel, ainsi que de montrer le calcul qu'il faut faire pour le trouver.

Le calcul du produit vectoriel se fait à partir de deux vecteurs et permet d'obtenir un autre vecteur. Ce vecteur obtenu est perpendiculaire aux deux autres vecteurs... tout comme la normale d'une face est perpendiculaire à la face elle même.

Nous pouvons faire l'analogie avec le produit vectoriel et la normale d'une face. En effet, voyez plutôt ce schéma :

Image utilisateur

Cette illustration résume assez bien tout ce que nous venons de voir :)
Nous pouvons voir d'une part les vecteurs a et b, d'autre part le vecteur n, qui n'est autre que le résultat du produit vectoriel de a et b, en effet, n est perpendiculaire à a et b. Mais il est aussi perpendiculaire à la face, il représente donc sa normale.

Nous venons de voir qu'avec deux vecteurs qui longent les bords d'une face, nous pouvons obtenir la normale de cette face

Et comment on les trouve ces vecteurs qui longent les bords de notre face ? (a et b)

Revoyez la première partie de ce chapitre, et plus précisément l'endroit qui parle de la soustraction de vecteurs... vous devriez trouver assez aisément ;) Rappelez-vous que nous connaissons les positions des sommets qui constituent notre face.

Mais ça ne nous dit pas le plus important : comment on calcule ça ?

Oh ça, c'est le moins important, il s'agit d'une grosse formule barbare, l'important c'est de bien savoir ce que permet de faire le produit vectoriel.

Voici le calcul du produit vectoriel :

n.x = (a.y * b.z) - (a.z * b.y)
n.y = (a.z * b.x) - (a.x * b.z)
n.z = (a.x * b.y) - (a.y * b.x)

Mais alors comment connaître le bon ordre de calcul pour obtenir la bonne normale de notre face ?

Il n'existe pas de méthode magique pour cela... Comment savoir quelle doit être la normale de votre face ? Il n'y a pas de "haut" en 3D, ni nulle part d'ailleurs, tout est relatif. Les sommets des triangles dans les maillages sont généralement donné dans un ordre conventionnel, ce qui permet de détermnier l'orientation de la face.

Les vecteurs ne sont pas une notion simple à aborder, il est possible qu'il vous fasse du temps avant de vous y faire. Prenez le temps de relire tranquillement chaque passage de ce chapitre afin de vous familiariser avec les vecteurs, c'est essentiel croyez-moi, car nous les utiliserons en permanence par la suite. Il est donc important que vous vous sentiez à l'aise avec ceux-ci.

Pour finir, je vais vous renvoyer sur les articles de Wikipedia à propos de tout ce que nous avons appris, ça vaut toujours le coup d'oeil.

Et voilà, c'est la fin de cette annexe, n'hésitez pas à venir la consulter régulièrement si vous vous sentez bloqué par la suite.

Merci au site www.developpez.com et aux membres de sa section programmation 3D, grâce auxquels j'ai acquis la plupart des mes connaissances actuelles en terme de programmation 3D.

Les commentaires, critiques ou corrections sont les bienvenus. Si vous pensez avoir trouvé une incohérence ou si vous avez mal compris quelque chose, n'hésitez pas à m'en faire part, je serai heureux de pouvoir améliorer le tutoriel pour vous ;)

Image utilisateurCette création est mise à disposition sous un contrat Creative Commons.

Exemple de certificat de réussite
Exemple de certificat de réussite