Commit 4cf30a37 authored by MARTIN Tanguy's avatar MARTIN Tanguy
Browse files

Update index.html

parent 50407ffb
Pipeline #5202 passed with stage
in 14 seconds
<!DOCTYPE html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Ma première application Three.js</title>
<title>Projet Fil Rouge - MARTIN Tanguy</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
.float-right {
float: right;
}
.centre{align-items: center;align-self: center;text-align: center;align-content: center;text-align-last: center;text}
</style>
</head>
<body>
<!-- Shaders -->
<!-- Vertex Basic -->
<script type="text/x-glsl" id="vertex">
varying vec3 vNormal;
varying vec3 vViewPosition;
varying vec3 vModelPosition;
varying vec2 vUv;
void main() {
vUv = uv;
vNormal = normalize( normalMatrix * normal );
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vViewPosition = -mvPosition.xyz;
vModelPosition = position;
gl_Position = projectionMatrix * mvPosition;
}
</script>
<!-- Fire -->
<script type="text/x-glsl" id="fire_fragment">
uniform vec3 uMaterialColor;
uniform float uFireIntensity;
void main() {
gl_FragColor = vec4(uFireIntensity*uMaterialColor, 1.0);
}
</script>
<!-- Characters -->
<script type="text/x-glsl" id="character_fragment" >
uniform bool uBool;
uniform int uCharacterType;
uniform sampler2D[TEXTURES_NUM] uTextures;
uniform vec3 uAmbientLightColor;
uniform vec3 uFireLightPos;
uniform vec3 uFireLightColor;
uniform float uFireIntensity;
uniform float uFireLightRadius;
uniform vec3 uSpotlightPos;
uniform vec3 uSpotLightColor;
uniform float uSpotLightIntensity;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vModelPosition;
varying vec3 vViewPosition;
void main() {
float dist, dist2, attenuation;
vec4 textured;
switch(TEXTURES_NUM) {
case 1:
textured = texture2D(uTextures[0], vUv);
break;
case 2:
if(uBool) {
textured = texture2D(uTextures[0], vUv);
} else {
textured = texture2D(uTextures[1%TEXTURES_NUM], vUv);
}
break;
default:
textured = texture2D(uTextures[TEXTURE_INDICE%TEXTURES_NUM], vUv);
break;
}
gl_FragColor.rgb = textured.rgb;
gl_FragColor.a = textured.a;
if(uCharacterType==3) {
dist = distance(-vModelPosition,uFireLightPos);
dist2 = dist*dist;
attenuation = (dist2/(1.333*uFireLightRadius))/100.0;
gl_FragColor.rgb *= attenuation*(uFireIntensity*uFireLightColor);
}
dist = distance(vModelPosition,uSpotlightPos);
dist2 = dist*dist;
attenuation = dist2/9999.0;
gl_FragColor.rgb *= 1.0*(uSpotLightIntensity*uSpotLightColor);
gl_FragColor.rgb += uAmbientLightColor;
}
</script>
<!-- Plusieurs imports de bibliothèques -->
<!-- API importé du site de Three.js -->
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/utils/SceneUtils.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src="VOXLoader.js"></script> <!-- VOXLoader modifié pour qu'il fonctionne hors module -->
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<!-- Bibliothèques en local -->
<script src="../lib/Coordinates.js"></script>
<script src="../lib/jquery-1.8.3.min.js"></script>
<!-- Un titre centré -->
<h1 class="centre">Projet - Reconstitution d'une peinture / d'un dessin</h1>
<h1 class="centre">Projet Fil Rouge - Reconstitution d'une peinture / d'un dessin</h1>
<!-- Pour mettre le rendu Web GL centré -->
<div id="webGL" class="centre"></div>
<div class="centre float-right"><img src="img.jpg" /></div>
<div class="centre">
<img src="img.jpg" width=640 height=920 />
<p>J'ai chosi de reconstitué l'affiche d'un animé, The Promised Neverland, adapté à partir du manga du même nom.</p>
<h2>Les interactions</h2>
<p>Les interactions possibles sont les suivantes :</p>
<ul>
<li>Faire tourner les assiettes</li>
<li>Faire bouger les couverts (fourchette et couteau séparément)</li>
<li>Changer l'intensité et la couleur du feu de la lampe à l'huile</li>
<li>Changer la peluche tenue par un personnage (Conny) (4 peluches disponibles)</li>
<li>Ouvrir ou fermer le livre que tient Ray (personnage au premier plan à droite)</li>
</ul>
<h2>Partie Technique</h2>
<h3>Optimisation des modèles</h3>
<h4>Les couverts</h4>
<p>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.</p>
<h3>GLTFLoader</h3>
<p>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.</p>
<h3>VOXLoader</h3>
<p>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.</p>
<h3>Les personnages</h3>
<p>Pour les personnages j'ai utilisé un classe afin d'éviter de répéter des lignes de codes.</p>
<p>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).</p>
<p>Pour les personnages j'utilise le principe de la billboard (un Plan avec une texture).</p>
<p>Pour que la plan ait des textures diférentes (une devant et une derrière) j'utilise plusieurs matériaux.</p>
<p>Le plan est créer en appelant THREE.SceneUtils.createMultiMaterialObject().</p>
<h3>Shaders</h3>
<h4>Vertex Shader</h4>
<p>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.</p>
<h4>Fragment Shader</h4>
<h5>Shader pour les personnages</h5>
<p>Pour les personnages j'ai du utilisé un shader afin que leur luminosité soit adaptive à celle de la scène.</p>
<p>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.</p>
<p>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).</p>
<p>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.</p>
<h5>Shader de la lampe à l'huile</h5>
<p>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.</p>
<p>J'ai donc opté pour un ShaderMaterial, que je substitue au matériau d'origine au moment de l'importation du modèle.</p>
<h2>Résultat</h2>
<p>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.</p>
<p>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.</p>
<div id="webGL" class="centre"></div>
</div>
<!-- Mon script avec un chemin relatif -->
<script src="picture.js"></script>
<script src="index.js"></script>
<!--script> addToDOM();// Exécute la fonction qui ajoute le rendu
</script-->
<script src="index.js"></script> <!-- Script de base (GUI, et init)-->
<script src="vars.js"></script> <!-- Variables et constantes globales -->
<script src="charcaters_classes.js"></script> <!-- Class pour les personnages -->
<script src="picture.js"></script> <!-- Script contenant les instructions pour la reproduction -->
<script>add();</script>
<footer>
<p class="centre">Réalisé par MARTIN Tanguy, DUT Informatique 2ème Année, 2020-2021, IUT de Saint-Dié-des-Vosges, Université de Lorraine</p>
</footer>
</body>
</html>
\ No newline at end of file
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment