Graphic Stream : Effect

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 4 : Les matrices

valentin — Sun, 14 Jan 2007 08:13:00 GMT

Retourner au sommaire des cours

Le précédent programme que nous avons réalisé était rudimentaire : nous n'affichions qu'un triangle... Il faut bien avouer que nous pourrions obtenir le même résultat sous PowerPoint ou en Winform. L'objet de ce tutorial va nous repositionner pleinement dans le monde 3D. Nous continuerons à afficher un triangle mais cette fois-ci nous utiliserons les matrices afin de l'animer.

Nous seront donc amené à étudier un peu de géométrie dans l'espace, les matrices et la caméra.

Repère 3D

Le monde de jeu se trouve dans un espace 3D orthonormé. A l'intérieur de celui-ci tout point est situé par l'intermédiaire de trois composantes : sa position par rapport à l'abscisse X, sa position par rapport à l'ordonnée Y, sa position par rapport à la côte Z. En repère 2D X et Y sont facilement identifiables : l'axe X est horizontal et Y vertical. En 3D "XNA" son se base plutot par rapport à un repère dit de "main droite". L'image ci-dessous montre un repère main droite.

Ce nom vient du fait que vous pouvez reproduire ce repère à l'aide de votre main droite. Le pouce représente l'axe X, l'index l'axe Y et le majeure l'axe Z. A l'intérieur du monde de jeu ou World Space nous placerons désormais nos objets en utilisant des coordonnées 3D liées à cette représentation. Ainsi Z croît lorsqu'il se rapproche de l'observateur. L'axe X est orienté vers la droite, enfin l'axe Y croît avec la hauteur. Ainsi nous pourrions définir les vecteurs cardinaux Up, Down, Foarward, Backward, Left, Right de cette manière :

up = new Vector3(0f, 1f, 0f);
down = new Vector3(0f, -1f, 0f);
right = new Vector3(1f, 0f, 0f);
left = new Vector3(-1f, 0f, 0f);
forward = new Vector3(0f, 0f, -1f);
backward = new Vector3(0f, 0f, 1f);

Notre programme

Comme à l'accoutumé le programme du tutorial précédent va être repris et évolué pour prendre en compte les nouveautés de ce chapitre. Il sera renommé en "TroisièmeProjet".

Le but de cet article est donc de faire tourner le triangle sur lui-même. Là encore c'est les matrices qui vont nous aider. Nous allons faire coincider le taux de rotation du triangle en fonction du temps écoulé depuis la dernière frame affichée. De cette façon le triangle tournera toujours à la même vitesse, quelque soit la puissance de la machine où l'activité de son CPU. Nous avons vu précédemment que c'est la matrice World qui s'occupe de "réaliser" les transformations à effectuer sur un objet. Par transformation nous entendons translation, scale et ... rotation. Ecrire "à la main" une matrice pour qu'elle réalise une transformation n'est pas forcement très simple. Heureusement la classe Matrix possède un ensemble de membre statique (comme nous l'avons déjà vu) qui permettent de créer des instances très facilement.

Remplacez l'instruction d'affectation de la matrice World de l'effet à l'intérieur de la méthode Draw par cette ligne :

this.effect.Parameters["World"].SetValue(Matrix.CreateRotationY( (float)gameTime.TotalGameTime.TotalSeconds));

Nous appellons ici la méthode statique CreateRotationY qui renvoie une matrice configurée pour réaliser une rotation autour de l'axe Y. Le fichier effet auquel nous donnons la matrice va multiplier celle-ci par tous les vertices présent dans le flux envoyé à la carte graphique par l'intermédiaire de la méthode Draw. Les vertices ainsi multipliés vont voir leur position modifiée et vont donner l'impression d'être en rotation. Tout objet affiché entre les méthode Begin et End de l'effet seront ainsi soumis à cette transformation. Nous donnons à la méthode CreateRotationY le temps total écoulé depuis le lancement du jeu. Nous aurions pu donner une valeur constante type PI/4. Mais le triangle n'aurait pas été animé. Il aurait juste été legerement pivoté. Le fait d'utiliser le temps total écouté fait que notre triangle tourne à vitesse constante.

A l'exécution nous l'allons le voir tourner effectivement sur lui-même. Pourtant le programme comporte un problème : régulièrement le triangle disparait. Ce problème qui n'en est pas un est du au "back face culling".

Backface Culling

Le back face culling est un algorithme intelligent sur lequel repose la carte graphique pour réaliser ses rendu. Il permet d'enelver de l'affichage les faces (triangles) qui ne sont pas visible depuis la position de la caméra parceque situées dernière l'objet. Si vous regardez quelqu'un dans les yeux, nous ne voyez pas l'arrière de sa tête. Ici c'est le même principe. Comment la carte graphique sait-elle qu'une face n'est pas visible ? En fait c'est le développeur qui le lui indique au moment ou il créé le tableau de vertices. Si un triangle doit être affiché par l'intermédiaire de trois vertices placé dans l'ordre des aiguilles d'une montre alors il est visible, dans le cas contraire XNA ne l'affiche pas. Reciproquement si un triangle ne s'affiche pas c'est que les vertices qui le forment sont lus dans le sens inverse des aiguilles d'une montre. Auquel cas si vous placez la caméra de l'autre coté du triangle celui-ci sera visible. Nous n'allons évidemment pas déplacer continuellement la caméra. Il est plus simple de désactiver le culling. Ajoutez le code suivant à la méthode Initialize :

this.graphics.GraphicsDevice.RenderState.CullMode = CullMode.None;

Le device possède un membre RenderState qui gère les propriétés d'affichage 3D dynamiques et notamment le culling employé. L'énumération CullMode permet d'indiquer si nous ne voulons pas de culling (None), si nous voulons cachée les faces dont le svertices sont lu dans le sens des aiguilles d'une montre (CullClockwiseFace) ou bien dans le sens inverse (CullCounterClockwiseFace).

Amélioration du code

Nous plaçons à l'intérieur de la méthode Draw des instructions qui ne sont pas directement liées à l'affichage : les trois affectations des matrices World, View et Projection. Déplacez ainsi les instructions :

this.effect.Parameters["World"].SetValue(Matrix.CreateRotationY( (float)gameTime.TotalGameTime.TotalSeconds));

A l'intérieur de la méthode Update et les deux instructions :

this.effect.Parameters["View"].SetValue(Matrix.CreateLookAt(new Vector3(0, 0, -2), Vector3.Zero, Vector3.Up));

this.effect.Parameters["Projection"].SetValue(Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, this.GraphicsDevice.Viewport.AspectRatio, 0.1f, 2.1f));

dans Load.

Tout simplement parceque la matrice World doit être mise à jour à chaque frame alors que les propriétés et caractéristiques de la caméra ne changent pas.

Pour terminer, et pour améliorer notre culture, modifiez le farPlaneDistance (dernier paramètre de la méthode CreatePerspectiveFieldOfView) qui définit la distance au delà de laquelle un objet n'est plus visible. Il est pour l'heure de 100f. Changez la valeur a 2.1f. Nous voyons à l'exécution notre triangle tourner complètement mais du fait de sa rotation, les vertices de sa base s'éloignent, et disparaissent au gré de la rotation (voir image ci-dessous).

Ceci est du à notre far plane. Le triangle lorsqu'il est tourné de 90 dégré dépasse en profondeur la distance maximale de vision que nous avons indiqué dans la matrice de Projection. Remettez la valeur 100 pour que le programme marche parfaitement.

Autre élément important : modifiez la taille de la fenêtre affichant le triangle. Après cette action vous devriez à nouveau être soumis au back-face culling. Ceci est simplement du au fait que le device a été reinitialité lors de cette action. Il reprend donc ses valeurs par défaut. Il est donc nécessaire de lui respecifier le culling à appliquer. A ce niveau de nos connaissances nous pourrions parer ce problème qu'en mettant l'instruction concernée dans la méthode Update qui est appellée à chaque frame. Ce ne serait pas très propre ni optimisé... Heureusement le device offre un ensemble d'evenements qui permettent de parer àc ette eventualité. Enregistrez vous sur l'événement reset dans le constructeur de cette manière :

graphics.DeviceReset += new EventHandler(graphics_DeviceReset);

On mettre alors à l'intérieur de la méthode graphics_DeviceReset tout ce qui est nécessaire à la configuration du device :

void graphics_DeviceReset(object sender, EventArgs e)
{
this.graphics.GraphicsDevice.RenderState.CullMode = CullMode.None;
}

Conclusion

Nos sommes maintenant prets à aborder les choses sérieuses. A partir de là nos connaissances sont suffisantes pour répondre à un grand nombre de problématiques : nous savons afficher des formes, les déplacer et placer une caméra. Essayez comme exercice de positionner la caméra à un autre endroit de la scène. De même, essayez d'autres transformations (faites un redimensionnement, une translation, les deux ...).

Le prochain article sera consacré aux indices, un type de reliaison de vertices très performants.

Vous pouvez télécharger le sample ici.

A bientôt sur ce Blog !

Valentin Billotte

Retourner au sommaire des cours

XNA Tutorial 3 : Introduction aux vertices et effets

valentin — Wed, 10 Jan 2007 20:26:00 GMT

Retourner au sommaire des cours

Il est maintenant temps d'afficher quelque chose à l'écran.

Le but de ce tutorial est de nous apprendre à dessiner à l'écran en 3D à l'aide de Vertices, et de commencer à assimiler la notion d'effet. Il s'agit là d'un cours primordial dans la mesure où un développeur de jeux XNA aura toujours à faire à ces deux notions, et ce, dans n'importe quel projet qu'il réalisera. Il convient donc de bien assimiler ce que nous allons réaliser ici (où bien de me contacter le cas échéant). Nous allons réaliser ici l'affichage d'un triangle coloré.

Le vertex

Si en 2D afficher un objet revient à "plaquer" une image à l'écran, en 3D la done est tout autre. Les objets ne sont pas dessinées à partir d'une image mais plutot a partir de vertices (un vertex, des vertices). Un vertex peut être vu comme un point dans l'espace auquel on associe des propriétés (couleur, position ...). Le pipeline 3D va relier ces points pour former un objet. Le développeur a pour tache de bien placer ces points et d'indiquer au device comment les relier.

L'image suivante illustre cela. Nous voyons un tube et un cube en trois dimension. On remarque qu'ils sont tout simplement formés à partir de points qui sont reliés entre eux.

La forme géométrique la plus simple en 3D est le triangle. Trois vertices sont nécessaires pour la former. Toute forme géométrique en 3D est formée de triangles. C’est à dire d’une multitude de vertices qui, reliés, permettent de donner une apparence à certains objets. La encore, l'image ci dessus le montre très bien.

Plusieurs solutions existent pour relier les vertices entre eux afin de former des objets 3D. Chaque solution possède ses propres avantages en fonction la forme de l’objet . C'est pourquoi il convient d’utiliser le celle qui s'avère la plus adapté dans un seul but : réduire au maximum le nombre de vertices. L’association de plusieurs vertices entre eux permet à XNA de former des triangles (assimilables à des surfaces). L’association de ces surfaces permet alors de former des objets dans l’espace. XNA résonne en ternaire ; Il lui faut trois point pour former la plus petit figure géométrique possible : le triangle.

Lorsqu'on place des points dans l'espace il est donc nécessaire de spécifier à la carte graphique la manière dont il faut relier ces points afin de créer une forme 3D. Les différentes manières possibles sont les suivantes :

Triangle List
Le mode de liaison de vertex le plus simple. Celui-ci lit les points trois par trois afin de former des triangles qu’il affiche. On comprendra donc il est nécessaire de créer un nombre de vertices multiple de trois. Les trois premiers vertices représenteront le premier triangle, les trois suivant le second triangle et ainsi de suite... C’est le mode de définition le plus simple ... mais aussi le plus coûteux.

Triangle Fan
Ce mode (comme le suivant) est plus intelligent ; il réutilise des vertices déjà utilisé pour les liaisons. On gagne ainsi de précieux octets en mémoire libérant ainsi le pipeline 3D. Dans ce mode le premier vertex est relié à tous les autres. Là aussi, les possibilités sont limités ; on ne peut faire que des formes rectangulaires et/ou cylindrique comme le montre le schéma ci-contre.

Triangle Strip
Ce troisième mode est un chouïa plus compliqué. On relie ici aussi les vertices par trois. Mais en considérant que le dernier vertex créé doit être relié aux deux précédents. Le gain de place en mémoire est très important, mais la difficulté de créer des formes complexes est multipliée.

Primitive indexée
Nous verrons dans quelques pages la création de primitives indexées. Ce mode de liaison de vertices est la solution à tous les problèmes précédemment listés pour créer des formes complexes en créant un minimum de vertices.

L'image ci-dessus tente de montrer les différences que l'on peut trouver avec les trois premier modes pour l'affichage de triangles :

a) Triangle List :
3 triangles : Vertices (0, 1, 2) puis Vertices (3, 4, 5), puis Vertices (6 7, 8) : 9 vertices pour afficher 3 triangles.
b) Triangle Fan :
3 triangles : Vertices (0, 1, 2) puis Vertices (0, 2, 3), puis Vertices (0, 3, 4) : 5 vertices pour afficher 3 triangles.
c) Triangle Strip :
6 triangles : Vertices (0, 1, 2) puis Vertices (1, 2, 3), puis Vertices (2, 3, 4), puis Vertices (3, 4, 5), puis Vertices (4, 5, 6), puis Vertices (5, 6, 7) : 8 vertices pour afficher 6 triangles.

Au vu de cette image on remarque bien les différences entre les types de reliaisons. D'autres reliaisons sont possible :

Point qui ne fait aucune liaison et laisse les points tels quels (très utile pour les effets de particules),

LineList qui relies les points deux à deux (utile pour dessiner des lignes)

LineStrip qui relie un point à son prédécesseur.

En C#, c'est l'énumération PrimitiveType qui contient les différents types d'énumérations possibles.

Rappelons que nous avons pour but d'afficher un triangle dans ce tutorial, il faudra donc créer 3 vertices, leur donner une position et, au moment de l'affichage spécifier la meilleure méthode de liaison.

Les effets

La première grande différence entre l'API DirectX et le Framework XNA auquel on est confronté vient de l'obligation d'associer un effet à toute opération de rendu. Si vous n'avez jamais développé à l'aide de DirectX vous devez vous demander ce qu'est un effet.

Nous venons de voir que les objets sont présentés sous la formes de triangles (surface élémentaire). Nous spécifions par l'intermédiaire de notre code la position des points du triangle et d'autres informations comme la couleur de ces points. Un effet accompagne ces informations en indiquant à la carte graphique comment afficher ces triangles. Il peut être vu comme un ensemble de technique qui peuvent être appliquées (ou non) au rendu d'une surface. Par techniques on peut entendre instructions données à la carte graphique pour lui "expliquer" de quel manière l'objet, situé dans un espace 3D, doit être rendu sur l'écran 2D du joueur.

Il s'agit là, il ne faut pas se le cacher, d'une technique encore trop complexe pour être abordée à ce stade de notre apprentissage. Nous utiliserons donc un fichier effet basique fourni par Microsoft et nous ne l'aborderons que succintement.

Modification du code source

Nous allons continuer sur notre lancée et modifier notre précédent programme nommé "PremierProjet". Nous appliquerons au projet de cet article nommé à juste titre "SecondProjet" les modifications et evolutions apportées dans le précédent tutorial.

La première étape consiste à ajouter un fichier effet au projet et à le gérer dans le code.

Pour ce faire cliquez droit sur le répertoire Content du projet (destiné à gérer les ressources du jeu). Selectionnez Ajouter -> Nouvel Element.

Dans la fenêtre qui s'ouvre alors selectionnez Effect File et donnez le nom Effect.fx au fichier à ajouter :

Validez. Le fichier se trouve alors ajouté au répertoire Content.

Si vous double cliquez dessus vous pourrez voir le code suivant :

float4x4 World;
float4x4 View;
float4x4 Projection;

// TODO: add effect parameters here.

struct VertexShaderInput
{
    float4 Position : POSITION0;

    // TODO: add input channels such as texture
    // coordinates and vertex colors here.
};

struct VertexShaderOutput
{
    float4 Position : POSITION0;
    // TODO: add vertex shader outputs such as colors and texture
    // coordinates here. These values will automatically be interpolated
    // over the triangle, and provided as input to your pixel shader.
};

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{
    VertexShaderOutput output;

    float4 worldPosition = mul(input.Position, World);
    float4 viewPosition = mul(worldPosition, View);
    output.Position = mul(viewPosition, Projection);

    // TODO: add your vertex shader code here.

    return output;
}

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
    // TODO: add your pixel shader code here.

    return float4(1, 0, 0, 1);
}

technique Technique1
{
    pass Pass1
    {
        // TODO: set renderstates here.

        VertexShader = compile vs_1_1 VertexShaderFunction();
        PixelShader = compile ps_1_1 PixelShaderFunction();
    }
}

Nous reviendrons sur sa signification plus tard. Pour l'heure nous allons charger l'effet en mémoire à l'intérieur d'un object C# pour pouvoir l'utiliser. Ajoutez pour celà le membre suivant à la classe Game1 :

Effect effect;

Ajoutez l'instruction suivante à la méthode Load de la classe Game1 :

this.effect = Content.Load<Effect>("Effect");

Cette instruction va utiliser la méthode Load de l'objet content pour charger la ressource nommée "Effect". La ressource renvoyée sera de type Effect et affectée au handle effect. Pour rappel, il est spécifié par défaut dans le constructeur que le répertoire où trouver les ressources est Content :

Content.RootDirectory = "Content";

L'objet Content, utilisé dans l'instruction précédente correspond au Content Manager, c'est à dire un objet dont le rôle est de gérer les ressources associées au projet. Sa méthode Load permet de charger une ressource dans un objet dont les membres vous nous permettre d'exploiter la dite ressource dans notre code. Ici on peut voir que notre fichier d'effet est manipulé maintenant par l'intermédiaire d'une instance de la classe Effect.

La string "Effect" est un identifier de ressource qui a été automatiquement associé à notre effet lorsque nous l'avons ajouté au projet. Selectionnez le fichier Effect.fx et appuyez sur F4. La fenêtre de propriété apparait alors :

Vous pouvez y voir que l'une des propriété se nomme AssetName et correspond à cette string. Vous êtes bien evidemment libre de modifier cette propriété pour lui donner la valeur de votre choix. Toutefois il est préférable de laisser le Xna Game Studio et Visual Studio effectuer ces choix à votre place.

Modifiez ensuite la méthode Draw pour lui ajouter de nouvelles instructions :

this.effect.CurrentTechnique = effect.Techniques["Technique1"];
this.effect.Begin();
foreach (EffectPass pass in this.effect.CurrentTechnique.Passes)
{
pass.Begin();

pass.End();
}
this.effect.End();

La première instruction sélectionne une technique nommée "Technique1" parmi celles contenues dans l'effet. Nous utilisons cet identifier tel quel en tant qu'index dans le tableau de technique. Notons juste qu'il s'agit là d'un code très mauvais ; il aurait été préférable d'utiliser une constante de type int. Trouver un objet à l'aide d'un indexeur de type string est toujours plus long qu'avec un indexeur de type int (la comparaison de deux int est plus rapide que deux strings). Or perdre du temps dans la méthode Draw est vraiment la dernière chose à faire. Il y'a une explication à celà : je trouve le code plus lisible ainsi pour les débutants :).

Alors qu'est ce qu'une technique ? Un fichier effet peut contenir une ou plusieurs technique qui s'apparentent à un ensemble d'affichage possible pour une forme 3D.L'appel à la méthode Begin indique que l'effet de la technique "Technique1" commence à partir de ce point et s'applique à l'affichage de tous les objets jusqu'à ce que la méthode End soit rencontrée. Entre ceux deux méthodes tout affichage sera soumi à la technique "Technique1".

Enfin, on a jamais vu quelqu'un peindre un chef d'oeuvre d'un seul coup de pinceau ; Appliquer un effet peut demander plusieurs couches ou "passes". Là encore une méthode Begin et End indiquent la zone de code où l'effet de la passe courante est pris en compte. C'est entre ces deux méthodes que nous effectuerons l'affichage de notre triangle. Vous pouvez au passage revenir sur le code contenu dans le fichier Effect.fx. Vous trouverez à la fin de celui-ci :

technique Technique1
{
    pass Pass1
    {
        // TODO: set renderstates here.

        VertexShader = compile vs_1_1 VertexShaderFunction();
        PixelShader = compile ps_1_1 PixelShaderFunction();
    }
}

On y trouve la définition de la technique et on peut voir qu'elle se compose d'une passe redirigeant vers deux fonctions. Nous aborderons le HLSL plus tard, ne vous inquietez pas si le code de ce fichier vous parait obscur.

Nous sommes justement maintenant prets à afficher notre première forme 3D !

Première forme 3D !

Nous avons vu au tout début de ce cours qu'un vertex était un point dans l'espace auquel on associait un ensemble d'information liées à son affichage dans l'espace. Le but de ce tutorial est d'afficher un triangle coloré à l'écran. Chaque point dans l'espace (vertex) doit donc être associé à une position et un couleur donc. Cerise sur le gateau nous n'aurons pas besoin de créer une structure de Vertex pour encapsuler ces deux informations : XNA en possède une qui répond à nos besoins : la structure VertexPositionColor.

Un triangle est composé de trois points, il faut donc créer un tableau de trois cases de type VertexPositionColor. Ajoutez la déclaration suivante en début de classe :

VertexPositionColor[] vertices;

Puis, dans la méthode Initialize nous allons créer trois vertices et l'affecter aux trois cases de ce tableau.

vertices = new VertexPositionColor[3];
vertices[2].Position = new Vector3(-0.5f, -0.5f, 0f);
vertices[2].Color = Color.Red;
vertices[1].Position = new Vector3(0, 0.5f, 0f);
vertices[1].Color = Color.Green;
vertices[0].Position = new Vector3(0.5f, -0.5f, 0f);
vertices[0].Color = Color.Yellow;

Ici le code est plutot simple : trois vertices sont créés. Chacun deux se voit affecter une position et une couleur. Nous sommes dans l'espace 3D. Une position correspond donc à trois composantes X, Y, Z (repère euclidien orthonormé dans l'espace). Le constructeur de Vector3 accepte en paramètre ces trois composantes.Reste maintenant l'affichage dudit triangle. La méthode Draw possède deux nouvelles instructions.

this.graphics.GraphicsDevice.VertexDeclaration = new VertexDeclaration(this.graphics.GraphicsDevice, VertexPositionColor.VertexElements);
this.graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 1);

Dans la première ins truction nous précisions la structure des vertices qui sont passés au device graphique. la structure VertexPositionColor contient un membre statique nommé VertexElements qui précise que la structure contient une information de position, et une information de couleur. De cette manière, la carte graphique optimise la gestion mémoire en vue de l’arrivée dans le pipeline d’un flux de vertices contenant ce type de données.

Dans la seconde instruction justement, nous passons à la carte graphique une instruction de dessin en précisant, la manière dont on va relier les vertices, le flux de vertices, l’index du premier vertex à lire dans le flux et le nombre de primitives (triangles) à afficher. Ici nous utilisons la technique TriangleList, nous donnons un flux de trois vertices (le tableau que nous venons d'initialiser), nous lisons le flux à partir du premier vertex, et nous n'affichons qu'un seul triangle.

Si vous lancez le code vous obtenez la fenêtre :

A priori on s’attendait à avoir un triangle affiché et non un écran bleu. Il est en effet nécessairede spécifier la façon dont on veut afficher la scène 3D à l’écran.

L’affichage d’un objet 3D à l’écran se réalise généralement par l’intermédiaire de trois matrices. Une matrice est une « boite magique » mathématique qui permet de réaliser des équations linéaires avec peu de traitements. Elles sont utilisées en 3D pour réaliser de nombreux calculs fastidieux de manière extremement rapide et efficaces. Ces trois matrices sont les suivantes :

1. La première matrice est la matrice World, elle spécifie où placer un objet dans un repère 3D (translation), son orientation (rotation), et sa taille (homothetie).

2. La matrice View précise la façon dont est « filmé » la scène. On parle alors de caméra.

3. La troisième matrice, nommée Projection donne les caractéristiques de la caméra, comme l’angle d’ouverture, la taille de l’écran, etc.

Ajoutez ces trois instructions à la méthode Draw, juste avant le premier appel à Begin :

this.effect.Parameters["World"].SetValue(Matrix.Identity);
this.effect.Parameters["View"].SetValue(Matrix.CreateLookAt(new Vector3(0, 0, -2), Vector3.Zero, Vector3.Up));
this.effect.Parameters["Projection"].SetValue(Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, this.GraphicsDevice.Viewport.AspectRatio, 0.1f, 100f));

La propriété Parameters de la classe Effect permet d'accéder aux variables présentes dans le fichier effet et de leur affecter une valeur ou bien de la lire. Le fichier effet expose, comme on va le voir bientôt trois variables, World, View et Projection. Nous leur donnons ici, à chacune, la valeur d'une matrice.

Pour la matrice World, nous indiquons qu'il n'y aura pas de transformation, la valeur Identité de la matrice (matrice n'effectuant aucun calcul) est est ainsi passé à cette variable.

Pour la matrice View nous utilisons la méthode CreateLookAt de la classe Matrix afin de préciser la position de la caméra (ici la caméra est simplement reculée de deux unités en profondeur), l'endroit vers lequel on regarde (ici on regarde vers l'origine (0, 0, 0) ) et l'angle de la caméra avec l'horizontale (ici angle droit).

Enfin la matrice Projection spécifie un angle d'ouverture de 45° (PI/4), le ratio (largeur de l'écran sur sa hauteur), et enfin deux valeurs importantes : la distance à la caméra à partir de la quelle on peut voir un objet, et la distance au delà de laquelle un objet n'est plus visible (front plane et far plane). Là encore une méthode de la classe Matrix nommée CreatePerspectiveFieldOfView permet de créer une matrice facilement. Le ratio permet de garder un aspect cohérent pour notre scène en cours d'affichage quelque soit la taille de la zone d'affichage.

Ces trois matrices sont multipliées entre elles afin de passer d'une scène 3D à un écran 2D. C'est la carte graphique qui s'occupe de celà. On peut donc voir ces calculs comme le moyen de passer d'une position dans l'espace (X, Y Z) avec des propriétés de couleur, de texturing, d'illumination à une position à l'écran (X, Y) d'un pixel coloré.

Si vous relancez le programme maintenant vous obtenez l'écran suivant :

Mieux, mais toujours insuffisant ! A priori nous devions avoir un triangle avec plusieurs couleurs, or là, seul le rouge est visible. Il va nous falloir, pour aboutir à ce résultat, étudier et comprendre le code du fichier effet afin de pouvoir le modifier.

Courage ! Ouvrez donc maintenant le fichier effect.fx en double cliquant dessus. Vous devriez tomber sur le code précédemment affiché dans cet article. A première vue le code semble assez proche du language C. C’est enfait du HLSL (High Level Shader Language). Il est donc assez "lisible", mais nous allons tout de même l'expliciter. Etudions le.

Au tout début du fichier se trouve les déclarations de variables globales du fichier effet. On y retrouve justement les trois déclarations de matrices que nous avons affecté précédemment :

float4x4 World;
float4x4 View;
float4x4 Projection;

On affecte des valeurs ou on récupere la valeur d'une de ces variables à l'aide de la propriété Parameters de l'objet effect :

this.effect.Parameters["View"].SetValue(Matrix.CreateLookAt(new Vector3(0, 0, -2), Vector3.Zero, Vector3.Up));

Passons à la suite du fichier. On trouve après ces trois variables la déclaration de deux structures :

struct VertexShaderInput
{
    float4 Position : POSITION0;

    // TODO: add input channels such as texture
    // coordinates and vertex colors here.
};

struct VertexShaderOutput
{
    float4 Position : POSITION0;
    // TODO: add vertex shader outputs such as colors and texture
    // coordinates here. These values will automatically be interpolated
    // over the triangle, and provided as input to your pixel shader.
};

Généralement, un effet réalise l'affichage d'un objet auquel il est lié en deux étapes. La première étape, consiste à manipuler les vertices de l'objet à leur appliquer une suite de transformations et de calculs afin de pouvoir passer de la représentation 3D de l'objet à un écran 2D. Cette étape correspond à ce qu'on appelle le vertex shader. Dans une seconde étape, nommée Pixel Shader chaque triangle de la scène est convertie en pixels et chaque pixels est coloré à sa juste valeur. A priori, si notre problème vient de la couleur du triangle, c'est sur le pixel shader qu'il va faloir travailler. A quoi servent donc les deux structures ci-dessus ? Elle permettent de réaliser plusieurs types d'échanges de données :

D'abord entre l'extérieur (notre programme C#) vers le premier shader de l'effet (le vertex shader)
Puis entre le vertex shader et le pixel shader
Et enfin entre le pixel shader et la carte graphique pour l'affichage final.

La première structure, nommée à juste titre VertexShaderInput permet à l'effet de recevoir tous les vertices que nous avons passé à l'aide de la méthode DrawUserPrimitives. Il ne recevra ici qu'une information de Position :

struct VertexShaderInput
{
    float4 Position : POSITION0;

    // TODO: add input channels such as texture
    // coordinates and vertex colors here.
};

On remarque donc ici un premier problème : il n'y a pas de membre pour stocker la couleur du vertex ! La seconde struture nommée VertexShaderOutput est la structure de donnée échangée entre le Vertex Shader et le Pixel Shader.

Un shader dans un effet peut donc être vu comme une fonction qui, renvoie ou reçoit une structure (comme celles que nous venons de décrire) effectue des traitement sur les données de celle-ci, et renvoie une autre structure de données contenant le resultat de ces traitements.

Etudions la première fonction :

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{
    VertexShaderOutput output;

    float4 worldPosition = mul(input.Position, World);
    float4 viewPosition = mul(worldPosition, View);
    output.Position = mul(viewPosition, Projection);

    // TODO: add your vertex shader code here.

    return output;
}

Elle prend en entrée une valeur de type VertexShaderInput et renvoie une valeur de type VertexShaderOutput. La première instruction de la fonction vise à créer une variable nommée ouput de type VertexShaderOutput. Elle multiplie ensuite à l'aide la méthode mul la position du vertex courant (reçu directement depuis le flux envoyé par la méthode Draw) par la matrice Word afin de placer le vertex dans le monde 3D. Elle multiplie ensuite le resultat de cette opération par la matrice View afin d'avoir la représentation du vertex dans l'espace depuis notre "camera". Enfin une multiplication est réalisée avec la matrice Projection pour passer du monde 3D à l'écran 2D. La valeur obtenue est affecté à un des membre de la variable ouput qui est elle-même renvoyée.

La seconde méthode se présente comme ceci :

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
// TODO: add your pixel shader code here.

return float4(1, 0, 0, 1);
}

Elle prend une valeur de type VertexShaderOuput (reçue depuis la fonction précédente) et renvoie un tableau de 4 flottants. Nous reviendrons sur la signification exacte du type float4 plus tard. Quoi qu’il en soit à ce stade nous pouvons dire que les 4 flottants correspondent aux composantes RGBA (rouge, vert, bleu, alpha) de la couleur à attribuer au pixel. 1 correspondant à la valeur maximale de la composante et 0 à la minimale. Ici la couleur renvoyée est donc le rouge. On remarque donc ici un second problème : tout pixel sera rouge !

Enfin le fichier se termine par la définition de la technique :

Le fichier ne contient donc qu’une seule technique nommée Technique1. Celle-ci réalise son affichage en une seul passe nommée Pass1.

La passe se caractérise par un vertex shader et un pixel shader. On retrouve un pointeur vers nos deux méthodes. Les mots clés "compile vs_1_1" et "compile ps_1_1" indiquent que les shaders doivent être compilés dans la version 1.1 du language.

Pas d’inquiétudes s’il reste des zones d’ombre, nous avons parcouru le fichier très rapidement sans nous attader sur certaines spécificités syntaxiques. Revenons à notre problème : le triangle rouge.
Premier soucis, la structure en entrée ne contient qu’une information de Position. Or la structure que nous manipulons dans le programme C# contient Position et Couleur. Modifiez la structure ainsi :

struct VertexShaderInput
{
    float4 Position : POSITION0;
    float4 Color        : COLOR0;

    // TODO: add input channels such as texture
    // coordinates and vertex colors here.
};

Nous avons rajouté un nouveau champs nommé Color de type COLOR0. Réalisez la même opération avec la structure de sortie :

struct VertexShaderOutput
{
    float4 Position : POSITION0;
    float4 Color        : COLOR0;

    // TODO: add vertex shader outputs such as colors and texture
    // coordinates here. These values will automatically be interpolated
    // over the triangle, and provided as input to your pixel shader.
};

Reste maintenant à modifier les shaders. Commencez par le vertex shader. Nous avons juste ici à ajouter une ligne d’affection pour récupérer la couleur du vertex entrant et la passer à la valeur envoyée en sortie de méthode :

VertexShaderOutput VertexShaderFunction(VertexShaderInput input)
{
    VertexShaderOutput output;

    float4 worldPosition = mul(input.Position, World);
    float4 viewPosition = mul(worldPosition, View);
    output.Position = mul(viewPosition, Projection);
    output.Color = input.Color;
     // TODO: add your vertex shader code here.

    return output;
}

Reste le pixel shader. Nous n’avons plus à renvoyer la couleur rouge mais plutôt à renvoyer celle de la valeur en entrée qui est la sortie de la méthode précédente :

float4 PixelShaderFunction(VertexShaderOutput input) : COLOR0
{
// TODO: add your pixel shader code here.

return input.Color;
}

Relancez le programme. Nous obtenons enfin la sortie voulue :

Conclusion

De nombreuses choses auraient pu être vues ici : les effets plus en profondeurs, un peu de mathématiques 3D, les différentes méthodes d'affichage du Device... Tout cela sera en fait assimilé au fil des tutoriaux. Pas d'inquiétudes à avoir donc. Pour l'heure nous pouvons être fier : nous savons créer un effet, l'appliquer. Nous sommes capable de créer une forme et de l'afficher (avec couleurs s'il vous plait !). Comme exercice en attendant de lire le prochain tutorial, essayez d'afficher un carré et une maison. Essayez de même de reproduire le carré avec les méthodes TriangleFan et TriangleStrip.

Pas d’inquiétude à avoir si il vous reste de nombreuses zones d’ombre sur les effets et le code qu’ils contiennent, nous apprendrons au cours d’un long tutorial à maitriser le HLSL.

Vous pouvez télécharger le sample et les correction des exercices ici.

Retourner au sommaire des cours