Graphic Stream : Texture

Wanted : Ressources 3D/2D pour projets Xna

valentin — Thu, 20 Dec 2007 09:53:00 GMT

Je reçois bcp de mails de personnes qui me demandent comment trouver des resources 3D ou 2D ou bien savoir quels logiciels utiliser pour en créer.

Il y'a un grand nombre de visites sur ce blog (pratiquement 100000 en un an), je propose que chacun d'entre nous indique où il trouve les ressources pour ses projets. Chaque contribution sera ajoutée à ce post.

Un gros merci.

Je commence :

Les SDK DirectX : http://msdn2.microsoft.com/en-us/directx/aa937788.aspx
Ils contiennent un grand nombre de fichiers X, texture et modèles en tout genre

Les projets MS Research : http://research.microsoft.com/research/allegiance/
Un jeu complet à la Microosft Game, futuriste avec un très grand nombre de ressources (X animés notament)

XNA Tutorial 8 : Les textures

valentin — Mon, 12 Feb 2007 08:52:00 GMT

~~< en construction / under construction>~~

Retourner au sommaire des cours

Notre premier chapitre consacré aux textures : un vaste, un très vaste sujet et au combien important dans le développement 3D. Le texturing est sans aucun doute l'élément le plus important pour donner du réalisme et de l'interet à un projet 3D. Nul doute qu'après cet apprentissage, nos petites productions n'auront plus rien à voir avec ce que nous faisions jusque là !

Nous suivrons trois phases dans cet apprentissage :

Faire connaissance avec le texturing en apprennant les notions de base.
Faire connaissance avec le blending de filtrage, de mipmapping, de blending et de multitexturing.
Opérer sur les textures.

Texture ?

Aucun rapport avec la définition du dictionnaire. La texture est une image qui est plaquée sur un triangle. Il s’agit donc d’un objet à deux dimensions. Nous pourrions la comparer à une surface collée sur un objet 3D pour lui donner un habillage réaliste. XNA comme DirectX autorise toute sorte de taille de texture. En interne il les découpera en images carrés dont le nombre de pixels est une puissance de 2 (16,32,256, …). Dans tous les cas il faut toujours se rappeler que pour la majorité des matériels installés sur les machines, les textures les plus rapides à manipuler font une taille de 256 par 256 et plus la taille de la texture est importante, plus il faudra de temps GPU pour les manipuler.

Si les données affichées à l’écran sont nommées pixels, les données d’une texture sont nommée texels (pour "texture element").

DirectX dans le chargement s’avère très polyvalent et peut lire un grand nombre de type de fichiers images, à savoir PNG, JPG, BMP et TGA.

Dans tous les cas le format d’image n’influence rien pour les performances de jeu. Chaque image étant traduite dans un format interne à Direct3D lors de son chargement. Notons enfin que les textures peuvent être générée à la volée à partir d’un accès mémoire.

Coordonnées de texture

Voilà une notion qui peut étonner au premier abord : Une coordonnée de texture permet de spécifier une position dans la texture. Dans la mesure où, dans une texture, l’espace est en 2D, seules deux valeurs sont nécessaire pour spécifier une position : U et V. U représente l’abscisse, à savoir le nombre d’unités à parcourir horizontalement et V qui représente le nombre d’unités verticales (ordonnées) à parcourir. Leurs valeurs oscillent entre 0 et 1 (des valeurs supérieure peuvent être données pour répéter une texture, nous verrons cela plus tard). Le point supérieur gauche de la texture est donc le (0,0) et le point inférieur droit (1,1) pour (U, V). Le schéma ci-dessous explicite tout cela avec la texture que nous allons employer dans notre premier exemple.

Les coordonnées de textures.

Placage de textures

Les coordonnées de textures sont donc une notion simple qui s’apparente aux bases mathématiques de la géométrie dans l’espace mathématique. Toutes les coordonnées (UV) pour le placage sur une forme 3D seront associées à chaque vertex qui la compose.

Pour plus de simplicité nous allons mettre de coté le cube qui servait à tous nos exemples depuis plusieurs cours pour revenir au carré utilisé dans le tutoriel 3. Dans ce programme un carré est formé de 4 vertices associés à une couleur et une position X, Y, Z comme ci-dessous.

Un programme simple déjà vu qui affiche un carré.

Associons maintenant un troisième type de valeur : les coordonnées de texture nommée ici tu et tv. Nous allons afficher sur ce carré notre texture en entier. Le point haut gauche aura donc la coordonnée de texture (0,0), le point haut droit (1,0) le point bas gauche (0,1) et enfin le point bas droite (1,1). Simple donc. Nous aurons :

La texture entière occupe la surface du carré.

Essayons maintenant de n’afficher que la moitié haut droite de la texture, à savoir la partie :

Nous aurons donc pour caractéristiques des 4 vertices :

Essayons pour continuer de n’afficher que la moitié basse de la texture :

Les caractéristiques seront :

Autre exemple, affichons le centre du carré à savoir :

nous aurons :

Finissons sur une tâche plus compliquée (rassurez vous seulement d’un chouïa). Nous n'allons pas prendre une portion de la texture de manière a avoir des coordonnées "ronde" (à savoir 0.5 ou 1) mais une portion complétement aléatoire. Il va donc nous falloir calculer la valeur exacte de la texture, prendre le pourcentage et reporter la valeur entre 0 et 1. Mettons au hasard le point haut gauche de la source au texel (12,16). Pour une texture de (64,64), converti en pourcentage nous avons : 18.75% en abscisse (12/64*100) et 25% en ordonnée soit donc en coordonnées de texture 0.1875 pour tu et 0.25 pour tv. Faisons de même pour les 3 autres coins. Au final nous avons :

Terminons enfin sur la répétition de textures. Jusqu’à présent les valeurs de tu et tv étaient comprises entre 0 et 1. Que ce passe t’il si ces valeurs dépassent 1 ? XNA, lors du mappage va répéter la texture suivant le pourcentage donné par les coordonnées ; Si tu vaut 1.5 la texture sera copiée entièrement avec la moitié d’une texture sur l’abscisse. Si tv vaut 3, alors sur l’ordonnée nous aurons trois textures copiées. Le dernier schéma de ce point illustre cela très bien :

Notons aussi que les valeurs négatives données à tu et tv inverseront le mappage de la texture. XNA permet d’autres interprétations dans le cas ou tu et tv dépassent la valeur 1 (nous verrons cela plus loin dans ce chapitre).

Passons maintenant aux choses concrètes.

Textures et XNA

Préparer notre projet à l'utilisation de textures...

Jusqu'à présent, la seule manière que nous avions pour ajouter des couleurs à un scène 3D étant de créer autant de vertices que de couleurs associées. Nous allons utiliser maintenant un moyen bien plus puissant et efficace en associant chaque vertices à une coordonnée de texture comme vu dans le point précédent. Nous reprendrons un projet relativement similaire à celui utilisé pour le chapitre 4 consacré aux matrices. Revenez quelques instants sur le code qu'il contient avant de continuer plus en avant. Notre but sur ce cours est d'afficher un carré à l'écran et, en utilisant un format de vertice adapté, y plaquer une texture.

La première étape consiste à définir 6 vertices pour les deux triangles formant le carré. Sachant que nous n'utilisons plus de couleur nous ne pouvons plus utiliser le type VertexPositionColor. Nous utiliserons à la place un nouveau type de vertex : VertexPositionTexture. *

Remarque : Nous avons déjà abordé les structure de format de vertices comme VertexPositionTexture ou comme VertexPositionColor. Ces formats permettent d'associer à un vertex différentes informations (comme la position, la couleur, les coordonnées de texture ...). Vous vous demandez peut être comment XNA peut il savoir quel type de données (couleur, texture, ...) est associé aux vertices qu'on lui donne ? Il utilise tout simple le contenu de la propriété que chaque structure de format doit posséder. Pour plus d'information à ce sujet et pour créer vos propres formats rendez vous ici.

Changez la déclaration du tableau de vertices ainsi :

VertexPositionTexture[] vertices;

Vient maintenant la création de chacun des vertices :

vertices = new VertexPositionTexture; //triangle 1, face devantvertices[0].Position = new Vector3(-10f, 0f, -10f);vertices[0].TextureCoordinate = new Vector2(0f, 0f);vertices[1].Position = new Vector3(-10f, 0f, 10f);vertices[1].TextureCoordinate = new Vector2(0f, 1f);vertices[2].Position = new Vector3(10f, 0f, 10f);vertices[2].TextureCoordinate = new Vector2(1f, 1f);//triangle 2, face devantvertices[3].Position = new Vector3(-10f, 0f, -10f);vertices[3].TextureCoordinate = new Vector2(0f, 0f);vertices[4].Position = new Vector3(10f, 0f, 10f);vertices[4].TextureCoordinate = new Vector2(1f, 1f);vertices[5].Position = new Vector3(10f, 0f, -10f);vertices[5].TextureCoordinate = new Vector2(1f, 0f);

On remarque ici une première différence avec nos programmes précédents : plus de couleur mais une coordonnée de texture associée à chaque vertex. Le vertex 0 se trouve en haut à gauche du carré. La coordonnée (U,V) associée est donc (0, 0). On ancrera donc la partie supérieure gauche de la texture sur ce vertex. Le second vertex se trouve en haut à droite sa coordonnée est donc (0, 0). La partie supérieure droite va être ancrée sur lui. Ainsi de suite pour les 4 autres vertices. C'est exactement ce que nous avons vu au tout début de ce chapitre.

Nous devons aussi spécifier à notre effet que nous ne manipulons plus des vertices colorés, mais texturés. Pour cela modifiez la ligne :

this.effect.CurrentTechnique = effect.Techniques["Colored"];

this.effect.CurrentTechnique = effect.Techniques["Textured"];

Il a été vu précédemment que le device où est affiché notre jeu (la carte graphique principale donc) a besoin de connaître le type de vertices utilisé (c'est à dire leur format). Il est donc nécessaire dans la méthode de dessin de modifier la ligne :

this.graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(this.graphics.GraphicsDevice, VertexPositionColor.VertexElements);

this.graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(this.graphics.GraphicsDevice, VertexPositionTexture.VertexElements);

A ce stade, l'application, à l'exécution affiche un magnifique carré ... noir ! Tout est normal : nous n'avons pas encore utilisé de texture et nous n'utilisons plus de couleur.

Ajout de textures au projet...

Nous utiliserons la texture prise en exemple précédemment :

Celle-ci, nommée "texture.jpg" se trouve à la racine du répertoire HuitiemeChapitre. Ajoutez là en cliquant droit sur le nom du projet et en selectionnant "ajouter un élément existant" :

Dans la fenetre qui s'ouvre, choisissez "Content Pipeline" dans la combobox de choix de type de contenu et selectionnez le fichier texture.jpg.

Après validation

Déclarez un object de type Texture2D dans la classe Game1.

Texture2D texture;

C'est cet objet qui va nous permettre de manipuler les textures dans notre application. Rendez vous maintenant dans la méthode LoadGraphicsContent : Il nous faut y charger la texture mais aussi spécifier à notre effet que nous associons cette texture à l'affichage des vertices. Nous procédons comme ceci :

protected override void LoadGraphicsContent(bool loadAllContent){ if (loadAllContent) { // TODO: Load any ResourceManagementMode.Automatic content texture = content.Load<Texture2D>("texture"); effect.Parameters["xTexture"].SetValue(texture); } // TODO: Load any ResourceManagementMode.Manual content

}

L'objet content de type ContentManager s'occupe des ressources du jeu en évitant au développeur d'avoir à se soucier de leur gestion. La méthode Load, générique est son seul membre réellement interessant. Elle renvoie un objet du type spécifié en généricité à partir du path ressource donné. Ici :

texture = content.Load<Texture2D>("texture");

Nous indiquons la spécificité sur le type Texture2D et donnons en path la string "texture". Nous ne donnons pas l'extension ".jpg" car la méthode Load prend le nom AssetName. Pour voir sa valeur, selectionnez la texture dans le projet et appuyez sur F4 (ou cliquez droit sur ce fichier et faites Propriété). Dans la fenêtre d'outil qui s'ouvre le champs AssetName contient la string "texture". Vous pouvez toujorus changer cette valeur pour donner un nom explicite, mais faites attention à bien vous y retrouver lorsque vous avez plusierus centaines de fichiers ressources !

Si vous lancez l'application vous obtenez maintenant :

Voila nous avons terminé ! Comme exercice revenez sur le premier point de ce chapitre où l'ont voit différentes manière de texturer un carré. Appliquez ces différentes possibilités à votre programme pour les tester.

Vous pouvez télécharger le sample, les deux moteurs et les exercices ici.

Ajout de textures et de couleurs au projet...

Avant de passer aux choses sérieuses, nous allons tenter d'associer trois données à chaque vertex :

La position bien évidemment
La texture
Une couleur

Nous utiliserons pour cela la structure de format de vertex VertexPositionColorTexture en lieu et place de VertexPositionTexture.

La déclaration des vertices sera modifiée de manière a spécifier le champs color comme auparavant :

vertices = new VertexPositionColorTexture; //triangle 1, face devantvertices[0].Position = new Vector3(-10f, 0f, -10f);vertices[0].TextureCoordinate = new Vector2(0f, 0f);vertices[0].Color = Color.Green;vertices[1].Position = new Vector3(-10f, 0f, 10f);vertices[1].TextureCoordinate = new Vector2(0f, 1f);vertices[1].Color = Color.Red;vertices[2].Position = new Vector3(10f, 0f, 10f);vertices[2].TextureCoordinate = new Vector2(1f, 1f);vertices[2].Color = Color.Yellow;//triangle 2, face devantvertices[3].Position = new Vector3(-10f, 0f, -10f);vertices[3].TextureCoordinate = new Vector2(0f, 0f);vertices[3].Color = Color.Green;vertices[4].Position = new Vector3(10f, 0f, 10f);vertices[4].TextureCoordinate = new Vector2(1f, 1f);vertices[4].Color = Color.Red;vertices[5].Position = new Vector3(10f, 0f, -10f);vertices[5].TextureCoordinate = new Vector2(1f, 0f);

vertices[5].Color = Color.Yellow;

Faites bien attention à remplacer partout VertexPositionTexture.

Si vous lancez cette nouvelle version du programme, vous obtenez la même sortie qu'auparavant : et pour cause, notre fichier effet ne permet pas de gérer les vertices qui possèdent à la fois une coordonnée de texture et une couleur. Deux possibilités face à ce problème : chercher un fichier effet qui permet cela, ou utiliser celui de base inclu dans le framework. C'est cette seconde option que nous utiliserons pour sa simplicité.

La classe BasicEffect est une classe qui encapsule en interne un fichier effet (.fx) pratiquement identique à celui que nous utilisions jusque là. Elle offre une interface objet simple et intuitive pour paramétrer la façon dont les vertices sont affichés à l'écran.

Remarque : Pourquoi ne pas avoir directement utilisé cette classe au tout début de notre apprentissage ? Pour des raisons de compréhension : lorsqu'on travaille à trop haut niveau les API nous cachent se qui se passe réellement dans les couches basses des fonctionnalités utilisées. On se trouve souvent ainsi confrontés à des bugs incompréhensibles faute de connaissances techniques... Ce qui a été appris jusqu'ici sera très utile lorsque nous aborderons le chapitre sur les effets.

Supprimez toutes les références vers la classe Effect et son instance effect du programme. Ajoutez la déclaration suivante dans la classe Game1 :

BasicEffect effect;

Dans la méthode Initialize ajoutez le code suivant :

effect = new BasicEffect(this.graphics.GraphicsDevice, null);
effect.VertexColorEnabled = true;
effect.TextureEnabled = true;
effect.View = viewMatrix;
effect.Projection = projectionMatrix;
effect.World = Matrix.Identity;

Nous pouvons en convenir : le code est réellement plus simple ; Ecrire :

effect.View = viewMatrix;
effect.Projection = projectionMatrix;
effect.World = Matrix.Identity;

est plus lisible que

effect.Parameters["xView"].SetValue(viewMatrix);
effect.Parameters["xProjection"].SetValue(projectionMatrix);
effect.Parameters["xWorld"].SetValue(Matrix.Identity);

Les deux premières instructions indiquent que les vertices affichés à l'écran gèrent à la fois la couleur et les textures :

effect.VertexColorEnabled = true;
effect.TextureEnabled = true;

Reste a affecter la dite texture dans la méthode LoadGraphicsContent de cette manière :

effect.Texture = texture;

Si vous lancez maintenant l'application le résultat est meilleur :

La couleur de chaque texel de la texture a été "aditionnée" à la couleur du pixel du carré issue de la couleur du vertex sous jacent.

Pour la suite de nos applications nous utiliserons la classe BasicEffect.

Vous pouvez télécharger le sample, les deux moteurs et les exercices ici.

Passons aux choses sérieuses...

Nous allons maintenant modifier la classe Cube du chapitre précédent afin de lui faire afficher une texture. Il lui sera aussi ajouté un objet de type BasicEffect afin de mettre la gestion de l'affichage des vertices au niveau du cube et non au niveau de tous les cubes. De même, pour changer un peu, une nouvelle texture (qui devrait rappeller de bon souvenirs) sera utilisée:

La classe Cube va contenir deux nouveaux champs :

private Texture2D _texture;

private BasicEffect _effect;

et deux nouvelles propriétés :

/// <summary>/// <para>Gets the cube's effect.</para>/// </summary>public BasicEffect Effect{ get { return this._effect; }} /// <summary>/// <para>Gets or sets the cube's texture.</para>/// </summary>public Texture2D Texture{ get { return this._texture; } set { this._texture = value; this._effect.Texture = value; }

}

Une méthode InitializeEffect est ajoutée pour initialiser notre effet :

private void InitializeEffect()
{
    this._effect = new BasicEffect(this._device, null);
    this._effect.VertexColorEnabled = true;
    this._effect.TextureEnabled = true;

}

La méthode Render est modifiée en conséquence :

public void Render(){ this._effect.Begin(); foreach (EffectPass pass in this._effect.CurrentTechnique.Passes) { pass.Begin(); this._device.Vertices[0].SetSource(this._vertexBuffer, 0, VertexPositionColorTexture.SizeInBytes); this._device.Indices = this._indexBuffer; this._device.VertexDeclaration = new VertexDeclaration(this._device, VertexPositionColorTexture.VertexElements); this._device.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 24, 0, 12); pass.End(); } this._effect.End();

}

Le code de la classe est maintenant largement simplifié. Il ne nous reste plus qu'à modifier la déclarations des 8 vertices du cube pour leur donner à chacun, une coordonnée de texture. En fait il y'a ici un problème. Nous avons 8 vertices pour 6 faces et donc 12 triangles. Donc chaque vertex du cube est utilisé pour plusieurs faces. L'image suivant illustre le problème :

Le vertex rouge est utilisé par plusieurs face

Si on prend le vertex surmonté d'un point rouge, on remarque que celui-ci appartient à trois faces :

La rouge pâle
La jaune pâle
La bleue pâle

Comment donner à ce vertex une coordonnée de texture dans ces conditions ? Pour la face rouge, ce vertex se trouve en bas à droite il aurait donc la coordonnée (1,1), or pour la face jaune il est en haut à droite et possède donc l'emplacement (1,0) sans parler de la face bleue dans laquelle il a la coordonnée (0,0) soit haut gauche. En fait chaque point du cube (au total 8 points) appartiennent à 3 faces. Il est donc nécessaire de créer non pas 8 vertices pour un cube mais 24 : chaque face possèdera ses propres vertices non partagés avec les autres faces, nous avons 6 faces de 4 vertices donc 24 vertices. Il ne s'agit pas ici d'une regression ; nous ne revenons pas au cube du tutoriel 5 qui possédait 36 vertices. La méthode InitializeVertices se présente désormais ainsi :

private void InitializeVertices(){ VertexPositionColorTexture[] vertices = new VertexPositionColorTexture[24]; //face devant vertices[0].Position = new Vector3(0f, 0f, 0f); vertices[0].Color = this.Color; vertices[0].TextureCoordinate = new Vector2(0, 1); vertices[1].Position = new Vector3(0f, 0f, 1f); vertices[1].Color = this.Color; vertices[1].TextureCoordinate = new Vector2(0, 0); vertices[2].Position = new Vector3(1f, 0f, 1f); vertices[2].Color = this.Color; vertices[2].TextureCoordinate = new Vector2(1, 0); vertices[3].Position = new Vector3(1f, 0f, 0f); vertices[3].Color = this.Color; vertices[3].TextureCoordinate = new Vector2(1, 1); //face derrière vertices[4].Position = new Vector3(1f, 1f, 1f); vertices[4].Color = this.Color; vertices[4].TextureCoordinate = new Vector2(0, 0); vertices[5].Position = new Vector3(1f, 1f, 0f); vertices[5].Color = this.Color; vertices[5].TextureCoordinate = new Vector2(0, 1); vertices.Position = new Vector3(0f, 1f, 0f);// vertices.Color = this.Color; vertices.TextureCoordinate = new Vector2(1, 1); vertices[7].Position = new Vector3(0f, 1f, 1f); vertices[7].Color = this.Color; vertices[7].TextureCoordinate = new Vector2(1, 0); //face gauche vertices.Position = new Vector3(0f, 1f, 0f);// vertices.Color = this.Color; vertices.TextureCoordinate = new Vector2(0, 1); vertices[9].Position = new Vector3(0f, 1f, 1f); vertices[9].Color = this.Color; vertices[9].TextureCoordinate = new Vector2(0, 0); vertices[10].Position = new Vector3(0f, 0f, 1f); vertices[10].Color = this.Color; vertices[10].TextureCoordinate = new Vector2(1, 0); vertices[11].Position = new Vector3(0f, 0f, 0f); vertices[11].Color = this.Color; vertices[11].TextureCoordinate = new Vector2(1, 1); //face droite vertices[12].Position = new Vector3(1f, 0f, 0f); vertices[12].Color = this.Color; vertices[12].TextureCoordinate = new Vector2(0, 1); vertices[13].Position = new Vector3(1f, 0f, 1f); vertices[13].Color = this.Color; vertices[13].TextureCoordinate = new Vector2(0, 0); vertices[14].Position = new Vector3(1f, 1f, 1f);// vertices[14].Color = this.Color; vertices[14].TextureCoordinate = new Vector2(1, 0); vertices[15].Position = new Vector3(1f, 1f, 0f); vertices[15].Color = this.Color; vertices[15].TextureCoordinate = new Vector2(1, 1); //face haut vertices[16].Position = new Vector3(0f, 0f, 1f);// vertices[16].Color = this.Color; vertices[16].TextureCoordinate = new Vector2(0, 1); vertices[17].Position = new Vector3(0f, 1f, 1f); vertices[17].Color = this.Color; vertices[17].TextureCoordinate = new Vector2(0, 0); vertices[18].Position = new Vector3(1f, 1f, 1f); vertices[18].Color = this.Color; vertices[18].TextureCoordinate = new Vector2(1, 0); vertices[19].Position = new Vector3(1f, 0f, 1f); vertices[19].Color = this.Color; vertices[19].TextureCoordinate = new Vector2(1, 1); //face bas vertices[20].Position = new Vector3(1f, 0f, 0f); vertices[20].Color = this.Color; vertices[20].TextureCoordinate = new Vector2(0, 1); vertices[21].Position = new Vector3(1f, 1f, 0f); vertices[21].Color = this.Color; vertices[21].TextureCoordinate = new Vector2(0, 0); vertices[22].Position = new Vector3(0f, 1f, 0f);// vertices[22].Color = this.Color; vertices[22].TextureCoordinate = new Vector2(1, 0); vertices[23].Position = new Vector3(0f, 0f, 0f); vertices[23].Color = this.Color; vertices[23].TextureCoordinate = new Vector2(1, 1); if (this.IsObjectOriginInCubeCenter) for (int i = 0; i < 24; i++) vertices.Position += new Vector3(-0.5f, -0.5f, -0.5f); this._vertexBuffer = new VertexBuffer( this._device, typeof(VertexPositionColorTexture), 24, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); this._vertexBuffer.SetData(vertices);}

A noter la présence du bloc :

    if (this.IsObjectOriginInCubeCenter)
        for(int i = 0 ; i < 24 ; i++)
            vertices.Position += new Vector3(-0.5f, -0.5f, -0.5f);

J'ai rajouté sur demande de certains d'entre vous une propriétée nommée qui permet de préciser si le centre du cube doit coincider avec l'origine du repère de l'objet (pour plus d'information allez voir ici). L'origine se trouve par défaut sur le vertice 0, pour mettre l'origine au centre du cube il me suffit de déplacer tous les vertices de 0.5f unités car le cube a une taille de 1. Modifiez la méthode d'affichage pour indiquer que vous gérez non plus 8 vertices mais 24. Au lancement vous obtenez

(je reviendrais dans une annexe sur la manière de faire des mouvements amples et fluides pour ses objets dans une annexe prochainement).

Vous pouvez télécharger le sample, les deux moteurs et les exercices ici.

A ce stade de nos connaissances nous pouvons ...

L'information qui suit est à prendre avec des pincette mais elle donne toutefois une idée assez précise du niveau de nos connaissances à ce stade de notre apprentissage. Une partie de ceux qui lisent ces lignes ont sans doute déjà joué à l'un des épisode de la série à succès Tomb Raider (l'auteur de cours XNA a pour sa part joué aux version 1, 2, 3, 4). Nous sommes maintenant capable de réaliser des mondes tous à fait similaires à celui présenté par la capture d'écran ci-dessous :

Regardez attentivement cette image. Vous verrez qu'en fait, ce monde n'est constitué que de formes cubiques comme nous savons très bien les faire maintenant : des cubes, des cubes coupés sur leur diagonale, des cubes coupés en leur milieu etc. C'est là toute l'ingéniosité et toute la puissance du moteur de Core/Eidos : reproduire n'importe quelle architecture/géographique à l'aide de ces formes. Les mouvements de Lara sont d'ailleur soumi à une seule unité de mesure : la taille d'un cube. Ce principe assez proche des jeux de plateforme 2D permet de gérer les collisions et les déplacements très facilement et de créer des formes à l'écran simplement. Core/Eidos peut donc créer des mondes et développer un moteur beaucoup plus rapidement que des moteurs complexes comme celui de World Of Warcraft (que nous reproduirons à la fin de cet apprentissage).

Si le temps nous le permet nous essayerons de reproduire un monde à base de cubes.

Les filtres

Introduction

Tous ceux qui ont travaillé avec des programmes d’édition d’images comme paint shop pro ou photoshop sont familiers des effets de pixellisation. On obtient cet effet désagréable lorsqu’on réduit la taille d’une image selon un rapport impair. Résultat : de nombreux détails sont perdus et la qualité de l'image s'en ressent. Pour éviter cela, les bons programmes d’édition d’images proposent différentes techniques de réduction ou d'augmentation de taille d'image aussi nommées filtrage pour réduire au minimum les pertes dues au changement de taille. XNA aussi.

Pour mieux comprendre, voici un exemple concrêt : Quand XNA affiche une primitive, il plaque un modèle 3-D sur un écran 2-D. Si la primitive possède une texture, XNA doit utiliser cette dernière afin de créer une couleur pour chaque Pixel de ce modèle en utiliser une valeur de couleur de la texture. C'est ce processus qu'on appelle filtrage de texture.

Quand une opération de filtre de texture est effectuée, la texture utilisée est "magnifiée" (agrandie) ou "minifiée" (réduite). En d'autres termes, elle est plaquée sur une primitive qui est plus grande ou plus petite que sa propre taille. La magnification d'une texture peut avoir comme conséquence l'utilisation d'un seul texel (point de couleur dans une texture) pour colorer un grand nombre de Pixel à l'écran. L'image résultante peut être volumineuse et pixelisée. La Minification d'une texture au contraire signifie souvent qu'un Pixel simple se substitue à plusieurs texels. L'image résultante peut être trouble . Pour résoudre ces problèmes, se mélanger des couleurs de texel doit être effectué pour arriver à une couleur pour le Pixel.

XNA tout comme DirectX fournit plusieurs types de filtrage de texture (lineaire, anisotropic, gaussien ...) et un système de mipmapping (notion sur laquelle nous reviendrons plus loin). Si vous ne choisissez aucun filtre, XNA emploie une technique appelée nearestpoint sampling (en gros : choix du texel le plus proche).

Chaque type de filtrage de texture a des avantages et des inconvénients. Par exemple, le filtrage linéaire de texture peut produire des bords déchiquetés ou un aspect volumineux dans l'image finale. Cependant, c'est un filtre très simple et rapide à mettre en place à faible coùt de mémoire. Le filtrage anisotrope demande plus de temps processeur et beaoucp plus de mémoire.

L’exemple suivant dans le jeu Might and Magic le montre bien :

La maison vu de loin est belle ...

... mais quand on s’approche ... tout est pixellisé et ... hideux le jeu à l'époque, manquait d'un bon filtre de texture...

Might and Magic dans sa version 6 (NDA : la meilleure version) n'était pas très avancé graphiquement parlant. Le jeu manquait en autres choses d'un bon filtrage de texture. La première image montre un batiment dans la ville de Sorpigal. Vu de loin, la texture qui est plaquée sur ce batiment semble normale, mais comme le montre la seconde image, si l'on s'approche, un filtre nearest point sampling est effectué pour créer une magnification : on agrandit énormément la texture. En ressort alors un très désagréable effet de pixelisation. Dans la première image, la surface visible du batiment est d'environ 300*200. On s'approche donc de la taille de cette texture : l'affichage est donc optimal. Dans la seconde image la surface d'affichage pour la texture passe a 450*350 et ce pour n'afficher que 8% de la texture ! L'utilisation d'un bon filtrage permet d'éviter cet effet pixélisé horrible.

Et Xna dans tout ça ?

XNA offre au développeurs 5 filtrages (tous énuméré dans le type TextureFilter) :

Membre	Description
GaussianQuad	Un filtre 4-sample Gaussien pour la magnification ou la minification.
PyramidalQuad	Un filtre 4-sample pour la magnification ou la minification.
Anisotropic	Un filtre de texture anisotrope utilisé pour la magnification ou la minification. Les filtres anisotrope compensent la distorsion représentent par l'angle du polygone à mapper et la position de la caméra.
Linear	Un filtre de texture anisotrope utilisé pour la magnification ou la minification. Une moyenne pondérée de 2x2 texels autour du texel concerné est utilisé.
Point	Un filtre de texture point utilisé pour la magnification ou la minification. Le texel avec les coordonnées les plus proches du pixel voulu est utilisé.
None	Aucun filtre.

C'est la propriété SamplerStates de l'objet GraphicsDevice qui va nous permettre de spécifier le filtrage à appliquer en minification et/ou en magnification.
Si nous voulons appliquer un filtre anisotrope en mignification et lineaire en magnignification nous ferons :

this.graphics.GraphicsDevice.SamplerStates[0].MinFilter = TextureFilter.Anisotropic;
this.graphics.GraphicsDevice.SamplerStates[0].MagFilter = TextureFilter.Linear;

...pas très compliqué. Nous utilisons ici la propriété SamplerStates comme un tableau tout simplement parcequ'il est possible de plaquer plusieurs textures sur un même polygone (jusqu'à 8 textures). Nous appliquons ici nos filtres MinFilter et MagFilter sur la première texture (0). La classe SamplerState possède de nombreux membres pour la gestion de l'affichage des textures à l'écran. Nous les verrons tous dans ce chapitre.

Un exemple concrêt

Rien de mieux pour bien comprendre l'effet d'un filtre à l'écran que de développer un exemple. Nous reprendrons le dernier projet pour y effectuer quelques menues modifications. Voici ce que nous allons faire : un cube va être affiché en gros plan. Il tournera sur lui-même a vitesse très réduite de sorte de bien mettre en évidence les différents filtres que nous appliquerons. Les filtres seront selectionnés au clavier : la touche 'A' pour anisotope, 'L' pour linéaire, 'P' pour point, 'G' pour Gaussian, 'Q' pour Pyramidal, 'N' pour aucun. Si la touche Shift est appuyée en même temps, le filtre s'applique en magnification, sinon, en minification.

En fait le sample sera rapide à écrire, nous n'allons ajouter qu'une vingtaine d'instructions. Première étape, la classe Cube. Ajout de deux membres et deux propriétés associées pour sauvegarder le filtre en magnification et minification :

        private TextureFilter _minfilter;
        private TextureFilter _magfilter;

        public TextureFilter MagTextureFilter
        {
            get
            {
                return this._magfilter;
            }
            set
            {
                this._magfilter = value;
            }
        }

        public TextureFilter MinTextureFilter
        {
            get
            {
                return this._minfilter;
            }
            set
            {
                this._minfilter = value;
            }

}

Seconde étape : Application des filtres dans la méthode Render :

/// <summary>/// <para>Render the cube on the device.</para>/// </summary>public void Render(){ this._effect.Begin(); foreach (EffectPass pass in this._effect.CurrentTechnique.Passes) { pass.Begin(); this._device.SamplerStates[0].MinFilter = _minfilter; this._device.SamplerStates[0].MagFilter = _magfilter; this._device.Textures[0] = this.Texture; this._device.Vertices[0].SetSource(this._vertexBuffer, 0, VertexPositionColorTexture.SizeInBytes); this._device.Indices = this._indexBuffer; this._device.VertexDeclaration = new VertexDeclaration(this._device, VertexPositionColorTexture.VertexElements); this._device.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 24, 0, 12); pass.End(); } this._effect.End();

}

C'est terminé ! La classe Game1 a bien entendu été modifiée pour pouvoir affecter au cube le filtre voulu suivant la touche clavier appuyée. A l'exécution, l'application se présente ainsi :

En jouant avec les touches a, A, l, L, p, P, g, G, q, Q, n ou N on peut facilement voir les différences de qualité entre tous les filtres suivant les angles de vue et la distance du cube. Les deux images suivants explicite cela. En mode point, le cube en courte distance donne l'affichage pixélisé suivant :

Le zoom sur la face du cube en mode point montre bien l'effet de pixalisation. Maintenant la même face en anisotropie :

donne un bien meilleur résultat visual.

Cet exemple n'est qu'une première approche des filtres. Il met en évidence l'importance qu'ils revettent pour le design et l'aspect de nos productions. C'est aussi un élément important à prendre en compte si l'on veut rendre son jeu accessible à tous, un filtre gourmant comme l'anisotrope doit être un choix et non une obligation.

Pour cela vous devez toujours vérifier avant toute chose que la machine sur laquelle tourne votre application supporte la technologie ou la fonctionnalité que vous voulez utiliser. D'une manière générale faites donc toujours des tests par rapport à la propriété GraphicsDeviceCapabilities de l'objet GraphicsDevice. Cette propriété de type GraphicsDeviceCapabilities contient un ensemble de booléean et d'énumération indiquant toutes les fonctionnalités et technologies supportés par le matériel en rapport avec le device courant. Pour savoir si l'anisotrop est supporté, faites un test sur :

this.graphics.GraphicsDevice.GraphicsDeviceCapabilities .TextureFilterCapabilities.SupportsMagnifyAnisotropic

this.graphics.GraphicsDevice.GraphicsDeviceCapabilities.TextureFilterCapabilities.

pour la magnification et sur :

this.graphics.GraphicsDevice.GraphicsDeviceCapabilities .TextureFilterCapabilities.SupportsMinifyAnisotropic

pour la minification.

Remarque : une annexe sera écrite prochainement et consacrée uniquement à l'importance des tests sur les capacités du matériel avant l'exécution.

De même (mais là nous voyons vraiment loin) il est préférable de proproser les fonctionnalités poussées comme ce filtre dans un menu d'option.

Le mip mapping

Mip vient du latin Multum in parvo, qui signifie « beaucoup de choses dans un petit endroit ».

Principe

Le mipmapping est une technique visant à améliorer l'affichage des textures sur les polygones en prennant en compte la distance comprise entre le dit polygone et la position de la caméra. Le niveau de détail des textures est adapté à la distance de l'objet. Ainsi, un objet proche de la caméra affichera des textures en haute résolution tandis qu'un objet situé au loin sera plaqué avec une texture de petite taille.

Chaque texture utilisée dans un processus de mip mapping est appellé "niveau de MIP map" ou LOD (pour Level Of Detail). Elles sont choisies suivant la distance à la caméra. La technique du MIP mapping consiste à envoyer au GPU des textures de résolutions décroissantes qui seront utilisées à la place de la texture originale. Le choix de la texture ayant la taille la plus adaptée s'effectue selon la distance du point de vue de l'objet texturé et le niveau de détails nécessaire. Le GPU n'a alors plus qu'à appliquer les bonnes textures sur les bons objets suivant leur éloignement, réadaptant la texture chaque fois que l'objet se rapproche. La texture utilisée lors du rendu sera alors celle dont la résolution est la plus proche de celle de l'objet sur l'image projetée. Chaque niveau doit avoir pour hauteur et largeur la moitié de la hauteur et largeur du niveau précédent. Le dernier niveau a bien évidemment au moins un coté égal à 1.

Par exemple, d'une image d'une taille de 256x256 pixels seront produits les mêmes images aux résolutions de 128x128 pixels, 64x64, 32x32, 16x16, 8x8, 4x4, 2x2 et 1x1. Si la taille de l'objet sur l'image projetée à l'écran est de 30x30 pixels, la texture utilisée sera alors celle de résolution 32x32 pixels.

Le filtrage joue ici un rôle primodial en évitant de voir les "sauts" lors du passage d'une texture à l'autre, grâce à une transition progressive.

Quel est l'interet de du mip mapping ? Si cette technique est gourmande en mémoire vidéo (elle consomme un tiers de mémoire en plus), elle est plus rapide : La diminution du nombre de texels à traiter et des opérations de filtrages en temps réel de la texture permettent un rendu plus rapide de l'image. De plus le choix des différents niveaux de mipmap peut être laissé à l'apprecciation du développeur : Souvent laisser votre machine opérer pour voir les filtres peut donner un résultat qui s'avère desastreux et ce, même avec les meilleures techniques de filtrage. Prennez l'exemple de l'image suivante qui pourrait se trouver dans un de vos jeu :

Le message qu'elle véhicule est clair : tirer sur la cible fait perdre le joueur. Si nous laissons la machine gérer le mip mapping et la réduction de la texture nous pouvons obtenir le résultat suivant

C'est cette texture qui pourrait etre plaqué sur une forme 3D se trouvant loin du joueur. Celui-ci ne voyant pas le message tirera à coup sur. En fait l'algorythme de réduction d'image ne se préoccupe pas de l'information que l'image porte dans le mesure où il ne peut la quantifier. Il ne prend donc pas en compte l'importance de laisser le texte visible après une réduction n'est donc pas pris en compte dans le calcul du filtre. Si ce n'est pas la machine qui effectue cette tâche mais une personne, celle-ci peut réduire l'image de manière intelligente en gardant l'information visible au maximum :

Paramétrage du Mipmapping

Deux paramètres peuvent intervenir dans l'affichage d'une texture mipmappée : Le MaxAnisotropy et le MipMapLevelOfDetailBias.

MaxAnisotropy

L’anysotropie est un filtre intelligent et assez gourmant en ressource (bien qu’il soit souvent intégré au hardware des cartes graphiques). Il se base sur l’aspect graphique de l’objet sur lequel on plaque la texture. Les texels ne sont pas tirés d’une forme symétrique, mais plutôt en utilisant un motif irrégulier ajusté à la perspective (on parle de figure anisotropique). Le nombre de texels pris en compte pour ce filtrage détermine la qualité de celui-ci. Avec le filtrage anisotropique 1x, on prend 8 texels. Le niveau maximum est 16x, les plus courants sont 2x (16 texels), 4x (32 texels), 8x (64 texels) et 16x (128 texels). Plus la valeur de MaxAnisotropy est importante, et plus le niveau de filtrage est élevé, et forcement, plus le temps de calcul augmente (et ceci de manière exponentielle…).

MipMapLevelOfDetailBias

Il arrive que pour la beauté du jeu il faille garder un LOD plus longtemps que prévu en retardant le passage à un LOD inférieur lorsque la caméra s’éloigne par exemple. C’est le LOD bias qui permet de réaliser cette opération. Si une surface s’éloigne de l’utilisateur, augmenter le LOD bias revient à retarder l’utilisation du LOD inférieur. Au contraire, en diminuant sa valeur, on passe plus rapidement aux LOD inférieurs.

Après la théorie, la pratique !

Il est temps de passer aux choses sérieuses. Le sample que nous allons réaliser ici aura pour but de mettre en évidence le mipmaping et les impacts des différents filtres. Nous allons réaliser pout cela un damier de 64 cases sur 64 cases. Chaque case sera associée à une texture "mipmappée". La camera pourra se déplacer sur ce damier et nous pourrons ainsi voir, en se déplaçant l'évolution des textures sur les différentes cases. Nous aurons trois types de textures : des textures de couleur qui permettrons d'apprecier facilement le passage entre deux LOD, des textures représentant un sol pavé pour voir en réel ce que nos choix produisent, une texture damier pour apprécier la qualité des filtres.

La première étape consiste donc à créer ce qui va être notre premier terrain de jeu. A ce stade de nos connaissances il y a ici aucune difficulté : ayant déjà développé des applications affichants un carré, nous sommes largement en mesure de créer un monde constitué de 64 carrés sur 64 carrés. Ouvrez le projet nommé "TroisiemeProjetMipmap". Une nouvelle classe Region fait son apparition. Elle sera chargé de la création et de l'affichage d'un terrain. Elle possède un seul vertexbuffer et un seul indexbuffer. Le vertexbuffer contiendra les 64*64 cases du terrain, sachant que chaque case possède 4 vertices. La méthode InitializeVertices se présente comme suit :

private void InitializeVertices(){ float caseSize = 16; VertexPositionColorTexture[] vertices = new VertexPositionColorTexture[_numberOfVertices]; int index = 0; for (int j = 0; j < this._depth; j++) { for (int i = 0; i < this._width; i++) { vertices[index].Position = new Vector3(i * caseSize, j * caseSize, 0f); vertices[index].Color = this.Color; vertices[index].TextureCoordinate = new Vector2(0, 0); vertices[index +1 ].Position = new Vector3(i * caseSize + caseSize, j * caseSize, 0f); vertices[index +1 ].Color = this.Color; vertices[index +1 ].TextureCoordinate = new Vector2(1, 0); vertices[index + 2].Position = new Vector3(i * caseSize + caseSize, j * caseSize - caseSize, 0f); vertices[index + 2].Color = this.Color; vertices[index + 2].TextureCoordinate = new Vector2(1, 1); vertices[index + 3].Position = new Vector3(i * caseSize, j * caseSize - caseSize, 0f); vertices[index + 3].Color = this.Color; vertices[index + 3].TextureCoordinate = new Vector2(0, 1); index+=4; } } this._vertexBuffer = new VertexBuffer( this._device, typeof(VertexPositionColorTexture), _numberOfVertices, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); this._vertexBuffer.SetData(vertices);

}

Les membres depth et width représentent la profondeur et la largeur du monde (ils possèdent donc pour valeur 64 chacun donc). La double boucle for parcours le monde de jeu sur chaque ligne et chaque colonne en créant un carré à chaque fois. La valeur caseSize représente la taille d'un carré. Rien de compliqué ici. La méthode InitializeIndices est la suivante :

private void InitializeIndices(){ short[] indices = new short[_numberOfIndices]; short index = 0; short indexCase = 0; for (int j = 0; j < this._depth; j++) { for (int i = 0; i < this._width; i++) { indices[index] = indexCase; indices[index + 1] = (short)(indexCase + 1); indices[index + 2] = (short)(indexCase + 3); indices[index + 3] = (short)(indexCase + 1); indices[index + 4] = (short)(indexCase + 2); indices[index + 5] = (short)(indexCase + 3); index += 6; indexCase += 4; } } this._indexBuffer = new IndexBuffer( this._device, typeof(short), _numberOfIndices, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); this._indexBuffer.SetData(indices);

}

Nous spécifions 6 indices pour chaque carrés (une case équivaut à deux triangles de 3 points). Rien de vraiment compliqué là encore. Terminons sur cette classe en ajoutant qu'une propriété TextureMipMapFilter a été ajoutée afin de pouvoir spécifier un filtre mipmap depuis la classe Game1.

Chaque texture utilisée sera un mipmap composé de 6 LODs (256*256, 128, 60, 32, 16 et enfin 8). De la même façons que le premier projet de ce chapitre nous allons incorporer les LODs de chaque texture dans le projet. La texture colorée possédera les LOD suivants :

chaque couleur permettra de bien discerner les niveaux de mip map utilisé. La texture de sol utilisera les LOD suivants:

Chaque LOD a été placé dans un répertoire du projet nommé MipMapTextures de la même façon que pour le premier projet de ce chapitre. C'est la classe Game1 qui va former les trois textures composée de 6 LODs. Dans celle-ci se trouvent trois méthodes similaires nommées GenerateMipmap, GenerateMipmapTexture et GenerateMipmapCase respectivement pour la texture colorée, de sol et de damier. A noter qu'on aurait pu ici factoriser le code en une seule méthode, mais pour des raisons de compréhension, cela n'a pas été fait. Ces trois méthodes étant similaires, nous n'en verrons qu'une :

private void GenerateMipmap(){ Texture2D mainTexture = new Texture2D(this.graphics.GraphicsDevice, 256, 256, 6, ResourceUsage.Dynamic, SurfaceFormat.Color, //std 32 bits mode ResourceManagementMode.Manual); Texture2D texture256 = content.Load<Texture2D>("MipmapTextures\\256"); Texture2D texture128 = content.Load<Texture2D>("MipmapTextures\\128"); Texture2D texture064 = content.Load<Texture2D>("MipmapTextures\\64"); Texture2D texture032 = content.Load<Texture2D>("MipmapTextures\\32"); Texture2D texture016 = content.Load<Texture2D>("MipmapTextures\\16"); Texture2D texture008 = content.Load<Texture2D>("MipmapTextures\\8"); uint[] array = new uint[256 * 256]; texture256.GetData<uint>(array); mainTexture.SetData<uint>(0, null, array, 0, array.Length, SetDataOptions.None); array = new uint[128 * 128]; texture128.GetData<uint>(array); mainTexture.SetData<uint>(1, null, array, 0, array.Length, SetDataOptions.None); array = new uint[64 * 64]; texture064.GetData<uint>(array); mainTexture.SetData<uint>(2, null, array, 0, array.Length, SetDataOptions.None); array = new uint[32 * 32]; texture032.GetData<uint>(array); mainTexture.SetData<uint>(3, null, array, 0, array.Length, SetDataOptions.None); array = new uint[16 * 16]; texture016.GetData<uint>(array); mainTexture.SetData<uint>(4, null, array, 0, array.Length, SetDataOptions.None); array = new uint[8 * 8]; texture008.GetData<uint>(array); mainTexture.SetData<uint>(5, null, array, 0, array.Length, SetDataOptions.None); _sampleMipmapColor = mainTexture;}

Cette méthode charge dans une variable locale nommée 6 LOD. Si quelque chose vous semble obscur de les explications suivent, reportez vous à la présentation du premier projet au tout début de ce chapitre. La première instruction

    Texture2D mainTexture = new Texture2D(this.graphics.GraphicsDevice,
        256, 256,
        6,
        ResourceUsage.Dynamic,
        SurfaceFormat.Color, //std 32 bits mode
        ResourceManagementMode.Manual);

créé la texture qui va contenir les LOD. Nous n'utilisons pas la classe Content pour la créer et nous aurons donc à la gérer nous même (nous reviendrons sur ce point plus loin). Une référence vers le device est bien évidemment donnée ainsi qu'une taille de 256*256. C'est à dire la taille du premier Level Of Detail. La valeur 6 représente le nombre de LOD que nous utilisons. ResourceUsage.Dynamic indique que nous laissons le driver décider ou placer le buffer contenant les données de la texture. En général si il y'a la place, celui-ci est placé dans la mémoire AGP, sinon dans la mémoire vidéo, sinon en dernier cas dans la RAM. Un bon jeu sais se référer à la taille mémoire pour placer les textures les plus utilisées en AGP et les autres moins importantes dans la RAM afin d'optimiser les affichages (nous vérrons celà dans la quatrième partie de cet apprentissage). Le paramètre SurfaceFormat.Color indique simplement que la texture aura un format de type 32 bits standard (ARGB : 8bits pour l'alpha, 8 pour la composante Rouge, 8 pour le vert et 8 pour le bleu, soit 256 variations par composantes). Enfin ResourceManagementMode.Manual précise que nous gérons nous même la vie de la texture (a nous de la recréer lorsqu'elle est "perdue". Vient ensuite le chargement des 6 LODs :

    Texture2D texture256 = content.Load<Texture2D>("MipmapTextures\\256");
    Texture2D texture128 = content.Load<Texture2D>("MipmapTextures\\128");
    Texture2D texture064 = content.Load<Texture2D>("MipmapTextures\\64");
    Texture2D texture032 = content.Load<Texture2D>("MipmapTextures\\32");
    Texture2D texture016 = content.Load<Texture2D>("MipmapTextures\\16");
    Texture2D texture008 = content.Load<Texture2D>("MipmapTextures\\8");

Rien de compliqué ici. La valeur "256" est le nom Asset de la texture et "MipmapTextures" le path vers celle-ci (voir premier projet au début de ce chapitre). Les instructions qui suivent créént le Mipmap. Mais qu'est ce qu'un Mipmap sur le plan technique ? Il s'agit (pour parler simplement) d'une sorte de liste chainée. Chaque texture à l'intérieur possède pour taille la moitiée de son prédécesseur et est deux fois plus grande que son successeur directe. La première texture de cette liste à la taille la plus importante, la dernière la plus petite. Cette liste va être "ratachée" à une texture qui va faire office de "pointeur". Suivant le degré de détail voulue, la texture va pointer sur telle ou telle élément de la liste. Créer cette structure en Xna/C# est relativement aisé. Il nous suffit d'associer une texture (notre pointeur) à un ensemble de buffers correspondant aux différents LODs. C'est les méthodes GetData et SetData qui vont nous permettre cela. Prenons exemple du chargement du buffer correspondant au troisième LOD :

    array = new uint[64 * 64];
    texture064.GetData<uint>(array);
    mainTexture.SetData<uint>(2, null, array, 0, array.Length, SetDataOptions.None);

Première instruction, nous créeons un array de uint (entier non signés) qui va faire office de buffer. La seconde instruction charge ce buffer à partir des données de la texture ayant pour taille 64 par 64. Enfin, la troisième instruction associe ce buffer au troisième LOD (index 2) de la texture "pointeur" (mainTexture). Le premier paramètre de correspond au niveau de LOD voulu, le second correspond à un objet de type Rectangle pour indiquer la zone du buffer que nous remplissons (ici null donc nous chargeons tout le buffer). Nous passons ensuite le buffer lui-même, indiquons à partir de quel index nous le lisons et sa taille. Le dernier paramètre de type SetDataOptions spécifie la manière dont on écrase le buffer déjà associé à ce LOD (si il y'en a un) : supprimé, comblé ou surchargé (soit respectivement SetDataOptions.Discard, SetDataOptions.NoOverwrite, SetDataOptions.None).

La partie LOD de notre programme est terminée ! Ne reste plus qu'à gérer le déplacement sur le terrain de jeu et la modification des différents filtres à l'aide des touches clavier. Pour cela, une simple analyse de la méthode Update vous suffira à ce stade de cos connaissances. Avant de lancer le programme, jetez juste un oeil à la méthode LoadGraphicsContent :

/// <summary>/// Load your graphics content. If loadAllContent is true, you should/// load content from both ResourceManagementMode pools. Otherwise, just/// load ResourceManagementMode.Manual content./// </summary>/// <param name="loadAllContent">Which type of content to load.</param>protected override void LoadGraphicsContent(bool loadAllContent){ if (loadAllContent) { } // TODO: Load any ResourceManagementMode.Manual content this.GenerateMipmapTexture(); this.GenerateMipmap(); this.GenerateMipmapCase(); this._terrain.Texture = _sampleMipmapColor;

}

Nous y plaçons le chargement de nos textures. Dans la mesure ou les 3 mipmaps sont chargés à l'aide de l'option ResourceManagementMode.Manual ce chargement se fait à l'extérieur du bloc conditionnel "if (loadAllContent)".

Il y'a deux types d'appel à cette méthode dans la vie d'une application Xna : le premier appel lors du lancement de l'application passe à cette méthode la valeur true. De ce fait toutes les ressources sont chargés à la fois dans le bloc if et à l'extérieur. Le second appel intervient lorsqu'il y'a perte de ressources (après un redimentionnement ou une réduction de la fenêtre ... tout ce qui peut obliger le device graphique à s'occuper d'une autre application au détriment de la notre), à ce moment là, Xna passe à la méthode false. Seules les ressources en dehors du bloc conditionnel sont donc chargés : à ce stade les ressources ResourceManagementMode.Automatic ont déjà été rechargée automatiquement.Dans la même sens nous devons gérer nous même la libération de ces ressources dans la méthode UnloadGraphicsContent :

/// <summary>/// Unload your graphics content. If unloadAllContent is true, you should/// unload content from both ResourceManagementMode pools. Otherwise, just/// unload ResourceManagementMode.Manual content. Manual content will get/// Disposed by the GraphicsDevice during a Reset./// </summary>/// <param name="unloadAllContent">Which type of content to unload.</param>protected override void UnloadGraphicsContent(bool unloadAllContent){ if (unloadAllContent == true) { content.Unload(); } this._sampleMipmapAuto.Dispose(); this._sampleMipmapColor.Dispose(); this._sampleMipmapTexture.Dispose();

}

là encore à l'extérieur du bloc conditionnel.

Pour preuve déplacez les quatres instructions de la méthode de chargement dans le bloc if. Lancez le programme et agrandissez la fenêtre : vous obtiendez une belle erreur spécifiant que le programme essaye d'accéder à une texture supprimée. Et pour cause au redimentionnement de la fenêtre les textures sont perdues et sont donc libérée de la mémoire. Lorsque le programme reprend la main il essaye d'utiliser ces textures pour l'affichage et plante forcement.

L'application

Les touches de l'application sont les suivantes : la touche 'A' pour anisotope, 'L' pour linéaire, 'P' pour point, 'G' pour Gaussian, 'Q' pour Pyramidal, 'N' pour aucun. Si la touche Shift est appuyée en même temps, le filtre s'applique en magnification, sinon, en minification. Si la touche Alt est appuyée, le filtre s'applique au Mipmap. Les touches fléchées permettent de se déplacer dans le monde. Les touches Page Haut et Page Bas permettent de prendre de l'altitude et de redescendre. Enfin les touche + et - augmentent le paramètre MaxAnisotropy (voir plus haut). Les mêmes touches avec Shift appuyé modifient le LodBias (voir plus haut). La touche espace ajoute une grille qui permet de bien discerner les cases du terrain de jeu (en fait le terrain est affiché une deuxième fois en mode WireFrame). Enfin les touches F1, F2, F3 affichent respectivement les texture de couleur, sol, damier.

Au lancement de l'application, vous obtenez l'affichage suivant :

Magnifiquement ... rouge, et pour cause : le mipmap n'est pas activé (None). Dans ce cas, le programme n'utilise que le LOD 0 qui correspond à la texture 256*256 qui est rouge. Appuyez sut les touches Alt et A pou lancer le mipmapping avec le filtre anisotropique. L'écran se change en :

Les différentes strates que vous voyez là correspondent aux 6 textures de LOD que nous avons chargée. On remarque parfaitement que suivant la distance à la caméra, les différentes cases du terrain de jeu affichent une texture adaptée à leur taille à l'écran :

Maintenant en maintenant la touche Shift appuyée appuyez sur la touche + (Add). Ceci a pour conséquence d'augmenter le Bias et donc le passage au LOD suivant :

Shift avec la touche - (Substract) réduit au contraire le Bias et prolonge la vie du LOD 0 :

Le filtre mipmap que nous avons utilisé ici (Anisotropique) est sans doute le meilleur. Le passage d'un Lod à un autre se fait de manière progressive et douce. Prennez un chouïa d'altitude à l'aide de la touche Page Haut. Si vous affichez la grille à l'aide de la touche Espace vous rendrez compte que cette transition ne dépend absolument pas de la case mais bien de la distance du "point" dans l'espace qui recoit la texture à la caméra :

Pour comprendre la puissance du filtre anisotropique, changez le filtre en filtre Point en appuyant sur les touches Alt + P. L'affichage qui apparait alors est rédibitoire ... :

Passons à un autre type de texture, la texture sol. Appuyez sur la touche F2 et annulez tout mipmaping à l'aide de la combinaisons Alt + N. Vous obtenez l'affichage suivant :

Aucun mipmapping et aucun filtre en mignification donne un résultat plus que décevant. Améliorons tout cela : Ajoutez un mipmapping avec filtre point (combinaison Alt + P) :

L'affichage est meilleur mais comme le montrent les deux lignes rouges nous voyons parfaitement les lignes de transition entre un Lod et un autre (avec la texture de couleur c'est encore plus flagrant). Et pour cause : le filtre point pour le mipmapping est des plus simples : lorsqu'il y'a besoin de faire une transition vers un autre LOD il utilise directement les texels de la texture voulue sans essayer de rendre la transition progressive. Si vous vous déplacez à l'aide des touches fléchées vous remarquez encore mieux cette transition. Nous pouvons toujours appliquer un filtre lineaire en mignification (touche L) :

mieux, mais la transition est toujours visible... Si on applique maintenant un filtre linaire pour le mipmapping (Alt + L), le rendu est quasi parfait :

On parle dans le cas du mipmapping avec filtre linaire de "filtrage trilineaire". Ce filtrage effectue une moyenne progressive entre les texels des textures concernées par la transitions d'un LOD à un autre. Même si vous vous déplacez, vous ne verrez pas la transition d'un LOD à un autre. A noter que le filtre trilinaire ou le filtre anisotropique donnent pratiquement le même résultat dans la mesure où nous affichons des formes relativement "droites".

Revenez à un affichage sans filtre (touche N et shift N) et sans mipmapping (touche Alt + N). Affichez la texture Damier avec F3 :

On voit que l'affichage n'arrive absolument pas a gérer les lignes horizontales et verticales de la texture. Combien même vous affichez un filtre Linaire en mignification et magnification on garde un affichage desastreux.

mais si vous appliquez un filtre mipmapping en anisotropie l'affichage est parfait :

Nous en avons terminé avec le mipmapping. Un point très important pour la fluidité et la beauté de nos applications 3D. Continuez à vous familiariser avec cette application qui met parfaitement en évidence les filtres de mignification et magnification et les filtres de mipmapping.

Conclusion

Vous pouvez télécharger le sample, les deux moteurs et les exercices ici.

Retourner au sommaire des cours

~~</ en construction / under construction>~~

Les MipMaps

valentin — Fri, 12 Jan 2007 13:06:00 GMT

Les mipmaps permettent une amélioration flagrante de la qualité de rendu des textures en fonction de leur distance par rapport à la position de la caméra qui filme la scène. Prenons la place d’un programme de jeu qui veut afficher un mur. Ce dernier utilisera un cube avec une texture de mur. Etant très maniaque ce programmeur va utiliser une texture de grande qualité afin d’obtenir un mur réaliste. Certes pour une vue de près l’effet voulu sera réussit, mais imaginez le gâchis pour une vue de loin : non seulement Direct3D va tenter d’afficher la forme avec une texture importante, en réduisant sa taille arbitrairement le tout pour un rendu moyen. Quelle perte de performance et de qualité !

Il aurait mieux valu, lorsque la caméra s’éloigne faire en sorte que une texture deux fois moins grande soit utilisée. Moins grande certes mais réalisée par le programmeur ou selon les désires du programmeur !

Pourquoi créer ses propres textures alors les filtres pouvaient aisément réduire une image. Tout simplement parce que les filtres ne sont pas intelligents : ils réalisent leur tâche bêtement sans se soucier du contenu de la texture ni de l’information qu’elle véhicule. Faites ce test : ouvrez votre logiciel de dessin, créez une image avec un texte et réduisez le de 50% avec un filtre bilinéaire.

Vous obtenez quelque chose de la sorte :

Figure 1 — En bas 50% en bilinéaire

L’altération de l’information est flagrante ! Aucun filtre ne peut avoir une vue globale de la texture dans la mesure où ils travaillent au niveau des pixels. Dans le même sens aucun filtre ne peut quantifier l’information véhiculée par la texture et tenter de la sauvegarder au détriment des informations moins importantes.

L’homme, lui, le peut … A lui de créer les différentes textures correspondant à cette perte d’information. Il doit déterminer à partir de quel point le message de la texture devient illisible et créer une nouvelle texture adaptée qui continue à donner le message dans une nouvelle échelle. Au processus de mipmapping de substituer la texture originelle par la nouvelle texture plus petite quand cela devient nécessaire.

Figure 2 — La texture réduite à la main est plus lisible.

1 Présentation

L’ensemble des textures successivement réduites forme un Mipmap. MIP correspond à « Multi in parvo » en latin, c'est-à-dire « de nombreuse chose au même endroit ». Chaque texture de cet ensemble est un niveau de MIPmap ou LOD (Level Of Detail). Chaque niveau doit avoir pour hauteur et largeur la moitié de la hauteur et largeur du niveau précédent. Le dernier niveau a bien évidemment au moins un coté égal à 1. Sachant que la taille conseillée pour une texture est de 256 pixels il y’a donc au maximum 9 LOD (256 puis 128 puis 64, 32, 16, 8, 4, 2 et 1).

Le mipmapping est très utile dans la mesure ou il permet de préserver l’information dans le sens voulu par le développeur mais aussi en évitant à la carte graphique l'affichage de grosses textures lorsque ce n'est pas nécessaire.

Filtre trilinéaire et mipmapping

Les transitions entre les différents LOD sont souvent visibles lorsqu’on regarde au loin. Le processus de mipmapping est heureusement capable de filtrer deux niveaux de mipmap consécutif pour en calculer la moyenne de couleur. La transition devient pratiquement invisible. Il s’agit là du filtre bilinéaire, mais, dans la mesure où il porte sur une transition entre deux texture on parle de filtrage trilinéaire.

LOD bias[1]

Il arrive que pour la beauté du jeu il faille garder un LOD plus longtemps que prévu en retardant le passage à un LOD inférieur lorsque la caméra s’éloigne. C’est le LOD bias qui permet de réaliser cette opération. Si une surface s’éloigne de l’utilisateur, augmenter le LOD bias revient à retarder l’utilisation du LOD inférieur. Au contraire, en diminuant sa valeur, on passe plus rapidement aux LOD inférieurs.

2. Notre Sample

Pour mettre en évidence tout ce que nous venons d’apprendre, rien de tel qu’un bon exemple en 3D. Tout comme le code précédent, nous allons faire en sorte de pouvoir modifier toutes les propriétés liées au mipmapping par l’intermédiaire des touches F1 à F8. Un mipmap est un ensemble de texture dont la taille décroît. Il est nécessaire de créer cet ensemble. Pour cela les textures suivantes seront utilisées :

Figure 3—Textures de couleurs...

Il s’agit d’une série d’image en couleur dont la taille décroît. Les couleurs permettront d’aisément discerner les différents LOD lors des modifications effectuées par l’utilisateur dans le programme. De plus pour avoir une idée plus précise du rendu à l’écran, un autre mipmap sera utilisé, cette fois ci pas de couleur, mais un motif : un sol pavé.

Figure 4— …Textures de sol.

Pour l’affichage, un plan fixe formé de 25*25 cases sera dessiné à l’écran. De même , un petit moteur de déplacement à la manière des Quake like sera programmé dans le but de pouvoir déplacer la caméra et admirer les conséquences sur les modifications de LOD.

Prêt ? C’est parti !

3. Etude du code source

Le fichier principal commence par la déclaration de deux structures : une structure Vertex définissant les propriétés des vertex utilisés dans le programme, et une énumération nommée Filtres qui nous permettra de donner un nom aux filtres voulus par l’utilisateur dans le programme.

Vient ensuite la déclaration de 4 Textures :

/// <summary>

/// Texture pour le mipmapping

/// </summary>

Texture textureMipMappingCouleur;

/// <summary>

/// Texture pour le mipmapping

/// </summary>

Texture textureMipMappingSolContour;

/// <summary>

/// Texture pour le mipmapping

/// </summary>

Texture textureMipMappingSolPur;

/// <summary>

/// Texture pour le mipmapping actuellement utilisée

/// </summary>

Texture texture;

Ces textures sont en fait des mipmap. Elles posséderont différents LOD. En fait une texture simple est un mipmap avec un seul LOD : le niveau 0. Nous aurons un mipmap pour l’étude sur les textures colorisées, un mipmap pour l’étude sur des textures de sol avec contour, et encore un pour les textures de sol sans contour. La dernière texture est en fait le mipmap actuellement affiché par le programme. Il pointera sur l’un des trois mipmap précédemment énumérés.

Terminons les déclarations par différentes variables de sauvegarde des paramétrages de l’utilisateur dans sa découverte du mipmapping :

/// <summary>

/// Filtres de base, on commence en linéaire

/// </summary>

Filtres magFilterType = Filtres.Linear;

Filtres minFilterType = Filtres.Linear;

Filtres mipFilterType = Filtres.Linear;

/// <summary>

/// Niveau d'anisotropy

/// </summary>

int anisotropy = 1;

/// <summary>

/// Level de détail à utiliser

/// </summary>

float mipMapLodBias = 0.0f;

/// <summary>

/// Inidique qu'une mise à jour doit être faite

/// </summary>

bool mettreAJour = true;

Trois variables de type Filtre pour les filtres utilisés avec la magnification, minification et le mipmap. Le niveau de l’anisotropie, la valeur du LOD bias. Un booléen enfin pour déterminer si l’utilisateur a modifié quelque chose.

Ce sont ChargementTexturesEtMipMap() et ChargementTexturesMipMap() qui vont initialiser les mipmap.

La première se présente ainsi :

/// <summary>

/// Charge les mipmap couleur, sol contour, et sol pur

/// </summary>

public void ChargementTexturesEtMipMap()

{

this.textureMipMappingCouleur = CreateTexture( device, "base.bmp", Format.A8R8G8B8);

this.textureMipMappingSolContour = CreateTexture( device, "scbase.bmp", Format.A8R8G8B8);

this.textureMipMappingSolPur = CreateTexture( device, "sbase.bmp", Format.A8R8G8B8);

ChargementTexturesMipMap(textureMipMappingCouleur, "");

ChargementTexturesMipMap(textureMipMappingSolContour, "sc");

ChargementTexturesMipMap(textureMipMappingSolPur, "s");

this.texture = this.textureMipMappingCouleur;

}

Elle créé les trios textures vue précédemment avec base.bmp, scbase.bmp et sbase.bmp. Chaque texture dans le programme possède le même nom mais avec un préfixe différent :

Pas de préfixe pour les textures du mipmap colorisé
« sc » pour le mipmap sol avec contour
« s » pour le sol pur.

Ces trois initialisations ne servent qu’à créer la texture car en fait leur contenu sera effacé par les différents LOD du mipmap.

Les trois instructions suivantes chargent le mipmap de chacun d’entre elles :

ChargementTexturesMipMap(textureMipMappingCouleur, "");

ChargementTexturesMipMap(textureMipMappingSolContour, "sc");

ChargementTexturesMipMap(textureMipMappingSolPur, "s");

La méthode ChargementTextureMipMap créée dans notre programme accepte en paramètre, la texture a charger en mipmap et le préfixe des textures à charger.

La méthode se termine enfin en faisant pointer la propriété texture sur le mipmap qui sera affiché au démarrage.

Analysons ChargementTexturesMipMap :

/// <summary>

/// Chargement des textures mipmap

/// </summary>

public void ChargementTexturesMipMap(Texture mipmap, string préfixe)

{

Texture[] textures = new Texture;

// Charge nos 6 textures

textures[0] = CreateTexture( device, préfixe +"256.bmp", Format.A8R8G8B8);

textures[1] = CreateTexture( device, préfixe +"128.bmp", Format.A8R8G8B8);

textures[2] = CreateTexture( device, préfixe +"64.bmp", Format.A8R8G8B8);

textures[3] = CreateTexture( device, préfixe +"32.bmp", Format.A8R8G8B8);

textures[4] = CreateTexture( device, préfixe +"16.bmp", Format.A8R8G8B8);

textures[5] = CreateTexture( device, préfixe +"8.bmp", Format.A8R8G8B8);

//création des surfaces pour le copier/coller

Surface destination = null;

Surface source = null;

int i;

for( i = 0; i < 6; ++i )

{

//pointer sur la surface texture du LOD i

destination = texture.GetSurfaceLevel(i);

//pointer vers la surface de la texture i

source = textures.GetSurfaceLevel(0);

//charger dans destination la source, sans filtre

SurfaceLoader.FromSurface(destination, source, Filter.None, 0);

}

//Libérer les textures temporaires utilisées

for( i = 0; i < 6; ++i )

textures.Dispose();

}

La méthode commence par charger dans un tableau de 6 textures les six LOD du mipmap. Elle va ensuite, charger à chaque LOD du mipmap passé à la méthode les 6 textures chargées :

for( i = 0; i < 6; ++i )

{

//pointer sur la surface texture du LOD i

destination = mipmap.GetSurfaceLevel(i);

//pointer vers la surface de la texture i

source = textures.GetSurfaceLevel(0);

//charger dans destination la source, sans filtre

SurfaceLoader.FromSurface(destination, source, Filter.None, 0);

}

Pour les 6 itérations, on fait pointer destination sur le LOD du mipmap. On fait pointer source sur le LOD 0 de la texture de la case du tableau lu. Chaque texture de ce tableau n’est pas un mipmap et une seule texture, il n’y a donc qu’un LOD : celui du niveau 0. A l’aide de la méthode FromSurface de la classe utilitaire SurfaceLoader on place dans destination le contenu de source. Le tout sans filtrage et avec une clé de couleur de transparence noire (la valeur 0). En gros cette boucle chaque dans le mipmap a chacun des 6 LOD, les 6 textures chargées au départ.

Cette opération étant effectuée, on peut libérer la mémoire prise par le tableau.

La création de mipmap est une opération relativement facile (on perd plus de temps à créer les textures des LOD !). Pourquoi s’en passer quand on voit le gain de performances et de qualité visuelle ?

Remarque : Pour déterminer le nombre de level d’un mipmap utilisez la propriété LevelCount de cette manière :

int nombreLOD = mipmap.LevelCount;

Trois méthodes, travaillent sur le sampler. Elles se présentent comme ceci :

private void SetMagnificationFilter()

{

if( this.magFilterType == Filtres.None )

this.device.SetSamplerState(0, SamplerStageStates.MagFilter, (int)TextureFilter.None);

if( this.magFilterType == Filtres.Point )

this.device.SetSamplerState(0, SamplerStageStates.MagFilter, (int)TextureFilter.Point);

if( this.magFilterType == Filtres.Linear )

this.device.SetSamplerState(0, SamplerStageStates.MagFilter, (int)TextureFilter.Linear);

if( this.magFilterType == Filtres.Anisotropic )

this.device.SetSamplerState(0, SamplerStageStates.MagFilter, (int)TextureFilter.Anisotropic);

}

Il existe aussi 2 autres méthodes similaires SetMinificationFilter et SetMipMapFilter qui travaillent de la même manière.

Les modifications sont effectuées par le groupe d’instructions :

this.SetMinificationFilter();

this.SetMagnificationFilter();

this.SetMipMapFilter();

device.SetSamplerState(0, SamplerStageStates.MaxAnisotropy, anisotropy );

device.SetSamplerState(0, SamplerStageStates.MipMapLevelOfDetailBias, mipMapLodBias );

this.Text = "Minification = " + this.minFilterType + " | Magnification = " + this.magFilterType + " | MipMap = " + this.mipFilterType + " | MaxAnisotropy = " + anisotropy + "|LOD = " + mipMapLodBias;

Les trois appels de methodes vues précédemment, suivit par deux modifications du sampler pour mettre à jour l’anisotropie et le LOD bias.

La dernière instruction mets à jour le titre de la fenêtre pour pouvoir connaître l’état des filtres.

4. Touches de l’exécutable

Page Haut/Bas : Déplacement en hauteur.

Flèches gauche/droite : Tourner la tête.

Flèches haut/bas : avancer/reculer.

+/- : Regarder en haut/en bas

Touche numérique 1/2/3 : Mipmap colorisé/sol avec contour/sol pur.

F1 : modification du filtre de minification.

F2 : modification du filtre de magnification.

F3 : modification du filtre de mipmapping.

F4/F5 : modification du LOD bias.

F6/F7 : modification de la valeur de l’anisotropie.

5. Etude de l’exécutable

Le code du programme étant compris voyons ce qu’il peut nous apporter. Lancez le, l’écran au démarrage devrait être le suivant :

Figure 5—On remarque bien les plans translatés et le mipmapping

En se déplaçant en avant en arrière on remarque les ondes des LOD suivre et s’avancez ou reculer. De même en s’approchant du sol, les LOD avec les index les plus petit (dont les plus détaillés) apparaissent (notamment la texture rouge et bleu).

En hauteur, la touche F1 qui modifie le filtre de minification agit. Le filtre point effectue ainsi une opération de mauvaise qualité. La minification agit car en hauteur les différents plans du sol ont une taille inférieure à la taille de la texture. Au sol si la minification ne fait rien, au contraire la magnification agit. Même remarque : le filtre point dégrade l’affichage (dommage, c’est le plus rapide).

Figure 6—Point et Lineaire … le choix est aisé.

Jouons maintenant avec le mipmapping (touche F3). Si nous prenons le filtre None (qui desactive le mipmapping) évidemment le sol devient rouge : il n’y a plus qu’une texture dans le mipmap. Avec le filtre point, on obtient un affichage certes hideux, mais très intéressant dans la mesure où on détermine bien les différents LOD. On peut passer en mode sol pur pour discerner au mieux l’effet dans un jeu.

Figure 7—Le mipmapping en mode point est … à éviter.

Avec un filtre Linéaire ou Anisotropique les différences de LOD s’estompent. Jouons maintenant pour terminer avec le LOD bias. Il permet de retarder ou s’accélérer le passage à un autre LOD.

Figure 8 —LOD bias = 0

Figure 9—LOD bias = 1 : on est plus rapidement à des LOD moins détaillés

Figure 10—LOD bias = -3 : le LOD détaillé en face reste affiché à une distance plus élevé de la caméra.

Ce petit programme d’exemple devrait encore avoir éclaircit nombre de point difficiles à assimiler (notamment les filtres). Quelqu’un qui maîtrise bien les fonctionnalités de cet utilitaire pourra tenter de discerner les nuances des filtres plus seulement avec le mipmap colorisé.

Télécharger le Sample

Vous pouvez télécharger le sample ici.

[1] Bias peut être traduit par correction ou affinage ici..

Le multitexturing

valentin — Thu, 11 Jan 2007 14:05:00 GMT

Le multitexturing est le processus qui permet le mélange contrôlé de plusieurs textures sur une même surface 3D. Direct3D permet de mélanger jusqu’à huit étapes (ou étage/stage) correspondant à 8 textures superposées. Chacune correspond à un processus de texture blending qui détermine la couleur d’un pixel en mélangeant les couleurs de la texture de l’étape courante aux couleurs de l’étape précédente.

Quelque soit le stage sur lequel il s'effectue, le blend est une opération qui prend en entrée 8 paramètres :

Trois arguments pour le calcul de la couleur RGB.
Trois arguments pour le calcul de la composante Alpha,
Une opération pour calculer la couleur RGB
Une opération pour la composante alpha.

En résultat on obtient deux valeurs :

Une couleur RGB.
Une composante alpha (transparence).

Les arguments appartiennent à l’énumération TextureArgument, les opérations à TextureOperation. Ses membres les plus courants sont :

Subtract : Soustrait les données graphiques du second argument au premier argument.

SRGBA = Arg1 - Arg2

Lerp : Réalise une interpolation linéaire entre le second et le troisième argument suivant une proportion décrite dans le premier argument.

RGBA = (Arg1) * Arg2 + (1- Arg1) * Arg3.

MultiplyAdd : Réalise une multiplication de deux derniers arguments sur 3 trois donnés à laquelle on additionne le premier argument pour créer la sortie.

SRGBA = Arg1 + Arg2 *Arg3

DotProduct3 : Multiplie chaque composante RGB des deux arguments et les additionne entre eux.

SRGBA = (Arg1R * Arg2R + Arg1G * Arg2G + Arg1B * Arg2B)

BlendTextureAlpha : Réalise un mélange linéaire des composantes alpha de l’étage courant avec le résultat des étapes supérieures.

RGBA = Arg1 * (Alpha) + Arg2 * (1 - Alpha)

BlendDiffuseAlpha : Réalise un mélange linéaire entre l’étage supérieur et l’étage courant.

RGBA = Arg1 * (Alpha) + Arg2 * (1 - Alpha)

AddSmooth : Additionne les arguments 1 et 2 puis soustrait leur produit pour donner la sortie.

RGBA = Arg1 + Arg2 - Arg1 * Arg2

AddSigned2X : Additionne les texels des de l’étage supérieur avec l’étage courant pour la sortie avec une correction de 0.5 et un décalage de bits de 1 vers la gauche (multiplication par 2).

RGBA = (Arg1 + Arg2 - 0.5) << 1

AddSigned : Additionne les texels des de l’étage supérieur avec l’étage courant pour la sortie avec une correction de 0.5.

RGBA = Arg1 + Arg2 -0.5

Add : Additionne les texels des de l’étage supérieur avec l’étage courant pour la sortie. RGBA = Arg1 + Arg2

Modulate4X : Multiplie les texels des de l’étage supérieur avec l’étage courant puis décale les bits de 2 vers la gauche (provoquant une multiplication par 4) pour la sortie.

RGBA = (Arg1 * Arg2) << 2

Modulate2X : Multiplie les texels des de l’étage supérieur avec l’étage courant puis décale les bits de 1 vers la gauche (provoquant une multiplication par 2) pour la sortie.

RGBA = (Arg1 * Arg2) << 1

Modulate : Multiplie les texels des de l’étage supérieur avec l’étage courant pour créer la sortie. RGBA = Arg1 * Arg2

SelectArg2 : Prend en compte le second argument de l’étage courant portent sur la couleur ou la composante alpha pour créer la sortie. RGBA = Arg2

SelectArg1 : Prend en compte le premier argument de l’étage courant portent sur la couleur ou la composante alpha pour créer la sortie. RGBA = Arg1

Disable : Désactive la sortie de l'étage courant et de tous les étages d'un niveau supérieur. Pour désactivier le mapping de texture, il suffit de donner ce drapeau pour l’étage 0. Les opération sur la composante alpha ne peut être désactivée lorsque les opérations sur les couleurs sont activée.

Reportez vous à l’aide du SDK pour les autres membres non explicités ici. Les membres les plus courants de TextureOperation sont :

TextureColor : Contient les couleurs de l’étage courant.

Current : Renvoie l’élément de l’étage precedent (si un seul étage dans le multitexturing, l’argument est equivalent à Diffuse).

Diffuse : Pixels dont la valeur est obtenue via une interpolation bilinéaire des sommets de la primitive en gouraud.

Reportez vous à l’aide du SDK pour les autres membres non explicités ici. Les possibilités de calculs et de mélange sont donc infinies, la difficulté de comprend les possibilités des calculs est importante. Là encore, comme pour l’usage des filtres, on peut s’en sortir facilement au départ en tâtonnant jusqu’à obtenir l’effet souhaité. Avec le temps, les mécanismes suivront. Plutôt que de s’engager dans une pléthore d’exemples pour les mettre en valeur, j'ai développé un petit programme fort utile qui permet, via une interface Windows très simple de s’amuser en testant toutes les opérations avec tous les arguments possibles pour déterminer quel résultat cela pouvait avoir à l’écran.

Figure 1

Cerise sur le gâteau, notre programme donne le code source à mettre dans son programme pour avoir un multitexturing paramétré. C’est une copie, en C# d’un utilitaire présent dans les précédentes versions du SDK DirectX qui a été curieusement supprimé aujourd’hui. Le gain de temps que ce logiciel procurait au développeur était faramineux : avant, il fallait sans arrêt compiler son programme après avoir modifié une étape du multitexturing pour observer le résultat à l’écran. On perdait beaucoup de temps. Avec lui, un simple click suffit pour tester.

Le programme

Au lancement nous avons l’écran suivant :

Figure 2

Seules trois étages peuvent donc être paramétrées sur les 8 possibles. En fait 99% des multitexturing portent sur un nombre d’étages inférieur ou égal à 3. C’est donc bien suffisant.

On voit en faisant défiler le contenu du combo box ColorOP ou AlphaOP qu’il y’a 25 fonctions de mélange (énumération TextureOperation). Pour ces opérations de 1 à trois arguments doivent être fournis prenant une valeur parmi 10 choix possibles (TextureArgument). Tout ceci existe pour chaque étape du multitexturing. Les possibilités sont donc trop nombreuses pour pouvoir être toutes données dans ce tutorial. Nous ne verrons que quelques effets.

Pour reproduire l’effet lumineux d'un sport sur une texture, il faut charger en texture de stage 2 spolite.bmp du répertoire de l’exécutable et configurer le second stage comme ceci :

Figure 3— les texels blancs du spot se superposent aux texels du mur et les eclaircissent : le mur semble éclairé !

En cliquant sur le bouton « View code » on obtient :

public void SetTexturesStages(Microsoft.DirectX.Direct3D.Device device)

{

//texture stage : 0 Fichier image : env2.bmp

/////////////////////

device.TextureState[0].ColorOperation = TextureOperation.SelectArg1;

device.TextureState[0].ColorArgument1 = TextureArgument.TextureColor;

device.TextureState[0].AlphaOperation = TextureOperation.SelectArg1;

device.TextureState[0].AlphaArgument1 = TextureArgument.TextureColor;

device.TextureState[0].ResultArgument = TextureArgument.Current;

//texture stage : 1 Fichier image : spotlite.bmp

/////////////////////

device.TextureState[1].ColorOperation = TextureOperation.Modulate;

device.TextureState[1].ColorArgument1 = TextureArgument.TextureColor;

device.TextureState[1].ColorArgument2 = TextureArgument.Current;

device.TextureState[1].AlphaOperation = TextureOperation.Disable;

device.TextureState[1].ResultArgument = TextureArgument.Current;

//texture stage : 2 Fichier image : env3.bmp

/////////////////////

device.TextureState[2].ColorOperation = TextureOperation.Disable;

device.TextureState[2].AlphaOperation = TextureOperation.Disable;

}

Il s’agit du code généré par l’application pour créer le multitexturing, visible dans l’utilitaire, à l’intérieur de nos programmes. Nous spécifions l’étage pour lequel les arguments et opérations donnés sont destinés (ici donné sous la forme d’un index de tableau), l’opération (ColorOperation et AlphaOperation ) de type TextureOperation et les arguments liés de type TextureArgument (voir la figure 3).

Pour reproduire une case de monde de Warcraft avec une portion de terre et une portion d’herbe au dessus comme ceci :

Figure 4

On chargera en texture stage 2 :

Figure 5

Dans tous les cas pas d’inquiétudes face à toutes ses possibilités de calculs. Personne ne peut vraiment prétendre maîtriser toutes ces opérations ou les comprendre. Seul le temps peut permet de s’en sortir avec plus ou moins de facilité. Toujours se reporter aux exemples de code source trouvé sur Internet ou bien à l’utilitaire présenté ici pour trouver l’effet voulu.

Sample

Vous pouvez télécharger le Sample ici.

Conclusion

A bientôt sur ce Blog !

Valentin Billotte

Tutorial Managed DirectX/Direct3D : Les lumières

valentin — Wed, 10 Jan 2007 13:04:00 GMT

Les Lumières et les matériaux

Les lumières et les matériaux constituent les deux éléments principaux de tout jeu en 3D pour créer une ambiance. Sans eux, un jeu est morne, terne sans saveur. Ils sont la clé de voûte pour tout jeu misant particulièrement sur l’ambiance.

Figure 1 — Tomb Raider : Ici l’ambiance fait tout

Ce tutorial aborde tout ce qui tourne autour des lumières et des matériaux sous DirectX. Nous allons créer comme programme d’exemple un système astronomique avec comme source lumineuse le soleil, une comète, et un interrupteur pour allumer le tout ! Pour illustrer de manière plus complète les matériaux, un autre exemple (beaucoup plus simple) sera réalisé pour mettre en valeur les différent type de réflexion possible face à une source lumineuse.

1 Et la lumière fut …

Plusieurs types de lumières peuvent être créées sous DirectX pour créer un monde plus réaliste. Malheureusement toute effet lumineux créé par lui ne sera jamais aussi réaliste que celui du monde réel. Un lumière est soumise à plusieurs contraintes : l’atténuation avec la distance (une bougie ne peut être vue a 1 kilomètre), la réflexion, un objet illuminé peut être lui-même source d’illumination ‘regardez comme la lune éclaire la nuit). De même un objet qui réfléchit la lumière peut atténuation sa valeur avant de la renvoyer. Tous les objets que nous côtoyons ne renvoient pas la lumière de la même manière, un manteau de velours noir absorbera toute source lumineuse, une porcelaine blanche vernie, en renverra une grande partie. DirectX ne peut donc pas prendre tous ces paramètres en compte au risque de créer des applications d’une lenteur toute rédhibitoire mais il arrive toutefois, grâce à d’excellentes approximations à créer des univers lumineux tout à fait réalistes.

Jusqu’ici les programmes d’exemple ne géraient absolument pas la lumière et étaient parfaitement éclairés sous tous les angles. En fait avec l’instruction :

dev.RenderState.Lighting = false;

Dans les programmes précédents, tout élément de la scène était éclairé parfaitement, sans nuances dans les même proportions. Lorsque cette propriété vaut true, on demande à Direct3D de nous laisser la gestion du module d’illumination. On peut ainsi prendre la gestion ou refuser la gestion avant l’affichage de certains objets dans la méthode Render.

Remarque : Faite le test suivant : donnez true à cette instruction dans les programmes 3D précédent. Al’affichage tous les objets sont noirs : ne connaissant pas la gestion des lumières, nous n’avons créé aucune source lumineuse.

1.1 Qu’est ce qu’une lumière pour Direct3D ?

Une lumière pour Direct3D est un ensemble de propriétés que le programmeur peut modifier. Tous les types de lumières ne les utilisent pas forcément tous.

Position

Position dans l’espace de la source de lumière.

Direction

Direction vers laquelle la lumière est émise.

Portée (Range)

Distance maximum à partir de la source lumineuse que la lumière peut parcourir. Tout objet dont la distance à la source est supérieure à cette distance ne sera pas éclairé par la source.

Atténuation

Indique la variation de luminosité sur la distance. La lumière peut s’éteindre brusquement passé la distance Range ou bien diminuer progressivement, ou bien encore s’accentuer

Lumière diffuse

C’est la couleur principale émise par une lumière. La lumière diffuse est une lumière qui a été dispersée, mais elle a toujours une direction par opposition à la lumière ambiante qui n’en a pas.

Lumière ambiante

C'est la couleur de la lumière ambiante. La lumière ambiante est lumière générale de fond. La lumière ambiante a été tellement dispersée qu'elle n'a aucune direction ou source. Elle produit la même intensité lumineuse en tout point de la scène.

Lumière spéculaire

C'est la couleur de la lumière spéculaire qui est émise par la lumière. La lumière spéculaire est l'opposé de la lumière diffuse. La lumière spéculaire n'est pas dispersée du tout, vous peut employer la lumière spéculaire pour créer des points culminants sur vos objets.

Toutes ces caractéristiques peuvent être paramétrées via les propriétés d’un objet de type Light.

1.2 Quels types de lumières ?

Il y a quatre types de lumières qui peuvent être créée dans une scène. Chaque type utilise une partie des propriétés définies dans le point précédent.

Toutes les lumières ajoutent des frais généraux processeurs à votre application. La lumière ambiante est la plus simple à mettre en place, suivie des lumières directionnelles, puis les lumières ponctuelles et enfin les lumières spot.

Pensez à ceci quand vous décidez quelles lumières à employer dans votre application.

Lumière ambiante

Cette lumière n’a ni position ni direction. L’intensité qu’elle génère est constante en tout point de la scène.

dev.RenderState.Ambient = Color.Green;

Ici la lumière ambiante donnée est verte.

Lumière ponctuelle

Il s’agit là de la même source de lumière qu’une ampoule. Il y’a certes une source, l’ampoule, mais pas de direction : la lumière est émise dans tous les sens. Un exemple d'une lumière de point est une ampoule. Il a également les attributs de couleur, de gamme et d'atténuation qui peuvent être placés. Figue 7.1 ci-dessous, expositions comment la lumière est émise d'une lumière de point.

Une lumière ponctuelle se paramètre grâce à une position, une direction, une atténuation, une portée, une couleur et une couleur réfléchie.

Figure 2

Lumière Directionnelle

Les lumières directionnelles ont la direction et colorent mais ne disposent d’aucun source. Un peu comme la lumière du soleil (s’il n’y avait pas le soleil de visite). Grâce à ce type de lumière, tous les objets dans la scène reçoivent la lumière de la même direction. Les lumières directionnelles n'ont pas des attributs de gamme ou d'atténuation. Figue 7.2 ci-dessous, expositions comment la lumière est émise d'une lumière directionnelle.

Une lumière directionnelle se paramètre grâce à une direction, une couleur et une couleur réfléchie.

Figure 3

Spot / Projecteurs

Pas besoin de décrire cette lumière, son nom la définit. On voit dans la vie réel ce genre de source lumineuse sur les réverbères, ou les spots de théâtres qui, en haut d’une scène, éclairent l’acteur.

Les projecteurs se paramètrent grâce à une position, direction, couleur, couleur de réflexion, l'atténuation et portée. Pour un projecteur vous pouvez définir en plus un cône intérieur et externe par l’intermédiaire de deux angles. Una variable nommée FallOff indique alors avec quelle intensité la lumière va tendre de 0 depuis le bord du cône interne jusqu’au bord du cône externe. Le cône interne est la lumière puissante sans atténuations

L'angle du cône intérieur est connu comme thêta et l'angle du cône externe est connu comme phi.

Figure 17.4

2 Matériaux

L’utilisation d’une source de lumière n’a aucune raison d’être si le point qui se trouve illuminé sur un objet n’est pas doté de propriétés qui décrivent son comportement face à la lumière. Cet ensemble de propriété est nommé matériau (material).

2.1 Qu’est ce qu’un matériau?

Un matériau décrit comment la lumière est réfléchie sur objet (polygone). Vous pouvez indiquer la quantité de lumière réfléchie, faire briller l’objet ou le rendre mat ou encore donner une couleur.

Ces arrangements sont énumérés ci-dessous :

La réflexion diffuse

Quantité de lumière diffuse que l'objet réfléchira. C'est une valeur de couleur. Il est possible d’indiquer que l'objet réfléchira seulement la lumière diffuse du rouge. Ceci fera paraître l’objet en rouge.

La réflexion ambiante

Quantité de lumière ambiante que l'objet réfléchira. C'est une valeur de couleur qui permet d’indiquer que l'objet réfléchit ou non la lumière ambiante. Il est ainsi possible de cacher l’objet à moins qu'il reçoive un autre type de lumière telle que la lumière diffuse.

La réflexion spéculaire et sa puissance

Quantité de lumière spéculaire qui est réfléchie. Vous pouvez employer la réflexion et les puissances spéculaires pour créer les points spéculaires qui feront briller l'objet.

Émission

Possibilité de rendre un objet émetteur de lumière. Si l'objet semble émettre de la lumière il n’en émet pas réellement ; les autres objets dans la scène ne seront pas affectés par cet arrangement.

3 La Normale

La normale en un point est un vecteur de norme 1 dont les coordonnées quantifient son orientation dans l’espace 3D.Cette notion étonnante (orienter un point ?!) permet de calculer la capacité de ce point à absorber la lumière, suivant l’angle d’arrivée de celle-ci sur le point.

Etudions le schéma suivant :

Figure 5 —Une surface, un point, une normale, une lumière et un angle

L’angle a que fait le rayon lumineux L avec la normale N de cette surface permet de calculer l’intensité lumineux en ce point. L’intensité lumineuse décroît lorsque a croît.

Figure 6 —Modulation de l’intensité résultante suivant l’angle a.

C’est le même principe que lorsqu’on est face à un soleil couchant ou se levant : nos yeux peuvent le regarder sans protections. Au zénith, il veut mieux éviter.

4 Premier exemple : Lumière Spot, Directionnel et Point

Toutes les notions liées à la gestion de la lumière ayant été acquises un exemple s’impose pour mettre en application sous DirectX ce que nous venons d’apprendre.

4.1 Quid exemplum ?

Quel meilleur exemple pour parler de lumière que de recréer une partie du système solaire?

Les cinq premières planètes et la lune (mercure, vénus, terre, mars, jupiter) ainsi que le soleil.

Nous ferons partir une lumière directionnelle et/ou lumière point du soleil pour comparer. Un spot sortira de la terre pour éclairer toutes planètes se trouvant à proximité.

Bien entendu, comme d’habitude, plusieurs touches clavier permettront de modifier divers paramètres dans le jeu.

Ouvrez le programme d’exemple intitulé « Direct3D Lumières ». Au lancement du programme nous avons l’écran suivant :

Figure 7 —Vers l’infini et au dela !

Rien qu’à voir cet écran, on comprend mieux le terme « ambiance » employé dans l’introduction de ce chapitre. On se croirait presque dans l’espace ! Il ne manque plus que les étoiles (nous verrons cela avec les particules à la fin de cet ouvrage).

Une terre et 4 autres planètes apparaissent gravitant autour du soleil. Une lune peut être aperçue autour de la terre.

Toutes les planètes sont éclairées par le soleil. Seule une partie de leur surface est donc éclairée (tout comme la lune).

Remarque : Le programme ne respecte pas scrupuleusement les dimensions et distances réelles. Que les puristes pardonnent cet exemple modifié pour simplifier la vue. Une simple visite sur les nombreux sites astrologie permettra de corriger le programme. [1]. Néanmoins il respect les degrés d’obliquité, les temps de révolution et les temps de rotations.

Le programme fonctionnera principalement sur les matrices et les calculs qui en découlent. Chaque rotation autour d’un axe de planète, chaque rotation autour d’une planète, chaque translation, obliquité, demandera une matrice et un calcul ceci multiplié par le nombre de matrices.

Dans les nouveautés nous aurons ici :

· Une gestion de lumières.

· Une gestion de matériaux.

· Une nouvelle classe pour la forme 3D sphérique

· La classe cube modifié pour pouvoir être associée à un matériau.

4.2 Les matrices pour mettre en mouvement

Avant de regarder comment les lumières sont gérées, il nous faut commencer par la gestion des objets graphiques.

Il existe dans le code source plus d’une trentaine de matrices. Nous étudierons seulement celles qui donnent un mouvement à la terre. La gestion des matrices a été simplifiée au maximum pour rendre le programme simple à lire (que les puristes me pardonnent :) ).

La déclaration se fait en tout début de fichier :

Matrix matriceTerre, matriceDéplacementTerre, matriceTerrePivot, matriceRotationTerreAutourDeSonAxe, matriceRotationTerreAutourSoleil, matriceTerreNuages;

La matrice nommée matriceTerre est la résultante de tous les calculs à effectuer pour donner un mouvement réaliste à notre planète. Les matrices suivantes servent à calculer (dans l’ordre) : la distance de la terre par rapport au soleil, l’ubiquité de la terre (elle penche), la rotation de la terre autour de son axe, la révolution qu’elle effectue autour du soleil et, enfin une matrice pour la masse nuageuse qui entoure la planète.

Les calculs sont réalisés très simplement dans SetupMatrice :

//Calculs de différentes échelles de temps

float tempsJour = -this.vitesseTemps;

float tempsAnnée = tempsJour * 365.0f;

float tempsMois = tempsAnnée / 12.0f;

//////////////////////////////////////////////////////////

//mise en place des matrices de transformation pour la terre

matriceRotationTerreAutourDeSonAxe = Matrix.RotationY(Environment.TickCount/tempsJour);//une rotation par jour

matriceRotationTerreAutourSoleil = Matrix.RotationY(Environment.TickCount/tempsAnnée);//365 rotation par an

matriceDéplacementTerre = Matrix.Translation(20.0f,0.0f,0.0f);//km de distance du soleil

matriceTerrePivot = Matrix.RotationYawPitchRoll(0.0f,0.0f, 23.44f* (float)Math.PI/180);//obliquité de l'axe de rotation

matriceTerre = Matrix.Scaling(1f, 1f, 1f)*matriceRotationTerreAutourDeSonAxe*matriceTerrePivot;//création d'une seule matrice pour tous ces calculs

matriceTerre *= matriceDéplacementTerre;

matriceTerre *= matriceRotationTerreAutourSoleil;

Pour plus de clarté nous allons énumérer instruction par instruction ce qui est fait :

Les trois premières sauvegarde pour une utilisation ultérieure des temps précis sur lesquels se baseront les calculs futurs.

Le premier calcul de matrice réalise une rotation d’une durée d’un jour (rotation autour de l’axe de la terre). Le second calcul effectue ue autre rotation mais pour le temps d’une année. Une translation de 20 en abscisse par rapport à l’origine est effectuée. L’ubiquité est sauvegardée dans une nouvelle matrice. Nous avons à ce stade 4 matrices initialisées décrivant chacune un mouvement précis de la terre. La dernère matrice nommée matriceTerre va être calculée à partir d’elles. Un scalling est réalisé : la taille de la terre fait 1 en standard ici multiplié par la rotation autour de son axe et l’ubiquité. Le résultat est multiplié dans l’instruction suivante par la distance au soleil et enfin dernière phase, prise en compte de la rotation de la terre.

Remarque : on voit bien ici que l’ordre des multiplications de matricesdoit être scrupuleusement respecté : si nous avions fait une translation de matriceDéplacementTerre après la dernière rotation au lieu d’avant, nous aurions eu une terre qui tournerai plus vite que la normale sur elle-même et qui n’effectuerait pas de révolution autour du soleil. Dans ce code par contre, la seconde rotation est effectuée après la translation, c’est donc un cercle d’une distance de 20 que la terre parcours !

Chaque matrice finale de chaque planète, satellite ou enveloppe nuageuse est affectée à la matrice World avant l’affichage de la forme correspondante dans Render :

//afficher la terre

device.Transform.World = matriceTerre;

this.sphereTerre.Render(device);

4.3 Gérer les matériaux

Autre étape importante : la gestion des matériaux. Pour une bonne luminosité, donner une matériau à sa forme éclairée est une bonne chose ! Leur gestion est enfantine. Nous avons une classe Cube et Sphere qui acceptent un materiau en entrée dans le contructeur :

ColorValue rgbaDiffuse = new ColorValue(0, 0, 0, 0);

ColorValue rgbaAmbient = new ColorValue(0, 0, 0, 0);

ColorValue rgbaSpecular = new ColorValue(0, 0, 0, 0);

ColorValue rgbaEmissive = new ColorValue(0,0, 0, 0);

this.DéfinirMaterial(rgbaDiffuse, rgbaAmbient, rgbaSpecular, rgbaEmissive, 200);

DéfinirMaterial se présente ainsi dans Cube et Sphere :

public void DéfinirMaterial(Color rgbaDiffuse, Color rgbaAmbient, Color rgbaSpecular, Color rgbaEmissive, float rPower)

{

this.material.Diffuse = rgbaDiffuse;

this.material.Ambient = rgbaAmbient;

this.material.Specular = rgbaSpecular;

this.material.SpecularSharpness = rPower;

this.material.Emissive = rgbaEmissive;

}

Rien de compliqué si on a lu le point 17.2 de ce chapitre.

4.4 Créer des normales

Avant dernière étape avant les lumières, la gestion des normales permet de rendre visible un objet. Ajouter une normale à une surface / vertex est une opération compliquée si l’on souhaite créer un vecteur spécial. Dans le cas contraire, c’est une opération simple.

Il faut d’abord modifier le format de vertices pour ajouter les normales :

public struct SphereVertex

{

public float X, Y, Z;

public float Nx, Ny, Nz;

public int Couleur;

public float tu, tv;

public const VertexFormats Format = VertexFormats.Position | VertexFormats.Normal | VertexFormats.Diffuse | VertexFormats.Texture1;

};

Les trois flottants ajoutés (Nx, Ny, Nz) définit par le drapeau VertexFormats.Normal spécifient un format de vertices acceptant un vecteur normal.

L’initialisation se fait dans la méthode qui rempli de vertex buffer (OnCreateVertexBuffer) dans la classe Cube ou Sphere:

Vector3 vNormal;

vNormal.X = x0;

vNormal.Y = y0;

vNormal.Z = z0;

vNormal = Vector3.Normalize(vNormal);

C’est la méthode Normalize de Vector3 qui créé une normale dans le point donné de coordonnées (x0, y0, z0).

4.5 Gérer les lumières

Tout est maintenant prêt pour la gestion des lumières !

La première étape est de supprimer la lumière artificielle qui éclaire toute la scène.

Deux aspects graphiques sont aussi ajoutés via render stage :

dev.RenderState.Lighting = true;

Suit alors, dans Render la création des lumières.

if (this.typeLumière == TypeLumière.Directionnelle)

{

this.device.Lights[0].Diffuse= Color.FromArgb(255,255, 255);

this.device.Lights[0].Type =LightType.Directional;

this.device.Lights[0].Direction = Vector3.TransformCoordinate(Vector3.Empty, Matrix.Translation(15.0f,0.0f,0.0f)*matriceRotationTerreAutourSoleil);

}

else if (this.typeLumière == TypeLumière.Ponctuelle)

{

this.device.Lights[0].Diffuse= Color.FromArgb(255,255, 255);

this.device.Lights[0].Type =LightType.Point;

this.device.Lights[0].Range = this.portéeLumière;

}

else

{

this.device.Lights[0].Diffuse= Color.FromArgb(255,0, 0);

this.device.Lights[0].Type =LightType.Spot;

this.device.Lights[0].Direction = Vector3.TransformCoordinate(Vector3.Empty, Matrix.Translation(15.0f,0.0f,0.0f)*matriceRotationTerreAutourSoleil);

this.device.Lights[0].Falloff = 0.0f;

this.device.Lights[0].InnerConeAngle = 0.025f*tailleCone;

this.device.Lights[0].OuterConeAngle = 0.05f*tailleCone;

}

this.device.Lights[0].Position = Vector3.Empty;

this.device.Lights[0].Attenuation0 = 1.0f;

this.device.Lights[0].Attenuation1 = 0.0f;

this.device.Lights[0].Attenuation2 = 0.0f;

this.device.Lights[0].Enabled = true;

Généralement la création de lumière se fait une fois, mais dans notre cas elle peut avoir à être mise à jour à chaque nouvelle frame, son emplacement dans Render se trouve donc nécessaire.

TypeLumière est une énumération que nous avons créé nous même pour définir le choix de l’utilisateur quand à l’éclairement de la scène.

Lights est un tableau de Light appartenant à l’objet device dont la taille est infinie. Nous utilisons ici l’index 0 mais nous aurions pu utiliser 400. Null besoin d’initialiser un objet Light. Il faut juste valider la lumière paramétrée avec un Enable = true comme pour la dernière instruction. Il est possible dans le programme d’utiliser trois types de lumière : directionnel, ponctuel et Spot. Ponctuel est la lumière standard du soleil qui éclaire dans toutes les directions à partir d’un point source. Directionnel va au contraire donner un sens à la lumière : la droite passant par l’origine et par le centre de la terre. Toutes les planètes dans ce cas se verront éclairée dans le sens soleil-terre. Enfin Spot va diriger la lumière vers une planète prise (ici la terre). L’utilisateur pourra chaner la taille du cone du Spot pour n’éclairer qu’une partie de la terre, toute la terre ou une vaste zone de l’espace. Un if else est donc obligatoire pour paramétrer différemment ces trois lumières. Pour la directionnel une direction est donnée :

Matrix.Translation(15.0f,0.0f,0.0f)*matriceRotationTerreAutourSoleil

C’est à dire la position de la terre, L’expression :

Vector3.Empty

est le vecteur origine (0, 0, 0). Vector.TransformCoordinate transforme un vecteur dans l’espace en se basant sur le calcul matriciel passé en second argument.

Dans le else suivant, point de direction mais une portée pour la lumière directionnelle : définie par l’utilisateur à l’aide du clavier.

Enfin le dernier else pour le Spot définit le fallOff, l’innerCone, l’outerCone[2].

Suit un paramétrage commun pour la position et l’atténuation. Les trois valeurs d’atténuation présentes ici (0, 1 et 2) sont des facteurs différents pour une atténuation :

Attenuation0	Facteur d’atténuation linéaire.
Attenuation1	Facteur d’atténuation au carré.
Attenuation2	Facteur d’atténuation Exponentiel.

La propriété Enable active la lumière.

4.6 La ou la lumière n’éclaire rien …

Bien des points dans cet exemple peuvent sembler encore obscurs. Voyons les en détails.

Effet sur les planètes?

Deux beaux effets viennent couronner ce programme d’aide. La terre est entourée d’une atmosphère, le soleil semble se consumer. Ces deux effets sont réalisés à l’aide de l’alphablending[3].

La terre est entourée d’une sphere légèrement plus grosse qu’elle sur laquelle est plaquée la texture suivante :

Lorsque la forme sphérique est affichée avec le blending suivant :

this.device.RenderState.AlphaBlendEnable = true;

this.device.RenderState.SourceBlend = Blend.SourceAlpha;

this.device.RenderState.DestinationBlend = Blend.One;

Le noir ajouté aux couleurs de la terre disparaît et le blanc efface les couleurs de la terre, les couleurs se marient donc parfaitement

La même opération est réalisée pour le soleil, mais avec deux sphères. L’opération de blending est légèrement différente.

this.device.RenderState.AlphaBlendEnable = true;

this.device.RenderState.DestinationBlend = Blend.DestinationColor;

this.device.RenderState.SourceBlend = Blend.SourceColor;

Ombres?

Les rayons de Direct3D sont tellement puissants qu’ils traversent les objets ! Trève de plaisanterie, le module d’illumination traite les points qu’on lui adresse sans jamais se référer aux formes auxquels ils appartiennent. Si une forme est cachée derrière une forme éclairée, elle sera elle aussi éclairée. La gestion des ombres incombe donc au programmeur …

La lune peut être ainsi vue éclairée lorsqu’elle se trouve derrière la terre

Figure 17.8 —Vieux dicton : Lune éclairée à la novembre, terre transparente !

De même on peut d’apercevoir que la terre dans sa partie sombre est visible parceque les nuages de son atmosphère ne sont pas cachées :

Figure 17.9

L’alpha blending donne pour pixels colorés en sortie le résultat d’une opération qui prend en compte les texels de la texture de la sphère de nuage et ceux de la surface de la sphère terre. Dans la mesure où la sphère terre est noire car non touchée par la lumière, et que la couleur noire est l’élément neutre dans le blending exécuté ici, on obtient la restitution parfaite de la texture nuage… Dommage mais facilement réparable. « Tatillonnez » vous trouverez.

Fil de fer ?

Le mode fil permet l’affichage d’une forme 3D sous la forme d’un grillage complexe. Afficher les modèles dans ce mode est simple et ne demande qu’une instruction :

this.device.RenderState.FillMode = FillMode.WireFrame;

L’instruction permettant un affichage classique étant

this.device.RenderState.FillMode = FillMode.Solid;

Dither ?

Méthode pour afficher des données graphiques avec une palette de couleurs limitée. Chaque Pixel de l'image source est étalé (habituellement une zone de 2x2) sur l'image de destination.

A distance, l'oeil mélange les pixels dans une couleur qui offre plus de nuances que la palette originale. La technique a comme conséquence un meilleur aspect visuel que la suppression arbitraire de pixels.

Pour l’activer :

dev.RenderState.DitherEnable = true;

4.7 Touches de l’exécutable

Page Haut/Bas : Déplacement en hauteur.

Flèches haut/bas : avancer/reculer.

+/- : Vitesse temporelle du système

F1 : Modification de la couleur de fond.

F2 : Annuler/ajouter les lumières.

F3 : Prendre place sur la lune pour observer la terre.

F4/F5 : affichage en fil de fer ou en mode solide.

F6 : Une lumière directionnelle dans le sens soleil/terre ou lumière ponctuelle avec pour centre le soleil

F7/F8 : Modifier le matériau de la terre (lumière spéculaire ou non)

F9/F10 : augmenter la portée de la lumière ou la diminuer de 1 (si lumière ponctuelle)

F11/F12 : diminuer ou augmenter la taille du cône de la lumière en mode Spot

5 Second exemple : Matériaux

Dernier exemple du chapitre portant sur les matériaux. Le programme sur les matrices faisant tournoyer des cubes va être repris. Une lumière ponctuelle sera utilisée pour les éclairer. L’aspect intéressant résidera dans le fait que chaque cube aura un matériau propre qui lui donnera un aspect différent face à une source de lumière :

Le code source de cet exemple (intitulé Direct3D Lumières (2) ) s’avère fort simple. Quatre sphères créées avec une forme rudimentaire, 4 calculs de matrices pour les faire tournoyer, une lumière ponctuelle créée et, enfin 3 matériaux ajoutés au trois premières sphères.

La première sphère à gauche sera mat et renverra une lumière douce.

sphere1.material.Diffuse = Color.FromArgb(255, 128, 64, 255);

Seule la couleur diffuse est donc précisée.

La troisième sphère à droite sera brillante.

sphere2.material.Diffuse = Color.FromArgb(0, 255, 255, 0);

sphere2.material.Ambient = Color.FromArgb(128, 255, 128, 255);

sphere2.material.Specular = Color.FromArgb(128, 255, 128, 255);

Une lumière diffuse évidemment mais aussi une lumière ambiante (réfléchie) et une lumière spéculaire (brillante).

La troisième sphère en haut sera réfractant et semblera être une source lumineuse en renvoyant une vive lumière.

sphere3.material.Diffuse = Color.FromArgb(128, 128, 128, 255);

sphere3.material.Ambient = Color.FromArgb(255, 255, 255, 255);

sphere3.material.Emissive = Color.FromArgb(24, 24, 24, 255);

sphere3.material.Specular = Color.FromArgb(255, 255, 255, 255);

Ici une lumière spéculaire est définie pour rendre l’objet lumineux.

La dernière sphère enfin sera éclairée complètement afin de pouvoir faire une comparaison.

6 Conclusion

Les deux exemples de ce tutorial l’ont bien montré : les lumières sont une composante primordiale de tout jeu. Elles interviennent principalement dans l’ambiance du jeu mais aussi dans son réalisme au même titre que les textures. Leur utilisation étant triviale rien ne saurait empêcher quiconque de les utiliser dans ses productions ! Dans tous les cas toujours bien étudier le sens même de tous les objets créés dans une scène afin de leur octroyer un matériau propre à sa finalité.

Vous pouvez télécharger les samples ici.

[1] Notamment le site http://www.ens-lyon.fr/Planet-Terre/Infosciences/Planetologie/Description/Articles/planetcompar.html.

[2] Voir la figure 4 pour comprendre l’utilité de ces 3 paramètres.

[3] Voir le post ...

Chargement asynchrone d'objets 3D

valentin — Tue, 26 Dec 2006 05:52:00 GMT

La classe Mesh et la classe ProgressiveMesh de Direct3D (D3DX pour être précis) sont d'une très grande utilité lorsqu'il s'agit de réaliser un sample pour le DSK DirectX browser ou pour réaliser soit même des tests… mais dès qu'il s'agit de développer un moteur ou d'exploiter à outrance les performances de sa machine, ces deux classes sont à proscrire :

Elles sont lentes à charger,même en lisant des .x binaires. Mesh offre de nombreuses fonctionnalités qui demandent un chargement avec plus de traitement.
Elles ne permettent pas un chargement à deux temps. Par chargement en deux temps j'entend pouvoir, à la manière du développement Winform, placer en asychrone tout traitements compatibles, et réduire au maximum les traitements synchrones de chargement.

En quoi ceci est il réellement handicapant ?

Je vais donner un exemple simple : dans le moteur que je développe en Managed DirectX 1.1/.Net 2.0 j'ai jusqu'à 1400 meshs affichés par frames. Utiliser la classe Mesh m'empêche de pouvoir charger un Mesh en mémoire lorsque j'ai besoin de l'afficher tout simplement parce que je vais "freezer" le jeu le temps du chargement. En effet je ne peux pas effectuer avec cette classe un chargement asynchrone (utiliser un device 3D en dehors du thread dans lequel le device a été créé est source d'instabilité). Si je n'avais que ponctuellement un Mesh à afficher cette technique serait passable (dans le cas de petits meshs toutefois) mais dans mon moteur je charge les meshs quelques instants avant qu'ils apparaissent à la camera. Dans ce cas, charger en synchrone provoquerai des court laps de freeze pour chaque meshs chargés rendant le jeu injouable.

Mon moteur charge les objets 3D en asynchrones : transparent pour l'utilisateur, léger pour la mémoire, rapide pour le GPU.

La solution passe par un chargement en deux étapes :

Tout d'abord la lecture du fichier avec extraction des données.
Puis le chargement des buffers utilisé pour l'affichage.

Si la seconde partie est très rapide, la première est relativement lente. L'astuce consiste à effectuer cette première partie en asynchrone et la seconde partie entre deux frames (c'est à dire en dehors du triplet Begin/End/Present).

C'est là ou la classe Mesh et ProgressiveMesh nous sont inutiles. Nous devons réaliser des custom classes possédant deux méthodes : Initialize qui sera appelée à partir d'un thread asynchrone au thread d'affichage principal et Load(Device) appelée dans le thread principal.

Initialize va lire le fichier ou le flux de données et extraire (je simplifie) deux listes : l'une pour les vertices, l'autre pour les indices.

Voici un exemple de ce que pourrait être la méthode Initialize d'une classe générant un terrain de jeu :

private void Initialize()

{

// All the vertices are stored in a 1D array

_vertices = new TerrainTexturedVertex[Region.NumberOfVertices];

int vertexIndex = 0;

// Load vertices into the buffer one by one

for (int z = 0; z < Region.NumberOfQuadsOnZAxis + 1; z++)

{

for (int x = 0; x < Region.NumberOfQuadsOnXAxis + 1; x++)

{

TerrainTexturedVertex vertex = new TerrainTexturedVertex();

vertex.X = myValueX;

vertex.Z = myValueZ;

vertex.Y = myValueY;

vertex.Tu = x * (1f / (float)Region.NumberOfQuadsOnXAxis);

vertex.Tv = z * (1f / (float)Region.NumberOfQuadsOnZAxis);

_vertices[vertexIndex] = vertex;

vertexIndex++;

}

this.ComputeNormals();

}

Tout ce que fait cette méthode se résume à la "construction" d'un tableau de vertices sans aucune référence au device. Il ne s'agit donc qu'une suite répétée de bêtes instructions d'affectation. Aucun difficulté à threader cela.

Load va elle créer un VertexBuffer et un IndexBuffer (encore une fois en simplifiant) et va utiliser la méthode SetData de chacun pour leur affecter les listes précédemment chargée.

Voici encore une fois un exemple de ce que pourrait être cette méthode pour notre terrain de jeu :

private void LoadVertexBuffer()

{

// This is the buffer we are going to store the vertices in

this._vertexBuffer = new VertexBuffer(

typeof(TerrainTexturedVertex),

Region.NumberOfVertices,

this._device,

Usage.WriteOnly,

TerrainTexturedVertex.Format,

Pool.Managed);

// finally assign the vertices array to the buffer

this.VertexBuffer.SetData(_vertices, 0, LockFlags.None);

}

Ici nous créons un VertexBuffer, puis, nous le chargeons à l'aide du tableau préalablement rempli par Initialize. Cette méthode est appelée avant l'appel à BeginScene (jamais de traitements entre Begin et EndScene !!).

Sample :

Le sample se trouve ici.

Le programme donné en exemple permet de comparer un chargement synchrone d'un chargement asynchrone.

C'est un programme très sale pour l'heure que j'ai fait en qq minutes a partir d'un sample du SDK DirectX :). Je vous prie de m'excuser pour le code ...

Le lancement de l'application est instanné. Le premier terrain généré est chargé en arrière plan :

Lorsque le terrain est chargé, vous avez deux choix :

soit en asynchrone (cochez la case), soit en synchrone (décochez). L'asynchrone est legerement plus lent, mais permet à l'utilisateur de continuer à travailler sur l'application pendant qu'un nouveau terrain se construit en arrière plan.

Pour ce sample j'utlise un BackgroundWorker. A l'intérieur de la méthode DoWork (asynchrone) j'appelle la méthode Initialize qui va créer les atitudes en tous points du terrain, créer tous les vertices du terrain, créer la liste des indices. Lorsque le worker rend la main via l'event RunCompleted, j'indique qu'un nouveau VertexBuffer et un nouveau IndexBuffer peuvent être chargés (ce qui est fait au OnFrameMove suivant). Dans le cas d'un mode synchrone j'appelle directement Initialize sur le thread principal.

Il s'agit ici d'un sample avec un code alourdit pour mettre en évidence l'avantage de l'asynchrone pour liberer le CPU/GPU. Couplé à un système de message (du type ReadMessage de l'API Win32) on obtient un système réellement puissant (nous verrons celà dans un futur post).

Le sample est téléchargeable ici.

Conclusion

Le résultat au final ne souffre de pratiquement aucune perte de FPS.

Cette technique permet aussi d'éviter à l'utilisateur un chargement d'application "inquiétant". Souvent les samples qui demandent la création d'un grand nombre d'objets 3D freezent durant de longues secondes, le temps que cette opération se fasse.

En utilisant cette technique, nous pouvons afficher une barre de progression le temps de charger au départ tous les objets via leur méthode Initialize puis au moment de la création du device d'appeler leur methode Load. Nous aurons un freeze dont le temps correspondra au nombre de méthodes Load appelées et au traitement que celles-ci effectuent, c'est à dire un temps relativement insignifiant.

En outre :

Cette technique est aussi applicable au chargement de texture.

Cette technique permet une adaptation simplifiée à d'autre technologies multimédia puisque seule la méthode Load doit être modifiée (qui a dit XNA ? :) ).

Cette technique peut être couplée avec l'utilisation d'un système de caching pour limiter au maximum les instances de vos objets 3D pour encore plus de flexibilité et de rapidité (le caching sera traité dans un futur post).

A bientôt sur ce Blog !

Valentin Billotte