Simuler l'éclairage et les ombres en 3D
Créer les normales pour les sommets
 Ensuite
nous
allons
ajouter le
code à la
fonction
drawScen
e() pour
attacher
le tableau
de
normales
à l'attribut
du shader,
comme ça
le code du
shader y
aura
accès:
Programmation 2D/3D: INF 1483
Effet de Lumière sur les Objets
Éclairage en WebGL
35
 Une fois que nous avons appréhendé le concept
de source et de réflexion de la lumière, il y a deux
choses que nous avons besoin d'implémenter
pour nos lumières directionnelles.
1. Nous avons besoin d'associer la surface
normale avec chaque sommet. C'est un vecteur
qui est perpendiculaire à la face associé à ce
sommet.
2. Nous avons besoin de connaître la direction
dans laquelle la lumière arrive. Ceci est défini
par la direction du vecteur.
 Puis nous mettons à jour le vertex shader pour
ajuster la couleur de chaque sommet en prenant
en compte la lumière ambiante ainsi que l'effet
de la lumière directionnelle donné par l'angle qui
rencontre la face du cube. Nous allons voir
comment faire avec les shaders.
gl.bindBuffer(gl.ARRAY_BUFFER,
cubeVerticesNormalBuffer);
gl.vertexAttribPointer(vertexNormalA
ttribute, 3, gl.FLOAT, false, 0, 0);
cubeVerticesNormalBuffer =
gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,
cubeVerticesNormalBuffer);
var vertexNormals = [
// Front
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
0.0, 0.0, 1.0, 0.0, 0.0, 1.0,
// Back
0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
0.0, 0.0, -1.0, 0.0, 0.0, -1.0,
// Top
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
// Bottom
0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
0.0, -1.0, 0.0, 0.0, -1.0, 0.0,
// Right
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
// Left
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0,
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new
WebGLFloatArray(
vertexNormals),gl.STATIC_DRAW);
Enfin, nous avons besoin de mettre à jour le code
qui construit les matrices uniformes pour générer
et livrer au shader une matrice normale, qui sera
utilisée pour transformer les normales en fonction
de l'orientation actuelle du cube par rapport à la
source de lumière.
var normalMatrix = mvMatrix.inverse();
normalMatrix = normalMatrix.transpose();
var nUniform =
gl.getUniformLocation(shaderProgram,
'uNormalMatrix');
gl.uniformMatrix4fv(nUniform, false, new
WebGLFloatArray(normalMatrix.flatten()));
Overview of
the cube program
Puis nous mettons à jour le
vertex shader pour ajuster la
couleur de chaque sommet
en prenant en compte la
lumière ambiante ainsi que
l'effet de la lumière
directionnelle donné par
l'angle qui rencontre la face
du cube.