Petite animation sympas
Description
C'est ma 1ère animation en C++ alors soyez indulgent et si vous avez une idée d'amélioration ou si vous voulez me signaler un bug je suis a votre disposition. J'ai fais ce code avec DEV C++ 4.
Pourquoi j'ai fait ce code ?
J'ai fait ce code pour apprendre a utiliser le moteur OpenGL. J'ai donc voulu pour essayer faire
une sorte d'orange car en effet imaginez-vous en train de retirer la pelure en partant du haut
vers le bas de cette dernière, tout en faisant tourner le fruit et bien, c'est exactement ce
geste-là que j'ai voulu appliquer à ma sphère.
Comment j'ai fait ce code ?
Le programme doit être capable d'effectuer l'effet de flou sur un objet qui subit des rotations
sur lui-même et l'effet est bien mieux rendu si l'objet possède beaucoup d'angles de vue différents.
L'algorithme de rendu sera ainsi découpé en trois passes: l'initialisation des données, l'affichage
de la sphère puis l'application de l'effet sur cette dernière.
Pour le chargement de l'image à appliquer sur la sphère, le programme va se reposer sur la LibTarga.
Composée de seulement deux fichiers, cette dernière est capable de décoder toutes les images au
format TGA, et ce en une seule ligne de code.
La sphère est donc générée par programmation, elle est uniquement conçu à partir de points contenant,
pour chacun d'eux, la position dans l'espace géométrique ainsi que les coordonées texture. Ainsi pour
chaque ligne horizontale de points créés en partant du haut vers le bas, il est possible de déterminer
un coefficient déterminant la taille horizontale. Ce dernier autorise la création de la silhouette
sphérique sur l'axe des X. Pour chacun des points, il devient de nouveau nécessaire de calculer un
nouveau coefficient, celui déterminant cette fois-ci la position du point sur l'axe Z. Pour cela,le
seul outil adapté à notre disposition est l'utilisation des fonctions mathématiques Sinus et Cosinus,
permettant la création d'un cercle complet.
Maintenant je voudrais pouvoir afficher ma sphère. Comme tout le monde le sait, la fluidité d'une
animation dépend du nombre d'images par seconde la composant, il faut donc générer une nouvelle
image pour simuler une animation et cette animation peut se faire par la rotation de la sphère. Par
comséquent, il est tout à fait possible de spécifier comme angle de rotation une valeur qui augmente
avec le temps comme le fait par exemple la fonction système GetTickCount(). L'animation de la sphère
avec OpenGL s'effectue donc en plusieurs étapes. En premier, il faut effacer le contenu actuel de
l'écran, par une couleur que j'ai spécifié: le noir. Je profite également d'effacer le contenu du
tempon des profondeurs (le fameux Z-Buffer), ce qui évite à chaque triangle rendu avec OpenGL d'être
recouvert par les suivants, en procédant à un tri sur l'axe des Z. Ensuite, il faut sauvegarder
l'état actuel des différentes matrices de transformation, ce qui permettra de rétablir l'état
initial du rendu lors de la prochaine image à générer. L'appel de le fonction glViewport permet
de redimensionner le rendu à celle de la fenêtre OpenGL. La sphère va subir un léger déplacement en
X et Y afin d'améliorer l'effet. Cela est rendu possible grâce à la fonction glTranslate, qui prend
en paramètres les positions X, Y et Z. Enfin la rotation s'effectue par la fonction glRotate qui,
tout comme la translation, prend des paramètres basés sur le temps courant.
Certes, une sphère est à présent affichée à l'écran, mais aucune traînée n'a encore été implémentée,
donc pour créés un effet de flou si cette texture était afficher plusieurs fois, en transparence,
l'une au-dessus recouvrant l'autre, en appliquant pour chacune d'elles un léger grossissement
toujours plus gros et voila donc l'effet de flou créés.
Ainsi, après l'affichage de la sphère dans le contenu de l'écran, il faut provoquer la copie de ce
dernier dans une texture. J'ai fait cela avec la fonction glCopyTextImage2D, qui permet la copie
du contenu de l'écran directement dans la texture, mais avant d'utiliser glCopyTextImage2D, il
faut activer la texture qui va recevoir les données graphiques via la fonction glBind. La texture
peut être n'importe laquelle, pourvu qu'elle ait été initialisée avec les fonctions
glGenTextures/glTexImage2D.
Une fois la texture de rendu mise à jour, il suffit d'afficher les textures avec des quadrangles
recouvrant la surface de la fenêtre, tous un peu plus gros les uns que les autres. La transparence
est activée à travers la fonction glEnable( GL_BLEND ). J'ai retenu comme effet de transparence,
l'effet additif qui consiste à additionner les composantes R,G,B du pixel de l'écran avec celles
du pixel du triangle en cours de rendu. Comme les valeurs possibles se situent entre l'espace 0 et 1,
si le résultat obtenu est au-dessus de 1, ce dernier est automatiquement ramené a 1. Si les valeurs
R,G,B sont toutes les trois à 1, la couleur obtenue est le blanc. C'est pour cela que la texture
appliquée à la sphère est volontairement si sombre : comme elle tend vers le blanc en appliquant la
transparence, il vaut mieux que ses composantes R,G,B soient petites.
En espérent que cette petite explication de la démarche que j'ai suivi pour faire cette animation
vous soit assez clair.
Source / Exemple :
Tout est dans le zip.
Conclusion :
Pourquoi j'ai fait ce code ?
J'ai fait ce code pour apprendre a utiliser le moteur OpenGL. J'ai donc voulu pour essayer faire
une sorte d'orange car en effet imaginez-vous en train de retirer la pelure en partant du haut
vers le bas de cette dernière, tout en faisant tourner le fruit et bien, c'est exactement ce
geste-là que j'ai voulu appliquer à ma sphère.
Comment j'ai fait ce code ?
Le programme doit être capable d'effectuer l'effet de flou sur un objet qui subit des rotations
sur lui-même et l'effet est bien mieux rendu si l'objet possède beaucoup d'angles de vue différents.
L'algorithme de rendu sera ainsi découpé en trois passes: l'initialisation des données, l'affichage
de la sphère puis l'application de l'effet sur cette dernière.
Pour le chargement de l'image à appliquer sur la sphère, le programme va se reposer sur la LibTarga.
Composée de seulement deux fichiers, cette dernière est capable de décoder toutes les images au
format TGA, et ce en une seule ligne de code.
La sphère est donc générée par programmation, elle est uniquement conçu à partir de points contenant,
pour chacun d'eux, la position dans l'espace géométrique ainsi que les coordonées texture. Ainsi pour
chaque ligne horizontale de points créés en partant du haut vers le bas, il est possible de déterminer
un coefficient déterminant la taille horizontale. Ce dernier autorise la création de la silhouette
sphérique sur l'axe des X. Pour chacun des points, il devient de nouveau nécessaire de calculer un
nouveau coefficient, celui déterminant cette fois-ci la position du point sur l'axe Z. Pour cela,le
seul outil adapté à notre disposition est l'utilisation des fonctions mathématiques Sinus et Cosinus,
permettant la création d'un cercle complet.
Maintenant je voudrais pouvoir afficher ma sphère. Comme tout le monde le sait, la fluidité d'une
animation dépend du nombre d'images par seconde la composant, il faut donc générer une nouvelle
image pour simuler une animation et cette animation peut se faire par la rotation de la sphère. Par
comséquent, il est tout à fait possible de spécifier comme angle de rotation une valeur qui augmente
avec le temps comme le fait par exemple la fonction système GetTickCount(). L'animation de la sphère
avec OpenGL s'effectue donc en plusieurs étapes. En premier, il faut effacer le contenu actuel de
l'écran, par une couleur que j'ai spécifié: le noir. Je profite également d'effacer le contenu du
tempon des profondeurs (le fameux Z-Buffer), ce qui évite à chaque triangle rendu avec OpenGL d'être
recouvert par les suivants, en procédant à un tri sur l'axe des Z. Ensuite, il faut sauvegarder
l'état actuel des différentes matrices de transformation, ce qui permettra de rétablir l'état
initial du rendu lors de la prochaine image à générer. L'appel de le fonction glViewport permet
de redimensionner le rendu à celle de la fenêtre OpenGL. La sphère va subir un léger déplacement en
X et Y afin d'améliorer l'effet. Cela est rendu possible grâce à la fonction glTranslate, qui prend
en paramètres les positions X, Y et Z. Enfin la rotation s'effectue par la fonction glRotate qui,
tout comme la translation, prend des paramètres basés sur le temps courant.
Certes, une sphère est à présent affichée à l'écran, mais aucune traînée n'a encore été implémentée,
donc pour créés un effet de flou si cette texture était afficher plusieurs fois, en transparence,
l'une au-dessus recouvrant l'autre, en appliquant pour chacune d'elles un léger grossissement
toujours plus gros et voila donc l'effet de flou créés.
Ainsi, après l'affichage de la sphère dans le contenu de l'écran, il faut provoquer la copie de ce
dernier dans une texture. J'ai fait cela avec la fonction glCopyTextImage2D, qui permet la copie
du contenu de l'écran directement dans la texture, mais avant d'utiliser glCopyTextImage2D, il
faut activer la texture qui va recevoir les données graphiques via la fonction glBind. La texture
peut être n'importe laquelle, pourvu qu'elle ait été initialisée avec les fonctions
glGenTextures/glTexImage2D.
Une fois la texture de rendu mise à jour, il suffit d'afficher les textures avec des quadrangles
recouvrant la surface de la fenêtre, tous un peu plus gros les uns que les autres. La transparence
est activée à travers la fonction glEnable( GL_BLEND ). J'ai retenu comme effet de transparence,
l'effet additif qui consiste à additionner les composantes R,G,B du pixel de l'écran avec celles
du pixel du triangle en cours de rendu. Comme les valeurs possibles se situent entre l'espace 0 et 1,
si le résultat obtenu est au-dessus de 1, ce dernier est automatiquement ramené a 1. Si les valeurs
R,G,B sont toutes les trois à 1, la couleur obtenue est le blanc. C'est pour cela que la texture
appliquée à la sphère est volontairement si sombre : comme elle tend vers le blanc en appliquant la
transparence, il vaut mieux que ses composantes R,G,B soient petites.
En espérent que cette petite explication de la démarche que j'ai suivi pour faire cette animation
vous soit assez clair.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.