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

palais des congrès Paris

7, 8 et 9 février 2012

Date Valentin BillotteMVP XnaGraphicStreamvalentin@graphicstream.fr

Introduction à la 3D avec XNA

Présentation XnaMathématiques 3DPipeline et carte graphiqueEffetsTexturing

Sommaire

XNA is Not AcronymedTechnologie 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 : Qu’est-ce donc ?

“Low Level”Système d’exploitation / Matériel

DirectX 9

XNA

.NET CLR

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

XNA : Ou commencer ?

DEMO

Da Hello *blue* World

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)

Quart d’heure mathématiques

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

Vertices et indices

XNA utilise un système de coordonnées en mode main droite

Système de coordonnées

Repère du modèle

Vertices placés par rapportà l’origine lors de la modélisation

Repères modèle, monde et écran

Repère du monde

Les modèles sont placés par rapport à une origine commune :Le repère du monde

Repère de l’écran

Les coordonnées (X,Y) ont pour origine le point haut gauche de l’écran

Pipeline de rendu

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

VertexShader

PixelShader

Pipeline complet

Vertex buffer : Stockage des verticesLe format d’un vertex est flexiblePositionCouleurCoordonnées de textures…

Vertices

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

Index buffer : Stockage des indices

Une face contient donc: 3 entiers Un entier le numéro

du vertex dans le vertex buffer

Indices

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

Définition d’un vertex

Px Py Pz Cr Cg Cb

Vertex Buffer

Index Buffer

DEMO

Marie-Georges Buffers

Shaders: Programmes qui s’exécutent sur le GPU Langage HLSL

Vertex shader : Transformation et éclairage sur le contenu des vertex buffers

Traitement des vertices

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

Transformations des coordonnées

Transsssfoooormmmatiooon

Monde de l’objet

Monde global

Monde de la caméra/vue

Espace projeté

Espace de l’écran

WorldMatrix

ViewMatrix

ProjectionMatrix

Viewport

Suppression des vertices hors champSuppression des surfaces tournant le dos à la vue

Traitement dela géométrie

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

Rasterisation : Génération des pixels par interpolation

Traitement dela géométrie

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

Traitement des pixels 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

Pixels

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

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

BasicEffect

Vertices

Indices

Traitement des vertices

Traitement de la géométrie

Traitement des pixels

Rendu des pixels

Samplers de textures

Texture

DEMO

Rendu avec le BasicEffect

Objectif : Rassembler en seul fichier le pipeline complet en termes de shadersStructure:Définition des constantesDéfinition des structures (Vertex et Pixel)Vertex ShaderPixel ShaderTechniqueFacilite le passage des paramètres

Custom effect

Définition d’un couple Vertex shader/Pixel shader + étatsPeut contenir plusieurs passes

Technique

DEMO

Créer son propre shader

Rendu d’un triangle

DEMO

Un triangle avec notre effet

Usage Couleur d’un objet Normal (bump) maps Light maps Détails

Sampler de textures: Outil permettant de lire des texels dans une textureCoordonnées de texture: (u, v) entre (0, 0) et (1, 1)

Texturation

DEMO

Un triangle texturé

Chiffres

1111 1515 1789 2012

4,2

2.53.5

4.5

2.4

4.4

1.82.8

2 23

5

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

Questions ?valentin@graphicstream.fr