Archives de catégorie : Introduction à DirectX 10

Introduction à DirectX 10 – Écrire du texte à l’écran (système de polices) – partie 7

directx9c

Hello

Utilisation de BMFont :

BMFont

 

Intro :

Pour afficher du texte dans une application DirectX il faut procéder comme suit.

Prérequis :

– Savoir initialiser DirectX 10

– Savoir comment afficher une image 2D à l’écran

Septième partie :

Afficher du texte à l’écran.

Explications :

Il vous faudra plusieurs images bitmap pour supporter les différentes résolutions de l’écran de l’utilisateur.

« Their source rect will form our texture coordinates, and their destination rect will form our vertexcoordinates. »

 

Voici le fichier FontTextManager.h :

 

Voici le fichier FontTextManager.cpp :

 

Résumé :

Nous avons présenter une méthode générique pour afficher du texte à l’écran ! Pas besoin d’utiliser D3DXFont !

Références :

– http://www.rastertek.com/dx10tut12.html

– http://kvazars.com/littera/

– http://www.angelcode.com/products/bmfont/

– http://www.angelcode.com/products/bmfont/doc/file_format.html

– http://www.gamedev.net/topic/330742-quick-tutorial-variable-width-bitmap-fonts/

Introduction à DirectX 10 – Redimensionner la fenêtre de rendu – partie 6

directx9c

Intro :

Dans une application DirectX, l’utilisateur peut vouloir redimensionner la fenêtre à sa guise ou passer le jeu en mettre en mode plein écran.

Il faut implémenter et coder cette fonctionnalité.

Prérequis :

– Avoir suivi la cinquième partie de ce tutoriel.

Sixième partie :

Redimensionnement et plein écran de la fenêtre de rendu.

Explications :

Avant tout, juste pour énoncer un petit point  mis à part :

L’appel à D3D11DeviceContext::ClearState réinitialise par défaut toutes les configurations du contexte d’affichage (remet à zéro les shaders, les inputs layout, les viewports, etc..)

 

 

Avec les interfaces DXGI* on peut obtenir les informations sur la carte graphique :

 

Voici le programme de cet article une fois compilé et lancé :

fullscreen

 

La fonction qui redimensionne les buffers :

 

La fonction qui gère les entrées clavier :

 

Résumé :

Depuis DirectX 10 il est plus facile et aisé de changer de résolution et de passer en mode plein écran.

Voici les fichiers source – Partie 6

Références :

– https://msdn.microsoft.com/en-us/library/windows/desktop/ff476389%28v=vs.85%29.aspx

– https://msdn.microsoft.com/en-us/library/windows/desktop/bb174577%28v=vs.85%29.aspx

Introduction à DirectX 10 – Activer le super échantillonnage – partie 5

directx9c

Intro :

Dans une application graphique, les objets du rendu peuvent subir ce qu’on appelle un « crénelage » ou un « aliasing » en anglais.

Il apparaît comme un escalier autour de la ligne affichée.

La ligne du bas représente la correction de l’effet d’escalier de la ligne du haut.

crénélage

Prérequis :

– Savoir initialiser DirectX 10.1

Explications :

Cinquième partie :

Par défaut, DirectX 10.1 gère un type d’anticrénelage nommé Multisample anti-aliasing (MSAA)

1) L’anti-aliasing activé :

AA_on

1) L’anti-aliasing désactivé :

AA_off

 

Comment activer le multi-sampling dans le code ?

Lors de l’appel à D3D10CreateDeviceAndSwapChain il faut spécifier dans la structure DXGI_SWAP_CHAIN_DESC :

 

warning_small

Il reste deux étapes à ne pas oublier d’effectuer :


1) Effectuer la même configuration que précédemment, lors la création de la texture du deph-stencil :

Il faut spécifier la même configuration que précédemment, sinon cela ne fonctionnera pas !


2) Effectuer une certaine configuration lors la création de la DepthStencilView :

 

 

Voici une fonction qui permet d’afficher les capacités possibles de votre carte graphique en matière d’anti-aliasing.

Il faut obtenir le nombre d’échantillons m_iFSAASampleCount par ce bais :

 

Résumé :

Nous avons présenté comment procéder pour afficher dans DirectX 10 les différents niveaux d’anticrénélages possibles par la carte vidéo et comment les activer.

Références :

– Windows DirectX Graphics Documentation (SDK June 2010)

Introduction à DirectX 10 – Rendu 2D – partie 5

directx9c

Intro :

Dans cette cinquième partie, nous allons apprendre comment afficher une image 2D à l’écran.
Nous proposerons deux façon d’implémenter cet affichage.

Prérequis :

Avoir suivi la cinquième partie de ce tutoriel.

Quatrième partie :

Afficher une image 2D à l’écran.

Explications (1ère façon plus simple, sans utiliser de shader) :

Voici le fichier Sprite2D.h :

 

Voici le constructeur de la classe Sprite2D :

 

Voici la méthode d’initialisation :

 

Voici les autres méthodes :

 

 

 

 

Explications (2ème façon plus compliquée, en utilisant un shader) :

Mettre dans un fichier Sprite2D.h :

 

Créer un fichier Sprite2D.cpp où vous metterez :

 

La fonction de rendu / d’affichage :

 

Ici la fonction de mise à jour de la position de l’image :

 

Créez un fichier Texture.fx, où vous mettrez :

Résumé :

Nous avons expliquées deux façon d’afficher du rendu 2D avec DirectX.

texture

Nous nous servirons de cet affichage 2D pour implémenter une UI (Interface Utilisateur).

Références :

– http://mscerts.programming4.us/programming/directx%2010%20game%20programming%20%20%20the%202d%20resurgence%20-%20sprites.aspx

Introduction à DirectX 10 – Lumière – partie 4

directx9c

Intro :

Dans cette quatrième partie, nous allons apprendre à intégrer une lumière afin d’éclairer notre cube.

Prérequis :

Avoir suivi la troisième partie de ce tutoriel.

Quatrième partie :

Afficher un petit cube éclairé d’une lumière.

Explications :

Nous allons utiliser cette structure de vertex :

Elle contient un attribut supplémentaire par rapport à la partie 3 : la normale.

La normale d’un vertex est un vecteur perpendiculaire à celui-ci ; nous l’utiliserons afin de calculer le degré de nuance de lumière à cet endroit.
C’est par ce principe que nous effectuerons globalement le calcul lumineux.

Voir cet article pour comprendre comment modéliser la lumière dans un rendu 3D.

 

 

Nous allons utiliser ce programme HLSL – partie4.fx :

Si vous ne comprenez rien à ce programme : consulter cet article.

Il faut aussi connaître la notion de matrices et le principe de transformations de coordonnées
pour comprendre ce code : voir cet article.

 

Dans votre fichier D3D10Renderer.h, rajoutez :

Ce sont les variables que l’on enverra au shader HLSL.

 

Ensuite dans votre fichier D3D10Renderer.cpp à la fonction Initialize(bool bFullScreen), rajoutez :

 

On créé le vertex buffer d’un cube : il est composé de la position, des coordonées de la texture et des normales de chaque vertex.

Les voici :

 

Toujours dans votre fichier D3D10Renderer.cpp à la fonction Initialize(bool bFullScreen), rajoutez :

 

Toujours dans votre fichier D3D10Renderer.cpp :

Résumé :

Nous avons intégré une lumière près de notre cube afin de l’éclairer.

partie4

Voici l’archive du code complet pour cette partie :  DirectX 10 Tutoriel – Partie 4.zip

Introduction à DirectX 10 – Texturing – partie 3

directx9c

Intro :

Dans cette troisième partie, nous allons apprendre comment ajouter une texture à un petit cube auto généré.

Prérequis :

Avoir suivi la deuxième partie de ce tutoriel.

Troisième partie :

Afficher un petit cube avec une texture appliquée dessus.

Explications :

Dans ce tutoriel nous allons utiliser cette structure de vertex :

La deuxième variable indique que l’on va utiliser les coordonnées de la texture appliqués au cube.

Rajoutez dans votre fichier D3D10Renderer.h :

 

Voici le fichier effet HLSL utilisé – partie3.fx :

 

Dans le fichier D3D10Renderer.cpp à la fonction Initialize(bool bFullScreen) :

Voir cet article si vous ne comprenez pas à quoi sert les matrices World, View et Projection.

On définit la nouvelle structure d’un vertex :

On définit les informations de vertex et index buffers d’un cube :

Voir cet article si vous ne comprenez pas à quoi sert les vertex buffer et index buffer.

On implémente les vertex et index buffers :

 

On charge la texture qui sera utilisée :

 

On initialise les matrices et la texture :

 

Résumé :

Au final nous avons affiché un petit cube texturé.

partie3

Voici l’archive du code complet pour cette partie :  DirectX 10 Tutoriel – Partie 3.zip

Introduction à DirectX 10 – Rendu basique – partie 2

directx9c

Intro :

Dans cette deuxième partie, nous allons utiliser un shader basique pour afficher un triangle et afficher du texte à l’écran.

Prérequis :

Avoir suivi la première partie de ce tutoriel.
Savoir le fonctionnement d’un shader HLSL : pour cela il faut suivre le tutoriel sur le HLSL.

Deuxième partie :

Afficher un triangle et du texte à l’écran.

Explications :

Nous allons utiliser ce programme shader nommé Partie2.fx :

[code language= »c »]

//———————————————————-
// Partie2.fx
//———————————————————-

struct VS_OUTPUT
{
    float4 Pos : SV_POSITION;
    float4 Color : COLOR0;
};

//———————————————————-
// Vertex Shader
//———————————————————-
VS_OUTPUT VS( float4 Pos : POSITION, float4 Color : COLOR )
{
    VS_OUTPUT output = (VS_OUTPUT)0;
    
    output.Pos = Pos;
    output.Color = Color;
    
    return output;    
}

//———————————————————-
// Pixel Shader
//———————————————————-
float4 PS( VS_OUTPUT input ) : SV_Target
{
    return input.Color;
}

//———————————————————-
technique10 Render
{
    pass P0
    {
        SetVertexShader( CompileShader( vs_4_0, VS() ) );
        SetGeometryShader( NULL );
        SetPixelShader( CompileShader( ps_4_0, PS() ) );
    }
}

[/cpp]

Si vous ne comprenez ce bout de code, voir l’article sur le HLSL.

Pensez à mettre ce fichier dans le répertoire de votre programme ! Vous aurez une erreur sinon.

Nous allons afficher un triangle à l’écran. Pour cela il faut que DirectX comprenne comment
sont agencés les vertices dans la mémoire vidéo.

Donc ici on déclare que toutes les vertices utilisées sont composées d’une variable position et d’une variable couleur. Cette structure suivante est utilisée par notre application.

Et voilà un schéma des données vertices. Cette structure suivante est utilisée par DirectX.
Voir cet article pour mieux comprendre le mécanisme de cette structure.

 

On rajoute à la fonction Initialize du fichier D3D10Renderer.cpp donné dans la partie 1
du tutoriel :

 

La fonction de rendu va afficher un triangle et un texte comme convenu :

N’oubliez pas d’ajouter dans votre fichier System.h :

Résumé :

Au final nous avons affiché un triangle multi-colorisé et affiché un petit texte :

triangle

Voici l’archive du code complet pour cette partie : DirectX 10 Tutoriel – Partie 2.zip

Introduction à DirectX 10 – Fenêtrage – partie 1

Intro :

Ceci constitue une introduction à la version 10 de DirectX.

DirectX est une interface entre le programmeur et la carte graphique.

Dans cette partie je vais vous apprendre à l’initialiser de manière rudimentaire.

Prérequis :

Savoir programmer en C++.

Première partie :

Création de la fenêtre de rendu.

Explications :

Pensez à configurer les chemins d’accès du SDK de DirectX  dans VC++ ! Si vous ne savez pas comment faire : lire ce tutoriel.

On a besoin d’utiliser une fonction qui boucle à chaque fois que l’application reçoit
un message :

Ensuite créez un fichier System.cpp et un fichier System.h où vous mettrez les fonctions que je vous énoncerai.

Voici le fichier System.h :

Dans le fichier System.cpp. On initialise d’abord une fenêtre Windows ; voici la fonction pour l’initialiser :

 

Toujours dans System.cpp, la fonction pour détruire la fenêtre :

 

La fonction pour initialiser la fenêtre et le Renderer de DirectX 10 :

 

 

 

La fonction WinMain est dans le fichier Main.cpp et est implémentée de cette façon :

 

 

Ensuite créez un fichier D3D10Renderer.cpp et un fichier D3D10Renderer.h où vous mettrez les fonctions que je vous énoncerai.

 

La fonction pour afficher le rendu :

 

Résumé :

Nous avons affiché une fenêtre prête à recevoir le rendu de DirectX.

fenetre

Voici l’archive du code complet pour cette partie : DirectX 10 Tutoriel – Partie 1.zip

Voilà le code et les explications pour initialiser la fenêtre de DirectX 10.
Il reste beaucoup de choses à intégrer pour faire un jeu mais vous saurez au moins comment intégrer DirectX 10.

Références :

– https://takinginitiative.wordpress.com/directx10-tutorials/

– http://www.rastertek.com/tutdx10.html

– DirectX SDK June 2010 Documentation Samples