Présentation du pipeline de rendu WebGL

WebGL (Web Graphics Library) est une API Javascript utilisée pour afficher des graphiques 2D et 3D dans les navigateurs sans utiliser de modules complémentaires. Elle s’appuie sur la spécification OpenGL ES (OpenGL for Embedded Systems) et est supportée nativement par la grande majorité des navigateurs actuels.

Cette API permet l’utilisation dans une page web d’un composant (canevas) capable d’afficher un modèle 3D et autorise les interactions entre ce composant et l’application. Pour effectuer le rendu d’un modèle 3D, plusieurs étapes sont réalisées selon le schéma suivant :

API

WebGL fournit un ensemble de méthodes qui permettent la réalisation des étapes suivantes :

• Initialisation du contexte WebGL
• Création des tableaux qui contiennent les données des géométries (coordonnées des sommets, indices, normales, couleurs / coordonnées des textures)
• Création des buffers (VBO) à partir des tableaux
• Création, compilation et liaison des shaders
• Définition des attributs / uniforms et association aux buffers
• Définition des matrices de transformation

Cette étape est réalisée en amont du reste du pipeline. Les étapes suivantes seront répétées pour chaque objet 3D à restituer.

Primitive processing

Cette étape utilise les attributs définis initialement pour déterminer comment sont structurées les informations dans les différents buffers et ainsi les associer à chaque vertex. Chaque attribut définit le type de données ainsi que le nombre d’éléments requis dans le VBO pour constituer cet attribut.

Structure d’un VBO «interleaved»

Le format “interleaved” permet de stocker dans un même buffer les différentes données (ici position, couleur et coordonnées de texture). Le stride indique combien d’éléments doivent être associés à un même vertex.
Chaque définition d’attribut spécifie le décalage (offset) et le nombre d’éléments : 3 valeurs pour la position (x,y,z), 3 valeurs pour la couleur(r,g,b), 2 valeurs pour les coordonnées de texture(s,t).

Vertex Shader
Le vertex shader est un programme qui est exécuté pour chaque vertex du VBO. Il réalise la projection des sommets des primitives depuis l’espace 3D vers l’espace écran en 2D.

Primitive assembly

Cette étape réalise l’assemblage en lignes, triangles ou points.

Rasterizer

Détermine pour chaque primitive les pixels à afficher en effectuant une interpolation entre les sommets. On peut distinguer deux fonctions principales :
Le culling : élimine les faces qui ne sont pas visibles selon leur orientation (définie par les normales). Généralement, les faces internes (backfaces), ne sont pas rendues.
Le clipping : élimine les pixels qui sont à l’extérieur de la zone de rendu.

Fragment Shader

Le fragment shader est un programme qui définit la couleur de chaque pixel qui sera rendu. Il stocke aussi la profondeur de chaque fragment (z-buffering), proportionnellement à la distance entre l’œil (la caméra) et l’objet.
Il est généralement utilisé pour réaliser les opérations d’éclairage en modifiant l’intensité de la couleur.

Depth Stencil

Lorsqu’un fragment issu du fragment shader doit être dessiné, sa profondeur est comparée à celle présente dans le z-buffer. S’il est plus éloigné, il n’est tout simplement pas rendu. S’il est plus proche, il est rendu à la place du fragment précédent.

Color Buffer Blending

Cette étape permet de mélanger les couleurs de différents fragments qui se superposent. Cela permet par exemple la modification (plus ou moins importante) de la couleur d’un pixel pour tenir compte de la transparence.

Dither

Cette étape permet d’appliquer un « bruit » qui vient altérer le rendu du pixel. Ce bruit peut être utilisé pour corriger certains artefacts (effet de bande par exemple) ou ajouter des effets (blur, noise).

Color FrameBuffer

En sortie du pipeline, le framebuffer est un tampon servant de destination au rendu. Il permet la restitution de l’image qui se fera dans le canevas ou la génération de textures qui pourront être utilisées dans d’autres pipelines.

Dans un prochain article, nous vous présenterons un exemple d’application web en utilisant la librairie ThreeJS.

Suivront aussi quelques conseils d’optimisation relatifs à nos retours d’expérience.

STAY TUNED!