PBR : configurer couleur, rugosité et propriétés métalliques

1. Le trio de contrôle du MeshStandardMaterial

Le MeshStandardMaterial est le matériau PBR par défaut dans Three.js. Son grand avantage est de permettre la création d'une multitude de surfaces réalistes avec seulement quelques paramètres intuitifs. Concentrons-nous sur les trois principaux.

color

C'est la couleur de base du matériau. Elle peut être définie de la même manière que pour le MeshBasicMaterial (par exemple, 'red' ou 0xff0000). Cependant, son rendu visuel dépendra fortement de la propriété metalness.

• Pour un matériau non-métallique (metalness: 0.0), c'est la couleur diffuse de l'objet (la couleur de la surface elle-même).
• Pour un matériau métallique (metalness: 1.0), elle teinte les reflets. La couleur de la surface est une interaction entre cette couleur de base et la lumière environnante.

metalness (Métallicité)

Cette propriété définit si le matériau se comporte comme un métal ou un non-métal (un "diélectrique").

• Valeur : un nombre entre 0.0 (totalement non-métallique) et 1.0 (totalement métallique).
• Règle pratique : Dans le monde réel, les matériaux sont rarement entre les deux. Pour un rendu réaliste, utilisez 0.0 pour les non-métaux (plastique, bois, pierre, tissu, peinture) et 1.0 pour les métaux (or, acier, chrome, cuivre). Les valeurs intermédiaires sont utiles pour des métaux sales, corrodés ou recouverts de poussière.

roughness (Rugosité)

Cette propriété décrit l'état de la surface, de parfaitement lisse à complètement rugueuse.

• Valeur : un nombre entre 0.0 (surface parfaitement lisse) et 1.0 (surface complètement diffuse/mate).
• roughness: 0.0 : La surface agit comme un miroir, créant des reflets nets et précis.
• roughness: 1.0 : La surface diffuse la lumière dans toutes les directions. Il n'y a aucun reflet visible.
• Les valeurs intermédiaires créent des reflets de plus en plus flous, comme sur du plastique satiné ou du métal brossé.

L'image ci-dessous, que nous avons vue dans la leçon précédente, est la meilleure représentation de l'interaction de ces deux dernières propriétés.

La ressource suivante, bien qu'utilisant la syntaxe de React Three Fiber que nous verrons plus tard, montre parfaitement comment ces propriétés sont déclarées en code. Les noms sont identiques.

2. Voir les propriétés en action

Lire les définitions est une chose, mais voir l'effet en temps réel est bien plus parlant. La vidéo ci-dessous montre de manière interactive comment la modification des valeurs de metalness et roughness transforme l'apparence d'un objet.

Comme vous pouvez le voir, le MeshStandardMaterial est extrêmement polyvalent et réagit de manière dynamique à la lumière, ce qui est impossible avec un MeshBasicMaterial.

3. Exercice pratique : Créer un nuancier de matériaux

Il est temps de mettre la main à la pâte. Nous allons améliorer l'exercice de la leçon précédente en créant une rangée de sphères, chacune avec un matériau PBR distinct.

Rappel important : Les matériaux PBR ont besoin de lumière ! Assurez-vous d'avoir au moins une DirectionalLight et une AmbientLight dans votre scène, comme dans l'exercice précédent.

Instructions :

1. Repartez de votre code de la leçon précédente ou créez une nouvelle scène de base (scène, caméra, renderer, lumières, OrbitControls).
2. Créez une géométrie de sphère unique que vous réutiliserez pour tous les objets :

   const sphereGeometry = new THREE.SphereGeometry(0.6, 32, 32);
   

3. Créez 4 "recettes" de matériaux en utilisant MeshStandardMaterial et les combinaisons de propriétés ci-dessous.
4. Pour chaque matériau, créez un Mesh en le combinant avec sphereGeometry et positionnez-les côte à côte le long de l'axe X (par exemple, à x = -2.4, x = -0.8, x = 0.8, x = 2.4).

Recette 1 : Plastique rouge brillant

const shinyRedPlastic = new THREE.MeshStandardMaterial({
    color: 0xff0000,
    metalness: 0.0, // Non-métal
    roughness: 0.1  // Très lisse, reflets nets
});

const sphere1 = new THREE.Mesh(sphereGeometry, shinyRedPlastic);
sphere1.position.x = -2.4;
scene.add(sphere1);

Recette 2 : Caoutchouc noir mat

const matteRubber = new THREE.MeshStandardMaterial({
    color: 0x111111, // Presque noir
    metalness: 0.0, // Non-métal
    roughness: 0.9  // Très rugueux, pas de reflets
});

const sphere2 = new THREE.Mesh(sphereGeometry, matteRubber);
sphere2.position.x = -0.8;
scene.add(sphere2);

Recette 3 : Or poli

const polishedGold = new THREE.MeshStandardMaterial({
    color: 0xffd700, // Couleur dorée
    metalness: 1.0, // Métal
    roughness: 0.2  // Assez lisse, reflets clairs mais un peu flous
});

const sphere3 = new THREE.Mesh(sphereGeometry, polishedGold);
sphere3.position.x = 0.8;
scene.add(sphere3);

Recette 4 : Acier brossé

const brushedSteel = new THREE.MeshStandardMaterial({
    color: 0xaaaaaa, // Gris clair
    metalness: 1.0, // Métal
    roughness: 0.6  // Assez rugueux, reflets très diffus
});

const sphere4 = new THREE.Mesh(sphereGeometry, brushedSteel);
sphere4.position.x = 2.4;
scene.add(sphere4);

Lancez votre animation et utilisez les OrbitControls pour tourner autour de vos sphères. Observez comment chaque matériau réagit différemment à la lumière. Le plastique brillant a un petit reflet blanc intense, tandis que l'or a un large reflet teinté de jaune. L'acier brossé reflète la lumière de manière beaucoup plus diffuse que l'or poli. Le caoutchouc, lui, semble presque absorber la lumière.

Conclusion

Félicitations ! Vous savez maintenant comment configurer les propriétés fondamentales d'un matériau PBR pour simuler une large gamme de surfaces du monde réel. C'est une compétence essentielle pour tout développeur 3D.

Points clés à retenir :

• Le MeshStandardMaterial utilise le trio color, metalness et roughness pour définir la plupart des matériaux.
• color est la couleur de base.
• metalness est généralement binaire : 0.0 pour les non-métaux (plastique, bois, pierre) et 1.0 pour les métaux.
• roughness contrôle la netteté des reflets, de 0.0 (miroir) à 1.0 (mat).
• En combinant ces trois propriétés, vous pouvez créer des "recettes" pour simuler des matériaux spécifiques.

Aperçu de la prochaine leçon :
Maintenant que vous savez créer des formes variées et leur donner des apparences réalistes et distinctes, il est temps de tout assembler. Dans la prochaine leçon, vous apprendrez à composer une scène statique en assemblant plusieurs objets avec des géométries et des matériaux différents, en utilisant les compétences que vous venez d'acquérir.