Graphic Stream : Blend

Annexe : Billboard en Xna

valentin — Fri, 09 Mar 2007 15:17:00 GMT

Le billboard est un élément essentiel pour décharger le GPU de l'affichages de formes complexes.

Un billboard (en français "panneau") est un plan simulant un objet 3D. Le principe des billboards est de toujours faire face à la caméra : ainsi quelque soit l'endroit d'où on les regarde, ils donneront toujours l'illusion que l'image qui les texture est une forme 3D.

L'avantage est de réduire énormément la complexité de la scène, puisque l'on va pouvoir remplacer des objets potentiellement complexes par deux simples triangles texturés formant le carré (ou plan). La texture bien entendu doit être de qualité et si possible faire partie d'une animation.

Les billboards sont utilisés pour la végétation, les explosions, les effets météorologique (nuages, ...), ou encore des objets très lointains pour lesquels on ne pourra que très difficilement déceler le trucage.

Jusqu'à présent avec DirectX pour créer un billboard on devait travailler sur la matrice de vue ou créer de toute pièce une matrice de transformation à partir de la position de la caméra. En Xna tout est plus simple, il nous suffit d'appeller une méthode statique de la classe Matrix nommée CreateBillboard.

Nous verrons trois samples pour mettre en évidence l'utilité de cette technique.Un sample de présentation qui va montrer de manière explicite le billboard en action, un sample qui mettra en évidence l'effet réaliste que produit le billboarding (nous repredrons un sample du SDK Direct) et enfin un sample identique au précédent mais avec des animations.

Vous devez avoir lu les tutoriaux Xna jusqu'au chapitre 8 pour comprendre ce cours.

Les billboards utilisés ici exploitent la méthode CreateBillboard de la classe Matrix et n'utilisent en rien les fichiers effets.

Premier sample

Dans ce premier sample nous allons afficher deux objets : un cube tout d'abord dont la taille sera augmentée de telle sorte que la camera se trouvera à l'intérieur. Ses parois serviront alors de référence lorsque nous déplacerons la caméra à l'aide de la souris. Ensuite un objet billboard. Il s'agira tout simplement d'une face carrée composée de deux triangles. En "marche" normale, ce billboard sera desactivé et tournera de manière solidaire avec le cube lorsque la caméra sera déplacée. Mais lorsqu'on appuyera sur la touche "Espace", le billboard présentera toujours sa face texturée à la caméra, et ceci, quelque soit la position de cette dernière.

La classe Billboard

Sur le plan technique 3D notre classe sera relativement simple. Elle n'aura pour tâche que d'afficher un simple plan 3D composé de deux triangles isocèles rectangles. Le plan sera texturé et de couleur paramétrable. La classe disposera d'une méthode Update permettant au billboard de se repositionner par rapport à la position de la caméra, par rapport au point vers lequel la caméra regarde et enfin par rapport à la normale de la caméra. Enfin une propriété sera ajoutée -pour les besoins de l'exemple- permettant d'activer ou de desactiver le billboard. Terminons en ajoutant qu'elle hérite de la classe mère TransformBase qui a été présentée ici.

Analysons son code :

/// <summary>
/// <para>Defines a billboard object.</para>
/// </summary>
/// <remarks>A billboard object always present its face in front of the camera.</remarks>
public class Billboard : TransformBase
{
    private GraphicsDevice _device;
    private VertexBuffer _vertexBuffer = null;
    private Color _color = Color.TransparentWhite;
    private Texture2D _texture;
    private BasicEffect _effect;
    private bool _activated;    private Matrix _billboardMatrix = Matrix.Identity;      /// <summary>    /// <para>Gets or sets a value indicating if the biilboard is activated.</para>    /// </summary>    public bool Activated    {        get        {            return this._activated;        }        set        {            this._activated = value;        }    }     /// <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;        }    }      /// <summary>    /// <para>Gets the cube's effect.</para>    /// </summary>    public BasicEffect Effect    {        get        {            return this._effect;        }    }     /// <summary>    /// <para>Gets or sets the Cube's color.</para>    /// </summary>    public Color Color    {        get        {            return this._color;        }        set        {            this._color = value;        }    }     public void Load(GraphicsDevice device)    {        this._device = device;        this.InitializeVertices();        this.InitializeEffect();    }     private void InitializeEffect()    {        this._effect = new BasicEffect(this._device, null);        this._effect.VertexColorEnabled = true;        this._effect.TextureEnabled = true;    }     private void InitializeVertices()    {        VertexPositionColorTexture[] vertices = new VertexPositionColorTexture[4];         vertices[0].Position = new Vector3(-100.5f, 100.5f, 0);        vertices[0].Color = this.Color;        vertices[0].TextureCoordinate = new Vector2(0, 0);         vertices[1].Position = new Vector3(100.5f, 100.5f, 0);        vertices[1].Color = this.Color;        vertices[1].TextureCoordinate = new Vector2(1, 0);         vertices[2].Position = new Vector3(100.5f, -100.5f, 0);        vertices[2].Color = this.Color;        vertices[2].TextureCoordinate = new Vector2(1, 1);         vertices[3].Position = new Vector3(-100.5f, -100.5f, 0);        vertices[3].Color = this.Color;        vertices[3].TextureCoordinate = new Vector2(0, 1);         this._vertexBuffer = new VertexBuffer(        this._device,        typeof(VertexPositionColorTexture),        4,        ResourceUsage.WriteOnly,        ResourceManagementMode.Automatic);         this._vertexBuffer.SetData(vertices);    }     /// <summary>    /// <para>Render the cube on the device.</para>    /// </summary>    public void Render()    {        this._device.RenderState.CullMode = CullMode.None;        this._effect.Begin();        this._effect.World = (this._activated ? this._billboardMatrix : Matrix.Identity)*this.Transform;          foreach (EffectPass pass in this._effect.CurrentTechnique.Passes)        {            pass.Begin();             this._device.Textures[0] = this.Texture;            this._device.Vertices[0].SetSource(this._vertexBuffer, 0, VertexPositionColorTexture.SizeInBytes);            this._device.VertexDeclaration = new VertexDeclaration(this._device, VertexPositionColorTexture.VertexElements);            this._device.DrawPrimitives(PrimitiveType.TriangleFan, 0, 2);              pass.End();        }         this._effect.End();        this._device.RenderState.CullMode = CullMode.CullClockwiseFace;    }      public void Update(GameTime gameTime, Vector3 cameraPosition, Vector3 cameraLookAt, Vector3 cameraUpVector)            _billboardMatrix = Matrix.CreateBillboard(Vector3.Zero, this.Position - cameraPosition, cameraUpVector, cameraLookAt);
      }
}

Aucune réelle difficulté pour comprendre ce code. Seules deux instructions seront portées à notre attention. La première se trouve dans la méthode Update :

_billboardMatrix = Matrix.CreateBillboard(Vector3.Zero, this.Position-cameraPosition, cameraUpVector, cameraLookAt);

Elle charge dans la variable _billboardMatrix une matrice de billboard renvoyée par la méthode Matrix.CreateBillboard. Comment savoir vers où diriger la face du billboard ? En y reflechissant bien, nous n'avons besoin de connaître que quatre propriétés :

La position de l'objet.
La position de la caméra.
Le point vers lequel regarde la caméra
La normale de la caméra.

C'est justement ce que demande cette méthode. Pour l'heure (10/03/07) elle semble être bugguée. Normalement on lui passe la position de l'objet courant en premier paramètre, la position de la caméra en second paramètre, la normale de la caméra en avant dernier paramètre et enfin le point vers lequel la caméra regarde. Faire cela ne fonctionne que si votre objet se trouve en (0, 0, 0). Pas terrible... Si l'objet se trouve ailleur vous vous retrouvez avec un décallage équivalent à deux fois la distance de l'objet à l'origine. L'astuce est de donner la valeur Vector3.Zero en première paramètre et la soustraction de la poistion de l'objet par la position de la caméra (this.Position-cameraPosition) en second.

Si ce bug a été corrigé à l'heure où vous lisez ces lignes, ou bien si c'est moi qui suis bugué (pas trop le temps de vérifier en ce moment :) ) merci de me l'indiquer.

La seconde instruction se trouve dans la méthode Render :

this._effect.World = (this._activated ? this._billboardMatrix : Matrix.Identity)*this.Transform;

Ici, si le billboarding est activé nous affectons à la matrice World le résultat de la multplication de la matrice de _billboardMatrix par la matrice de transformation (position de l'objet, taille, rotation). Sinon World prend pour valeur le contenu de Transform.

Le reste du code est assez simple pour être assimilé et compris sans être présenté ici. Si vous exécutez l'application vous verrez apparaitre les parois de notre cube et le billboard au centre de celui-ci. En déplaçant la souris sans appuyer sur Enter un affichage similaire à l'animation suivante se produit :

On remarque que le billboard au centre du cube tourne de manière solidaire avec le cube et se présente donc sous une infinité d'angles à la caméra. Si vous appuyez sur Espace, l'affichage change comme ceci :

Cette fois, le billboard reste face à la caméra quelque soit la position de cette dernière.

Si cet exemple illustre parfaitement le principe des billboards, il ne met pas en evidence de manière flagrante leur avantage. Ce sera l'objet de notre second Sample.

Second sample

Un exemple bien plus ludique nous attend. Une foret va être affichée sur un territoire valonné. Chaque arbre sera en fait un billboard et donnera l'illusion d'être un modèle 3D complexe. Aucune action utilisateur ici, le développeur admirera juste le rendu (ce qui est déjà très bien ...).

Le code

Il faut, pour bien comprendre les effets de transparences utilisés ici, avoir lu le chapitre 8 jusqu'au point portant sur les effets spéciaux et blending (inclu).

Ici, seules deux classes ont été modifiées en profondeur, la classe Game1 et la classe Region. La première va avoir pour tâche d'afficher X billboards texturés avec une image d'arbre. Elle leur donnera une position, une taille et une couleur différente. La classe Region va simplement afficher un relief en utilisant des fonctions trigonométriques pour valonner le paysage.

Le relief

Le relief visible dans l'image ci-dessous se réalise par l'intermédiaire d'une méthode retournant une altitude en fonction d'une abscisse X et d'une ordonnée Y fournies. Le calcul se base sur les fonctions trigonométriques Cosinus et Sinus :

/// <summary>/// Simple function to define "hilliness" for terrain/// </summary>public static float HeightField(float x, float y){ return 30 * ((float)Math.Cos(x / 40 + 0.2f) * (float)Math.Cos(y / 35 - 0.2f) + 1.0f);

}

Désormais, au lieu de passer la valeur 0 en profondeur Z pour chaque vertex nous donnons le résultat de cette méthode.

Les arbres

Pour les arbres/billboards, tout se passe dans la classe Game1. Une liste générique est déclarée avec une constante indiquant le nombre d'arbres affichés.

private const int numberOfTrees = 400;
private List<Billboard> trees;

Vient ensuite l'initialisation de chaque arbre dans la liste.

Random rand = new Random();for (int i = 0; i < numberOfTrees; i++){ Billboard tree = new Billboard(); float size = 4 + 8 * (float)rand.NextDouble(); tree.Resize(size, size, size); do { int x = rand.Next(0, 512); int y = rand.Next(0, 512); tree.Position = new Vector3(x, y, Region.HeightField(x, y) + size); } while (!IsTreePositionValid(tree.Position)); tree.Activated = true; int r = (255 - 190) + (int)(190 * (float)(rand.NextDouble())); int g = (255 - 190) + (int)(190 * (float)(rand.NextDouble())); int b = 255; tree.Color = new Color((byte)r, (byte)g, (byte)b, 255); tree.Load(this.graphics.GraphicsDevice); trees.Add(tree);

Ici une taille aléatoire, une position aléatoire et une couleur aléatoire sont données à chaque arbre. La méthode IsTreePositionValid vérifie simplement que les arbres sont assez espacés. A chaque mise à jour, la métrice view est rafraichie et la méthode Update de chaque arbre est appelée avec la position de la caméra, le nouveau point vers lequel elle regarde et sa normale :

for (int i = 0; i < numberOfTrees; i++){ trees.Effect.View = viewMatrix; trees.Update(gameTime, vEyePt, vLookatPt, new Vector3(0, 0, 1f));

}

Notons enfin que la liste d'arbres est re-ordonnée à chaque Update afin d'afficher les arbres dans l'ordre de leur apparition.

Le rendu final nous offre un monde possédant des arbres et de la végétation qui semble être en 3D :

Dernier Sample

Les billboards ont aussi une autre utilisation très utile : les effets graphiques et les animations. Nous allons ici modifier notre classe billboard de façon à permettre l'affichage d'un plan animé comme celui-ci:

Le code

La classe Billboard se présente maintenant ainsi :

public class Billboard : TransformBase{ #region Private members private GraphicsDevice _device; private Color _color = Color.TransparentWhite; private Texture2D _texture; private BasicEffect _effect; private bool _activated; private Matrix _billboardMatrix = Matrix.Identity; private int _animationRows; private int _animationColumns; private long _animationFrequency; private AnimateType _animateType; private List<VertexBuffer> _animations; private VertexBuffer _currentAnimation; private int _animationIndex; private Blend _sourceBlend; private Blend _destinationBlend; private double _lastUpdate; #endregion #region Properties /// <summary> /// <para>Occurs when the animation is over.</para> /// </summary> public event EventHandler AnimationEnded; /// <summary> /// <para>Gets or sets a value indicating if the biilboard is activated.</para> /// </summary> public bool Activated { get { return this._activated; } set { this._activated = value; } } /// <summary> /// <para>Gets or sets the number of animations on a colum for the associated texture.</para> /// </summary> public int AnimationColumns { get { return this._animationColumns; } set { if ((value < 0) || (value > 16)) { throw new ArgumentOutOfRangeException("AnimationColumns", "AnimationColumns must be filled with a value between 1 and 16"); } this._animationColumns = value; } } /// <summary> /// <para>Gets or sets the animation frequency/para> /// </summary> public long AnimationFrequency { get { return this._animationFrequency; } set { this._animationFrequency = value; } } /// <summary> /// <para>Gets or sets the number of animations on a row for the associated texture.</para> /// </summary> public int AnimationRows { get { return this._animationRows; } set { if ((value < 0) || (value > 16)) { throw new ArgumentOutOfRangeException("AnimationRows", "AnimationRows must be filled with a value between 1 and 16"); } this._animationRows = value; } } /// <summary> /// <para>Gets or sets a value indicating the type of the animation.</para> /// </summary> public AnimateType AnimateType { get { return this._animateType; } set { this._animateType = value; } } /// <summary> /// <para>Gets or sets the Cube's color.</para> /// </summary> public Color Color { get { return this._color; } set { this._color = value; } } /// <summary> /// <para>Gets or sets the destination blend.</para> /// </summary> public Blend DestinationBlend { get { return this._destinationBlend; } set { this._destinationBlend = value; } } /// <summary> /// <para>Gets the cube's effect.</para> /// </summary> public BasicEffect Effect { get { return this._effect; } } /// <summary> /// <para>Gets or sets the source blend.</para> /// </summary> public Blend SourceBlend { get { return this._sourceBlend; } set { this._sourceBlend = value; } } /// <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; } } #endregion #region Constructors /// <summary> /// <para>Empty constructors (no animations).</para> /// </summary> public Billboard() { this._animationIndex = 0; this._animationRows = 1; this._animationColumns = 1; this._animateType = AnimateType.None; this._animations = new List<VertexBuffer>(); } /// <summary> /// <para>Instanciate a new Billboard with an animation.</para> /// </summary> /// <param name="animationRows"></param> /// <param name="animationColumns"></param> /// <param name="animationFrequency"></param> public Billboard(int animationRows, int animationColumns, long animationFrequency) : this() { this._animateType = AnimateType.Loop; this._animationColumns = animationColumns; this._animationFrequency = animationFrequency; this._animationRows = animationRows; } #endregion #region Initialization public void Load(GraphicsDevice device) { this._device = device; this.InitializeVertices(); this.InitializeEffect(); } private void InitializeEffect() { this._effect = new BasicEffect(this._device, null); this._effect.VertexColorEnabled = true; this._effect.TextureEnabled = true; } private void InitializeVertices() { this._animations.Clear(); float animationSizeU = (1f / this.AnimationColumns); float animationSizeV = (1f / this.AnimationRows); for (int column = 0; column < this.AnimationColumns; column++) { for (int row = 0; row < this.AnimationRows; row++) { VertexBuffer vertexBuffer = null; VertexPositionColorTexture[] vertices = new VertexPositionColorTexture[4]; float tu = 0 + animationSizeU * column; float tv = 0 + animationSizeV * row; vertices[0].Position = new Vector3(-1f, 1f, 0); vertices[0].Color = this.Color; vertices[0].TextureCoordinate = new Vector2(tu, tv); vertices[1].Position = new Vector3(1f, 1f, 0); vertices[1].Color = this.Color; vertices[1].TextureCoordinate = new Vector2(tu + animationSizeU, tv); vertices[2].Position = new Vector3(1f, -1f, 0); vertices[2].Color = this.Color; vertices[2].TextureCoordinate = new Vector2(tu + animationSizeU, tv + animationSizeV); vertices[3].Position = new Vector3(-1f, -1f, 0); vertices[3].Color = this.Color; vertices[3].TextureCoordinate = new Vector2(tu, tv + animationSizeV); vertexBuffer = new VertexBuffer( this._device, typeof(VertexPositionColorTexture), 4, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); vertexBuffer.SetData(vertices); this._animations.Add(vertexBuffer); } } this._currentAnimation = this._animations[0]; } #endregion #region Render /// <summary> /// <para>Render the cube on the device.</para> /// </summary> public void Render() { this._effect.Begin(); this._effect.World = (this._activated ? this._billboardMatrix : Matrix.Identity) * this.Transform; foreach (EffectPass pass in this._effect.CurrentTechnique.Passes) { pass.Begin(); this._device.RenderState.AlphaBlendEnable = true; this._device.RenderState.SourceBlend = this.SourceBlend; this._device.RenderState.DestinationBlend = this.DestinationBlend; if (this._device.GraphicsDeviceCapabilities.AlphaCompareCapabilities.SupportsGreaterEqual) { this._device.RenderState.AlphaTestEnable = true; this._device.RenderState.ReferenceAlpha = 0x08; this._device.RenderState.AlphaFunction = CompareFunction.Greater; } this._device.Textures[0] = this.Texture; this._device.Vertices[0].SetSource(this._currentAnimation, 0, VertexPositionColorTexture.SizeInBytes); this._device.VertexDeclaration = new VertexDeclaration(this._device, VertexPositionColorTexture.VertexElements); this._device.DrawPrimitives(PrimitiveType.TriangleFan, 0, 2); this._device.RenderState.AlphaBlendEnable = false; this._device.RenderState.AlphaTestEnable = false; pass.End(); } this._effect.End(); } #endregion #region Public methods public void Update(GameTime gameTime, Vector3 cameraPosition, Vector3 cameraLookAt, Vector3 cameraUpVector) { this._billboardMatrix = Matrix.CreateBillboard(Vector3.Zero, this.Position - cameraPosition, cameraUpVector, cameraLookAt); if (this.AnimateType != AnimateType.None) { this.Animate(gameTime); } } private void Animate(GameTime gameTime) { _lastUpdate += gameTime.ElapsedGameTime.TotalMilliseconds; if (_lastUpdate > this.AnimationFrequency) { _lastUpdate = 0; this.IncrementAnimation(); this._currentAnimation = this._animations[this._animationIndex++]; } } private void IncrementAnimation() { this._animationIndex++; if (this._animationIndex > (this._animationColumns * this._animationRows - 1)) { if (this.AnimationEnded != null) this.AnimationEnded(this, EventArgs.Empty); this._animationIndex = 0; } } #endregion

}

Etudions là point par point. Le premier ajout concerne l'arrivée de nouveaux membres permettant d'exploiter l'animation :

private int _animationRows; private int _animationColumns; private long _animationFrequency; private AnimateType _animateType; private List<VertexBuffer> _animations; private VertexBuffer _currentAnimation; private int _animationIndex; private Blend _sourceBlend; private Blend _destinationBlend; private double _lastUpdate;

On trouve ici dans l'ordre : le nombre d'animation en haut et largeur, la vitesse de l'animation (en millisecondes), le type d'animation (non utilisé ici), la liste de vertexbuffer (nous reviendrons sur ce membre plus loin), le vertexbuffer correspondant à l'animation courante, l'index de l'animation dans la liste de vertexbuffer, le blend source et de destination (afin de pouvoir spécifier à la création du billboard de type de blend que l'ont désire) et enfin le temps écoulé depuis le dernier update du billboard.

Deux constructeurs font leur apparition :

/// <summary> /// <para>Empty constructors (no animations).</para> /// </summary> public Billboard() { this._animationIndex = 0; this._animationRows = 1; this._animationColumns = 1; this._animateType = AnimateType.None; this._animations = new List<VertexBuffer>(); } /// <summary> /// <para>Instanciate a new Billboard with an animation.</para> /// </summary> /// <param name="animationRows"></param> /// <param name="animationColumns"></param> /// <param name="animationFrequency"></param> public Billboard(int animationRows, int animationColumns, long animationFrequency) : this() { this._animateType = AnimateType.Loop; this._animationColumns = animationColumns; this._animationFrequency = animationFrequency; this._animationRows = animationRows; }

Le premier existait déjà mais initialise les membres de classe en prennant en compte qu'il n'y a aucun animation à jouer (c'est le cas pour les billboard affichant les arbres et l'herbe). Le second prend en paramètre les animations en hauteur et largeur ainsique la fréquence. Il initialize les membres pour l'animation spécifiée.

La plus grosse modification vient de la méthode d'initialisation des vertices :

private void InitializeVertices() { this._animations.Clear(); float animationSizeU = (1f / this.AnimationColumns); float animationSizeV = (1f / this.AnimationRows); for (int column = 0; column < this.AnimationColumns; column++) { for (int row = 0; row < this.AnimationRows; row++) { VertexBuffer vertexBuffer = null; VertexPositionColorTexture[] vertices = new VertexPositionColorTexture[4]; float tu = 0 + animationSizeU * column; float tv = 0 + animationSizeV * row; vertices[0].Position = new Vector3(-1f, 1f, 0); vertices[0].Color = this.Color; vertices[0].TextureCoordinate = new Vector2(tu, tv); vertices[1].Position = new Vector3(1f, 1f, 0); vertices[1].Color = this.Color; vertices[1].TextureCoordinate = new Vector2(tu + animationSizeU, tv); vertices[2].Position = new Vector3(1f, -1f, 0); vertices[2].Color = this.Color; vertices[2].TextureCoordinate = new Vector2(tu + animationSizeU, tv + animationSizeV); vertices[3].Position = new Vector3(-1f, -1f, 0); vertices[3].Color = this.Color; vertices[3].TextureCoordinate = new Vector2(tu, tv + animationSizeV); vertexBuffer = new VertexBuffer( this._device, typeof(VertexPositionColorTexture), 4, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); vertexBuffer.SetData(vertices); this._animations.Add(vertexBuffer); } } this._currentAnimation = this._animations[0]; }

Cette méthode a un but simple, connaissant le nombre d'animation sur la texture à afficher, elle va créer autant de vertexbuffer que nécessaire : tous auront le même position et la même couleur, mais il auront une coordonnée de texture lié à l'emplacement de la frame sur l'image. La première instruction vide la liste de vertexbuffer. Les deux suivantes calculent le % en largeur et hauteur d'une frame sur la texture :

float animationSizeU = (1f / this.AnimationColumns);
float animationSizeV = (1f / this.AnimationRows);

(ou 1 == 100%). A partir de là on parcours chaque colonne et chaque ligne pour créer un vertex buffer adapté à la frame voulue. On ajoute le dis vertexbuffer à la liste. La dernière instruction fait pointer l'animation courante sur la première animation. C'est celle-ci (qui est en fait un vertexbuffer) qui sera utilisé pour l'affichage (méthode Draw)

Viennent enfin les méthodes de mise à jour du billboard :

public void Update(GameTime gameTime, Vector3 cameraPosition, Vector3 cameraLookAt, Vector3 cameraUpVector) { this._billboardMatrix = Matrix.CreateBillboard(Vector3.Zero, this.Position - cameraPosition, cameraUpVector, cameraLookAt); if (this.AnimateType != AnimateType.None) { this.Animate(gameTime); } } private void Animate(GameTime gameTime) { _lastUpdate += gameTime.ElapsedGameTime.TotalMilliseconds; if (_lastUpdate > this.AnimationFrequency) { _lastUpdate = 0; this.IncrementAnimation(); this._currentAnimation = this._animations[this._animationIndex++]; } } private void IncrementAnimation() { this._animationIndex++; if (this._animationIndex > (this._animationColumns * this._animationRows - 1)) { if (this.AnimationEnded != null) this.AnimationEnded(this, EventArgs.Empty); this._animationIndex = 0; } }

Ces méthodes se contentent juste de pointer sur l'animation suivante si le temps écouté depuis le dernier update est suffisant.

L'utilisation d'un billboard animé reste similaire à ce que nous avons fait précédemment (classe Game1). Elle passe par 4 étapes :

La création et l'initialisation :

Billboard smoke = new Billboard(8,8,50);float size = 5;smoke.Resize(size, size, size);do{ int x = rand.Next(0, 512); int y = rand.Next(0, 512); smoke.Position = new Vector3(x, y, Region.HeightField(x, y) + size);}while (!IsTreePositionValid(smoke.Position)); smoke.SourceBlend = Blend.SourceColor;smoke.DestinationBlend = Blend.One;

smoke.Activated = true;

smoke.Color = new Color(255, 255, 255, 255);

smoke.Load(this.graphics.GraphicsDevice);

L'affection d'une texture contenant un ensemble de frame :

for (int i = 0; i < numberOfSmokes; i++)
smokes.Texture = textures[5];

La mise à jour de la matrice de vue et l'appel à la méthode Update :

            for (int i = 0; i < numberOfSmokes; i++)
            {
                smokes.Effect.View = viewMatrix;
                smokes.Update(gameTime, vEyePt, vLookatPt, new Vector3(0, 0, 1f));
            }

et enfin, bien entendu, l'affichage :

smokes.Render();

Au final à l'affichage, on voit apparaitre des halo de fumées dans le décors :

Bonus stage

Je me suis amusé à créer un sample dérivé du dernier pour afficher un effet de météorite s'écrasant sur terre. Admirez ce qu'il est possible de faire en une petite heure à peine avec des billboards :

Le code de la classe météore qui s'occupe de gérer un météore (en fait un ensemble de billboard) n'est pas terrible et optimisé mais je n'avais qu'une heure pour le faire, il donne néanmoins une idée de ce qu'on peut faire avec du temps, et de belles images...

Le code se trouve avec les samples de ce cours.

Conclusion

Tous les jeux font appels aux bilboards. Et pour cause : ils permettent un affichage réaliste, 3D à moindre cout pour les effets spéciaux. Des sociétés comme Blizzard en sont friands (World Of Warcraft en regorge à chaque écran). Sachant que leur utilisation dans un programme est maintenant simple grâce à notre classe clé en main, pourquoi s'en priver ?

A bientôt sur ce Blog !

Valentin Billotte

N'hesitez surtout pas à me faire part de vos incomprehensions afin de pemettre d'améliorer ce cours pour le rendre plus accessible aux autres (trèèèès important)!

Vous pouvez télécharger les trois samples ici.

Retourner au sommaire des cours

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>~~

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