Bienvenue pour la cinquième semaine de notre série dédiée à Three.js ! La semaine passée, nous avons appris comment appliquer des textures basiques sur des objets en 3D. Cette semaine, nous allons approfondir notre exploration en découvrant les textures avancées comme les bump maps et normal maps. Ces techniques permettent d'ajouter des détails et du relief à un objet sans élever sa complexité géométrique.
Que signifie une texture avancée ?
Des textures complexes telles que les bump maps et les normal maps transforment la façon dont la lumière se comporte à la surface d'un objet, créant un effet de volume et de profondeur, malgré le fait que la géométrie de l'objet demeure identique. Cela peut conférer à un objet plus de réalisme tout en assurant des performances de haut niveau!
Phase 1 : Différence entre Bump Map et Normal Map
Bump Map: Une bump map exploite une image en échelle de gris afin de simuler les reliefs et les dépressions sur la surface d'un objet. Les zones plus claires ressortent en relief, alors que les zones sombres donnent l'impression d'être en profondeur.
Normal Map : Une normal map fonctionne de manière similaire, cependant elle utilise des teintes pour déterminer la façon dont la lumière doit être diffusée. Cela offre un contrôle plus exact et des détails plus sophistiqués que les bump maps.
Phase 2 : Incorporer une Bump Map
Description du procédé :
Importer la texture bump map : Pour commencer, il est nécessaire d'importer la texture bump map via la classe TextureLoader de Three.js. Cette texture sera utilisée sur l'objet pour imiter les irregularités.
const textureLoader = new THREE.TextureLoader();
const bumpTexture = textureLoader.load('chemin/vers/ton/bump-map.jpg');
Création du matériau avec la bump map : Par la suite, on élabore un matériau de type MeshStandardMaterial, où l'on indique la texture de la bump map ainsi que la couleur fondamentale de l'objet.
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
bumpMap: bumpTexture,
bumpScale: 0.5 // Tout simplement, indique l'intensité du bump map selon un nombre entre 0 et 1.
});
Moduler l'intensité de la bump map : Le paramètre bumpScale sert à déterminer l'intensité des reliefs. Un nombre plus grand accentuera l'effet de relief, alors qu'un nombre plus bas produira une impression plus discrète.
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
N'oubliez pas de substituer 'chemin/vers/ton/bump-map.jpg' par le chemin réel de votre image bump map.
Phase 3 : Intégrer une Normal Map
L'application d'une normal map suit un procédé similaire à celui d'une bump map, mais nous permet d'obtenir un résultat plus précis de l'interaction entre la lumière et la surface. Contrairement à la bump map qui utilise des variations de gris pour simuler les reliefs, la normal map prend en compte les couleurs RGB qui viennent directement des axes X, Y et Z de l'espace 3D de notre scénes. Cela permet la création de détails encore plus raffinés et crédibles que celles des bump map.
Étapes à suivre :
Chargement de la carte de normales : Nous allons commencer par utiliser TextureLoader pour charger l'image de la normal map, tout comme nous avons procédé précédemment avec la bump map.
const normalTexture = textureLoader.load('chemin/vers/ton/normal-map.jpg');
Application de la normal map au matériau : Par la suite, on génère un matériau MeshStandardMaterial et on y applique la normal map en utilisant l'attribut normalMap.
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
normalMap: normalTexture,
});
Modifier l'objet : Pour finir, nous utilisons ce matériau pour concevoir un objet, dans notre cas une sphère, que nous intégrons ensuite à la scène. Cela va permettre de donner vie à la sphère en ajoutant les détails supplémentaires générés par la normal map.
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
Encore une fois, n'oubliez pas de modifier 'chemin/vers/ton/bump-map.jpg' par le chemin réel de votre image normal map.
Phase 4 : Analyse comparative des effets
Une fois que tu as ajouté les textures, tu pourras voir comment chaque genre de map influence le rendu de l'objet selon la lumière. La bump map offre un rendu plus discret, alors que la normal map permet d'intégrer des détails plus minutieux et sophistiqués.
Les étapes a suivre
À présent que tu comprends l'effet des bump maps et des normal maps, tu es libre d'explorer d'autres sortes de textures afin d'améliorer ta scène. La semaine prochaine, nous allons explorer les ombres dynamiques dans Three.js, afin de rendre ton environnement plus captivant et réaliste.
Commentaires