Writing Your First Shader

Ecrire votre 1er Shader
Contenu:
Introduction
Mise en place
Ecriture de notre 1er shader!
Importation et Test
Introduction
Vous êtes arrivés au tutorial 2! Là où les choses sérieuses commencent;
on va pouvoir mettre toutes nos récentes connaissances acquises à
l’épreuve. On va commencer par créer un simple shader qui agira sur un
objet texturé. Nous verrons cela dans RCP, dans un 1er temps, avant que
nous ne commencions à ajouter l’éclairage par la suite.
Vous aurez besoin de connaissances basiques en scripting ou en
programmation afin de comprendre ce tutoriel. Si vous ne comprenez pas
le système des functions, includes et data types alors j’ai peur que ce
tutorial soit un peu trop complexe.
Mise en place
Tout d’abord, vous devez créer un nouveau fichier .fx. Si votre système
d’exploitation affiche les extensions (bien souvent masquées), alors créez
un simple document text .txt et renommez l’extension en .fx
Sinon, vous pouvez également prendre un shader déjà existant dans le
dossier de votre projet et en faire une simple copie que vous renommerez
en “tutorial2”. Double cliquez sur le fichier et associez le à notepad (je
vous déconseille d’utiliser WordPad qui n’affiche pas le numéro des
lignes). Je ne décrirai pas non plus comment utiliser les IDEs des shaders
dans ce tutorial; notepad est le mieux adapté à ces effets.
Ecriture de notre 1er shader!
Tout d’abord, nous devons inclure le fichier d’en-tête BBDX ; ça nous
fournit des fonctions utiles pour les textures, lumières et brouillard.
En plus, Nous utiliserons une de ses macros pour importer une texture.
// Include RCs helpers
#include "Include\BBDXInclude.fxh"
ImportTexture0
Le “0” fait référence au 1er index des textures du model; qui est
normalement utilisé en tant que diffuse map. Ensuite, intervient une
constante importante pour l’importation.
// Constants
float4x4 WorldViewProjection : WorldViewProjection;
Dans le tuto précédent, je parlais de la transformation des vertex de
l’espace objet vers l’espace écran.
Realm Crafter nous le propose dans sa matrice, nous devons donc le faire;
ça pré-multiplie les matrices du World, View et de la Projection (voir le
screen).
Avant d’entamer le code principal, nous devons déclarer une structure du
vertex. BBDXInclude a déjà préparé la structure de l’input; il ne nous
reste plus qu’à déclarer l’output.
// Vertex Output Declaration
struct VSOut
{
float4 Position
: POSITION;
float2 TexCoord
: TEXCOORD0;
};
Nous devons définir en output une position nécessaire, et il faut
également définir une coordonnée de texture afin de l’utiliser pour
texturer. Ensuite, nous devons créer notre vertex shader (VS); la 1ere
partie consiste à déclarer notre fonction, en incluant ses données en input
et en output.
// Vertex shader
VSOut vs_main(VSStandard In)
{
Comme nous le ferions avec d’autres programmes, nous utilisons un type
return de notre structure en output et un paramètre, In, avec un input
BBDX par défaut.
// Setup our output variable
VSOut Out;
// Copy our input texture coordinate to the output
Out.TexCoord = In.TexCoord;
Ce segment n’as pas vraiment besoin de description. Tout ce qu’il fait c’est
créer une variable en output (sur laquelle nous reviendrons plus tard) et
copier la coordonnée de texture de l’input vers l’output.
La partie suivante est la partie la plus complexe du shader; nous
transformerons la position de l’objet dans l’espace en position d’écran.
// Transform our object space vertex to screen space
Out.Position = mul(In.Position, WorldViewProjection);
La commande “mul” signifie “multiplier”. Nous l’utiliserons pour multiplier
notre vecteur (float4 In.Position) avec la matrice qui contient la
transformation du world, view et projection.
Out.Position contient les coordonnées 2D du vertex. Enfin, nous
retournons à la structure de notre ouput et nous fermons les functions.
// Done, return our structure
return Out;
}
Ensuite, nous écrivons notre pixel shader (ps). Cette fois nous renvoyons
une simple valeur float4, ce sera la couleur (et l’alpha) du pixel. Out input
sera l’output de la fonction vertex shader (VS). Nous déclarerons
également une variable temporaire comme nous l’avons fait dans le vertex
shader.
// Pixel Shader
float4 ps_main(VSOut In) : COLOR0
{
// Setup out output color
float4 Out;
Vous constaterez que nous utilisons la sémantique COLOR0 sur la
fonction; ça informe le GPU que nous allons utiliser un output de couleur
dans la partie principale de l’écran.
Notre pixel shader doit effectuer une recherche sur la texture en utilisant
les coordonnées de l’input texture. Un texture lookup nous permet de
manipuler la fonction “tex2D”.
// Read our texture into the output
Out = tex2D(Tex0, In.TexCoord);
La fin de la fonction pixel est la même que celle du vertex shader.
// Done, return the color
return Out;
}
Maintenant il ne nous reste plus qu’a écrire notre technique et notre passe
qui indiquera au compiler quelles sont les fonctions de shader. Les noms
de technique et de passe n’ont pas d’importance dans Realm Crafter; il
prendra la 1ere technique qu’il trouvera.
// Technique
technique OurTechnique
{
// Pass
pass Pass0
{
VertexShader = compile vs_2_0 vs_main();
PixelShader
= compile ps_2_0 ps_main();
}
}
C’est fait! Il ne nous reste plus qu’à l’importer et à le tester dans le
moteur.
Importation et Test
Pour importer notre effet; on ouvre le GE et on clique sur l’onglet media.
On clique sur “Manage Shaders and Profiles” et en dessous la liste
“Shaders”, cliquez sur “New”. Localisez votre fichier et renommez-le
“Tutorial 2”.
Maintenant que le shader est importé, on doit lui créer un profil. Si votre
shader est complexe, il n’y a aucun intérêt à l’utiliser sur un objet lointain
ou sur un ordi avec une config peu puissante. U profil permettra de
basculer automatiquement le shader à une version moins détaillée si le
joueur est loin, ou s’il a choisit de jouer avec un niveau de détail bas. Pour
le moment, on ne s’en occupera pas, on va simplement créer un profil qui
utilisera notre shader « Tutorial 2 » en permanence.
Donc, cliquez sur “New” en dessous de la liste des profils. Renommez
votre profil “Tutorial 2”, et sélectionnez votre shader “Tutorial 2”. Ne vous
souciez pas des checkboxes ou du scale. Sauvegardez et fermez l’éditeur
de profil, ensuite refermez le shader manager.
Depuis le media manager, selectionnez un objet texturé et choisissez le
profil “Tutorial 2” dans la liste. Cliquez sur le world editor et placez le dans
la zone.
Voila le résultat sur ma sphère par défaut:
Vous devriez avoir le même résultat que le mien; ce qui signifie que vous
pouvez passer au tuto suivant où nous apprendrons à améliorer ce shader
pour lui donner plus de luminosité.
Si vous avez le moindre souci, vous pouvez télécharger le shader final:
tutorial2.fx
Realm Crafter is a registered trademark of Solstar Games, LLC.
Tutorial content may not be copied without permission.
Traduit par Giuliani (Terrier) avec l’aimable autorisation de Solstar Games, LLC.