SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
palais des
congrès
Paris




7, 8 et 9
février 2012
Introduction à la 3D avec
XNA

Date
Valentin Billotte
MVP Xna
GraphicStream
valentin@graphicstream.fr
Sommaire

  Présentation Xna
  Mathématiques 3D
  Pipeline et carte graphique
  Effets
  Texturing
XNA : Qu’est-ce donc ?

  XNA is Not Acronymed
  Technologie multiplateformes pour l’accès aux
  ressources graphiques (2D/3D) matérielles de
  Microsoft
      PC / Surface
      Xbox 360
      Windows Phone 7 / Zune
      Silverlight 5
XNA : Qu’est-ce donc ?

                            XNA



              DirectX 9               .NET CLR


                        “Low Level”
              Système d’exploitation / Matériel
XNA : Ou commencer ?


  XNA Game Studio 4.0:
      http://create.msdn.com/en-us/home/getting_started
      http://create.msdn.com/en-US/
      http://msdn.microsoft.com/fr-fr/directx/default.aspx
      http://msdn.microsoft.com/fr-fr/xna
DEMO

Da Hello *blue* World
Quart d’heure mathématiques


  Les points (vertices) sont
  définis par un vecteur de 3
  valeurs (x,y,z)

  Les vertices sont rassemblés
  au sein de faces

  Les faces forment des
  meshes (objets/modèles)
Vertices et indices

                      (0,1,2)//face devant
                      (0,2,3)
                      (3,2,4)//face droite
                      (3,4,5)
                      (5,4,7)//face arrière
                      (5,7,6)
                      (6,7,1)//face gauche
                      (6,1,0)
                      (6,0,3)//face bas
                      (6,3,5)
                      (1,7,4)//face haut
                      (1,4,2)
Système de coordonnées


  XNA utilise un système
  de coordonnées en
  mode main droite
Repères modèle, monde et écran


     Repère du modèle
              de l’écran
                 monde
 Vertices placés par
 Les modèles sont (X,Y)
      coordonnées
 rapport origine le à
 ont pour
 placés par rapport
 à l’origine lors de lade :
 point haut commune
 une originegauche
 modélisation monde
 l’écran
 Le repère du
Pipeline de rendu

                 Vertex                            Pixel
                 Shader                            Shader




                Traitement     Traitement de la   Traitement    Rendu des
     Vertices                     géométrie
                des vertices                       des pixels     pixels

                                                  Samplers de
     Indices
                                                    textures


                                                    Texture
Vertices

                                          Traitement     Traitement de la   Traitement    Rendu des
                               Vertices                     géométrie
                                          des vertices                       des pixels     pixels

   Vertex buffer :             Indices
                                                                            Samplers de

   Stockage des vertices                                                      textures


   Le format d’un vertex est                                                  Texture

   flexible
   Position
   Couleur
   Coordonnées de textures
   …
Indices
                                             Traitement     Traitement de la   Traitement    Rendu des
                                  Vertices                     géométrie
                                             des vertices                       des pixels     pixels

                                                                               Samplers de

   Index buffer :
                                  Indices
                                                                                 textures


      Stockage des indices                                                      Texture


   Une face contient donc:
      3 entiers
      Un entier le numéro
       du vertex dans le vertex
       buffer
Définition d’un vertex




             Px    Py    Pz   Cr   Cg   Cb
Vertex Buffer
Index Buffer
DEMO

Marie-Georges Buffers
Traitement des vertices
                                         Traitement     Traitement de la   Traitement    Rendu des
                              Vertices                     géométrie
                                         des vertices                       des pixels     pixels

                                                                           Samplers de
                              Indices
                                                                             textures


   Shaders:                                                                  Texture


      Programmes qui s’exécutent sur le GPU
      Langage HLSL
   Vertex shader : Transformation et éclairage
   sur le contenu des vertex buffers
Transsssfoooormmmatiooon


  Transformations des coordonnées
   Monde de            Monde         Monde de la          Espace           Espace de
    l’objet            global        caméra/vue           projeté            l’écran


              World             View         Projection             Viewport
              Matrix            Matrix         Matrix
Traitement de
la géométrie                        Traitement     Traitement de la   Traitement    Rendu des
                         Vertices                     géométrie
                                    des vertices                       des pixels     pixels

                                                                      Samplers de

  Suppression des
                         Indices
                                                                        textures


  vertices hors champ                                                   Texture



  Suppression des
  surfaces tournant le dos
  à la vue
Traitement de
la géométrie                         Traitement     Traitement de la   Traitement    Rendu des
                          Vertices                     géométrie
                                     des vertices                       des pixels     pixels



  Rasterisation :
                                                                       Samplers de
                          Indices
                                                                         textures


  Génération des pixels                                                  Texture


  par interpolation
Pixels
                                                  Traitement     Traitement de la   Traitement    Rendu des
                                       Vertices                     géométrie
                                                  des vertices                       des pixels     pixels

                                                                                    Samplers de
                                       Indices
                                                                                      textures



    Traitement des pixels
                                                                                      Texture



        Les pixel shaders traitent les vertices en entrée et
         produisent une couleur de sortie.

    Rendu des pixels
        Le rendu final prend la couleur d’un pixel et gère:
             Alpha testing/blending
             Profondeur
             Brouillard
BasicEffect
                                           Traitement     Traitement de la   Traitement    Rendu des
                                Vertices                     géométrie
                                           des vertices                       des pixels     pixels

                                                                             Samplers de
                                 Indices
                                                                               textures


                                                                               Texture

   Encapsule des shaders de base
   Fournit un service de rendu complet
      3 lumières directionnelles
      Brouillard
      Une texture
      Transparence
      Couleur d’ambiant, émissif, spéculaire et diffus
DEMO

Rendu avec le BasicEffect
Custom effect
  Objectif : Rassembler en seul fichier le pipeline
  complet en termes de shaders
  Structure:
  Définition des constantes
  Définition des structures (Vertex et Pixel)
  Vertex Shader
  Pixel Shader
  Technique
  Facilite le passage des paramètres
Technique

  Définition d’un couple Vertex shader/Pixel shader +
  états
  Peut contenir plusieurs passes
DEMO

Créer son propre shader
Rendu d’un triangle
DEMO

Un triangle avec notre effet
Texturation


   Usage
      Couleur d’un objet
      Normal (bump) maps
      Light maps
      Détails
   Sampler de textures: Outil permettant de lire des
   texels dans une texture
   Coordonnées de texture: (u, v) entre (0, 0) et (1, 1)
DEMO

Un triangle texturé
Chiffres

                   Chiffres importants à retenir
          Données fluctuantes     Données incroyables     La réponse D

                                                                         5
   4,2                      4.4                              4.5
                                          3.5
                                                      3            2.8
         2.4          2.5
               2                  2             1.8



     1111                 1515               1789                2012
Questions ?
valentin@graphicstream.fr

Contenu connexe

Plus de Microsoft

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuMicrosoft
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaSMicrosoft
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileMicrosoft
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Microsoft
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Microsoft
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Microsoft
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à ZMicrosoft
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Microsoft
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Microsoft
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsMicrosoft
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Microsoft
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryMicrosoft
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Microsoft
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Microsoft
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Microsoft
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET CoreMicrosoft
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Microsoft
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Microsoft
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursMicrosoft
 

Plus de Microsoft (20)

Uwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieuUwp + Xamarin : Du nouveau en terre du milieu
Uwp + Xamarin : Du nouveau en terre du milieu
 
La Blockchain pas à PaaS
La Blockchain pas à PaaSLa Blockchain pas à PaaS
La Blockchain pas à PaaS
 
Tester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobileTester, Monitorer et Déployer son application mobile
Tester, Monitorer et Déployer son application mobile
 
Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo Windows 10, un an après – Nouveautés & Démo
Windows 10, un an après – Nouveautés & Démo
 
Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.Prenez votre pied avec les bots et cognitive services.
Prenez votre pied avec les bots et cognitive services.
 
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
Office 365 Dev PnP & PowerShell : exploitez enfin le potentiel de votre écosy...
 
Créer un bot de A à Z
Créer un bot de A à ZCréer un bot de A à Z
Créer un bot de A à Z
 
Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?Microsoft Composition, pierre angulaire de vos applications ?
Microsoft Composition, pierre angulaire de vos applications ?
 
Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016Les nouveautés SQL Server 2016
Les nouveautés SQL Server 2016
 
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
Conteneurs Linux ou Windows : quelles approches pour des IT agiles ?
 
Administration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs AnalyticsAdministration et supervision depuis le Cloud avec Azure Logs Analytics
Administration et supervision depuis le Cloud avec Azure Logs Analytics
 
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
Retour d'expérience de projets Azure IoT "large scale" (MicroServices, portag...
 
Plan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site RecoveryPlan de Reprise d'Activité avec Azure Site Recovery
Plan de Reprise d'Activité avec Azure Site Recovery
 
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
Modélisation, déploiement et gestion des infrastructures Cloud : outils et bo...
 
Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.Transformation de la représentation : De la VR à la RA, aller & retour.
Transformation de la représentation : De la VR à la RA, aller & retour.
 
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
Quelles architectures pour vos applications Cloud, de la VM au conteneur : ça...
 
Introduction à ASP.NET Core
Introduction à ASP.NET CoreIntroduction à ASP.NET Core
Introduction à ASP.NET Core
 
Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?Open Source et Microsoft Azure, rêve ou réalité ?
Open Source et Microsoft Azure, rêve ou réalité ?
 
Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...Comment développer sur la console Xbox One avec une application Universal Win...
Comment développer sur la console Xbox One avec une application Universal Win...
 
Azure Service Fabric pour les développeurs
Azure Service Fabric pour les développeursAzure Service Fabric pour les développeurs
Azure Service Fabric pour les développeurs
 

La 3D c'est facile ! Développer son premier jeu vidéo avec XNA

  • 1. palais des congrès Paris 7, 8 et 9 février 2012
  • 2. Introduction à la 3D avec XNA Date Valentin Billotte MVP Xna GraphicStream valentin@graphicstream.fr
  • 3. Sommaire Présentation Xna Mathématiques 3D Pipeline et carte graphique Effets Texturing
  • 4. XNA : Qu’est-ce donc ? XNA is Not Acronymed Technologie multiplateformes pour l’accès aux ressources graphiques (2D/3D) matérielles de Microsoft  PC / Surface  Xbox 360  Windows Phone 7 / Zune  Silverlight 5
  • 5. XNA : Qu’est-ce donc ? XNA DirectX 9 .NET CLR “Low Level” Système d’exploitation / Matériel
  • 6. XNA : Ou commencer ? XNA Game Studio 4.0:  http://create.msdn.com/en-us/home/getting_started  http://create.msdn.com/en-US/  http://msdn.microsoft.com/fr-fr/directx/default.aspx  http://msdn.microsoft.com/fr-fr/xna
  • 8. Quart d’heure mathématiques Les points (vertices) sont définis par un vecteur de 3 valeurs (x,y,z) Les vertices sont rassemblés au sein de faces Les faces forment des meshes (objets/modèles)
  • 9. Vertices et indices (0,1,2)//face devant (0,2,3) (3,2,4)//face droite (3,4,5) (5,4,7)//face arrière (5,7,6) (6,7,1)//face gauche (6,1,0) (6,0,3)//face bas (6,3,5) (1,7,4)//face haut (1,4,2)
  • 10. Système de coordonnées XNA utilise un système de coordonnées en mode main droite
  • 11. Repères modèle, monde et écran Repère du modèle de l’écran monde Vertices placés par Les modèles sont (X,Y) coordonnées rapport origine le à ont pour placés par rapport à l’origine lors de lade : point haut commune une originegauche modélisation monde l’écran Le repère du
  • 12. Pipeline de rendu Vertex Pixel Shader Shader Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Samplers de Indices textures Texture
  • 13. Vertices Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Vertex buffer : Indices Samplers de Stockage des vertices textures Le format d’un vertex est Texture flexible Position Couleur Coordonnées de textures …
  • 14. Indices Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Samplers de Index buffer : Indices textures  Stockage des indices Texture Une face contient donc:  3 entiers  Un entier le numéro du vertex dans le vertex buffer
  • 15. Définition d’un vertex Px Py Pz Cr Cg Cb
  • 19. Traitement des vertices Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Samplers de Indices textures Shaders: Texture  Programmes qui s’exécutent sur le GPU  Langage HLSL Vertex shader : Transformation et éclairage sur le contenu des vertex buffers
  • 20. Transsssfoooormmmatiooon Transformations des coordonnées Monde de Monde Monde de la Espace Espace de l’objet global caméra/vue projeté l’écran World View Projection Viewport Matrix Matrix Matrix
  • 21. Traitement de la géométrie Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Samplers de Suppression des Indices textures vertices hors champ Texture Suppression des surfaces tournant le dos à la vue
  • 22. Traitement de la géométrie Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Rasterisation : Samplers de Indices textures Génération des pixels Texture par interpolation
  • 23. Pixels Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Samplers de Indices textures Traitement des pixels Texture  Les pixel shaders traitent les vertices en entrée et produisent une couleur de sortie. Rendu des pixels  Le rendu final prend la couleur d’un pixel et gère:  Alpha testing/blending  Profondeur  Brouillard
  • 24. BasicEffect Traitement Traitement de la Traitement Rendu des Vertices géométrie des vertices des pixels pixels Samplers de Indices textures Texture Encapsule des shaders de base Fournit un service de rendu complet  3 lumières directionnelles  Brouillard  Une texture  Transparence  Couleur d’ambiant, émissif, spéculaire et diffus
  • 25. DEMO Rendu avec le BasicEffect
  • 26. Custom effect Objectif : Rassembler en seul fichier le pipeline complet en termes de shaders Structure: Définition des constantes Définition des structures (Vertex et Pixel) Vertex Shader Pixel Shader Technique Facilite le passage des paramètres
  • 27. Technique Définition d’un couple Vertex shader/Pixel shader + états Peut contenir plusieurs passes
  • 30. DEMO Un triangle avec notre effet
  • 31. Texturation Usage  Couleur d’un objet  Normal (bump) maps  Light maps  Détails Sampler de textures: Outil permettant de lire des texels dans une texture Coordonnées de texture: (u, v) entre (0, 0) et (1, 1)
  • 33. Chiffres Chiffres importants à retenir Données fluctuantes Données incroyables La réponse D 5 4,2 4.4 4.5 3.5 3 2.8 2.4 2.5 2 2 1.8 1111 1515 1789 2012