Cet article fait partie d'une série consacrée à Three.js dont le premier article s'intitule Principes de base. Si vous ne l'avez pas encore lu, vous devriez commencer par lui.
Three.js fournit plusieurs types de matériaux : ils définissent comment les objets apparaîtront dans la scène et par conséquent, la sélection de vos matériaux dépend fortement dans le choix de ce que vous voulez afficher.
Il existe deux façons de définir la plupart des propriétés des matériaux. La première façon est de les définir lors de la création du matériau (constructeur), comme nous l'avons déjà vu :
const material = new THREE.MeshPhongMaterial({
color: 0xFF0000, // red (can also use a CSS color string here)
flatShading: true,
});
La seconde façon se fait après le constructeur :
const material = new THREE.MeshPhongMaterial(); material.color.setHSL(0, 1, .5); // red material.flatShading = true;
Notez qu'il y a plusieurs façons de paramétrer la propriété THREE.Color :
material.color.set(0x00FFFF); // same as CSS's #RRGGBB style
material.color.set(cssString); // any CSS color, eg 'purple', '#F32',
// 'rgb(255, 127, 64)',
// 'hsl(180, 50%, 25%)'
material.color.set(someColor) // some other THREE.Color
material.color.setHSL(h, s, l) // where h, s, and l are 0 to 1
material.color.setRGB(r, g, b) // where r, g, and b are 0 to 1
Pour le constructeur, vous pouvez passer, soit un nombre hexadécimal, soit une chaine de caractères au format CSS :
const m1 = new THREE.MeshBasicMaterial({color: 0xFF0000}); // rouge
const m2 = new THREE.MeshBasicMaterial({color: 'red'}); // rouge
const m3 = new THREE.MeshBasicMaterial({color: '#F00'}); // rouge
const m4 = new THREE.MeshBasicMaterial({color: 'rgb(255,0,0)'}); // rouge
const m5 = new THREE.MeshBasicMaterial({color: 'hsl(0,100%,50%)'}); // rouge
Examinons l'ensemble des matériaux de Three.js
Le MeshBasicMaterial n'est pas affecté par la lumière.
Le MeshLambertMaterial calcule la lumière sur chaque sommets (vertices) de l'objet, alors que MeshPhongMaterial calculera la lumière sur chaque pixel des faces de l'objet et prendra également en compte les reflets spéculaires.
Le paramètre shininess du MeshPhongMaterial détermine la brillance de la surbrillance spéculaire. La valeur par défaut est 30.
Notez que définir la propriété emissive sur une couleur sur un
MeshLambertMaterial ou un MeshPhongMaterial et régler la propriété color sur noir
(et shininess à 0 pour Phong) finit par ressembler au MeshBasicMaterial.
Pourquoi Three.js propose trois matérieaux similaires si au final MeshPhongMaterial peut faire les mêmes choses que MeshBasicMaterial et MeshLambertMaterial ? La raison est simple : le matériau le plus sophistiqué nécessite plus de puissance de la part du GPU. Sur un GPU plus lent comme sur un téléphone mobile, vous souhaitez peut-être améliorer les performances en utilisant un des matériaux moins gourmand en calculs GPU. Il en découle que si vous n'avez pas besoin de fonctionnalités supplémentaires, alors il vaut mieux privilégier le matériau le plus simple. Si vous n'avez pas besoin d'éclairage et de la surbrillance spéculaire alors utilisez le MeshBasicMaterial.
Le MeshToonMaterial est similaire au MeshPhongMaterial
avec une grande différence : plutôt que d'ombrager en douceur, il utilise une carte de dégradé (une texture X par 1) pour décider comment ombrager. La valeur par défaut utilise une carte de dégradé dont la luminosité est de 70 % pour les premiers 70%, puis 100 % pour la suite. Vous pouvez aussi fournir votre propre carte de dégradé. Cela peut même donner une allure de dessin animé (cartoon) sur deux teintes.
Ensuite, il y a deux matériaux de rendu physique, souvent abrégé en PBR (Physics-Based Rendering material).
En effet, les matériaux vus précédemment utilisent des mathématiques simples pour créer des matériaux qui semblent en 3D, mais ne réagissent pas comme dans le monde réel. Les deux matériaux PBR utilisent des mathématiques beaucoup plus complexes pour se rapprocher de ce qui se passe réellement dans le monde réel.
Le premier est MeshStandardMaterial. Il diffère de MeshPhongMaterial et de MeshStandardMaterial en utilisant différents paramètres.
MeshPhongMaterial a un seul paramètre shininess alors que MeshStandardMaterial utilise deux paramètres roughness (rugosité) et metalness (métallique).
Pour faire simple, roughness est l'opposé de shininess.
Quelque chose qui a une rugosité élevée, comme une balle de baseball, n'a pas de reflets durs, alors que quelque chose qui n'est pas rugueux, comme une boule de billard, est très brillant. La rugosité varie de 0 à 1.
L'autre paramètre, metalness, indique
à quel point le matériau est métallique. Les métaux se comportent différemment des non-métaux. 0
pour le non-métal et 1 pour le métal.
Voici quelques exemples de MeshStandardMaterial avec un roughness allant de 0 à 1
sur la droite et un metalness allant de 0 à 1 en descendant.
Le MeshPhysicalMaterial est le même que le MeshStandardMaterial mais il ajoute un paramètre clearcoat (vernis) qui va de 0 à 1 pour savoir quelle couche vernis brillant appliquer. Et un paramètre clearCoatRoughness qui spécifie à quel point la couche de vernis brillant est rugueuse.
Voici la même grille que ci-dessus, mais avec les paramètres clearcoat et clearCoatRoughness en plus.
Voici la liste des divers matériaux standards rangés du plus rapide au plus lent :
MeshBasicMaterial ➡ MeshLambertMaterial ➡ MeshPhongMaterial ➡
MeshStandardMaterial ➡ MeshPhysicalMaterial. Les matériaux les plus longs à calculer créent des scènes plus réalistes, mais vous devrez peut-être égallement concevoir votre code pour utiliser les matériaux plus rapides à calculer pour des machines mobiles ou de faible puissance.
Il existe trois matériaux qui ont des utilisations spéciales.
ShadowMaterial
est utilisé pour obtenir les données créées à partir des ombres (sujet que nous n'avons pas encore couvert), mais nous l'utiliserons dans cet article traitant des ombres.
Le MeshDepthMaterial restitue la profondeur de chaque pixel où les pixels
négatifs near sont à 0 et les négatifs far sont à 1.
Certains effets spéciaux peuvent utiliser ces données que nous aborderons plus tard.
Le MeshNormalMaterial vous montrera les normales de la géométrie.
Les Normales sont la direction d'un triangle ou d'un pixel particulier.
MeshNormalMaterial dessine les normales de l'espace de vue (les normales par rapport à la caméra).
x rouge, y est vert, et z est bleu donc les choses tournées vers la droite seront roses, ceux vers la gauche seront aqua, vers le haut vert clair, vers le bas violet, et vers l'écran lavande.
ShaderMaterial permet de créer des matériaux personnalisés à l'aide du système de shader de Three.js. RawShaderMaterial permet de créer des shaders entièrement personnalisés sans l'aide de Three.js. Ces deux sujets sont vastes et seront traités plus tard.
La plupart des matériaux partagent un ensemble de paramètres, tous définis par Material.
Voir la documentation pour chacun d'eux, mais passons, ici, en revue deux des propriétés les plus utilisées.
flatShading:
si l'objet a l'air à facettes ou lisse. Par défaut = false.
side: quel côté montrer. La valeur par défaut est THREE.FrontSide.
Les autres options sont THREE.BackSide et THREE.DoubleSide (des deux côtés).
La plupart des objets 3D dessinés dans Three.js sont probablement des solides opaques, il n'est donc pas nécessaire de dessiner les faces arrières (c'est-à-dire les côtés tournés vers l'intérieur du solide). La raison la plus courante de définir le côté, est pour les plans et les objets non solides où il est courant de voir leurs faces arrières.
Voici 6 plans dessinés avec THREE.FrontSide et THREE.DoubleSide.
Il y a vraiment beaucoup de choses à considérer avec les matériaux et il nous reste encore beaucoup à en dire. En particulier, nous avons jusqu'ici ignoré les textures, qui utilisent toute une série d'options. Avant de couvrir le domaine des textures, nous devons faire une pause et aborder la configuration de votre environnement de développement