Nous allons créer un loader .OBJ capable de lire et d’analyser des données 3D que nous utiliserons ensuite pour rendre un modèle 3D dans le navigateur. Ce guide explique comment lire un fichier Wavefront OBJ et le préparer pour l’affichage via WebGPU, en s’appuyant sur les concepts et exemples fournis dans le brouillon.
Contexte et objectifs
WebGPU arrive sur le web et il est temps de se préparer à son arrivée. Aujourd’hui, nous poursuivons une série sur le rendu WebGPU en partant d’un triangle et en progressant vers des objets plus complexes issus de logiciels 3D comme Blender. L’objectif est de construire un loader OBJ simple et robuste qui lit et stocke les données dans des buffers GPU, afin de pouvoir rendre rapidement des géométries complexes dans le navigateur.
Le format OBJ Wavefront
Le fichier OBJ est un format décrit par Wavefront Technologies et contient typiquement des ensembles de sommets, normals, coordonnées de textures et faces. Le chargement et la préparation consistent à lire ces éléments et à les convertir en buffers utilisables par le GPU.
Voici l’architecture typique d’un fichier OBJ :
- Vertices (v) - positions
- Normals (vn) - vecteurs normaux
- Texture coordinates (vt) - coordonnées UV
- Faces (f) - triangles formés par des indices
Exemple simplifié d’un objet pyramide :
v 0 0 0
v 1 0 0
v 1 1 0
v 0 1 0
v 0.5 0.5 1.6
f 4// 1// 2//
f 3// 4// 2//
f 5// 2// 1//
f 4// 5// 1//
f 3// 5// 4//
f 5// 3// 2//
Rendu possible d’une pyramide 3D après le chargement OBJ.
Préparer les géométries dans Blender (conseils pratiques)
Pour garantir la cohérence et faciliter le chargement ultérieur, il est recommandé d’ouvrir les fichiers OBJ dans Blender et d’effectuer les ajustements suivants :
- centrer le modèle sur l’origine (Set Origin > Origin to Geometry, puis Snap > Cursor to Selection) ;
- recalculer les normales (Edit Mode > Mesh > Normals > Recalculate Outside) ;
- exporter au format Wavefront (.obj) avec les paramètres suivants : Apply Modifiers, Write Normals, Include UVs, Write Materials, Triangulate Faces.
Ces étapes permettent d’obtenir un OBJ prêt à être chargé dans le navigateur sans surprises liées au positionnement ou à la cohérence des normales.
Exemple d’objet utilisé pour l’illustration : le Stanford Bunny. Une fois préparé, l OBJ peut être chargé dans votre scène WebGPU.
Structure du loader OBJ pour WebGPU
Le code suppose que le fichier OBJ a été préparé par Blender. L’objectif est de stocker toutes les données présentes dans le fichier OBJ dans des buffers sur le GPU. Le loader est composé de deux parties :
- Loader - chargé du fetch du fichier et de son stockage en mémoire pour traitement ultérieur.
- Parser - lit le texte en mémoire et stocke les données dans des buffers correspondants.
Loader - load()
Le chargement consiste à récupérer le contenu du fichier situé à filePath. Le fichier peut être lu localement ou via HTTP selon l’architecture de votre projet.
Parser - parse()
Cette fonction lit les lignes du OBJ et les stocke dans des tableaux correspondant à chaque attribut :
- v - position des vertices
- vt - coordonnées de texture
- vn - normales
- f - faces (triangles formés par trois vertices)
On utilise un tampon d’indices (IBO) pour éviter de dupliquer les données, ce qui permet une gestion plus efficiente des vertex et des triangles, comme dans l’exemple fourni.
Comprendre les faces et les indices
La définition d’une face fournit les données associées aux trois vertices qui forment un triangle :
f v0/vt0/vn0 v1/vt1/vn1 v2/vt2/vn2
Dans l’exemple simple du pyramide, chaque face se compose d’indices vers les positions, les normales et éventuellement les textures. Si le fichier OBJ contient des normales et des coordonnées UV, ces indices apparaissent sous forme de séries séparées par des slashs.
Nous pouvons réutiliser les données en utilisant des tampons d’attributs vertex (VBO) et un tampon d’indices (IBO). Le processus consiste à construire des tableaux pour les positions et les couleurs (ou autres attributs) et à générer les indices qui décrivent les triangles à partir des vertices.
Types de buffers et rendu WebGPU
Comme dans le rendu d’un triangle précédent, on stocke les attributs à chaque vertex dans des VBOs et on utilise un IBO pour réutiliser les vertex. Cela permet de réduire la taille des données et d’optimiser le pipeline graphique.
Exemple conceptuel des buffers :
position_vbo = [ -1, 0, 0, 0, 1, 0, 0, 1, 0, 2, 1, 0, ...]
color_vbo = [ 1, 0, 0, 0, 0, 1, 1, 1, 0, ...]
indices_ibo = [ 0, 1, 2, 2, 1, 3, ... ]
En utilisant ces buffers, nous pouvons réutiliser des données communes et construire des géométries plus complexes sans dupliquer les informations superflues.
Et après ? Rendre le modèle dans le navigateur
La prochaine étape consiste à rendre les données 3D chargées avec le nouvel OBJ loader et à examiner des fonctionnalités de rendu telles que le test de profondeur. Nous explorerons comment connecter les buffers importés au pipeline WebGPU et comment configurer les shaders pour afficher une géométrie obtenue à partir d’un fichier OBJ.
Tableau récapitulatif des étapes clés
| Élément | Description |
|---|---|
| Format OBJ | Vertices, Normals, Texture coordinates, Faces |
| Préparation Blender | Origin, centering, normals, export OBJ |
| Loader | load() - récupération du fichier |
| Parser | parse() - lecture des lignes et stockage |
| Bufferisation | VBO et IBO pour attributs et indices |
| Rendu | WebGPU pipeline, shaders, depth test |
