Intégration 3D, ce qui change avec le WebGL

30 novembre 2015   by Axel Aubert, designer 3D à ultranoir
Back
Lorsque l’on intègre des objets 3D en WebGL, il est important de connaître plusieurs étapes pour obtenir des expériences fluides et fonctionnelles. Si les éléments en WebGL partagent de nombreux points communs avec les éléments 3D, il existe quelques différences notables qui peuvent affecter le rendu d’une scène 3D intégrée en WebGL.


Trianguler les faces

Seuls les polygones triangulaires sont reconnus par la norme WebGL. Il faut donc s’assurer qu’une optimisation a été faite si les polygones de base ont plus de 3 sommets.




Optimiser le temps de chargement

Plus il y a de polygones, plus l’animation va être lourde et sera difficile à charger. On risque alors le lag tant redouté. Il faut donc trouver le juste milieu entre le nombre de polygones présents et le rendu de détails ou de netteté souhaité. C’est une phase qui peut se révéler délicate, notamment avec le problème des capacités du support lambda (sans parler de la qualité du réseau).

De même, il faut systématiquement éradiquer tous les polygones qui ne serviraient à rien, ceux par exemple qui ne se trouvent pas en surface. En WebGL, la façon dont est composé l’intérieur d’un élément compte : un polygone situé à l’intérieur de l’objet, même si on ne le voit pas, est comptabilisé par le navigateur et participe à son insu au poids de la scène jouée.


Penser « caméra »

Lors de l’intégration, il faut faire attention à la taille de l’objet par rapport à la caméra. En WebGL, le ratio de la taille de la scène n’est pas forcément le même que dans le logiciel 3D utilisé. Il faut donc que l’objet soit de la même taille que celle de la librairie utilisée. 


Utiliser les multiples

Concernant les textures, il est recommandé d’utiliser les multiples de 1024 pour le choix du nombre de pixels : 206, 512, etc. Pourquoi ? Tout simplement parce qu’il se trouve que le web possède une certaine affinité avec ces multiples et qu’une telle précaution permet de participer à l’optimisation du temps de chargement d’une scène. A noter que la taille d’image max à ne pas dépasser est 4096 px.


Optimiser les vertex normals


Il faut penser à optimiser les vertex normals pour arrondir les faces au maximum : le résultat final sera plus lisse, moins cubique.



Surveiller la face cachée


Les polygones ne sont visibles que d’un côté en WebGL : il faut donc faire attention, lors de l’exportation, à exporter les données pour que ce soit la bonne face qui soit affichée. Dans le cas contraire, on risque de se retrouver avec une face soudainement manquante et une vue prenante sur les autres faces.



Conformer les textures


Si la scène est statique (pas de mouvement d’objet et de lumière), il faut inclure les données des lumières, ombres et couleurs sur la même texture afin d’optimiser le poids de la scène (cela fait des textures en moins à importer par la suite).


Enfin, croire en l’OBJ


L’OBJ est le format le plus traditionnellement utilisé pour importer des objets en WebGL. C’est un format utilisable sur les éditeurs de WebGL en ligne.  Il existe aussi le fbx ou le dae, des formats qui permettent d’importer des animations.
logo ultranoir
logo ultranoir