Utilisation de DirectX sous Delphi : Asphyre 4.1

Puisque les shaders sont des fichiers texte, il est tout à fait possible de les écrire avec n'importe quel éditeur de texte ! En revanche, vous n'aurez aucune information sur la syntaxe.

Puisque notre EDI favori permet la coloration syntaxique et que – comme je vous l'ai dit – la syntaxe du shader est très proche du C, nous pouvons tout à fait insérer un fichier fx dans Delphi !
Pour cela, ouvrez un fichier .fx du SDK de DirectX par exemple, faites un clic droit sur la source, puis Propriétés. Allez dans la section Options de l'éditeur \ Options du source. Dans la boite déroulante Fichier source, choisissez C/C++. Si vous voulez que le type C/C++ s'applique à chaque fois que vous ouvrez un fichier .fx, ajoutez :

;fx

à la fin de la zone de saisie Extensions. Validez et vous verrez la syntaxe colorée dans le fichier .fx.

Puisque de nos jours, les effets dans les jeux vidéo sont de plus en plus complexes, les fichiers fx deviennent vite longs et difficiles à écrire.
Heureusement, nVidia propose un EDI pour écrire des shaders. Ce programme s'appelle FX Composer et se télécharge ici.
Grâce à ce programme, vous pourrez créer toute sorte d'effets avec vos shaders et avoir une visualisation en temps réel de vos modifications.

Le programme de shader que nous allons utiliser va simplement afficher une couleur unie sur le maillage.
Il nous faut donc définir une couleur pour chaque maillage.
Pour cela, nous allons créer une nouvelle classe dérivant de TAsphyreMeshX (unité AsphyreMeshes.pas) en y ajoutant une propriété Color de type TAsphyreColor (unité AsphyreColors.pas).

Voici l'unité complète :

unit MyMesh;

interface

uses
  AsphyreMeshes, AsphyreColors;

type
  TMyMesh = class(TAsphyreMeshX)
  private
    FColor: TAsphyreColor;
  published
  public
    property Color: TAsphyreColor read FColor write FColor;
  end;

implémentation

end.

Et c'est tout ! Comme nous l'avons vu dans la section 2D, les transformations se font quasiment en temps réel. Il est donc inutile d'écrire un SetColor ! Le changement de la couleur sera immédiatement visible.
Enregistrez cette unité en MyMesh.pas. Voici le fichier mesh que nous utiliserons tout le long de ce tutoriel : Mesh.zip

Les techniques permettent de spécifier d'une part les fonctions utilisées pour le vertex shader et le pixel shader et d'autre part, la version de shader utilisée. Nous avons donc :

VertexShader = compile vs_2_0 RenderVS( );

qui signifie: pour le vertex shader, utiliser la procédure RenderVS et compiler en version shader 2.0 (paramètre vs_2_0).
La ligne suivante se traduit de la même façon pour le vertex shader.
Cette déclaration est indispensable.
Il est à noter que l'on peut tout à fait déclarer plusieurs techniques. Cela permet, par exemple, d'adapter son rendu aux machines plus ou moins performantes.
Exemple :

//--------------------------------------------------------------------------------------
// Renders scene to render target
//--------------------------------------------------------------------------------------
technique Render_2_0
{
    pass P0
    {          
        VertexShader = compile vs_2_0 RenderVS( );
        PixelShader  = compile ps_2_0 RenderPS( );
    }
}

technique Render_1_1
{
    pass P0
    {          
        VertexShader = compile vs_1_1 RenderVS( );
        PixelShader  = compile ps_1_1 RenderPS( );
    }
}

Suivant la technique que l'on utilise, le code HLSL sera compilé en version shader 2.0 ou 1.1.

On peut aussi écrire des procédures RenderVS ou RenderPS différentes, avec des paramètres différents, etc.
Dans ce tutoriel, nous utiliserons la version de shader 2.0 puisque la grande majorité des cartes vidéo de nos jours supporte ce format.

Créons donc une nouvelle classe de shader que nous appellerons MyShader.pas :

unit MyShader1;

interface

//Unités nécessaires pour la suite
uses
 Direct3D9, d3dx9, Vectors2, Vectors3, Matrices4, AsphyreColors,
 AsphyreDevices, AsphyreShaderFX, AsphyreMeshes, AsphyreMatrices;

type
  TMyShader = class(TAsphyreShaderEffect)
  private
  protected
  public
  end;
  
implémentation

end;

Comme nous l'avons vu, le programme de shader nécessite deux variables : g_WorldViewProj qui est la matrice de transformation. Cette matrice est tout simplement la matrice WorldMtx que nous avons vue plus haut. Il est donc inutile de la déclarer dans la classe.
En revanche, nous devons tout de même spécifier la couleur du maillage pour pouvoir la transférer au shader. Pour cela, il nous faut surchager ces deux méthodes :

• Describe : permet de définir quels sont les paramètres et les techniques utilisés par le programme de shader et leur type de donnée ;
• UpdateParam : permet de spécifier la valeur du paramètre.

Si vous ne paramétrez pas correctement ou que vous oubliez un paramètre, le shader ne pourra pas se charger.

IV-D-2-b-i. La méthode Describe▲

  TMyShader = class(TAsphyreShaderEffect)
  private
  protected
    procedure Describe; override;
  public
  end;

procedure TMyShader.Describe;
begin
  //Description de la matrice de transformation
  DescParam(sptWorldViewProjection, 'g_WorldViewProj');

  //Description de la couleur
  DescParam(sptCustom, 'MeshRGBColor', 1);

  //Description de la technique
  DescTechnique('Render', 2);
end;

//Description de la matrice de transformation
DescParam(sptWorldViewProjection, 'g_WorldViewProj');

TShaderParameterType = (sptCustom, sptTexture, sptWorldViewProjection,
  sptViewProjection, sptWorldInverseTranspose, sptCameraPosition, sptWorld,
  sptWorldInverse, sptWorldView, sptProjection);

//Description de la couleur
DescParam(sptCustom, 'MeshRGBColor', 1);

//Description de la technique
DescTechnique('Render', 2);

const
  //Constantes d'indentification
  shdrRGBColor = 1;

  shdrRender = 2; //Rappel : ne jamais utiliser 0

procedure TMyShader.Describe;
begin
  //Description de la matrice de transformation
  DescParam(sptWorldViewProjection, 'g_WorldViewProj');

  //Description de la couleur
  DescParam(sptCustom, 'MeshRGBColor', shdrRGBColor);

  //Description de la technique
  DescTechnique('Render', shdrRender);
end;

IV-D-2-b-ii. La méthode UpdateParam▲

  TMyShader = class(TAsphyreShaderEffect)
  private
  protected
    procedure UpdateParam(Code: Integer; out DataPtr: Pointer;
      out DataSize: Integer); override;
  public
  end;

  TMyShader = class(TAsphyreShaderEffect)
  private
    TempColor : TD3DColorValue;
    FColor: TAsphyreColor;
  protected
    procedure UpdateParam(Code: Integer; out DataPtr: Pointer;
      out DataSize: Integer); override;
  public
  end;

procedure TMyShader.UpdateParam(Code: Integer; out DataPtr: Pointer;
  out DataSize: Integer);
begin
  case Code of
    //Paramètre de la couleur
    shdrRGBColor :
      begin
        TempColor := FColor;

        DataPtr := @TempColor;
        DataSize := SizeOf(TD3DColorValue) - SizeOf(Single);
      end;
  end;
end;

  case Code of
    //Paramètre de la couleur
    shdrRGBColor :

        TempColor := FColor;

        DataPtr := @TempColor;

        DataSize := SizeOf(TD3DColorValue) - SizeOf(Single);

SizeOf(Single)

Maintenant que le shader est paramétré, il convient de créer une procédure Render afin de paramétrer le shader juste avant le rendu.
Déclarons donc cette procédure dans la section public puisque c'est cette procédure qui va déclencher le rendu du maillage. Il faut donc qu'elle soit accessible depuis mes autres unités :

  TMyShader = class(TAsphyreShaderEffect)
  private
  protected
  public
    procedure Draw(Mesh: TAsphyreCustomMesh);
  end;

Voici son implémentation :

procedure TMyShader.Draw(Mesh: TAsphyreCustomMesh);
var
 PassNo: Integer;
begin
  //Définition de la technique utilisée
  UseTechnique(shdrRender);
  
  //Récupération de la couleur
  FColor := TMyMesh(Mesh).Color;
  
  //Mise à jour des paramètres
  UpdateAll;
  
  //Rendu du mesh pour chaque passe
  for PassNo:= 0 to NumPasses - 1 do
  begin
    if (not BeginPass(PassNo)) then Break;

    Mesh.Draw();

    EndPass();
  end;
end;

La première procédure utilisée est UseTechnique. Vous l'aurez compris, cela permet de spécifier la technique que l'on va utiliser à l'aide de son identifiant.
Si vous écrivez :

  //Définition de la technique utilisée
  UseTechnique(0);

Cela signifie, comme je vous le disais plus haut, que vous n'utilisez aucune technique et donc aucun shader.
Il est possible d'utiliser plusieurs techniques, mais une seule à la fois en appelant successivement UseTechnique avec des techniques différentes.

La procédure UpdateAll appelle UpdateParam et UpdateTexture que nous verrons plus loin autant de fois qu'il y a de paramètres pour le shader.
Son appel est donc indispensable. C'est une fonction membre de la classe TAsphyreShaderEffect.

La boucle permet de faire plusieurs passes de rendu suivant le paramètre global NumPasses (nombre de passes).

Il est temps maintenant d'exécuter notre programme et de voir le résultat !

Lorsque vous exécutez votre programme, le fichier fx est compilé par DirectX. On peut ainsi contrôler s'il n'y a pas d'erreur.
Reprenons notre fichier .fx et mettons-y volontairement une erreur : remplaçons

float4x4 g_WorldViewProj;    // World * View * Projection matrix

du tout début (ligne 4) par

//Ajout volontaire d'une parenthèse pour provoquer
//une erreur de syntaxe
float4x4 (g_WorldViewProj;    // World * View * Projection matrix

Exécutez, vous devriez avoir, outre la boite de dialogue d'avertissement « Impossible de charger le shader », dans le journal d'événement de Delphi, une ligne supplémentaire qui devrait ressembler à ceci :

Sortie du débogage : ...Shader.fx(4): error X3000: syntax error: unexpected token '(' Processus Asphyre3D.exe (2972)

Cette ligne a été rajoutée par DirectX grâce à Asphyre. Elle vous permet de savoir quelle est l'erreur ainsi que la ligne où elle se produit : le numéro de la ligne est le numéro qui suit le nom du fichier .fx. Dans notre cas, c'est bien à la ligne 4 que nous avons volontairement ajouté une parenthèse qui provoque une erreur de syntaxe.
Ainsi, il est tout à fait possible de développer le shader avec Delphi.

Vous pouvez télécharger l'intégralité du projet de cette section ici : Shader1.zip

Voici le code HLSL du shader :

//--------------------------------------------------------------------------------------
// Global variables
//--------------------------------------------------------------------------------------
float4x4 g_WorldViewProj;    // World * View * Projection matrix
float3 MeshRGBColor; //Mesh Color

float Ticks;


//--------------------------------------------------------------------------------------
// Vertex shader output structure
//--------------------------------------------------------------------------------------
struct VS_OUTPUT
{
    float4 Position   : POSITION;   // vertex position
};


//--------------------------------------------------------------------------------------
// This shader computes standard transform
//--------------------------------------------------------------------------------------
VS_OUTPUT RenderVS(float4 vPos : POSITION)
{
    VS_OUTPUT Output;
    
    Output.Position = mul(vPos, g_WorldViewProj);

    return Output;
}


//--------------------------------------------------------------------------------------
// Pixel shader output structure
//--------------------------------------------------------------------------------------
struct PS_OUTPUT
{
    float4 RGBColor : COLOR;  // Pixel color
};


//--------------------------------------------------------------------------------------
// This shader outputs the pixel's color by using the texture's color
//--------------------------------------------------------------------------------------
PS_OUTPUT RenderPS( VS_OUTPUT In ) 
{
    PS_OUTPUT Output;
    float4 OutColor = {MeshRGBColor, 1.0};
    float fact = (sin(Ticks) + 1) / 2;

    Output.RGBColor = float4(
        MeshRGBColor.x * fact,
        MeshRGBColor.y * fact,
        MeshRGBColor.z * fact,
        1.0);

    return Output;
}


//--------------------------------------------------------------------------------------
// Renders scene to render target
//--------------------------------------------------------------------------------------
technique Render
{
    pass P0
    {          
        VertexShader = compile vs_2_0 RenderVS( );
        PixelShader  = compile ps_2_0 RenderPS( );
    }
}

Comme vous pouvez le remarquer, les seules modifications apportées sont :

• l'ajout d'une nouvelle variable Ticks ;
• la modification du pixel shader afin qu'il utilise cette nouvelle variable.

Le pixel shader utilise donc ici le sinus de Ticks, qu'il ramène entre 0 et 1. Il multiplie ensuite chaque composante de la couleur par la valeur obtenue. Ceci aura pour effet une couleur qui va s'assombrir au fur et à mesure pour revenir progressivement à son niveau d'origine.

Il faut maintenant ajouter ce paramètre dans le code de notre classe de shader.
Rajoutons donc une variable privée FTicks à notre classe TMyShader ainsi qu'une surcharge du constructeur afin d'initialiser FTicks à 0 :

  TMyShader = class(TAsphyreShaderEffect)
  private
    TempColor : TD3DColorValue;
    FColor: TAsphyreColor;
    //Variable FTicks pour l'animation
    FTicks: single;
  protected
    procedure Describe; override;
    procedure UpdateParam(Code: Integer; out DataPtr: Pointer;
      out DataSize: Integer); override;
  public
    procedure Draw(Mesh: TAsphyreCustomMesh);
    constructor Create(ADevice: TAsphyreDevice);
  end;
  
...

implémentation

...

constructor TMyShader.Create(ADevice: TAsphyreDevice);
begin
  inherited;
  //Initialisation de FTicks
  FTicks := 0;
end;

Notez bien la déclaration du constructeur de la classe et son paramètre.

Ensuite, il suffit d'ajouter ce paramètre dans la procédure Describe de cette façon :

const
  shdrRGBColor = 1;
  shdrTicks = 2;

  shdrRender = 3;

...

procedure TMyShader.Describe;
begin
  //Description de la matrice de transformation
  DescParam(sptWorldViewProjection, 'g_WorldViewProj');

  //Description de la couleur
  DescParam(sptCustom, 'MeshRGBColor', shdrRGBColor);

  //Description du paramètre Ticks
  DescParam(sptCustom, 'Ticks', shdrTicks);

  //Description de la technique
  DescTechnique('Render', shdrRender);
end;

Nous avons donc déclaré une nouvelle constante pour ce paramètre, modifié celui de la technique et ajouté une procédure DescParam avec sptCustom en paramètre.

Il nous faut ensuite modifier la procédure UpdateParam pour y ajouter ce nouveau paramètre :

procedure TMyShader.UpdateParam(Code: Integer; out DataPtr: Pointer;
  out DataSize: Integer);
begin
  case Code of
    //Paramètre de la couleur
    shdrRGBColor :
      begin
        TempColor:= FColor;

        DataPtr := @TempColor;
        DataSize:= SizeOf(TD3DColorValue) - SizeOf(Single);
      end;
    //Paramètre Ticks
    shdrTicks :
      begin
        DataPtr := @FTicks;
        DataSize := SizeOf(Single);
      end;
  end;

Rien de bien sorcier, je ne reviendrai pas dessus.

À ce moment-là, le paramètre Ticks du shader est bien pris en compte, mais n'est pas modifié afin d'obtenir l'effet voulu.
Pour cela, il faut modifier la procédure Draw et y ajouter la modification de Fticks :

procedure TMyShader.Draw(Mesh: TAsphyreCustomMesh);
var
 PassNo: Integer;
begin
  //Définition de la technique utilisée
  UseTechnique(shdrRender);

  //Modification de FTicks
  FTicks := FTicks + 0.01;
  
  //Récupération de la couleur
  FColor := TMyMesh(Mesh).Color;
  
  //Mise à jour des paramètres
  UpdateAll;
  
  //Rendu du mesh pour chaque passe
  for PassNo:= 0 to NumPasses - 1 do
  begin
    if (not BeginPass(PassNo)) then Break;

    Mesh.Draw();

    EndPass();
  end;
end;

Et c'est tout : la mise à jour du paramètre du shader se fera avec UpdateAll.
Exécutez maintenant votre programme, vous devriez avoir ceci :

Évidemment, sur une image fixe, on ne voit pas l'effet produit. Mais le logo tourne et sa couleur s'estompe puis réapparait indéfiniment.

Vous pouvez télécharger l'intégralité du projet de cette section ici : Shader2.zip

Le shader que nous allons utiliser a été créé sous FX Composer. C'est un matériau avec texture utilisant l'ombrage Lambert.
Vous pouvez télécharger ici ce shader : ShaderLambert.zip

IV-D-4-a-i. Les paramètres▲

float4x4 WorldITXf : WorldInverseTranspose < string UIWidget="None"; >;
float4x4 WvpXf : WorldViewProjection < string UIWidget="None"; >;
float4x4 WorldXf : World < string UIWidget="None"; >;
float4x4 ViewIXf : ViewInverse < string UIWidget="None"; >;

...

texture ColorTexture : DIFFUSE <
    string UIName =  "Diffuse Texture";
    string ResourceType = "2D";
>;

TShaderParameterType = (sptCustom, sptTexture, sptWorldViewProjection,
  sptViewProjection, sptWorldInverseTranspose, sptCameraPosition, sptWorld,
  sptWorldInverse, sptWorldView, sptProjection);

procedure TMyShader.Describe;
begin
  //Description de la matrice de transformation inversée et transposée
  DescParam(sptWorldInverseTranspose, 'WorldITXf');
  //Description de la matrice de vue monde
  DescParam(sptWorldViewProjection, 'WvpXf');
  //Description de la matrice de monde
  DescParam(sptWorld, 'WorldXf');
  //Description de la matrice de vue inversée
  DescParam(sptCustom, 'ViewIXf', shdrViewInv);

  //Description de la texture
  DescParam(sptTexture, 'ColorTexture', shdrSkinTexture);

  //Description de la technique
  DescTechnique('Main', shdrRender);
end;

procedure TMyShader.UpdateParam(Code: Integer; out DataPtr: Pointer;
  out DataSize: Integer);
begin
  case Code of
    shdrViewInv:
      begin
        //Envoi de la valeur de la matrice vue inversée
        FTempMtx := TD3DXMatrix(InvertMtx4(ViewMtx.RawMtx^).Data);
        DataPtr := @FTempMtx;
        DataSize:= SizeOf(TD3DXMatrix);
      end;
  end;
end;

IV-D-4-a-ii. Les textures▲

    procedure UpdateTexture(Code: Integer;
      out ParamTex: IDirect3DTexture9); override;

  private
    FSkinTexture: TAsphyreCustomTexture;

procedure TMyShader.UpdateTexture(Code: Integer;
  out ParamTex: IDirect3DTexture9);
begin
  ParamTex:= nil;

  case Code of
    shdrSkinTexture:
    //Envoi de la texture
    if (FSkinTexture <> nil) then ParamTex:= FSkinTexture.Tex9;
  end;
end;

IV-D-4-a-iii. Le rendu▲

    procedure Draw(Mesh: TAsphyreCustomMesh; SkinTex: TAsphyreCustomImage);

procedure TMyShader.Draw(Mesh: TAsphyreCustomMesh;
  SkinTex: TAsphyreCustomImage);
var
 PassNo: Integer;
begin
  //Définition de la technique utilisée
  UseTechnique(shdrRender);

  //Passage de la texture dans SkinTexture
  FSkinTexture:= nil;
  if (SkinTex <> nil) then FSkinTexture:= SkinTex.Texture[0];

  //Mise à jour des paramètres
  UpdateAll;
  
  //Rendu du mesh pour chaque passe
  for PassNo:= 0 to NumPasses - 1 do
  begin
    if (not BeginPass(PassNo)) then Break;

    Mesh.Draw();

    EndPass();
  end;
end;

Commençons par modifier le OnCreate de la fiche pour charger l'image depuis ce XML. Pour cela, nous le savons maintenant, il suffit d'ajouter :

  //Chargement des images
  ImageGroups.ParseLink('ressources.xml');

au début du OnCreate de la Form. Le reste ne change pas.

Pour la suite du code, nous avons besoin de l'indice de cette image. Bien que ce soit la seule image et a donc un indice égal à 0, prenons l'habitude dès maintenant de prévoir des ressources plus importantes.
L'endroit idéal pour récupérer cet indice est l'événement OnDeviceCreate.

Cette procédure OnDeviceCreate se déclare ainsi, toujours dans la section private de notre Form :

    procedure OnDeviceCreate(Sender: TObject; EventParam: Pointer;
     var Success: Boolean);

Voici son implémentation :

procedure TMainFrm.OnDeviceCreate(Sender: TObject; EventParam: Pointer;
  var Success: Boolean);
begin
  with Sender as TAsphyreDevice do
  begin
    //Récupération de l'indice et chargement de la texture utilisée
    ImageSkin:= Images.ResolveImage('TextureImg');
  end;
end;

ImageSkin est un integer que nous avons déclaré en variable globale et initialisé à -1 :

var
  ImageSkin: Integer = -1;

La chaine de caractères passée en paramètre est la chaine déclarée dans le XML dans l'attibut uid de l'image.

Afin de vérifier le bon chargement de la ressource, utilisons aussi l'événement OnResolveFailed, toujours dans private :

    procedure OnResolveFailed(Sender: TObject; EventParam: Pointer;
      var Success: Boolean);

Et son implémentation :

procedure TMainFrm.OnResolveFailed(Sender: TObject; EventParam: Pointer;
  var Success: Boolean);
begin
  //Si le chargement d'une ressource échoue, quitte l'application
  MessageDlg('Erreur lors du chargement d''une ressource', mtError, [mbOk], 0);
  Devices.Finalize;
  Close;
  Exit;
end;

Nous avons également vu comment utiliser ces événements, je ne reviendrai donc pas dessus :

procedure TMainFrm.ConfigureDevice(Sender: TAsphyreDevice; Tag: TObject;
  var Config: TScreenConfig);
begin
  //Paramétrage de l'affichage
  Config.WindowHandle := Handle;
  Config.Width := ClientWidth;
  Config.Height := ClientHeight;
  Config.Windowed := true;
  Config.HardwareTL := true;
  Config.BitDepth := bd24bit;
  //Activation de l'anticrénelage
  Config.MultiSamples := 2;

  //Inscription de l'événement OnDeviceCreate
  EventDeviceCreate.Subscribe(OnDeviceCreate, Sender);
  //Inscription de l'événement OnResolveFailed
  EventResolveFailed.Subscribe(OnResolveFailed, Sender);
end;

La dernière chose à modifier est le callback de rendu afin d'utiliser la nouvelle procédure Draw de notre classe de shader. Pour cela, remplacez la ligne correspondante par :

  Shader.Draw(Mesh, Sender.Images[ImageSkin]);

Ainsi, nous passons notre texture dans notre classe de shader qui se chargera de l'envoyer au shader lui-même.

Vous pouvez maintenant exécuter votre code !

Vous pouvez télécharger l'intégralité du projet de cette section ici : Shader3.zip