> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Programmation

> Bibliothèques

> OpenGL

> Les shaders en GLSL

> Annexes

> Les vecteurs

> Lecture du tutoriel

Les vecteurs

Par

Yno

Mise à jour : 08/11/2008

Difficulté : Facile Facile

1 574 visites depuis 7 jours, dont 828 sur ce chapitre classé 82/786

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.

Retour en haut

Sommaire du chapitre :

Les vecteurs, notions de base
Longueur et normalisation
Le produit scalaire (dot product)
Le produit vectoriel (cross product)

Retour en haut

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 ?

Cette section est bien sûr réservée aux néophytes, si vous savez déjà ce qu'est un vecteur, passez tout de suite au gros titre suivant.

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 :

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 :

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 :

Euh, comment on additionne tout ça ?

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

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) :

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 :

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 :

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 :

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.

Retour en haut

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 :

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 :

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 :

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

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

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 :

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 :

(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.

Diviser un vecteur par un réel quelconque revient à diviser chaque composante du vecteur par le réel en question, comme pour la normalisation, mais en remplaçant longueur par ce réel. Il en va de même pour la multiplication d'un vecteur par un réel, sauf que cette fois au lieu de diviser on multiplie.

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.

Retour en haut

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 :

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 !

Retour en haut

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 :

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 :

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)

Notez que si vous échangez les vecteurs a et b dans les calculs, le vecteur obtenu sera exactement le vecteur opposé à celui que vous auriez obtenu sans échanger a et b.

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.

Retour en haut

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.

Retour en haut

Retour en haut

10 commentaires pour "Les vecteurs"

Note moyenne : 3.93 / 4 (14 votes)

Pseudo	Commentaire
nemo31	# Posté le 11/03/2010 à 15:26:24
	très bon tutoriel, qui ma économiser quelques heures de recherches. merci !
Roxor007	# Posté le 22/04/2010 à 21:31:40
Im a poor lonsom graphist...	Aha merci merci mille fois merci tu viens de me sauver pour mon DM de math vive le Sdz et vivement la section Math!! 99% des bugs se trouvent entre le dossier de la chaise et l'écran
Ced49	# Posté le 29/10/2010 à 00:59:45
Ville : Trelaze Pays : France métropolitaine Études : ISTIA	Vraiment excellent ... j'étais en train de me galérer à inventer la notion de normalisation dans mon coin, jusqu'à tomber sur cette annexe de tutoriel. J'ai beaucoup aimé le but donné avant d'expliquer chaque notion. Très bonne pédagogie. Chapeau
metal3d	# Posté le 14/06/2011 à 02:47:10
	Alors bon, oui le tutoriel est très bon et je ne critique pas le contenu, mais il y a une erreur assez énorme dans l'explication des produits scalaires. Dans la page est expliqué que le produit scalaire de deux vecteurs donnent le cosinus de l'angle... Or c'est faux. Exemple: A(1,2,3); B(4,5,6) on applique la formule donnée: $A \bullet B = (14) + (25) + (63) = 4 + 10 + 18 = 32$ Or 32 n'est pas un cosinus (puisqu'un cosinus est compris entre -1 et 1). Cela lève la seconde erreur donnée sur la page qui dit qu'on ne peut inverser un cosinus négatif... Le dot product, ou produit scalaire donne un coefficient de complémentarité des vecteur, son signe indique en fait l'ouverture de l'angle et son poids indique à quel point ils sont proches. On peut retrouver le cosinus de l'angle en applicant: $\frac{A \bullet B}{longeur A longeur B}$ En fait, on peut vérifier une formule qui résume la situation: $A \bullet B = (a_x * b_x) + ( a_y * b_y) + (a_z * b_z) = \|A\| * \|B\| * cos( \theta)$ où $\theta$ est l'angle formé par les vecteurs A et B, et $\|A\|,\|B\|$ sont les longueurs des vecteurs. Cela dit, on préfère normaliser les vecteurs avant de faire un dot product... Cela n'enlève rien à la qualité pédagogique de ces pages, mais une correction serait la bienvenue
LaChoserouge	# Posté le 18/07/2011 à 17:17:33
Études : ESTP	Bonjour à vous lecteurs et rédacteur du Sdz, Comme toujours on apprend beaucoup dans les tutoriels de ce site. ;P Cependant, si je viens mettre un message, cette fois-ci, c'est que j'ai un remarque à formuler Oo 1) Tout d'abord je suis tout à fait d'accord avec metal3d. Pour ne pas reprendre sont message très complet je dirai simplement : \|vec(AB)\|\|vec(AC)\|COS TETA = vec(AB).vec(AC) ... (il y a donc un truc à corriger). 2) De plus, j'ajouterai qu'il est possible de connaitre le sens d'un vecteur qui est le produit vectoriel de deux autres. : voir les illustrations des sites de wikipedia http://en.wikipedia.org/wiki/Cross_product & http://fr.wikipedia.org/wiki/Vecteur En l'occurence l'illustration que tu as réalisée est fausse puisque le vecteur normal au deux autres est dans le mauvais sens. Je pense qu'il serait donc bien de corriger cela :). Merci pour le temps que tu offres à tout le monde en réalisant ce tutoriel. Aymeric