Il arrive souvent que les techniques d'optimisation qui fonctionnent bien pour les graphiques de bureau ou mobiles classiques ne donnent pas toujours l'effet souhaité dans le cas de WebGL. Dans cet article, j'ai rassemblé (ou plutôt traduit en russe et décrit sous forme de texte notre
présentation avec Verge3Day) les méthodes de productivité qui fonctionnaient bien pour créer des applications Web interactives.
Géométrie / Maillages
Une géométrie correcte est la clé des performances de toute application 3D. Pour obtenir un ombrage uniforme et un rendu rapide, vous devez garder le maillage polygonal aussi uniforme que possible. Au tout début du travail, vous devez déterminer le niveau de détail de votre scène et vous y tenir lors de la modélisation.
Lors de la modélisation des plis, il est préférable d'utiliser des groupes d'ombrage plutôt que d'ajouter plus de polygones.
Lorsque vous travaillez avec un modèle cylindrique, essayez de réduire le nombre de polygones plus près du centre.
Ne surchargez pas le modèle avec des pièces supplémentaires que l'utilisateur ne verra toujours pas. Comme le montre la figure ci-dessous, le bord surligné en orange détermine le niveau de détail de l'ensemble du modèle, vous pouvez donc l'utiliser comme guide.
Cartes normales
Une façon courante d'optimiser les performances de WebGL consiste à réduire le nombre de polygones en créant des cartes normales.
Cependant, les cartes normales peuvent créer des artefacts visibles en raison de la précision limitée de l'image 8 bits. Les solutions possibles à ce problème sont présentées dans l'image ci-dessous, mais elles sont plutôt difficiles à mettre en œuvre: l'utilisation de l'image avec une précision plus élevée entraînera une augmentation de la taille du fichier téléchargé, tandis que la deuxième approche est plutôt laborieuse et ne garantit pas un résultat propre. La troisième approche fonctionne parfois dans le cas de surfaces rugueuses. Dans ce cas, nous vous recommandons d'ajouter du bruit à vos matériaux pour réduire les artefacts possibles.
Sur la base de notre expérience, nous avons conclu que la meilleure solution pour les objets brillants est d'utiliser une géométrie de complexité moyenne avec des groupes de sommets lisses, sans utiliser de carte normale.
Enfin, voici quelques cas où vous pouvez utiliser une carte normale, plutôt qu'un maillage très détaillé:
- Votre objet se compose de nombreuses surfaces différentes.
- Vous avez une surface rugueuse qui ne donne pas de défauts visibles.
- Vos objets sont si éloignés ou si petits que l'utilisateur ne peut remarquer aucun artefact.
Texturation
Voici un ensemble typique de textures utilisées dans le modèle d'éclairage PBR moderne (et pas seulement).
Comme vous pouvez le voir, la plupart d'entre eux sont en noir et blanc. Par conséquent, vous pouvez combiner des textures n / b dans les canaux RGBA d'une image (jusqu'à 4 cartes au total par image).
Si vous n'avez qu'une seule texture n / b, vous pouvez la combiner avec n'importe quelle texture RVB existante en la plaçant dans un canal alpha. Enfin, si vous n'avez pas d'image à combiner, vous pouvez convertir votre image en noir et blanc au format jpeg avec une compression de 95% et une échelle de gris activée.
Une autre façon de réduire la taille de la texture consiste à optimiser le scan UV. Plus votre numérisation est compacte, plus votre image utilisera efficacement l'espace de texture. Cela vous permet d'avoir des images plus légères sans perte de qualité.
Couleurs de sommet
L'utilisation de couleurs de sommets au lieu d'images est un moyen efficace d'accélérer le chargement et d'augmenter les performances globales de vos applications WebGL. Le seul inconvénient est que vous devez ajouter quelques bords supplémentaires à votre modèle pour séparer les couleurs des mêmes sommets.
Vous pouvez également utiliser des couleurs de sommet pour déterminer la rugosité, la métallicité ou les surfaces miroir, ou tout autre paramètre. Ci-dessous, vous pouvez voir un exemple d'un tel matériau, qui utilise uniquement les couleurs des sommets.
Nombre de shaders
Il est très important qu'il y ait moins de matériaux / shaders différents sur votre scène. La compilation de shaders dans WebGL entraîne une longue charge, ce qui est particulièrement visible dans Windows. De plus, si vous avez moins de shaders, le moteur passera moins de temps à basculer entre eux pendant le rendu, améliorant ainsi les performances.
Si vous avez des matériaux similaires qui ne diffèrent que par leurs textures, vous pouvez utiliser un seul matériau et charger / modifier ses textures lors de l'exécution. Pour ce faire, vous pouvez utiliser JavaScript ou utiliser l'éditeur de logique visuelle disponible dans certains frameworks WebGL. Cela optimise non seulement le nombre de shaders, mais réduit également le nombre d'images chargées au démarrage de l'application.
Voici un exemple d'une telle optimisation. Les quatre variétés d'un pneu sont représentées par un seul matériau et sont configurées en remplaçant les textures.
Pour réduire le nombre de shaders, vous pouvez combiner 2 matériaux simples ou plus en un matériau plus complexe. Cette méthode est particulièrement efficace si vous prévoyez de basculer entre ces matériaux (par exemple, créer une application de configuration), et pas seulement de basculer, mais d'animer en douceur et magnifiquement la transition d'un matériau à un autre.
Appeler
De plus, il y a un autre aspect important - le nombre d'appels Draw (ce sont aussi des appels draw et des appels draw). Cela correspond à peu près au nombre d'objets individuels, si un seul matériau est affecté à chaque objet, tandis que les objets avec plusieurs matériaux nécessitent encore plus d'appels pour les visualiser.
Par conséquent, vous devez vous efforcer de fusionner les grilles chaque fois que possible et utiliser des matériaux moins uniques pour réduire le nombre d'appels de tirage et améliorer les performances.
Si vous avez un objet animé, vous pouvez toujours connecter ses parties et utiliser les os pour animer, ce qui est parfois encore plus pratique lors de l'animation d'objets individuels.
Éclairage HDR
Cela permet d'améliorer considérablement les performances si vous n'illuminez votre scène qu'avec une image HDR, sans utiliser de sources lumineuses. Un fichier HDR peut peser moins de 1 Mo.
Ombres
Utilisez des ombres dynamiques uniquement lorsqu'elles aident à présenter votre objet de la meilleure façon possible. L'image ci-dessous montre les ombres dynamiques de notre démo de
robot industriel . Étant donné que le modèle lui-même tourne dans cette application, et non l'appareil photo, les ombres ne peuvent cacher aucune partie de l'objet à l'utilisateur et souligner parfaitement la forme du robot. D'un autre côté, les mêmes ombres dans la démo
Scooter masqueront de nombreux détails du modèle.
Nous concluons de ceci: si votre objet ne se déplace pas dans l'application, vous pouvez créer des cartes d'ombre et d'occlusion ambiante et les affecter au plan situé sous l'objet. Une telle solution sera plus productive et aura une meilleure apparence que lors de l'utilisation d'ombres dynamiques.
C’est tout. Si vous avez d'autres conseils susceptibles d'améliorer les performances de WebGL, écrivez dans les commentaires.