Projet WebGL

Le but de ce projet est de reprendre un tableau pour le reproduire en 3D grâce à la technologie WebGL. Elle permet d'avoir des représentations 3D dans un navigateur web en temps réel. Pour cela, j'ai utilisé la librairie Three.js qui permet de simplifier l'utilisation de WebGL. Par exemple, elle permet de créer rapidement des formes géométriques simples, d'ajouter des lumières, des ombres, des textures etc... Je vais revenir sur ces points dans les paragraphes suivants.

1. La skybox

Au lieu d'avoir un fond totalement noir, il est possible d'ajouter une skybox. Comme son nom l'indique, c'est une boîte projetée à l'infinie sur laquelle on applique des textures. Pour en avoir une, j'ai utilisé le scene.background, ainsi que la classe THREE.CubeTextureLoader. J'ai donc du télécharger 6 images pour les 6 faces du cube de la skybox.

2. La lumière

L'étape suivante à été d'ajouter de la lumière. Pour cela, Three.js nous met à disposition un grand nombre de lumière différente. Celles que j'ai utilisé sont les suivantes :

AmbientLight : C'est une lumière qui éclaire de façon uniforme toute la scène. Elle permet d'éviter d'avoir des zones trop sombres. On peut lui changer sa couleur et son intensité.
DirectionalLight : C'est une lumière qui éclaire dans une direction donnée, qui est par défaut vers le point d'origine. On peut également lui changer sa couleur et son intensité. Celle-ci permet donc d'avoir des zones plus ou moins éclairées et de pouvoir voir la couleur des objets de la scène.

Je n'ai pas eu besoin d'en utiilser d'autres mais il en existe beaucoup d'autres.

3. La caméra

Pour pouvoir se mouvoir librement dans la scène, il faut créer une caméra et l'ajouter à la scène. Pour cela, j'ai utilisé la classe PerspectiveCamera qui permet de créer une caméra avec une perspective. C'est à dire que les objets qui sont loin de la caméra sont plus petits que ceux qui sont proches. On peut également lui changer sa position et sa direction. J'ai également ajouté un contrôle à la caméra pour pouvoir se déplacer dans la scène. Pour cela, j'ai utilisé la classe OrbitControls qui permet de se déplacer avec la souris. Un point important est l'ajustement du near et du far, permettant de délimiter la distance minimale et maximale de la caméra. Si on ne les ajuste pas, on ne pourra pas voir toute la scène.

4. L'eau et les textures

Ensuite, j'ai ajouté l'eau comme sol. Pour cela, j'ai utilisé l'Objet Water de Three.js pour avoir un effet concluant rapidement. Pour cela, j'ai du trouver une texture spéciale : une normal map. Une normal map est une image permettant de simuler des reliefs sur une surface plane. C'est grâce à cette image que l'on peut voir les vagues sur l'eau. J'ai également ajouté une légère animation dans la fonction animate() pour qu'on ait l'impression que l'eau bouge. Cette eau permet également de créer un effet mirroir sur la scène et de pouvoir voir le reflet des objets. Il est possible de changer certains paramètres pour l'eau. Par exemple la Distortion Scale permettant de changer les reflets sur l'eau.

Pour continuer sur les textures, à part les normal map, il en existe plusieurs autres. Par exemple :

La texture : C'est une image qui va être appliquée sur une surface. Elle peut être répétée plusieurs fois sur une surface. C'est ce que j'ai fait pour le sol de la scène avec une texture d'herbe.
La specular map : C'est une image permettant de simuler la réflexion spéculaire de la lumière sur une surface. C'est ce que j'ai fait pour la base de la maison en arrière-plan. On peut voir l'effet de celle-ci en bougeant la caméra, puisque la réflexion change en fonction de l'angle de vue.
La environment map : Elle permet de simuler un effet mirroir sur une surface. C'est ce que j'ai fait pour le toit de la maison en arrière-plan. Pour cela, on applique à une surface une texture qui va apparaître comme réfléchie sur la surface. J'ai utilisé l'image de la skybox pour cela, mais on peut utiliser toute autre image.
La heightmap : Celle-ci est particulière, puisqu'elle permet de créer des reliefs sur une surface. C'est une image en nuance de gris, avec le noir représentant les points les plus bas, et le blanc représentant les points les plus hauts. J'ai utilisé cette image pour créer rapidement les montagnes en arrière-plan, et le reste du terrain. Pour l'utiliser, on doit utiliser les attributs displacementMap et displacementScale du material de l'objet. Le scale permet de définir l'intensité du relief.

Pour ajouter ces textures, on doit les ajouter dans le material de l'objet. On peut y ajouter encore d'autres map, comme l'occlusion ambiante ou l'emissive map, mais la limitation des 2Mo ne m'a pas permis de les utiliser.

Enfin, pour finir sur les textures, il est important de noter que l'on peut en appliquer directement sur des cubes. Cela à pour utilité de pouvoir créer des formes complexes uniquement avec une image transparante. Pour cela, il ne faut pas oublier de mettre le paramètre transparent à true dans le material de l'objet. J'ai utilisé cette technique pour créer les personnes au premier plan. Cela permet également d'économiser de l'espace.

5. Les sprites

Les sprites sont un objet particulier, puisqu'ils ont la particularité de toujours faire face à la caméra. Cela permet de simuler des objets en 3D, alors qu'ils sont en 2D. J'ai utilisé cette technique pour créer les buissons en arrière-plan. Three.js intègre une classe Sprite permettant de créer facilement des sprites.

6. Les ombres portées

Pour rajouter du réalisme à la scène, il est important d'ajouter des ombres portées. Cela signifie que les sources du lumière vont projeter des ombres sur les objets de la scène. Pour cela, il faut ajouter le paramètre castShadow à true dans le material de l'objet qui va projeter l'ombre, et le paramètre receiveShadow à true dans le material de l'objet qui va recevoir l'ombre. Il faut également ajouter le paramètre shadowMap.enabled à true dans le renderer. Cela permet d'activer les ombres dans la scène. Enfin, il faut ajouter le paramètre shadow.camera.near et shadow.camera.far, ainsi que left, right, bottom et up dans la lumière. Cela permet de définir la distance minimale et maximale de la lumière, ainsi que sa taille. Si on ne les définit pas, les ombres ne seront pas visibles.