Passage de la multiplication MVC dans le nuanceur de sommets

index.html

@@ -12,8 +12,9 @@
 <script type="text/javascript" src="main.js"></script>
 
 <script id="nuanceurSommets" type="x-shader/x-vertex">
-  uniform mat4 u_modelViewProjMatrix;
+  uniform mat4 mmodel;
-  uniform mat4 u_normalMatrix;
+  uniform mat4 mview;
+  uniform mat4 mproj;
   uniform vec3 lightDir;
 
   attribute vec4 vPosition;
@@ -25,7 +26,7 @@
   void main()
   {
       // assigner la position du sommet
-      gl_Position = u_modelViewProjMatrix * vPosition;
+      gl_Position = mproj * mview * mmodel * vPosition;
 
       // assigner les coordonnées de texture
       v_color = vColor;

main.js

@@ -140,12 +140,11 @@ function TPinitialiser()
     glob.incrRotX = 0.2; glob.incrRotY = 0.3; glob.incrRotZ = 0.4;
 
     // Créer les matrices nécessaires et assigner les assigner dans le programme
-    glob.modelViewMatrix = new J3DIMatrix4();
+    glob.modelMatrix = new J3DIMatrix4();
-    // glob.u_modelViewMatrixLoc n'est pas utile car modelViewMatrix n'est pas utilisé dans les nuanceurs
+    glob.viewMatrix = new J3DIMatrix4();
-    glob.mvpMatrix = new J3DIMatrix4();
+    glob.modelMatLoc = gl.getUniformLocation( glob.program, "mmodel" );
-    glob.u_modelViewProjMatrixLoc = gl.getUniformLocation( glob.program, "u_modelViewProjMatrix" );
+    glob.viewMatLoc = gl.getUniformLocation( glob.program, "mview" );
-    glob.normalMatrix = new J3DIMatrix4();
+    glob.projMatLoc = gl.getUniformLocation( glob.program, "mproj" );
-    glob.u_normalMatrixLoc = gl.getUniformLocation( glob.program, "u_normalMatrix" );
 
     // terminer l'initialisation
     TPchargerTextures();
@@ -166,35 +165,8 @@ function TPinitialiser()
     return gl;
 }
 
-function TPafficherModele( gl, num )
+function TPafficherModele( gl )
 {
-    // Incrémenter les angles de rotation
-    glob.angleRotX += glob.incrRotX;  if ( glob.angleRotX >= 360.0 ) glob.angleRotX -= 360.0;
-    glob.angleRotY += glob.incrRotY;  if ( glob.angleRotY >= 360.0 ) glob.angleRotY -= 360.0;
-    glob.angleRotZ += glob.incrRotZ;  if ( glob.angleRotZ >= 360.0 ) glob.angleRotZ -= 360.0;
-
-    // Construire la matrice de modélisation
-    glob.modelViewMatrix.makeIdentity();
-    glob.modelViewMatrix.lookat( 0, 0, 7,  0, 0, 0,  0, 1, 0 );
-    var sens = ( num == 1 ) ? +1 : -1;
-    glob.modelViewMatrix.rotate( sens*glob.angleRotX, 1.0, 0.0, 0.0 );
-    glob.modelViewMatrix.rotate( sens*glob.angleRotY, 0.0, 1.0, 0.0 );
-    glob.modelViewMatrix.rotate( sens*glob.angleRotZ, 0.0, 0.0, 1.0 );
-
-    // Construire le produit de matrice "modélisation * projection" et la passer aux nuanceurs
-    glob.mvpMatrix.load( glob.perspectiveMatrix );
-    glob.mvpMatrix.multiply( glob.modelViewMatrix );
-    glob.mvpMatrix.setUniform( gl, glob.u_modelViewProjMatrixLoc, false );
-
-    // Construire la matrice de transformation des normales et la passer aux nuanceurs
-    glob.normalMatrix.load( glob.modelViewMatrix );
-    glob.normalMatrix.invert();
-    glob.normalMatrix.transpose();
-    glob.normalMatrix.setUniform( gl, glob.u_normalMatrixLoc, false );
-
-    // Activer la texture à utiliser
-    gl.bindTexture( gl.TEXTURE_2D, ( num == 1 ) ? glob.texture1 : glob.texture2 );
-
     gl.uniform2f( gl.getUniformLocation( glob.program, "positionSouris" ), glob.positionSourisX, glob.canevas.height-glob.positionSourisY );
 
     // Tracer le cube
@@ -204,15 +176,40 @@ function TPafficherModele( gl, num )
 function TPafficherScene(gl)
 {
     glob.perspectiveMatrix = new J3DIMatrix4();
-    glob.perspectiveMatrix.perspective( 40, glob.canevas.width / glob.canevas.height, 1, 10 );
+    glob.perspectiveMatrix.perspective( 40, glob.canevas.width / glob.canevas.height, 0.01, 10 );
+    glob.perspectiveMatrix.setUniform(gl, glob.projMatLoc, false);
 
     // Effacer le canevas
     gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
 
     // Définir la clôture 1
     gl.viewport( 0, 0, glob.canevas.width, glob.canevas.height );
-    // Tracer le modèle
+
-    TPafficherModele( gl, 1 );
+    // Incrémenter les angles de rotation
+    glob.angleRotX += glob.incrRotX;  if ( glob.angleRotX >= 360.0 ) glob.angleRotX -= 360.0;
+    glob.angleRotY += glob.incrRotY;  if ( glob.angleRotY >= 360.0 ) glob.angleRotY -= 360.0;
+    glob.angleRotZ += glob.incrRotZ;  if ( glob.angleRotZ >= 360.0 ) glob.angleRotZ -= 360.0;
+
+    // Construire la matrice de modélisation
+    glob.viewMatrix.makeIdentity();
+    glob.viewMatrix.lookat( 0, 0, 5,  0, 0, 0,  0, 1, 0 );
+    glob.viewMatrix.setUniform(gl, glob.viewMatLoc, false);
+
+    glob.modelMatrix.makeIdentity();
+    glob.modelMatrix.setUniform(gl, glob.modelMatLoc, false);
+    TPafficherModele( gl );
+
+    glob.modelMatrix.rotate( glob.angleRotX, 1.0, 0.0, 0.0 );
+    glob.modelMatrix.setUniform(gl, glob.modelMatLoc, false);
+    TPafficherModele(gl);
+
+    glob.modelMatrix.rotate( glob.angleRotY, 0.0, 1.0, 0.0 );
+    glob.modelMatrix.setUniform(gl, glob.modelMatLoc, false);
+    TPafficherModele(gl);
+
+    glob.modelMatrix.rotate( glob.angleRotZ, 0.0, 0.0, 1.0 );
+    glob.modelMatrix.setUniform(gl, glob.modelMatLoc, false);
+    TPafficherModele( gl );
 }
 
 var requestId;