Aller au menu - Aller au contenu

Un logiciel de 3D, comment ça marche ?


Informations sur le tutoriel

Avatar
Auteur : Linko
Difficulté : Facile
Visualisations : 161 737
Licence : Creative Commons BY-NC-SA


Plus d'informations Plus d'informations

Historique des mises à jour

  • Le 06/03/2010 à 00:46:08
    Ticket #1763
  • Le 02/03/2010 à 18:44:16
    Correction orthographique.
  • Le 27/02/2010 à 17:46:36
    Cinq nouveaux chapitres
La 3D c'est bien beau, vous avez vu ce qu'on peut faire avec un tel logiciel.
Mais savez-vous comment marche tout ça ? Comment les formes 3D sont représentées ? Leurs couleurs ?

Pour vous expliquer ça, je vais d'abord vous apprendre comment fonctionne une image 2D. Vous verrez deux formats d'image importants, le bitmap et le vectoriel, à travers plusieurs schémas.

Et Maya dans tout ça ? Eh bien il combine en quelque sorte ces deux formats, vous allez très vite comprendre ce que je veux dire par là. ^^

Allez, courage soldat, vous allez lire le dernier chapitre avant de télécharger Maya, alors c'est parti ! :D
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Bitmap vs vectoriel

Comme je vous l'ai dit en introduction, je vais commencer par vous expliquer les deux modes de fonctionnement importants des images de type bitmap et vectoriel. Ensuite, je mettrai tout ça en rapport avec la 3D.

Bien, commençons tout de suite par le bitmap. :)

Bitmap



Vous savez tous qu'une image est constituée de pixels, non ?
Partons de zéro alors. ^^
Le mot pixel est l'abréviation de picture element en anglais, qui se traduit par "élément de l'image". Le pixel est très généralement de forme carrée et remplit une case d'une couleur. Vous avez donc en quelque sorte un quadrillage invisible avec des cases.

Le pixel contient deux informations :
  • sa position dans le quadrillage ;
  • sa couleur.


Si comme je le dis nous représentons ce quadrillage invisible, nous obtenons plusieurs cases. En remplissant les cases avec des couleurs on peut créer des formes :

Image utilisateur


Chaque case est occupée par un pixel, même les cases blanches. Ces tous petits pixels microscopiques (il y a en a des millions sur votre écran) peuvent contenir des milliards de nuances de couleurs différentes ! Avec tout ça on a vite fait de s'y perdre, c'est pourquoi l'image contient des coordonnées, c'est comme ça qu'on peut connaître la position des pixels. Les coordonnées c'est un peu comme à la bataille navale (jeu de société), on a des valeurs à l'horizontale et des valeurs à la verticale, grâce à ces deux valeurs on peut localiser n'importe quelle case. Tout ça, c'est à peu près ce que je vous ai dit dans le chapitre précédent concernant la 2D. On a un axe X à l'horizontale que l'on appelle abscisse et un axe Y à la verticale appelé ordonnée. On est donc en deux dimensions. ^^

Pour connaître les coordonnées, on a décidé que le point d'origine se situait dans la case en haut à gauche des images, on est donc en X = 0 et Y = 0. Si on se déplace d'une case vers la droite X devient égal à 1 et ainsi de suite... ;)
J'ai commencé sur l'image ci-dessous à écrire les coordonnées de l'image. Je n'ai pas mis les coordonnées sur chaque case, c'est juste pour vous faire comprendre le principe :) :

Image utilisateur


... que faites-vous les zéros... ? Vous comptez le nombre de cases qu'il y a sur vos images ? Vous avez vraiment du temps à perdre ! :lol:

Bah oui ! J'aimerais bien savoir combien il y a de cases en X et en Y, as-tu un moyen plus rapide pour compter ?


Comptez-les cases deux par deux... OK, je sors... :-°

Bon plus sérieusement, vous pouvez toujours compter le nombre de cases en X, puis le nombre de cases en Y et multiplier vos résultats... bon j'avoue c'est un peu lourd. :p
Heureusement dans les propriétés d'une image vous pouvez connaître le nombre de cases. Hum, ça me fatigue les doigts d'écrire à chaque fois "le nombre de cases", je vais plutôt employer les vrais termes que vous utiliserez tout le temps en infographie, ça s'appelle la résolution de l'image ou encore la dimension. Je préfère quand même le terme "résolution", car on le retrouve plus fréquemment dans les logiciels (surtout ceux en anglais). ;)
La résolution est simple à écrire : on écrit le nombre de cases en X multiplié par le nombre de cases en Y. Par exemple si on a 30 cases en X et 20 et Y on va l'écrire comme ceci : 30*20. Le petit astérisque (la petite étoile entre les deux nombres : * ) est le symbole de la multiplication. En informatique on utilise tout le temps ce symbole pour la multiplication, ceux qui ont fait de la programmation ne me contrediront pas. ^^

Alors, j'étais en train de vous dire que ce nombre de cases cette résolution est visible dans les propriétés d'une image. Pour les afficher, commencez d'abord par sélectionner... quoi ?... une image bien sûr. :o
Arrêtez de faire ces têtes-là vous commencez à me faire peur. :p

Pour voir la résolution de votre image, faites un clic droit dessus et allez dans "Propriétés". Dans la nouvelle fenêtre qui s'ouvrira, allez dans l'onglet "Détails", à la ligne "dimensions" vous aurez votre résolution :

Image utilisateur
Cette image a une résolution de 800*600 (800 cases en X et 600 cases en Y).


Lorsque vous serez amenés un jour à utiliser Maya... vous remarquerez que le logiciel vous propose des résolutions bien précises pour vos rendus. En plus de ça elles seront les mêmes que dans les autres logiciels de 3D ou de dessin 2D.
En fait, les logiciels préfèrent employer des multiples de 8, c'est de cette façon que travaille votre ordinateur, car un octet de donnée représente 8 bits (binary digit, chiffre binaire), l'unité de base utilisée par l'ordinateur.
Vous verrez souvent les résolutions 640*480, 800*600 et 1024*768.


Vous l'aurez compris, la résolution indique le nombre de cases. Plus il y a de cases plus il y a de pixels et donc plus d'informations et de détails à l'image. Avec l'augmentation du nombre de cases, les images s'agrandissent.

Oui quoi encore ? Je vous vois tout tristes, qu'est-ce qui ne va pas ?

Je connais quelqu'un qui a reçu un écran aussi grand que le mien... lorsqu'il regarde une image de grande résolution dessus, il la voit petite alors que sur mon écran elle est énorme ! Comment ça se fait ?


C'est tout à fait normal. Vos écrans peuvent aussi régler une résolution d'affichage pour plus de confort. En fait si votre écran est réglé à 640*480 vous ne voyez que peu de pixels sur votre écran. Une image en 640*480 prendra donc toute la superficie de votre écran (en sous-entendant que l'affichage est correctement ajustée sur toute la superficie de votre écran. Ouah, c'est moi qui parle comme ça ! o_O ). Si sur ce même écran vous envisagez de regarder une image en 800*600, l'image sera trop riche en informations et votre écran implosera (c'est beau la technologie) ! :waw:

C'est une blague ! ^^
L'image ne pourra tout simplement pas être affichée en entier sur l'écran. En fait lorsque vous avez une résolution élevée de votre écran c'est comme si vous prenez un peu de recul sur l'affichage. Vous voyez beaucoup plus de choses sur votre écran tout en ayant un niveau de détail élevé.
C'est en même temps pour ça que je vous recommande une résolution d'écran élevée pour utiliser Maya, car il y a beaucoup d'icônes. Pour changer la résolution de votre écran (sous Windows Vista), faites un clic droit sur le bureau, allez dans propriétés. Dans la fenêtre de personnalisation qui s'ouvrira allez dans "Paramètres d'affichage", vous pourrez ensuite ajuster le curseur sur la résolution. Encore une fois vous remarquerez que vous n'avez que des multiples de huit de disponibles. ;)

Pour en revenir à la résolution des images, plus celle-ci contient d'informations plus elle sera "lourde", elle nécessitera plus de calculs à votre processeur pour l'afficher.
Lorsque vous devrez faire des rendus de vos scènes 3D, la résolution de l'image à créer a un impact énorme sur le temps de rendu. Il va de soi que si vous réalisez des images ou animations, vous commencerez par de faibles résolutions pour avoir un aperçu de votre travail. Quand tout est terminé, vous faites un rendu avec une résolution élevée et avec tous les détails. :)

Les bitmaps c'est donc très bien, ça contient beaucoup d'informations ce qui permet d'avoir une image riche en détail. Comme toute chose, ce format d'image a des défauts que nous allons voir tout de suite.

Le "poids" important



Les bitmaps affichent des images à partir de quadrillage. Ce quadrillage peut contenir plusieurs millions de cases. :o
L'image contient alors beaucoup trop d'informations et peut "peser" plusieurs mégaoctets (1 mégaoctets = 1024 kilooctets). Ce n'est pas tout, plus une image contient d'informations, plus elle demande de calculs pour l'afficher, donc une perte de performances.
Bien qu'il existe des algorithmes de compression, l'image risque de perdre de sa qualité.

Le crénelage



Quand vous souhaitez admirer une image et surtout ses détails, vous zoomez dessus. Avez-vous remarqué que les traits à la diagonale forment en quelque sorte des escaliers ? C'est normal, car nous sommes dans un quadrillage. Alors, je vous laisse imaginer 30 secondes que dans Maya les polygones deviennent flous lorsque vous zoomez dessus. Vous imaginez la chose. :p
Eh bien heureusement que ce n'est pas comme ça ! ^^

Pour corriger ces problèmes, un nouveau type d'image a été inventé : le vectoriel.

Vectoriel



Le vectoriel est généré mathématiquement à la fois par coordonnées, mais en plus par ce que l'on appelle des équations polynomiales paramétriques (je vous l'aurais dit en chinois vous auriez compris tout autant :p ). Bon c'est pas grave si vous ne comprenez pas ce que ça veut dire, moi non plus je ne me comprends pas moi-même. :lol:

En vectoriel, on a deux points qui délimitent le tracé, celui de départ et celui d'arrivée. Ces deux points possèdent des informations de positions. Éventuellement, vous pouvez avoir un ou plusieurs point(s) de déformation(s).
Les tracés en vectoriels possèdent eux aussi des informations de couleurs, mais aussi d'épaisseur du trait.

Si on avait à dessiner un trait en diagonale, parfaitement droit, voilà ce qu'il se passerait.
En bitmap on retrouverait l'inconvénient de tout à l'heure, le crénelage :

Image utilisateur
En zoomant sur une image bitmap on peut voir que le trait oblique forme un "escalier".


Voici cette fois ce qui se passe en vectoriel :

Image utilisateur
Par contre, en zoomant sur un trait en vectoriel le crénelage n'apparaît pas, car le trait est calculé entre le point de départ et d'arrivée.


Comme vous pouvez le voir le vectoriel ne contient que très peu d'informations, il est donc beaucoup plus léger et en plus, son affichage reste parfait même en zoomant dessus.

Que se passe-t-il si je trace un trait courbé en vectoriel ? Eh bien votre ordinateur prend toujours en compte le départ et l'arrivée, mais en plus ajoute des points de déformation :

Image utilisateur


Tout ça forme ce qu'on appelle une spline. Retenez bien ce nom.

Lorsqu'un logiciel vectoriel ajoute des points de déformation, c'est-à-dire au moment où vous relâchez la souris, vous remarquez que votre courbe devient lisse (il n'y a pas de tremblement de celle-ci). Pourquoi ? Car le logiciel ajoute des points de déformation tout en imitant au maximum la forme de votre courbe.

Maya dans tout ça combine un peu le vectoriel et le bitmap. Je ne sais pas vraiment comment vous expliquer ça, je vais essayer d'être le plus clair possible. :)

En fait dans la scène 3D de Maya, les sommets des polygones sont des points de vecteurs.
Tenez, imaginez par exemple un cube (vous allez voir, je suis amoureux du cube... :honte: ).

Pour que le logiciel affiche le cube que fait t-il ? Eh bien il calcule l'emplacement de tous les sommets et sait lesquels sont reliés (ça forme les arêtes du polygone). Les cases vides, il les remplit pour former des faces. Et voilà notre joli cube :

Image utilisateur
Les points noirs sont les sommets. En rouge j'ai représenté les arêtes et en bleu les faces. ;)


Cela permet de gagner en vitesse et de ne pas avoir de pixelisation lorsque l'on zoome. De plus en bitmap il n'est pas possible d'avoir des formes 3D, enfin je crois...

Et pourquoi le logiciel utilise à la fois des bitmaps alors ?


Le logiciel peut afficher des textures sur vos polygones. Ces images-là sont des bitmaps.
L'image qui est plaquée sur la face du cube est donc en bitmap :

Image utilisateur


Si on zoome dessus, elle se pixelise bien évidemment, sauf le cube.
Lorsque l'angle change, puisque les bitmaps ne sont pas en 3D, elle ne fait que se déformer. Elle se déforme d'autant plus avec la perspective (l'éloignement) :

Image utilisateur


Lorsque vous ferez le rendu, tout deviendra bitmap. ;)

Victoire, j'ai réussi à vous expliquer le fonctionnement d'un logiciel de 3D. Ce n'était pas simple. :-°
Heureusement que j'avais créé ces petits schémas. ^^

Maintenant nous allons voir comment fonctionne la couleur.

La couleur

Comme je vous l'ai dit, les pixels envoient une information de leur couleur. Mais voilà, comment un petit pixel peut prendre des millions de couleurs différentes (environ 16 millions) ? o_O
Voilà une question à laquelle je vais tenter de répondre. ^^

Un pixel de votre écran est constitué de trois couches. Chaque couche est d'une couleur élémentaire : le rouge, le vert et le bleu. En modifiant la quantité de rouge, vert et bleu, on peut obtenir des milliards de nuances de couleurs différentes.

Image utilisateur


L'écriture RGB



Dans les logiciels, on vous demandera de régler la valeur RVB pour Rouge, Vert et Bleu. Puisque nous utilisons majoritairement l'anglais, on va dire plutôt RGB pour Red, Green et Blue.
Ces valeurs sont comprises entre 0 et 255. Par exemple si on met R à 255, V à 0 et B à 0, on obtient quoi ? Du rouge.

Par exemple dans les paramètres d'une couleur dans Paint en mettant R à 255 on a du rouge :

Image utilisateur


Ensuite, on peut mettre n'importe quelle valeur pour obtenir d'autres couleurs :

Image utilisateur


L'écriture hexadécimale



Il y a une deuxième méthode pour coder les informations de couleurs. On utilise un code hexadécimal. Vous allez voir c'est tout bête, ça marche de la même façon. ;)

Au lieu d'écrire R=0, G=0 et B=0, on va plutôt écrire #000000. C'est exactement pareil, les deux premiers chiffres indiquent la quantité de rouge, les deux autres la quantité de vert et enfin les deux derniers la quantité de bleu. Voilà donc ce même code en couleur : #000000, c'est déjà un peu plus parlant. ^^

Les valeurs sont comprises entre 0 et F... non, non ne me posez pas de question ! Je vous explique tout de suite. ;)

Les nombres vous connaissez tous ça. Au moins le zéro. :p
Ahem, eh bien les lettres sont en fait la suite de ces nombres, ce qui nous donne :

0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12) D(13) E(14) F(15)


En mettant la valeur FF c'est la valeur maximale pour une couleur. Si on voulait du rouge on marquerait donc : #FF0000. La valeur FF correspond à 255 des valeurs RGB.

On utilise surtout cette méthode d'écriture en programmation. Dans les logiciels vous emploierez plus souvent la méthode RGB. ;)

Enfin, il y a plus rapide dans les logiciels, vous pouvez déplacer votre curseur directement dans une zone où il y a plusieurs nuances de couleurs différentes :

Image utilisateur


Maintenant que nous avons vu ça, nous allons voir plein d'autres choses... :D

Stop ! Quand est-ce qu'on passe sur Maya ?


Vous n'allez pas me croire, j'avais oublié l'abeille ! :-°
OK, les Zéros, on peut arrêter ici ce chapitre, mais avant on passe au QCM, ça je ne l'ai pas oublié. ^^

Q.C.M.

Quels sont les deux types d'images que vous venez d'étudier ?
(Attention réponses tordues. :lol: )
Pourquoi utiliser le vectoriel ?
Dois-ton dire...

Statistiques de réponses au QCM


Voilà nous avons passé la petite partie théorique (qui aurait pu être bien plus longue si vous ne m'aviez pas interrompu :p ). Dommage j'aurais pu vous raconter hier comment j'ai mangé ma pomme...

Voilà vous voyez grossièrement comment ça marche. :)
Chapitre précédent Sommaire Chapitre suivant

Informations sur le tutoriel

Retour en haut Retour en haut

Créé : Le 29/07/2009 à 19:41:37
Modifié : Le 27/02/2010 à 17:46:26
Avancement : 100%

L'orthographe, la grammaire et la présentation de ce tutoriel ont été vérifiées par les zCorrecteurs.
6 commentaires