Archives de catégorie : Shaders

La technique du Parallax Mapping

GPU

Intro :

Avant tout, que veux dire « parallax » ou parallaxe ? La parallaxe désigne le phénomène physique et dynamique à propos d’un objet qui visiblement change de forme à cause du point de vue de l’œil de l’observateur.

La technique du Parallax Mapping est une technique de déplacement de surface.
La surface traitée donne un résultat de profondeur et est similaire avec la technique utilisée dans le « bump mapping ».

Cela donne un résultat très joli. En effet, elle permet d’émuler le relief d’un objet à partir d’une texture.

Comme toutes les techniques de déplacement de surface, la technique du PM utilise une image texture spéciale pour effectuer le rendu.

Explications :

C’est une super fonctionnalité !

Il s’agit d’appliquer un décalage des coordonnées (offset) de la texture diffuse directement dans le pixel shader.

Ce décalage dépend de la direction et de la position de la caméra qui observe la scène.
La surface ainsi dessinée à l’écran doit évoluer correctement en respectant la position de la caméra.

La technique du PM utilise une image / texture de couleur noire et blanche.

La simulation s’opère dans l’espace des textures. On opère un décalage des coordonnées des textures avec le vecteur de vue de la caméra plus la valeur courante de la « height map » de texture utilisée.

Utilisation du type TextureArray

TextureArray

Intro :

Souvent à l’étape pixel shader, on a besoin d’accéder à plusieurs textures en même temps.

Prérequis :

– Savoir lire du C++

– Savoir initialiser DirectX

Explications :

Voici une fonction qui créé un objet Texture2D :


Voici une fonction qui créé un objet Texture2D assemblé et combiné de plusieurs Texture2D :

 

Voici la fonction qui créée une texture ressource shader pour le programme HLSL :

 

Utilisation : 

Résumé :

Nous avons présenté une façon d’accéder à une variable représentant un tableau de textures directement dans le shader !

Références :

– Franck D.Luna – DirectX 10

Le langage shader HLSL

shader

Intro :

Le HLSL signifie : High Level Shading Language. C’est un langage (qui a la même syntaxe que le C) qui permet de programmer le processeur de la carte graphique afin d’effectuer des algorithmes de rendus spécifiques.

Prérequis :

– Savoir configurer DirectX 10

Explications :

Le HLSL permet de générer la diffusion de la lumière, la texture à utiliser, les réflexions et réfractions, l’ombrage, le déplacement de primitives et les effets post-traitement.

C’est un outil très puissant qui permet de créer une vaste gamme d’effets graphiques et esthétiques pour les jeux modernes.

Avant l’existence du langage HLSL il fallait écrire les instructions en langage d’assembleur pour la carte graphique.

Un programme HLSL (en DirectX 11) est constitué par 5 étapes de chaîne rendu :

– Le vertex shader
– Le compute shader
– Le geometry shader
– Le tessellation shader
– Le domain shader
– Le pixel shader

Les vertex et pixel shaders doivent être obligatoirement programmés ; les autres ne doivent pas être nécessairement être programmés.

Le vertex shader :

Le vertex shader opère les transformations de repère, le skinning (l’animation squelettale), le déplacement de vertex et le calcul d’attributs de vertex pour les materials.

Le pixel shader :

Le pixel shader opère le blending de texturage, le calcul lumineux, etc…

Exemple :

Voici quelques fonctions intrinsèques utilisables dans le HLSL :

abs(x) : valeur absolue
ceil(x) : retourne le plus petit entier qui est égale ou supérieur à x
clamp(x, min, max) : retourne x dans l’intervalle [min, max]
cos(x) : retourne le cosinus de x
clip(x) : ignore le pixel en cours si x est inférieur à 0
cross(x, y) : retourne le produit vectoriel de deux vecteurs 3D
dot(x, y) : retourne le produit scalaire de deux vecteurs
length(v) : retourne la longueur du vecteur v
lerp(x, y, s) : retourne x + s(y – x)
normalize(x) : retourne un vecteur normalisé
max(x, y) : retourne le plus grand entier entre x et y
min(x, y) : retourne le plus petit entier entre x et y
mul(x, y) : retourne la multiplication des matrices x et y
reflect(i, n) : retourne un vecteur de reflection en utilisant le rayon d’insidence et la normale à la surface
refract(i, n, η) : retourne un vecteur de refraction en utilisant un rayon d’entrée, la normale à la surface, et un index de refraction
saturate(x) : clamp entre les valeurs 0 et 1
sqrt(x) : retourne la racine carrée de x
transpose(x) : retourne la matrice transposée de x
tex2D(s, t) : retourne une texture samplée

 


 

Les variables globales se déclarent et se définissent ainsi :

 

Voici un petit exemple d’un programme écrit en HLSL qui créé un effet « bois » procédural en tant que texture.

Comment créer un effet shader à parti d’un fichier .fx :

 

 

Résumé :

Le langage shader HLSL est un outil très puissant pour le rendu graphique des jeux vidéo.

Tous les effets graphiques dans les jeux DirectX d’aujourd’hui sont construits à partir de fichier script shader HLSL.

Références :

– http://www.neatware.com/lbstudio/web/hlsl.html

– https://msdn.microsoft.com/fr-fr/library/ms810449.aspx

Une classe ShaderManager pour gérer vos fichier shaders

AMD_6990

Intro :

Prérequis :

– Savoir utiliser un peu DirectX 10

– Savoir utiliser la classe Singleton. Voir cet article.

– Savoir ce qu’est un fichier shader.

– Savoir utiliser la classe ShaderTechnique.

Explications :

Voici le fichier ShaderManager.h :

 

Voici le fichier ShaderManager.cpp :

 

Résumé :

Voici une classe toute simple qui permettra de rassembler tous vos shaders encapsulés dans une collection std::map.

Une classe ShaderTechnique pour représenter facilement vos effets shaders

shader_tech

todo : changer en m_pLayoutDesc

todo : enlever le prefixe des enums !

Intro :

Voici une classe qui vous aidera à déclarer et à définir vos fichiers shaders facilement.

Cette classe gestionnaire vous permettra de définir les variables shaders utilisées et même de paramétrer automatiquement certaines types de variables.

Explications :

Voici le fichier ShaderTechnique.h :

 

Voici le fichier ShaderTechnique.cpp :

 

Résumé :

Cette classe vous permettra de paramétrer vos fichiers shaders facilement.

Debugguez vos fichiers .FX avec l’interface ID3D10Blob

AMD_6990

Intro :

Quand on compile un effet shader .fx, on a besoin de savoir où se situe l’erreur de compilation lorsque la compilation a échouée.

Explications :

Voici comment procéder avec le bout de code suivant :

 

Résumé :

On a expliqué comment procéder pour savoir et afficher où se situe l’erreur de compilation d’un fichier shader .fx.

Théorie sur les lumières

light

Intro :

Dans les jeux vidéo, la gestion du rendu des lumières est cruciale pour effectuer un rendu à la fois réaliste et joli.

Dans cet article nous allons présenter les rudiments de la théorie sur le rendu des lumières.

Le rendu lumineux est un sujet vaste et complexe et pour cause le sujet est encore soumis à des recherches académiques ou en R&D.

En effet, ces dernières années les jeux vidéos les plus récents affichent des rendus de lumière de plus en plus réalistes, en utilisant par exemple un type de rendu nommé Deferred Shading.

[éclater en plusieurs articles]

Prérequis : 

– Savoir ce qu’est une normale

– Savoir lire du C++

– Savoir lire un programme shader HLSL

Explications :

Avant tout, éclaircissons un peu de vocabulaire.

Les deux notions qui suivent ont des propriétés de nature différente :

Les propriétés d’un matériau donnée (or, glace, bois, métal, etc…) déterminent comment un modèle est affiché :

– Emissive :

– ce terme désigne la valeur d’émission d’un matériau permettant d’émettre une couleur de lumière comme si elles avaient été toutes désactivées. Notée Ke.

– Ambient :

– ce terme désigne la valeur ambiante d’émission d’une lumière, comme le soleil.

– Diffuse :

– ce terme désigne la couleur diffuse qu’émet la lumière dans toutes les directions.

– Specular :

– Specular power :

– représente le degré d’éclat de brillance.

Les propriétés d’une lumière donnée déterminent comment la scène est affichée :

– Type de lumière :

– il y a 3 types de lumière :

Point : une lumière qui émet dans toutes les directions.

Spot : une lumière qui émet dans une direction spécifique.

Directional : une lumière qui a une direction donnée mais n’a pas de position donnée, comme par exemple le soleil.

– Color :

– la couleur de la source de lumière

– Position :

– définie la position de la lumière par trois valeurs de coordonnées

–  Direction :

– définie la direction à laquelle pointe la lumière

Le but du calcul lumineux est de combiner ces deux catégories de propriétés afin déterminer la couleur finale de la lumière (avec ses nuances d’ombre).

Lumière ambiante :

La lumière ambiante désigne, comme son nom l’indique, une lumière qui éclaire dans toutes les directions. C’est comme un soleil qui illumine partout.

L’équation est toute simple :

Ip = pa  * Ia 

[utiliser ambient = Ka + Ga]

Ia désigne l’intensité de la lumière ; et pa le coefficient de réflexion de la lumière ambiante. Ip désigne l’intensité de la lumière résultant de la réflexion sur la surface finale.

Ce principe de calcul de la lumière illuminative est très rudimentaire car il n’affiche pas les ombres des modèles que font apparaître indirectement la lumière émissive.

[image lumière ambiante]

La réflexion diffuse :

Le principe de la réflexion diffuse consiste à considérer la position d’émission d’une lumière quelconque (ou plusieurs)

On a remarqué, mathématiquement, que l’intensité en un point de l’effet d’une lumière quelconque dépend de l’angle formé entre le rayon de lumière qui touche le point de la surface et la normale à la surface.

Il se trouve que, plus l’angle formé entre le rayon de lumière et la normale au plan est faible, plus l’intensité lumineuse réfléchie visible par l’observateur est forte.

[ajouter schéma dot product]

Diffuse-Lighting

Types de calcul lumineux :

 

 

 

Résumé :

Références :

– http://irrlicht-fr.org/lire_tuto.php?id=1014

–  https://takinginitiative.wordpress.com/2010/08/30/directx-10-tutorial-8-lighting-theory-and-hlsl/

– http://www.3dgep.com/texturing-lighting-directx-11/

– http://http.developer.nvidia.com/CgTutorial/cg_tutorial_chapter05.html