Le résultat du travail sur la bibliothèque FSGL avec OpenGL ES et le code :
Ensuite, je décrirai comment tout a été programmé, divers problèmes intéressants ont été résolus.
Tout d’abord, nous allons initialiser le contexte OpenGL ES, comme je l’ai écrit dans le post précédent. De plus, nous ne considérerons que le rendu et une brève description du code.
La Matrix vous surveille
Cette figure de Miku dans la vidéo est constituée de triangles. Pour dessiner un triangle dans OpenGL, vous devez spécifier trois points avec les coordonnées x, y, z. en coordonnées 2D du contexte OpenGL.
Puisque nous devons dessiner une figure contenant des coordonnées 3D, nous devons utiliser une matrice de projection. Nous devons également faire pivoter, zoomer ou faire tout ce que nous voulons faire avec le modèle. À cette fin, la matrice de modèle est utilisée. Il n’y a pas de concept de caméra dans OpenGL ; en fait, les objets tournent autour d’une caméra statique. Pour cela, une matrice de vues est utilisée.
Pour simplifier la mise en œuvre d’OpenGL ES – il ne contient pas de données matricielles. Vous pouvez utiliser des bibliothèques qui ajoutent des fonctionnalités manquantes, par exemple GLM.
Shaders
Afin de permettre au développeur de dessiner n’importe quoi, et de quelque manière que ce soit, OpenGL ES doit implémenter des vertex et fragment shaders. Le vertex shader doit recevoir les coordonnées de rendu en entrée, effectuer des transformations à l’aide de matrices et transmettre les coordonnées à gl_Position. Fragment ou pixel shader – dessine déjà la couleur/texture, applique une superposition, etc.
J’ai écrit des shaders en GLSL. Dans mon implémentation actuelle, les shaders sont intégrés directement dans le code de l’application principale sous forme de chaînes C.
Tampons
Le vertex buffer contient les coordonnées des sommets (vertices) ; ce tampon contient également les coordonnées pour la texturation et d’autres données nécessaires aux shaders. Après avoir généré le vertex buffer, vous devez lier le pointeur aux données du vertex shader. Cela se fait avec la commande glVertexAttribPointer, où vous devez spécifier le nombre d’éléments, un pointeur vers le début des données et la taille du pas qui sera utilisé pour parcourir le tampon. Dans mon implémentation, la liaison des coordonnées de sommet et des coordonnées de texture pour le pixel shader est effectuée. Cependant, il convient de dire que le transfert des données (coordonnées de texture) vers le fragment shader s’effectue via le vertex shader. Pour y parvenir, les coordonnées sont déclarées en utilisant variant.
Pour qu’OpenGL sache dans quel ordre dessiner les points des triangles – vous aurez besoin d’un tampon d’index (index). Le tampon d’index contient le numéro de sommet dans le tableau ; en utilisant trois de ces indices, un triangle est obtenu.
Textures
Vous devez d’abord charger/générer une texture pour OpenGL. Pour cela j’ai utilisé SDL_LoadBMP, la texture est chargée depuis un fichier bmp. Cependant, il convient de noter que seuls les BMP 24 bits conviennent et que les couleurs qu’ils contiennent ne sont pas stockées dans l’ordre RVB habituel, mais en BGR. Autrement dit, après le chargement, vous devez remplacer le canal rouge par un bleu.
Les coordonnées de texture sont spécifiées au format UV< /a>, c’est-à-dire qu’il vous suffit de transférer deux coordonnées. La sortie de texture est effectuée dans le fragment shader. Pour ce faire, vous devez lier la texture dans un fragment shader.
Rien de plus
Puisque, selon nos instructions, OpenGL dessine de la 3D à la 2D – puis pour implémenter la profondeur et sélectionner des triangles invisibles – vous devez utiliser l’élimination et un tampon de profondeur (Z-Buffer). Dans mon implémentation, j’ai réussi à éviter la génération manuelle du tampon de profondeur à l’aide de deux commandes : glEnable(GL_DEPTH_TEST); et sélections glEnable(GL_CULL_FACE);
Assurez-vous également de vérifier que le plan proche de la matrice de projection est supérieur à zéro, car vérifier la profondeur avec un plan proche nul ne fonctionnera pas.
Rendu
Pour remplir le tampon de vertex, le tampon d’index avec quelque chose de conscient, par exemple le modèle Miku, vous devez charger ce modèle. Pour cela, j’ai utilisé la bibliothèque assimp. Miku a été placé dans un fichier au format Wavefront OBJ, chargé à l’aide de assimp, et la conversion des données d’assimp en tampons de sommets et d’index a été implémentée.
Le rendu s’effectue en plusieurs étapes :
- Faire pivoter Miku à l’aide de la rotation de la matrice du modèle
- Effacer l’écran et le tampon de profondeur
- Dessiner des triangles à l’aide de la commande glDrawElements.
Prochaine étape – Implémentation du rendu en WebGL à l’aide d’Emscripten.
Code source :
https://github.com/demensdeum/OpenGLES3-Experiments/tree/master/8-sdl-gles-obj-textured-assimp-miku
Modèle :
https://sketchfab.com/models/7310aaeb8370428e966bdcff414273e7
