Optimiser une application Three.js – Astuces pour atteindre un rendu fluide à 60 FPS

Exécuter un rendu 3D à 60 Frames par Seconde (FPS) dans notre application Three.js est la garantie d’une expérience fluide et agréable. Cependant, c’est un objectif parfois difficile à atteindre !

Lors de la rédaction de mes exemples et tutoriels, je fais souvent face à un problème de performance lorsque je teste mes créations sur des appareils anciens ou bas de gamme.

J’ai compilé dans cet article, mes meilleures astuces pour optimiser votre application Three.js, et atteindre les 60 FPS, bonne lecture !

Avant de commencer

Mesurer les performances

Avant toute chose, nous devons être capables de mesurer les performances de notre application. Je vous conseille d’utiliser le module stats disponible sur GitHub.

Cette petite librairie permet d’ajouter un moniteur de performances sur notre page :

Le choix du navigateur web

Comme vous le savez, nos applications Three.js sont écrites en JavaScript – un langage interprété. Notre code sera donc directement exécuté par le moteur JavaScript du navigateur.

Il existe de nombreux navigateurs web sur le marché, la vitesse d’exécution de notre code est donc de base fortement liée au navigateur web qui l’exécute !

Google Chrome est réputé pour être extrêmement performant avec WebGL et Three.js. C’est pour cette raison qu’il est important de travailler avec plusieurs navigateurs, et ainsi nous assurer que le niveau d’optimisation global du marché est satisfaisant.

Un navigateur avec les dernières mises à jours sera également généralement plus performant.

Réduire le nombre de polygones de la scène

La première méthode d’optimisation concerne le nombre de polygones de la scène.

Lors de chaque exécution du rendu 3D, le processeur est chargé d’afficher les objets de la scène. Plus il y a de polygones (faces de la structure d’un objet 3D) à traiter, plus la charge de travail est importante.

Il est possible d’afficher simplement le nombre de polygones actuellement traités par le moteur de rendu avec cette ligne de code :

console.log("Number of Triangles :", renderer.info.render.triangles);

Ainsi, un bon moyen d’augmenter les performances de notre application est de réduire la complexité de la scène. Pour cela nous avons deux approches :

• Retirer des objets 3D de la scène
• Simplifier les objets 3D en réduisant leur nombre de polygones

Dans le premier cas, il faut simplement faire un tri et retirer certains objets 3D de la scène.

Dans le second cas, le travail est plus minutieux. A l’aide de notre logiciel de modélisation 3D, nous allons simplifier nos modèles et retirer le plus de faces possible. Il est par exemple possible de retirer toutes les faces cachées et non visibles par la camera.

Certains logiciels comme Blender offrent même des fonctionnalités de simplification automatique des structures 3D !

Désactiver l’anticrénelage / antialiasing

Désactiver l’anticrénelage ( ou antialiasing) du moteur de rendu est un moyen facile d’augmenter sérieusement les performances de notre application en échange de quelques pixels visibles.

En effet, l’anticrénelage est utilisé pour lisser les contours d’un objet 3D et donner un aspect plus net au rendu final – très efficace, mais très gourmand en charge de travail du processeur !

Pour activer ou désactiver l’anticrénelage, on utilisé la propriété antialias de notre moteur de rendu 3D :

//Enabled
renderer = new THREE.WebGLRenderer( { antialias : true } );

//---------------------

//Disabled
renderer = new THREE.WebGLRenderer( { antialias : false } );

Désactiver l’anticrénelage est un moyen simple et efficace d’optimiser les performances de notre application Three.js !

Réduire la résolution du rendu 3D

Réduire la résolution ( nombre de pixels calculés ) lors du rendu 3D est également un moyen d’optimiser facilement notre application Three.js.

Cette méthode est extrêmement efficace, mais la perte en qualité graphique est importante. Ainsi, je vous conseille d’utiliser cette méthode en dernier recours !

Pour réduire la résolution, nous allons utiliser la méthode setPixelRatio de notre moteur de rendu 3D.

//Base value
renderer.setPixelRatio( window.devicePixelRatio );

En modifiant le pixel ratio, il est possible de diminuer le nombre de pixels calculés, et ainsi modifier la résolution finale !

Ainsi, modifions la résolution de notre rendu 3D avec un facteur de 0.5 :

//Lower résolution
renderer.setPixelRatio( window.devicePixelRatio * 0.5 );

Comme vous pouvez le constater, les gains de FPS sont impressionnants (de 24 FPS à 60 FPS), mais la qualité graphique a fortement baissé.

Notons qu’il est possible d’ajuster cette valeur, un pixel ratio de 0.8 sera beaucoup moins visible graphiquement que 0.5, mais moins efficace pour gagner des FPS !

N’hésitez pas à télécharger le guide complet de Three.js University pour progresser encore plus vite !

L’objectif 60FPS n’est pas encore atteint ? Vous souhaitez optimiser encore plus votre application ?
Dans le chapitre Bonus du guide téléchargeable, nous découvrirons encore plus de techniques et astuces d’optimisation de Three.js !

Vous pouvez télécharger le guide complet ici :