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.

Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Image non disponible

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

 
Sélectionnez
mat4 ModelView = View * Model;
Image non disponible

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 :

 
Sélectionnez
// 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é :

 
Sélectionnez
// 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 :

 
Sélectionnez
// 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;

II. Vertex Shader GLSL de Billboarding Cylindro-Sphérique

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 :

 
Sélectionnez
#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.

Image non disponible

III. Références

IV. Remerciements

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

Merci à jacques_jean pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2014 Geeks3D. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.