lhark/alchemist
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Passage de la multiplication MVC dans le nuanceur de sommets

Browse source
This commit is contained in:
lhark 2017-10-23 17:34:21 -04:00
parent ad4e27e444
commit 631753650d
2 changed files with 38 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -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 u_normalMatrix;
uniform mat4 mmodel;
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;

71
main.js
View file

@ -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.u_modelViewMatrixLoc n'est pas utile car modelViewMatrix n'est pas utilisé dans les nuanceurs
glob.mvpMatrix = new J3DIMatrix4();
glob.u_modelViewProjMatrixLoc = gl.getUniformLocation( glob.program, "u_modelViewProjMatrix" );
glob.normalMatrix = new J3DIMatrix4();
glob.u_normalMatrixLoc = gl.getUniformLocation( glob.program, "u_normalMatrix" );
glob.modelMatrix = new J3DIMatrix4();
glob.viewMatrix = new J3DIMatrix4();
glob.modelMatLoc = gl.getUniformLocation( glob.program, "mmodel" );
glob.viewMatLoc = gl.getUniformLocation( glob.program, "mview" );
glob.projMatLoc = gl.getUniformLocation( glob.program, "mproj" );
// 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;