Graphic Stream : Matrix

Annexe : Transformations et Matrices

valentin — Mon, 05 Feb 2007 23:58:00 GMT

Les transformations dans l'espace représentent le traitement clé de voute dans toute application 3D. C'est par les transformations que les objets prennent vie. Une transformation pour parler simplement est une suite de multiplication de matrices. Généralement on distingue 3 types de matrices pour travailler sur un modèle 3D avant son affichage à l'écran : les matrices de rotation, les matrices de redimentionnement, les matrices de translation. Lorsqu'on veut déplacer un objet de le faire tourner il suffit donc de réaliser des traitements du type :

matriceTransformation = matriceRotation * matriceTranslation

Ici nous réalisons une rotation puis une translation. L'objet représente le résultat de cette transformation et peut être vu comme un condensé unique des deux matrices. C'est cette matrice qui sera affectée à la matrice monde (ou World) pour placer l'objet à l'écran avant son affichage.

Vous devez, lorsque vous effectuez ce genre de calculs, garder en tête que :

Toute transformation sur un objet s'effectué par rapport au repère de cet objet.
La multiplication de matrices, n'est pas commutative.

Revenons justement sur ces deux notions.

Repère de l'objet

Lorsqu'on effectue une transformation sur un objet, cette transformation se fait par rapport au point d'origine dans le repère de l'objet. Le repère de l'objet est le repère par rapport auquel vous vous référez lorsque vous placez les vertices du modèle que vous voulez afficher.

Prenons par exemple les huits points de ce cube :

vertices[0].Position = new Vector3(-10f, -10f, -10f);

vertices[1].Position = new Vector3(-10f, -10f, 10f);

vertices[2].Position = new Vector3(10f, -10f, 10f);

vertices[3].Position = new Vector3(10f, -10f, -10f);

vertices[4].Position = new Vector3(10f, 10f, 10f);

vertices[5].Position = new Vector3(10f, 10f, -10f);

vertices.Position = new Vector3(-10f, 10f, -10f);

vertices[7].Position = new Vector3(-10f, 10f, 10f);

Ici le cube fait 20 unités de coté (de -10 à +10). Le point d'origine (0, 0, 0) du repère qui lui est associé se trouve pile au centre du cube. Si nous effectuons une rotation du cube, celle-ci s'effectuera donc par rapport à cette origine qui, étant au centre du cube, donnera l'impression que le cube tourne sur lui-même. L'image suivant illustre cela :

(nous effectuons ici une rotation sur X et Y).

Maintenant regardons un cube créé avec les 8 points suivants :

vertices[0].Position = new Vector3(0f, 0f, 0f);vertices[1].Position = new Vector3(0f, 0f, 20f);vertices[2].Position = new Vector3(20f, 0f, 20f);vertices[3].Position = new Vector3(20f, 0f, 0f);vertices[4].Position = new Vector3(20f, 20f, 20f);vertices[5].Position = new Vector3(20f, 20f, 0f);vertices.Position = new Vector3(0f, 20f, 0f);//vertices[7].Position = new Vector3(0f, 20f, 20f);

Là encore, chaque coté du cube possède une taille de 20 unités. Mais le centre du repère (0 ,0 ,0) correspond au premier point. La rotation que nous avons effectué précédemment associée à ce cube se fera par rapport à ce point. Le cube ne tournera donc plus sur lui-même mais par rapport à un de ses sommets. L'image suivant illustre celà :

Ici, c'est le point de couleur jaune qui est au centre du repère.

Nous venons de faire un grand pas pour bien comprendre comment maitriser les matrices et les transformations associées.

Ordre des transformations / Communativité

Au tout début de cet article, nous avons vu l'instruction suivante :

matriceTransformation = matriceRotation * matriceTranslation

Sachant que la classe Matrix nous offre un ensemble de méthodes statiques clé en main pour créer ce type de matrices, en langage C# nous aurions quelque chose du genre

matriceTransformation = Matrix.CreateRotationY(MathHelper.PIOver2)* Matrix.CreateTranslation(20, 0, 0)

Pour créer une rotation de 90° suivie d'une translation. Le verbe au participe passé "suivie' est important dans cette phrase. Je n'ai pas utilisé le complément "et". En effet il y'a une notion d'ordre dans le multiplication des matrices ; C'est au niveau de ce genre de traitement qu'il nous faut faire attention. La multiplication de matrices n'est en effet pas commutative ; l'instruction précécent ne donne pas le même résultat que :

matriceTransformation = matriceTranslation *matriceRotation

On peut se référer au premier point de cet article où les transformations s'effectuent par rapport au modèle de l'objet. Prenons l'affichage suivant :

Nous disposons ici d'un cube. Si nous effectuons une rotation sur l'axe Z, l'arrete située sur l'axe X se trouvera sur l'axe Y. Le pavé aura tourné autour de son origine. Si maintenant nous effectuons une translation sur l'axe X, le pavé tourné va être déplacé et nous obtiendrons comme résultat pour :

matriceTransformation = matriceRotation * matriceTranslation

Le rendu :

Revenons maitenant au premier affichage et essayons l'instruction :

matriceTransformation = matriceTranslation *matriceRotation

La transformation commence d'abord ici par une translation d'une distance que nous appelerons D. Nous obtenons donc le même résultat que l'image précédente mais avec un pavé non tourné. Une rotation est ensuite effectée. C'est là que la différence se fait pleinement sentir : la rotation se situe non pas par rapport au pavé mais par rapport au centre du repère de l'objet qui se situe à une distance D de l'objet. La rotation va donc faire tourner l'objet autour d'un cercle imaginaire possèdant un rayon d'une taille équivalente à D. Le résultat donne donc :

Cet exemple illustre parfaitement la non commutativité de la multiplication de matrices. Même si cet exemple est simple, il faut toujour garder à l'esprit cette loi fondamentale, surtout lorsqu'on travaille sur un très grand nombre de matrices qui interagissent entre elles.

Exemple de classe "Transform-Safe"

Pour terminer cet article, voici une classe dont hérite la plupart des objets métier affiché à l'écran dans les applications 3D que je réalise. Elle donne à ses objets enfants un ensemble de propriétés et de méthodes simples qui permettent d'interragir avec l'objet de manière transparente et intuitive pour modifier l'objet avant son rendu.

/// <summary>/// <para>Defines a transformable object.</para>/// </summary>public class TransformBase{ #region Private members [System.Diagnostics.DebuggerBrowsable(System.Diagnostics.DebuggerBrowsableState.Never)] private Matrix _translation; [System.Diagnostics.DebuggerBrowsable(System.Diagnostics.DebuggerBrowsableState.Never)] private Matrix _rotation; [System.Diagnostics.DebuggerBrowsable(System.Diagnostics.DebuggerBrowsableState.Never)] private Matrix _scale; [System.Diagnostics.DebuggerBrowsable(System.Diagnostics.DebuggerBrowsableState.Never)] float _rotationX, _rotationY, _rotationZ; #endregion #region Properties /// <summary> /// <para>Gets the associated transformation matrix.</para> /// </summary> public Matrix Transform { get { return this._scale * this._rotation * this._translation; } } /// <summary> /// <para>Gets or sets the current object's position.</para> /// </summary> public Vector3 Position { get { return new Vector3(this._translation.M41, this._translation.M42, this._translation.M43); } set { this._translation.M41 = value.X; this._translation.M42 = value.Y; this._translation.M43 = value.Z; } } /// <summary> /// <para>Gets or sets the position on the X axis.</para> /// </summary> public float X { get { return this._translation.M41; } set { this._translation.M41 = value; } } /// <summary> /// <para>Gets or sets the position on the Y axis.</para> /// </summary> public float Y { get { return this._translation.M42; } set { this._translation.M42 = value; } } /// <summary> /// <para>Gets or sets the position on the Z axis.</para> /// </summary> public float Z { get { return this._translation.M43; } set { this._translation.M43 = value; } } /// <summary> /// <para>Gets or sets the current rotation in radian on X axis.</para> /// </summary> public float XRotation { get { return this._rotationX; } set { this.Rotate(value, _rotationY, _rotationZ); } } /// <summary> /// <para>Gets or sets the current rotation in radian on Y axis.</para> /// </summary> public float YRotation { get { return this._rotationY; } set { this.Rotate(_rotationX, value, _rotationZ); } } /// <summary> /// <para>Gets or sets the current rotation in radian on Z axis.</para> /// </summary> public float ZRotation { get { return this._rotationZ; } set { this.Rotate(_rotationX, _rotationY, value); } } /// <summary> /// <para>Gets or sets the current scale on X axis.</para> /// </summary> public float XScale { get { return this._scale.M11; } set { this._scale.M11 = value; } } /// <summary> /// <para>Gets or sets the current scale on X axis.</para> /// </summary> public float YScale { get { return this._scale.M22; } set { this._scale.M22 = value; } } /// <summary> /// <para>Gets or sets the current scale on X axis.</para> /// </summary> public float ZScale { get { return this._scale.M33; } set { this._scale.M33 = value; } } #endregion #region Constructor /// <summary> /// <para>Default constructor.</para> /// </summary> public TransformBase() { Reset(); } #endregion #region Public methods /// <summary> /// <para>Reset the matrices to default position.</para> /// </summary> public void Reset() { this._translation = Matrix.Identity; this._rotation = Matrix.Identity; this._scale = Matrix.Identity; this._rotationX = _rotationY = _rotationZ = 0.0f; } #endregion #region Transform methods #region Translate /// <summary> /// <para>Move current object to the specified location.</para> /// </summary> /// <param name="x">Position X-axis value.</param> /// <param name="y">Position Y-axis value.</param> /// <param name="z">Position Z-axis value.</param> public void MoveTo(float x, float y, float z) { this._translation.M41 = x; this._translation.M42 = y; this._translation.M43 = z; } /// <summary> /// <para>Move current object to the specified location.</para> /// </summary> /// <param name="translation">Position's vector.</param> public void MoveTo(Vector3 translation) { this.MoveTo(translation.X, translation.Y, translation.Z); } /// <summary> /// <para>Translate current object from the current position with the specified vector.</para> /// </summary> /// <param name="x">Vector X-axis value.</param> /// <param name="y">Vector Y-axis value.</param> /// <param name="z">Vector Z-axis value.</param> public void Translate(float x, float y, float z) { _translation.M41 += x; _translation.M42 += y; _translation.M43 += z; } /// <summary> /// <para>Translate current object from the current position with the specified vector.</para> /// </summary> /// <param name="translation">Translation vector</param> public void Translate(Vector3 translation) { this.Translate(translation.X, translation.Y, translation.Z); } #endregion #region Rotate /// <summary> /// <para>Rotate current object on the X,Y,Z axis.</para> /// </summary> /// <param name="x">X axis rotation in radians</param> /// <param name="y">Y axis rotation in radians</param> /// <param name="z">Z axis rotation in radians</param> public void Rotate(float x, float y, float z) { this._rotationX = x; this._rotationY = y; this._rotationZ = z; this._rotation = Matrix.CreateRotationX(x)*Matrix.CreateRotationY(y)*Matrix.CreateRotationZ(z); } /// <summary> /// <para>Make a rotation from the current rotation.</para> /// </summary> /// <param name="x">X axis rotation in radians</param> /// <param name="y">Y axis rotation in radians</param> /// <param name="z">Z axis rotation in radians</param> public void Turn(float x, float y, float z) { this._rotationX += x; this._rotationY += y; this._rotationZ += z; this.Rotate(this._rotationX, this._rotationY, this._rotationZ); } #endregion #region Scale /// <summary>Resize the current object.</summary> /// <param name="x">Scale factor for X values.</param> /// <param name="y">Scale factor for Y values</param> /// <param name="z">Scale factor for Z values</param> public void Resize(float x, float y, float z) { this._scale.M11 = x; this._scale.M22 = y; this._scale.M33 = z; } /// <summary>Scale current object from current size.</summary> /// <param name="x">X</param> /// <param name="y">Y</param> /// <param name="z">Z</param> public void Scale(float x, float y, float z) { this._scale.M11 += x; this._scale.M22 += y; this._scale.M33 += z; } #endregion #endregion }

Vous remarquerez ici des instructions du type :

this._scale.M11 = x; this._scale.M22 = y; this._scale.M33 = z;

Les propriété comme M11 ou M23 correspondent à des valeurs situées dans la matrices. Nous reviendrons dans un prochain article sur leur raison d'être.

Conclusion

Cet article est incontournable si vous ne maitrisez pas encore la notion de transformation. Ayez toujours en tête les principes élémentaires qu'il a énuméré afin de vous éviter de nombreuses heures de recherches après des invraissemblances graphiques, qui sont, au final, relativement simples à éviter.

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)!

Retourner au sommaire des cours

XNA Tutorial 7 : Cas concret, l'affichage d'une ville et du système solaire

valentin — Mon, 05 Feb 2007 10:14:00 GMT

Retourner au sommaire des cours

Nous avons passé, avec le dernier tutorial, une première étape dans le développement de jeux. Ce tutorial marque la fin de cette étape et, en conclusion, va nous apprendre à utiliser nos connaissances acquises pour créer une ville (rudimentaire, il faut rester humble), et pour créer une simulation de notre bon vieux système solaire. Ces deux projets ne sont pas seulement ludiques, il vont nous être très utiles. La ville tout d'abord va nous permettre de bien comprendre comment s'orienter dans l'espace et de mesurer l'utilité d'un bon système objet. La simulation quand à elle, poussera nos connaissances et notre maitrise des Matrices dans leur derniers retranchements. Ces deux projets seront aussi la base de nombreux projets qui vont suivre pour expliciter les notions que nous apprendrons aux fils des tutoriaux qui vont suivre.

L'objet de toutes les convoitises

La ville que nous allons créer sera simple. Chaque paté de maison sera en fait constitué d'un seul batiment dont la hauteur variera de manière aléatoire. Nous utiliserons pour la créer trois types de cubes : un cube pour créer le sol, un cube par paté pour créer les trottoires, un cube pour créer chaque gratte ciel. Evidemment nous n'allons pas comme dans le précédent tutoriel, nous amuser à instancier un vertex buffer et un index buffer pour chaque cube créé à la main. Nous allons plutot utiliser une classe "Cube" qui va faire tout le travail à notre place en nous offrant deux méthodes : Load et Render. Nous reprendrons le code du tutorial précédent en le factorisant pour permettre un développement plus modularisé.

La nouvelle classe Cube se présente ainsi :

/// <summary>/// <para>3D representation of a cube.</para>/// </summary>public class Cube : IDisposable{ #region Private members private GraphicsDevice _device; private VertexBuffer _vertexBuffer = null; private IndexBuffer _indexBuffer = null; private float _width; private float _height; private float _depth; private Color _color = Color.TransparentWhite; private float _x, _y, _z; private float _rotationX, _rotationY, _rotationZ; private static short[] indices = new short[36]{0,1,2, 0,2,3, 3,2,4, 3,4,5, 5,4,7, 5,7,6, 6,7,1, 6,1,0, 6,0,3, 6,3,5, 1,7,4, 1,4,2}; private Matrix _transformationMatrix; private Matrix _translationMatrix; private Matrix _scaleMatrix; private Matrix _rotationMatrix; #endregion #region Properties /// <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 Cube's current transformation.</para> /// </summary> public Matrix Transformation { get { return this._transformationMatrix; } set { this._transformationMatrix = value; } } /// <summary> /// <para>Gets the cube's Width.</para> /// </summary> public float Width { get { return this._width; } } /// <summary> /// <para>Gets the cube's height.</para> /// </summary> public float Height { get { return this._height; } } /// <summary> /// <para>Gets the cube's depth.</para> /// </summary> public float Depth { get { return this._depth; } } /// <summary> /// <para>Gets the cube's position on x-axis.</para> /// </summary> public float X { get { return this._x; } } /// <summary> /// <para>Gets the cube's position on y-axis.</para> /// </summary> public float Y { get { return this._y; } } /// <summary> /// <para>Gets the cube's position on z-axis.</para> /// </summary> public float Z { get { return this._z; } } #endregion #region Constructors /// <summary> /// <para>Instanciate a new Cube objet.</para> /// </summary> public Cube() { this._transformationMatrix = Matrix.Identity; this._vertexBuffer = null; this._width = 3.0f; this._height = 3.0f; this._depth = 3.0f; this._x = 50.0f; this._y = 10.0f; this._z = 10.0f; this._rotationMatrix = Matrix.Identity; this._translationMatrix = Matrix.Identity; this._scaleMatrix = Matrix.CreateScale(1f, 1f, 1f); } public void Dispose() { if (this._vertexBuffer != null) this._vertexBuffer.Dispose(); if (this._indexBuffer != null) this._indexBuffer.Dispose(); this._indexBuffer = null; this._vertexBuffer = null; } #endregion #region Initialization public void Load(GraphicsDevice device) { this._device = device; this.InitializeIndices(); this.InitializeVertices(); } private void InitializeIndices() { this._indexBuffer = new IndexBuffer( this._device, typeof(short), 36, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); this._indexBuffer.SetData(Cube.indices); } private void InitializeVertices() { VertexPositionColor[] vertices = new VertexPositionColor; vertices[0].Position = new Vector3(0f, 0f, 0f); vertices[0].Color = this.Color; vertices[1].Position = new Vector3(0f, 0f, 1f); vertices[1].Color = this.Color; vertices[2].Position = new Vector3(1f, 0f, 1f); vertices[2].Color = this.Color; vertices[3].Position = new Vector3(1f, 0f, 0f); vertices[3].Color = this.Color; vertices[4].Position = new Vector3(1f, 1f, 1f); vertices[4].Color = this.Color; vertices[5].Position = new Vector3(1f, 1f, 0f); vertices[5].Color = this.Color; vertices.Position = new Vector3(0f, 1f, 0f);// vertices.Color = this.Color; vertices[7].Position = new Vector3(0f, 1f, 1f); vertices[7].Color = this.Color; this._vertexBuffer = new VertexBuffer( this._device, typeof(VertexPositionColor), 8, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); this._vertexBuffer.SetData(vertices); } #endregion #region Rendering /// <summary> /// <para>Render the cube on the device.</para> /// </summary> public void Render() { this._device.Vertices[0].SetSource(this._vertexBuffer, 0, VertexPositionColor.SizeInBytes); this._device.Indices = this._indexBuffer; this._device.VertexDeclaration = new VertexDeclaration(this._device, VertexPositionColor.VertexElements); this._device.DrawIndexedPrimitives(PrimitiveType.TriangleList, 0, 0, 8, 0, 12); } #endregion #region Public methods /// <summary> /// Sets a size for the cube. /// </summary> public void SetRotation(float rotationX, float rotationY, float rotationZ) { this._rotationX = rotationX; this._rotationY = rotationY; this._rotationZ = rotationZ; this._rotationMatrix = Matrix.CreateRotationX(rotationX) * Matrix.CreateRotationY(rotationY) * Matrix.CreateRotationZ(rotationZ); this.UpdateTransformation(); } /// <summary> /// Sets a size for the cube. /// </summary> public void SetSize(Vector3 size) { this._width = size.X; this._height = size.Z; this._depth = size.Y; this._scaleMatrix = Matrix.CreateScale(size.X, size.Y, size.Z); this.UpdateTransformation(); } /// <summary> /// Sets a position for the cube. /// </summary> public void SetPosition(Vector3 location) { this._x = location.X; this._y = location.Y; this._z = location.Z; this._translationMatrix = Matrix.CreateTranslation(location.X, location.Y, location.Z); this.UpdateTransformation(); } private void UpdateTransformation() { this._transformationMatrix = this._scaleMatrix * this._rotationMatrix * this._translationMatrix; } #endregion }

rien de bien compliqué ; il s'agit d'une simple factorisation du code du tutoriel 6. J'ai pris le code de la classe Game1 d'alors pour le copier coller à l'intérieur de cette classe. Si vous regardez le code de la nouvelle classe Game1 vous verrez une nette amélioration de la lisibilité du code. Notons toutefois que nous utilisons ici une couleur qui peut être spécifiée lors de la création du cube en lieu et place des huit couleurs que nous utilisions jusqu'ici pour chaque sommet du cube.

Le constructeur de Game1 contient désormais une nouvelle instruction :

this._cube = new Cube();

La méthode Initialize ne fait plus appel à this.InitializeIndices();this.InitializeVertices();

mais à

this.InitializeCubes();

qui correspond à la méthode

private void InitializeCubes()
{
this._cube.Load(this.graphics.GraphicsDevice);

}

La méthode d'affichage dessine le cube en une instruction :

this._cube.Render();

Enfin, les actions utilisateur sur le clavier modifient la taille et la position du code par l'intermédiaire d'appels à des méthodes explicites :

this._cube.SetSize(size);

this._cube.SetPosition(position);

La transformation étant obtenue par l'intermédiaire de la propriété Transformation. Celle-ci se calcule automatiquement à partir des méthodes SetRotation, SetSize et SetPosition.

//modulolong iTime = (long)(gameTime.TotalGameTime.TotalMilliseconds % 2000f);//passage en radianfloat fAngle = iTime * (2.0f * MathHelper.Pi) / 2000.0f; this._cube.SetSize(size);this._cube.SetPosition(position); //la transformatio en elle mêmeMatrix world = Matrix.CreateRotationY(fAngle) * Matrix.CreateRotationX(fAngle) * this._cube.Transformation;

effect.Parameters["xWorld"].SetValue(world);

A l'exécution vous obtenez pourtant une application dont le rendu est complètement différent de notre précédent tutoriel :

En fait on peut avoir l'impression au premier abord d'avoir regressé. Au contraire nous avons fait un grand pas en avant ! Notre cube est plus petit tout simplement parcequ'il possède désormais une taille unitaire (1 pour chacun de ses arrètes contre 2 précédemment), afin de facilement spécifier des tailles précises. Il possède une couleur pâle. Ceci est du au fait que nous affectons à chaque vertex la couleur spécifiée par l'utilisateur avant l'appel à la méthode Load du cube. Reportez vous au code de la méthode InitializeVertices pour mieux comprendre :

private void InitializeVertices(){ VertexPositionColor[] vertices = new VertexPositionColor; vertices[0].Position = new Vector3(0f, 0f, 0f); vertices[0].Color = this.Color; vertices[1].Position = new Vector3(0f, 0f, 1f); vertices[1].Color = this.Color; vertices[2].Position = new Vector3(1f, 0f, 1f); vertices[2].Color = this.Color; vertices[3].Position = new Vector3(1f, 0f, 0f); vertices[3].Color = this.Color; vertices[4].Position = new Vector3(1f, 1f, 1f); vertices[4].Color = this.Color; vertices[5].Position = new Vector3(1f, 1f, 0f); vertices[5].Color = this.Color; vertices.Position = new Vector3(0f, 1f, 0f);// vertices.Color = this.Color; vertices[7].Position = new Vector3(0f, 1f, 1f); vertices[7].Color = this.Color; this._vertexBuffer = new VertexBuffer( this._device, typeof(VertexPositionColor), 8, ResourceUsage.WriteOnly, ResourceManagementMode.Automatic); this._vertexBuffer.SetData(vertices);

}

Enfin pour terminer, le cube ne semble pas tourner sur lui-même mais par rapport à un point correspondant au vertice 0. Là encore tout est normal, le vertice 0 se trouve à l'origine dans le repère 3D à l'intérieur duquel nous créer notre cube (0f, 0f, 0f). C'est par rapport à l'origine d'un objet 3D que se calculent toutes les transformations qui lui sont appliquées. Notre cube se voit rotaté sur lui-même, cette rotation s'effectuera donc par rapport à ce vertice.

Pour terminer ce point il est plus que necessaire de lire l'article qui se trouve ici, pour bien comprendre l'importance de l'ordre de la multiplication des matrices de transformation (rotation, redimentionnement, translation) pour modifier l'affichage d'un objet à l'écran afin de vous éviter toute surprise et bug de rendu incompréhensible.

La théorie étant acquise, un exercice peaufinera notre pratique : Maintenant que nous avons une classe clé en main pour créer un cube et l'afficher simplement, essayez d'en afficher plusieurs à l'écran.

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

New York !

Si vous avez reussi l'exercice précédent, notre premier monde de jeu sera une formalité pour vous. La ville que nous allons créer ici sera plus que rudimentaire. Le sol sera un cube avec une hauteur de 1, les trottoires des pavés applatis avec une hauteur de 5, enfin les batiments seront eux aussi des cubes dont la hauteur sera variable. A ce stade de nos connaissances nous ne pouvons pas ajouter de lumières d'ambiance, pas de texture aux immeubles et pas d'optimisation d'affichage. C'est pourtant un avantage certain puisque dans les articles qui suivront nous améliorerons le code dans ce sens et pourrons mesurer facilement l'importances des notions que nous allons acquerir. Cette ville nous offre aussi la possibilité de bien comprendre comment placer ses objets à l'écran.

Les seules modifications que nous apporterons au programme que nous venons de faire vont porter sur la classe Game1. Nous venons d'énumérer trois types de cube. Commencez donc à déclarer ces cubes au tout début de cette classe :

private Cube _ground;
private Cube[] _trottoires;
private Cube[] _batiments;

Ajoutez de même un ensemble de constantes qui nous éviterons de remplir notre code de valeur numériques incompréhensibles :

private static int NumberOfBatimentsOnASide = 5;
private static int BatimentSize = 50;
private static int TrottoireSize = 70;
private static int TrottoireHeight = 5;
private static int RoadWidth = 40;
private static int BatimentMinimalHeight = 50;

private static int BatimentMaximalHeight = 450;

Celles ci sont assez explicites pour ne pas avoir à être présentées. Le constructeur instanciera tous les cubes.

_ground = new Cube();
_trottoires = new Cube[NumberOfBatimentsOnASide * NumberOfBatimentsOnASide];
_batiments = new Cube[NumberOfBatimentsOnASide * NumberOfBatimentsOnASide];

Et la méthode InitializeCubes les chargera en mémoire

private void InitializeCubes(){ TerrainSize = (RoadWidth + TrottoireSize) * NumberOfBatimentsOnASide + RoadWidth; Random random = new Random(); //sol this._ground.Color = Color.Gray; this._ground.Load(this.graphics.GraphicsDevice); this._ground.SetSize(new Vector3( TerrainSize, TerrainSize, 1)); this._ground.SetPosition(new Vector3(-TerrainSize / 2, -TerrainSize / 2, 0)); //trottoires for (int i = 0; i < NumberOfBatimentsOnASide; i++) { for (int j = 0; j < NumberOfBatimentsOnASide; j++) { this._trottoires[i * NumberOfBatimentsOnASide + j] = new Cube(); this._trottoires[i * NumberOfBatimentsOnASide + j].Color = Color.LightGray; this._trottoires[i * NumberOfBatimentsOnASide + j].Load(this.graphics.GraphicsDevice); this._trottoires[i * NumberOfBatimentsOnASide + j].SetSize(new Vector3(TrottoireSize, TrottoireSize, TrottoireHeight)); _trottoires[i * NumberOfBatimentsOnASide + j].SetPosition(new Vector3(RoadWidth + j * (TrottoireSize + RoadWidth) - TerrainSize/2 , RoadWidth+(TrottoireSize-BatimentSize)/2 + BatimentSize + i * (TrottoireSize + RoadWidth) - TerrainSize/2 , 0)); } } //grattes ciels for (int i = 0; i < NumberOfBatimentsOnASide; i++) { for (int j = 0; j < NumberOfBatimentsOnASide; j++) { this._batiments[i * NumberOfBatimentsOnASide + j] = new Cube(); byte grayColorComposante = (byte)random.Next(0, 256); this._batiments[i * NumberOfBatimentsOnASide + j].Color = new Color(grayColorComposante, grayColorComposante, grayColorComposante); this._batiments[i * NumberOfBatimentsOnASide + j].Load(this.graphics.GraphicsDevice); int size = random.Next(BatimentMinimalHeight, BatimentMaximalHeight); this._batiments[i * NumberOfBatimentsOnASide + j].SetSize(new Vector3(BatimentSize, BatimentSize, size)); this._batiments[i * NumberOfBatimentsOnASide + j].SetPosition(new Vector3(BatimentSize + j * (BatimentSize + RoadWidth + (TrottoireSize - BatimentSize)) - TerrainSize / 2, RoadWidth + (TrottoireSize - BatimentSize) + BatimentSize + i * (TrottoireSize + RoadWidth) - TerrainSize / 2, 0)); } }} Pour chaque cube nous :

Spécifions une couleur
Chargeons les données 3D en mémoire
Spécifions une taille
Specifions une position.

La taille et la position sont calculées en fonction des constantes déclarées au début de la classe. Ne reste plus que l'affichage dans la méthode Draw :

for (int i = 0; i < NumberOfBatimentsOnASide; i++){ for (int j = 0; j < NumberOfBatimentsOnASide; j++) { effect.Parameters[2].SetValue(this._trottoires[i * NumberOfBatimentsOnASide + j].Transformation); foreach (EffectPass pass in effect.CurrentTechnique.Passes) { pass.Begin(); _trottoires[i * NumberOfBatimentsOnASide + j].Render(); pass.End(); } }

}

Notons ici que nous spécifions la transformation world avant chaque affichage de cube.

effect.Parameters[2].SetValue(this._batiments[i * NumberOfBatimentsOnASide + j].Transformation);

La valeur 2 correspond à l'index "xWorld" que nous utilisions précédemment.

La méthode Update met à jour la matrice View pour faire tourner la camera autour de la ville.

// TODO: Add your update logic here

int iTime = Environment.TickCount % 10000; //passage en radian float fAngle = iTime * (2.0f * (float)Math.PI) / 10000.0f; // Mettre en place notre matrice de vue. Matrix view = Matrix.CreateLookAt(new Vector3(500.0f * (float)Math.Cos(fAngle), 500.0f * (float)Math.Sin(fAngle), 510f + 500.0f * (float)Math.Sin(fAngle)), new Vector3(0.0f, -20.0f, 0f), new Vector3(0.0f, 0.0f, 1.0f)); this.effect.Parameters[0].SetValue(view);//0 equivalent de "xView"

Au final à l'affichage nous obtenons :

Comme exercice pour terminer sur ce premier monde de jeu, essayez de modifier la taille des trottoires, l'espacement entre les batiments et, plus difficile deplacer la caméra à l'aide du clavier.

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

Système solaire

Passons maintenant au second moteur de jeu : le système solaire. Nous allons aller ici beaucoup plus loin dans l'utilisation des matrices et d'un modèle objet. Notre but est de créer une vue de l'espace où apparaitra Mercure, Venus, La Terre, Mars et Jupiter. Nous ajouterons de même la Lune. Plusieurs points critiques seront abordés : le développement d'une classe Sphere, sur le modèle de la classe Cube pour afficher ... une sphère. Un système d'héritage dans le mesure ou nous allons implémenter des dérivés de cette classe sphere et enfin des calculs Matriciels très poussés.

A ce propos -NDA : je me repete mais c'est important- il est plus que necessaire de lire l'article qui se trouve ici, pour bien comprendre l'importance de l'ordre de la multiplication des matrices de transformations (rotation, redimentionnement, translation) pour modifier l'affichage d'un objet à l'écran afin de vous éviter toute surprise et bug de rendu incompréhensible.

La classe Sphere

La classe sphere est relativement similaire à la classe Cube. Le développeur doit toutefois spécifier deux informations à la création d'une sphere : le nombre d'anneaux (résolution verticale), et le nombre de segments (résolution horizontale). Ces deux données permettent de faire varier la qualité et la douceur des courbes du modèle 3D. Inutile d'afficher ici le code de la classe : une lecture suffit. Les points compliqués se situent dans les deux méthodes de création du VertexBuffer et de l'IndexBuffer. Nous utilisons là un code à base de formules trigonométrique pour générer notre spère. Ce que fait réellement le code là, n'est pas très important...

Maintenant nous sommes pret à créer un modèle objet. Nous suivrons le plan suivant :

Une classe Planet sera créée et héritera de Sphere. Elle implémentera en spécifique 4 Matrices :

Une matrice pour la distance entre la planete courante en tant que sattelite et la planete principale (terre<->soleil)
Une matrice pour la rotation de la planète sur elle même.
Une matrice pour la révolution de la planète courant en tant que sattelite autour de la planète principale.
Une matrice résultat qui contiendra le résultat de toutes ces transformation et qui sera appliquée à la matrice World.

Elle implémentera 2 constantes sur lesquels se baseront les calculs pour les mouvement de chaque planète. Ces constantes correspondrons au temps de rotation de la terre (jour) et au temps de révolution de la terre (année). Elle implémentera une propertie Transformation qui sera une surcharge obscurante de la propriété du même nom héritée. Cette propriété renverra le contenu de la matrice résultat des transformations de la planète courante. Enfin cette classe oblige toutes les classes filles à implémenter une méthode Update. Cette méthode contiendra le code qui mettra à jour cette matrice résultat.

La classe Planet se présente ainsi :

public abstract class Planete : Sphere{ internal Matrix planetMatrix, moveMatrix, rotationMatrix, revolutionMatrix; public const float DayTime = 10; public const float YearTime = DayTime * 365.0f; public new Matrix Transformation { get { return planetMatrix; } } public Planete() : base(30, 30) { } public abstract void Update(GameTime gameTime);}

Septs planètes hériteront de Planete : Sun, Mercure, Venus, Earth, Moon, Mars, Jupiter. Nous étudierons deux d'entre elles : Earth et Mercure. Earth se présente ainsi :

public class Earth : Planete{ public Earth() { this.Color = Microsoft.Xna.Framework.Graphics.Color.Blue; } public override void Update(GameTime gameTime) { rotationMatrix = Matrix.CreateRotationY(Environment.TickCount / DayTime);//une rotation par jour revolutionMatrix = Matrix.CreateRotationY(Environment.TickCount / YearTime);//365 rotation par an moveMatrix = Matrix.CreateTranslation(20.0f, 0.0f, 0.0f);//58 milllions de km de distance du soleil Matrix pivotMatrix = Matrix.CreateRotationZ(23.44f * (float)Math.PI / 180);//obliquité de l'axe de rotation planetMatrix = Matrix.CreateScale(1f, 1f, 1f) * rotationMatrix * pivotMatrix;//création d'une seule matrice pour tous ces calculs planetMatrix *= moveMatrix; planetMatrix *= revolutionMatrix; }

}

La classe Earth offre une spécificité par rapport à la classe Planete, en donnant une couleur bleue au modèle 3D (dans le constructeur) et en affectant une valeur à chacune de nos matrices (dans la méthode Update).

rotationMatrix = Matrix.CreateRotationY(Environment.TickCount / DayTime);

revolutionMatrix = Matrix.CreateRotationY(Environment.TickCount / YearTime);

moveMatrix = Matrix.CreateTranslation(20.0f, 0.0f, 0.0f);

Matrix pivotMatrix = Matrix.CreateRotationZ(23.44f * (float)Math.PI / 180);

planetMatrix = Matrix.CreateScale(1f, 1f, 1f) * rotationMatrix * pivotMatrix;

planetMatrix *= moveMatrix;planetMatrix *= revolutionMatrix;

La première matrice correspond à la rotation de la terre autour d'elle-même. Nous divisons le temps passé par la constant correspondant à un jour terrestre. La seconde matrice correspond au temps de révolution de la terre autour du soleil. Même calcul mais par rapport à une année terrestre. La troisième matrice spécifie la distance terre / soleil. La matrice suivant spécifie l'obiquité de la terre (la terre est légerement penchée de 23° sur l'axe des pôles). Nous créons ensuite une matrice pour dimensionner la terre (la terre est la planète sur laquelle nous basons nos calculs, donc ici aucun redimentionnement). Les trois dernières instructions multiplient ces matrices entre elles pour affecter la matrice résultat. Si vous avez lu l'article sur l'importance de l'ordre des multiplications de matrices vous devez porter une attention particulière à ces opérations. Après l'instruction :

planetMatrix = Matrix.CreateScale(1f, 1f, 1f) * rotationMatrix * pivotMatrix;

La matrice résultat permet de faire tourner la terre, en lui donnant une obiquité et une taille. La terre ne tourne pas autour du soleil et se trouve au centre de l'univers (haaa Aristote...). Après

planetMatrix *= moveMatrix;

La terre se trouve à une distance de 20 du soleil, tourne sur elle même et possède une taille et une obiquité. Mais elle ne tourne pas autour du soleil (nous nous rapprochons de Galilé toutefois). C'est ce que nous obtenons avec

planetMatrix *= revolutionMatrix;

Nous affectons donc ici une rotation autour d'un cercle imaginaire de 20 de rayon (multiplication précédente d'une matrice de translation de 20 par une matrice de rotation).

Regardons maintenant la classe Mercure.

public class Mercure : Planete{ public Mercure() { this.Color = Microsoft.Xna.Framework.Graphics.Color.LightGray; } public override void Update(GameTime gameTime) { rotationMatrix = Matrix.CreateRotationY(Environment.TickCount / DayTime * 58.6f);//une rotation par jour revolutionMatrix = Matrix.CreateRotationY(Environment.TickCount / YearTime * 1.6f);//365 rotation par an Matrix moveMatrix = Matrix.CreateTranslation(7.0f, 0.0f, 0.0f);//58 milllions de km de distance du soleil Matrix pivotMatrix = Matrix.CreateRotationZ(0.0f * (float)Math.PI / 180);//obliquité de l'axe de rotation planetMatrix = Matrix.CreateScale(0.4f, 0.4f, 0.4f) * rotationMatrix * pivotMatrix;//création d'une seule matrice pour tous ces calculs planetMatrix *= moveMatrix; planetMatrix *= revolutionMatrix; }

}

Mercure possèdera une couleur gris clair. Nous savons qu'elle tourne atour de son axe en 58,6 jours. Qu'elle effectue 1,6 révolution pendant un an. Nous la plaçons a une distance de 7 du soleil. Elle n'a aucun obiquité. Elle fait 0,4 fois la taille de la terre. Le contenu de la méthode Update coule de source si la méthode Update de Earth a été comprise. Jettez encore un oeil au contenu de la classe Moon. Sa méthode Update suit le même principe que Earth et Mercure et ajoute deux calculs en plus :

planetMatrix *= this._earth.moveMatrix; planetMatrix *= this._earth.revolutionMatrix;

A ce stade la lune ne se trouve pas autour de la terre mais autour du soleil bien que les calculs précédents soient bons. Nous devons faire une translation correspondant à la distance terre / soleil. C'est ce que fait la première instruction. De même, tout en tournant autour de la terre, la lune tourne forcement autour du soleil puisque la terre le fait. C'est la raison de la seconde instruction affichée ici.

Etudions maintenant le contenu de la classe Game1. Nous commonçons déjà par déclarer les 7 planètes que nous manipulons ici.

private Sun _sun;
private Earth _earth;
private Mercure _mercure;
private Mars _mars;
private Venus _venus;
private Jupiter _jupiter;

private Moon _moon;

Après création, elles sont ajoutées dans une liste générique afin de simplifier le code par la suite.

_sun = new Sun();_earth = new Earth();_mercure = new Mercure();_mars = new Mars();_venus = new Venus();_jupiter = new Jupiter();_moon = new Moon(_earth);_planetes.AddRange(new Planete[] { _sun, _earth, _mercure, _mars, _venus, _jupiter, _moon }); Vient ensuite les étapes traditionnelles de chargement à l'aide de la méthode Load et d'affichage avec Render. Notons que la méthode Update boucle sur toutes les planètes et appelle leur méthode Update pour permettre de mettre à jour leur mouvement.

A l'exécution vous obtenez :

Pas très beau, mais très instructif. Là encore, comme pour le moteur de ville, nous l'améliorerons au fil des tutoriaux qui vont suivre. Nous l'utiliserons dans notre apprentissage de la lumière et des effets spéciaux. Voici au final ce que donne notre moteur spacial :

Notre moteur spacial est fini ! Comme exercice, je ne saurais trop vous conseiller d'ajouter Jupiter, et un satellite de Jupiter. De même pourquoi ne pas exporter notre variable effet, au niveau de la classe Sphere ?

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

Conclusion

La première étape de notre apprentissage est désormais terminée. Si cette étape portait sur les bases du développement 3D, l'étape qui vient portera sur le réalisme. Si vous jetez un oeil aux deux images précédentes (moteur spacial) vous comprendrez que ce mot prend une signification importante en 3D. Ce que nous avons vu jusqu'ici, porte sur des notions qui sont à la base de n'importe quel développement d'application 3D. Bien les comprendre, bien les maitriser, c'est assurer une base stable, saine et reutilisable pour ses futures productions. Nous aborderons maintenant le texturing, les Lumières, les effets de brouillard, le texte en 3D, les particules, les Meshs ...

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

A bientôt sur ce Blog !

Valentin

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)!

Retourner au sommaire des cours

XNA Tutorial 5 : Les matrices et les Transformations

valentin — Wed, 17 Jan 2007 04:34:00 GMT

Retourner au sommaire des cours

Ce tutorial est une suite du tutorial précédent. Nous allons continuer à utiliser les matrices pour mieux les comprendre au travers des transformations. Nous introduirons aussi le tutorial suivant qui abordera les indices. La notions de vertices (et leur utilisation) sera elle aussi abordée puisque nous allons passer de l'affichage d'un simple triangle à un joli cube coloré.

Notre programme

La première difficulté à appréhender nous vient de l'affichage du cube. Pour le débutant, l'affichage d'un triangle était déjà un exercice relativement compliqué. Avec l'affichage d'un cube l'exercice se corse puisqu'il faut pas moins de 12 triangles pour former un cube ! (un cube = 6 faces, une face = 2 triangles). Nous commencerons donc à réaliser l'affichage d'une face, puis de deux, et enfin le cube en entier. Nous appliquerons une transformation propre au cube pour terminer.

Regardez l'image ci-dessous, elle explicite les douze triangles qui forment le cube.

Les traits noirs représentent les faces, les traits gris les triangles. C'est ce résultat que nous devons reproduire (en plus coloré). Reprennons le code du précédent tutorial. La première étape consiste à modifier notre triangle afin de le rendre rectangle (triangle à angle droit). Les trois vertices définis ainsi :

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

deviennent :

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

On remarque que les trois points du triangle on la même profondeur (10f) ceci, afin de rendre la définition des position des vertices plus simple à imager. L'image ci-dessous résume le travail que nous venons de faire (les numéros en rouge correspondant à l'index des vertices dans le tableau vertices) :

On notera que nous avons défini les vertices dans l'ordre des aiguilles d'une montre (voir cours précédent sur le backface culling)... En outre nous sommes en train de construire un cube. Il n'est donc plus nécessaire d'annuler le backface culling les faces des triangles non visibles étant situées à l'intérieur du cube. Supprimer pour cela l'instruction :

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

De la méthode répondant à l'événement de reinisitalisation du device graphique (graphics_DeviceReset).

Annulez les transformations que nous appliquions au triangle afin de le faire tourner en remplaçant dans la méthode Update l'instruction :

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

par :

this.effect.Parameters["World"].SetValue(Matrix.Identity);

En outre, les dimensions de notre triangle sont bien plus importantes que dans le tutorial précédent. Il faut donc replacer la caméra en conséquence. Modifiez les instructions d'affectation aux matrices View et Projection de la méthode Load ainsi :

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

Nous nous placons pile en face du triangle que nous venons de créer à 50 unité de distance et avec une légère vue de haut de 20 unités.Si vous lancez le programme à ce stade vous obtenez :

Le premier triangle du cube est affiché. En fait aucun mérite à avoir, cela fait déjà quatre tutoriaux que nous savons faire cela. Ajoutons une difficulté en créant un nouveau triangle collé au premier de manière a former une face carrée ! Modifiez la création du tableau de vertices dans Initialize de cette manière :

vertices = new VertexPositionColor[ 6 ];

//triangle 1, face devant
vertices[0].Position = new Vector3(-10f, -10f, 10f);
vertices[0].Color = Color.Green;
vertices[1].Position = new Vector3(-10f, 10f, 10f);
vertices[1].Color = Color.Red;
vertices[2].Position = new Vector3(10f, 10f, 10f);
vertices[2].Color = Color.Yellow;

//triangle 2, face devant
vertices[3].Position = new Vector3(-10f, -10f, 10f);
vertices[3].Color = Color.Green;
vertices[4].Position = new Vector3(10f, 10f, 10f);
vertices[4].Color = Color.Red;
vertices[5].Position = new Vector3(10f, -10f, 10f);
vertices[5].Color = Color.Yellow;

Nous avons maintenant 6 vertices. Deux triangles isocèles à angle droit et donc une face. Schematiquement nous avons réalisé ceci :

Nous n'affichons donc plus une seule primitive (triangle) mais deux. Il faut donc aussi modifier l'instruction de dessin dans la méthode Draw :

this.graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 2);

Le "2" à la fin de l'appel insique que nous affichons maintenant deux primitives (deux triangles). Etant donné que nous sommes en TriangleList il faut donc 6 vertices, ce que nous donnons à l'aide du tableau vertices. Pas de surprise, à l'execution nous obtenons :

Accelerons le rythme, la prochaine étape sera plus importante : une nouvelle face va être ajoutée, soit deux triangles en plus et donc 12 vertices à définir. Modifiez de nouveau la création du tableau de vertices pour passer à 12 vertices :

vertices = new VertexPositionColor[12];

Les deux triangles ajoutés correspondent dans l'image à :

Modifiez l'instruction de dessin ainsi :

this.graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 4);

Nous affichons maintenant 4 triangles. Pourtant à l'affichage nous obtenons le même résultat que précédemment, que s'est il passé ? Ce problème et lié à la position de la caméra. Nous sommes pile en face des deux triangles que nous avons créé au début. Les deux nouveaux triangles ne sont donc pas visibles. Modifiez la position de la caméra (dans la méthode LoadContent) de manière a la placer légèrement plus haut et à droite :

this.effect.Parameters["View"].SetValue(Matrix.CreateLookAt(new Vector3(20, 30, 50), Vector3.Zero, Vector3.Up));

Cette fois ci à l'exécution nous obtenons :

On distingue bien les deux faces. A ce stade l'ajout de triangles pour créer un cube doit être assimilé, nous allons directement ajouter les 4 autres faces restantes (soit 8 triangles). Le tableau de vertices est désormais créé de cette manière :

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

//triangle 3, face droite
vertices[ 6 ].Position = new Vector3(10f, -10f, 10f);
vertices[ 6 ].Color = Color.Green;
vertices[7].Position = new Vector3(10f, 10f, 10f);
vertices[7].Color = Color.Red;
vertices[ 8 ].Position = new Vector3(10f, 10f, -10f);
vertices[ 8 ].Color = Color.Yellow;
//triangle 4, face droite
vertices[9].Position = new Vector3(10f, -10f, 10f);
vertices[9].Color = Color.Green;
vertices[10].Position = new Vector3(10f, 10f, -10f);
vertices[10].Color = Color.Red;
vertices[11].Position = new Vector3(10f, -10f, -10f);
vertices[11].Color = Color.Yellow;

//triangle 5, face arrriere
vertices[12].Position = new Vector3(10f, -10f, -10f);
vertices[12].Color = Color.Green;
vertices[13].Position = new Vector3(10f, 10f, -10f);
vertices[13].Color = Color.Red;
vertices[14].Position = new Vector3(-10f, 10f, -10f);
vertices[14].Color = Color.Yellow;
//triangle 6, face arrirere
vertices[15].Position = new Vector3(10f, -10f, -10f);
vertices[15].Color = Color.Green;
vertices[16].Position = new Vector3(-10f, 10f, -10f);
vertices[16].Color = Color.Red;
vertices[17].Position = new Vector3(-10f, -10f, -10f);
vertices[17].Color = Color.Yellow;

//triangle 7, face gauche
vertices[18].Position = new Vector3(-10f, -10f, -10f);
vertices[18].Color = Color.Green;
vertices[19].Position = new Vector3(-10f, 10f, -10f);
vertices[19].Color = Color.Red;
vertices[20].Position = new Vector3(-10f, 10f, 10f);
vertices[20].Color = Color.Yellow;
//triangle 8, face gauche
vertices[21].Position = new Vector3(-10f, -10f, -10f);
vertices[21].Color = Color.Green;
vertices[22].Position = new Vector3(-10f, 10f, 10f);
vertices[22].Color = Color.Red;
vertices[23].Position = new Vector3(-10f, -10f, 10f);
vertices[23].Color = Color.Yellow;

//triangle 9, face bas
vertices[24].Position = new Vector3(-10f, 10f, 10f);
vertices[24].Color = Color.Green;
vertices[25].Position = new Vector3(-10f, 10f, -10f);
vertices[25].Color = Color.Red;
vertices[26].Position = new Vector3(10f, 10f, -10f);
vertices[26].Color = Color.Yellow;
//triangle 10, face bas
vertices[27].Position = new Vector3(-10f, 10f, 10f);
vertices[27].Color = Color.Green;
vertices[28].Position = new Vector3(10f, 10f, -10f);
vertices[28].Color = Color.Red;
vertices[29].Position = new Vector3(10f, 10f, 10f);
vertices[29].Color = Color.Yellow;

//triangle 11, face haut
vertices[30].Position = new Vector3(-10f, -10f, -10f);
vertices[30].Color = Color.Green;
vertices[31].Position = new Vector3(-10f, -10f, 10f);
vertices[31].Color = Color.Red;
vertices[32].Position = new Vector3(10f, -10f, 10f);
vertices[32].Color = Color.Yellow;
//triangle 12, face haut
vertices[33].Position = new Vector3(-10f, -10f, -10f);
vertices[33].Color = Color.Green;
vertices[34].Position = new Vector3(10f, -10f, 10f);
vertices[34].Color = Color.Red;
vertices[35].Position = new Vector3(10f, -10f, -10f);
vertices[35].Color = Color.Yellow;

L'instruction DrawUserPrimitive se présente ainsi :

this.graphics.GraphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, 12);

A l'exécution nous obtenons un splendide cube :

Pour profiter des formes ce cube nous allons le soumettre à toutes les transformations existantes. Il va être déplacé, tourné et redimentionné. Là où nous allons faire fort, c'est que nous le déplacerons et le redimentionnerons à l'aide du clavier !

Gestion des entrées clavier

Nous ferons un cours complet sur la gestion des entrées clavier, gamepad ou autre plus tard. pour l'heure il s'agit juste de s'amuser un peu pour se récompenser de l'effort fourni jusqu'ici. Il nous tout d'abord faut créer deux variables de type Vector3 afin de sauvegarder la taille courante (changement de taille en X, Y ou Z) et la position (déplacement sur X, Y ou Z) du cube.

Vector3 position = Vector3.Zero;
Vector3 size = Vector3.One;

La méthode Update a été réécrite afin d'accueillir de nouvelles instructions.

if (Keyboard.GetState()[Keys.Up] == KeyState.Down)
      position += Vector3.Up;
if (Keyboard.GetState()[Keys.Down] == KeyState.Down)
      position += Vector3.Down;
if (Keyboard.GetState()[Keys.Left] == KeyState.Down)
      position += Vector3.Left;
if (Keyboard.GetState()[Keys.Right] == KeyState.Down)
      position += Vector3.Right;
if (Keyboard.GetState()[Keys.PageUp] == KeyState.Down)
      size += new Vector3(0.1f, 0.1f, 0.1f);
if (Keyboard.GetState()[Keys.PageDown] == KeyState.Down)
      size -= new Vector3(0.1f, 0.1f, 0.1f);

La propriété Keyboard.GetState() renvoie l'état du clavier courant. Il s'agit d'une collection de touches clavier définies dans le type Keys. Ici nous verifions l'état des touches Haut (Up), Bas (Down), Gauche, Droite, Page Haut, Page Bas. Deux états peuvent exiter, soit la touche est appuyée (KeyState.Down), soit elle est relachée (KeyState.Up). Ne reste plus en fonction de l'état de chacun de ces touches à mettre à jour nos deux variables. Si la touche est haut, nous faisons évoluer Y (la distance), si c'est gauche ou droite c'est X (deplacement horizontal). Nous n'avons pas défini de touches pour les déplacement verticaux (Z). Mais essayez comme exercice de créer ce déplacement à l'aide des touches + et - (Keys.Add et Keys.Subtract). Enfin pour page haut et page bas nous faisons évoluer la taille du cube de 0.1 unité. Essayez là encore comme exercice de ne faire évoluer qu'une seule des composantes X, Y ou Z afin d'étudier le résultat. Vector3.Up/.Down.Left/.Right correspondent à des contants qui nous évitent d'écrire des "valeurs" dans notre code. Vector3.Up correspond ainsi à la valeur "new Vector3(0, 1, 0)". Le code devient ainsi plus lisible. Les autres constantes suivent le même principe.

En ce qui concerne la rotation du code, la transformation est réalisée là aussi à l'intérieur de la méthode Update :

float fAngle = (float)gameTime.TotalGameTime.TotalSeconds;
//la transformation en elle mme
Matrix world = Matrix.CreateRotationY(fAngle) * Matrix.CreateRotationX(fAngle)
* Matrix.CreateScale(size)
* Matrix.CreateTranslation(position);

this.effect.Parameters["World"].SetValue(world);

Nous nous basons ici sur le temps écoulé depuis le lancement de l'application. La valeur est utilisé pour réaliser des rotation sur Y et X (les rotations étant cycliques prendre le temps écoulé est une façon de faire parfaite !). Celles-ci seront constantes quelque soit la vitesse de la machine qui fait fonctionner l'application. Les transformations (rotation Y, rotation X, Scale, Translation) sont multipliées ensemble pour obtenir une transformation globale qui les intègres toutes. Le resultat est donnée à la matrice World du fichier effet. Ce fichier effet étant utilisé pour afficher le cube, la transformation s'appliquera donc au cube.

Au final nous obtenons :

Vous pouvez de même tester la distance de vision de la caméra en eloignant le cube, au bout d'un moment il disparait dépassant la distance du far plane.

Conclusion

Nous avons vraiment progressé dans notre maitrise des Vertices et des transformations. Nous avons vu que pour faire un simple cube il faut pas moins de 36 vertices ! Cela peut faire peur si on imagine le nombre qu'il faut pour créer des modèles détaillés comme les arbres, le corps humain ou autres ... C'est l'objet de notre prochain tutorial : nous verrons une méthode pour réduire au maximum le nombre de vertices d'un modèle et optimiser leur utilisation.

Pour ce qui est des transformations, nous aurons encore l'occasion de les découvrir lorsque nous aboderons les lumières. Nous allons alors créer une reproduction de l'univers et des planètes du système solaire. Une bonne occasion et un excellent exercice pour éprouver ses connaissances en géométrie 3D et dans les calculs matriciels...

Vous pouvez télécharger le sample ici.

A bientôt sur ce Blog !

Valentin Billotte

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