Billboarding dans le Vertex Shader (GLSL)

Le billboarding est une technique régulièrement utilisée en programmation graphique 3D. Le billboarding permet d'orienter un objet (en général un quad) de telle manière qu'il soit toujours en face de la caméra.

Voilà quelques exemples d'utilisation du billboarding :

• particules ;
• rendu d'un halo autour d'un objet ;
• rendu d'arbres.

Pour les particules, le billboarding est directement câblé dans le GPU, quand on utilise les point sprites. Mais si vous avez besoin de coder le billboarding dans un vertex shader, voilà deux techniques très simples qui permettent d'obtenir un billboarding sphérique et un autre cylindrique.

Les deux techniques sont similaires et consistent à manipuler l'information de rotation contenue dans la matrice ModelView. Cette matrice est obtenue par la multiplication de la matrice de vue (View) de la caméra et la matrice de transformation d'un objet (Model) :

mat4 ModelView = View * Model;

La matrice de rotation contenue dans ModelView est une matrice 3 × 3 (en pointillé vert). Les trois colonnes de cette matrice de rotation, extraites de ModelView, sont les suivantes :

// Colonne 0 : 
ModelView[0][0]  // 0 
ModelView[0][1]  // 1 
ModelView[0][2]  // 2 

// Colonne 1 : 
ModelView[1][0]  // 4 
ModelView[1][1]  // 5 
ModelView[1][2]  // 6 

// Colonne 2 : 
ModelView[2][0]  // 8 
ModelView[2][1]  // 9 
ModelView[2][2]  // 10

Le billboarding sphérique oriente l'objet face à la caméra quelle que soit la position de la caméra sur une sphère imaginaire. Le billboarding cylindrique, quant à lui, oriente l'objet face à la caméra seulement lorsque celle-ci regarde à droite ou à gauche.

Pour faire du billboarding sphérique, il suffit d'annuler toutes les rotations. La matrice de rotation 3 × 3 est remplacée par une matrice identité :

// Colonne 0 : 
ModelView[0][0] = 1; 
ModelView[0][1] = 0; 
ModelView[0][2] = 0; 

// Colonne 1 : 
ModelView[1][0] = 0; 
ModelView[1][1] = 1; 
ModelView[1][2] = 0; 

// Colonne 2 : 
ModelView[2][0] = 0; 
ModelView[2][1] = 0; 
ModelView[2][2] = 1;

Le code du billboarding cylindrique est identique au billboarding sphérique, on ne touche pas à la seconde colonne de la matrice 3 × 3 de rotation :

// Colonne 0: 
ModelView[0][0] = 1; 
ModelView[0][1] = 0; 
ModelView[0][2] = 0; 

// Colonne 2: 
ModelView[2][0] = 0; 
ModelView[2][1] = 0; 
ModelView[2][2] = 1;

Voilà maintenant le vertex shader GLSL complet de billboarding cylindro-sphérique (ça claque !) tel qu'il est utilisé dans les démos GLSL Hacker :

#version 150 
in vec4 gxl3d_Position; 
in vec4 gxl3d_TexCoord0; 

// GLSL Hacker automatic uniforms: 
uniform mat4 gxl3d_ModelViewProjectionMatrix; 
uniform mat4 gxl3d_ModelViewMatrix; 
uniform mat4 gxl3d_ProjectionMatrix; 
uniform mat4 gxl3d_ViewMatrix; 
uniform mat4 gxl3d_ModelMatrix; 

uniform int spherical; // 1 pour sphérique ; 0 pour cylindrique

out vec4 Vertex_UV; 
void main() 
{ 
  //mat4 modelView = gxl3d_ViewMatrix*gxl3d_ModelMatrix; 
  mat4 modelView = gxl3d_ModelViewMatrix; 
  
  // Première colonne. 
  modelView[0][0] = 1.0; 
  modelView[0][1] = 0.0; 
  modelView[0][2] = 0.0; 

  if (spherical == 1) 
  { 
    // Deuxième colonne. 
    modelView[1][0] = 0.0; 
    modelView[1][1] = 1.0; 
    modelView[1][2] = 0.0; 
  } 

  // Troisème colonne. 
  modelView[2][0] = 0.0; 
  modelView[2][1] = 0.0; 
  modelView[2][2] = 1.0; 
  
  vec4 P = modelView * gxl3d_Position; 
  gl_Position = gxl3d_ProjectionMatrix * P; 
  
  Vertex_UV = gxl3d_TexCoord0; 
}

Les démos GLSL Hacker de billboarding sont disponibles dans le répertoire host_api/GLSL_Billboarding/ du demopack.

• Fast and Easy Spherical Billboards
• Cylindrical Billboards

Nous remercions JeGX de nous avoir permis de republier son article.

Merci à jacques_jean pour sa relecture orthographique.