J'ai chosi de reconstitué l'affiche d'un animé, The Promised Neverland, adapté à partir du manga du même nom.
Les interactions
Les interactions possibles sont les suivantes :
- Faire tourner les assiettes
- Faire bouger les couverts (fourchette et couteau séparément)
- Changer l'intensité et la couleur du feu de la lampe à l'huile
- Changer la peluche tenue par un personnage (Conny) (4 peluches disponibles)
- Ouvrir ou fermer le livre que tient Ray (personnage au premier plan à droite)
Partie Technique
Optimisation des modèles
Les couverts
Pour les couverts j'ai utilisé différent modèles trouvé sur internet en essayant d'en prendre le plus possibles low poly. Cependant le niveau de détail que je voulais était difficile à trouver en low poly. J'ai donc utilisé le logiciel MeshLab pour combiner et optimiser les parties des différents modèles qui m'intéresser pour créer les couverts.
GLTFLoader
J'ai utilisé le GLTFLoader de THREE.JS pour chargé le modèle de la lampe. Le format GLTF est particulier puisqu'il contient une scène entière il ma donc fallut adapté mon code pour récupérer les parties du modèles uniquements.
VOXLoader
Pour pouvoir chargé un modèle (les oursons sur lapremière assiette de gauche) au format MagicaVoxel, j'ai du utilisé le VOXLoader cependat ce dernier n'était disponible que pour du javascript modulaire (sous forme de modulle avec des imports et des exports). J'ai donc du modifie le script en local en regardant comment était fait les loaders dejà existant. Je n'ai pas eu beaucoup de modification à faire.
Les personnages
Pour les personnages j'ai utilisé un classe afin d'éviter de répéter des lignes de codes.
Cela m'a permit aussi de pouvoir faire des personnages interactifs (comme le trio du premier plan, au le trio avec le personnage à la peluche).
Pour les personnages j'utilise le principe de la billboard (un Plan avec une texture).
Pour que la plan ait des textures diférentes (une devant et une derrière) j'utilise plusieurs matériaux.
Le plan est créer en appelant THREE.SceneUtils.createMultiMaterialObject().
Shaders
Vertex Shader
Les shaders s'utilisant toujours par deux (un vertex et un fragment) j'ai donc du faire un vertex shader, qui ne fait rien de particulier. Mais qui est nécessaire pour pouvoir utiliser les fragment shaders.
Fragment Shader
Shader pour les personnages
Pour les personnages j'ai du utilisé un shader afin que leur luminosité soit adaptive à celle de la scène.
L'effet se voit surotut sur le tiro au premier plan, avec la lumière de la lampe à l'huile (essayer de changer sa couleur). La couleur de la flamme se retrouve sur les personnnages.
J'ai aussi du utilisé des shaders pour les personnages afin d'éviter de redesinner toutes la scène dès qu'il y avait une interactionde réalisé (ex: ouverture / fermeture du livre, changement de peluche).
Les Shaders des personnages charge toutes les texurres, et les envoie dans les uniforms sous forme d'un tableau. Cependant ne pouvant pas itérer un tableau de textures (en GLSL ES 3.0 / possible d'accéder à un tableau de textures avec un variable d'indice en GLSL ES 4.0 mais pas pris en charge par THREE.JS), et ne sachant combien de texutres j'allais utilsié, j'ai donc utilisé les defines pour dire quel était l'indice de la texutre à utiliser. Cependant cela oblige la recompilation du shaders à chauqe fois qu'il y a une modification de faite.
Shader de la lampe à l'huile
Ce shader change la couleur de la flamme de la lampe à l'huile. J'ai du en utilisé un car la lampe en un modèle importé avec son propre matériau. Ma première solution était simple mais demander le redessinnage de la scène.
J'ai donc opté pour un ShaderMaterial, que je substitue au matériau d'origine au moment de l'importation du modèle.
Résultat
Je n'ai pas eu le temps de réaliser tous ce que je voulais, la reconstitution des personnages m'a pris beaucoup de temps. La mise en place d'un shader, pour les personnages (surtout le trio au premier plan) qui me plaisait (et que j'ai du faire à la main) m'a aussi pris du temps car nombreux tests avant d'arriver au résulat obtenu.
Ainsi j'aurai aimé pouvoir recontitué le décor refleté, et animé la grille de manière à ce que l'on pense aux dents d'une mâchoire mangeant les personnages. Ajouter la possibilité de faire défiler les assiettes. Ajouter des particules animées.