252 lines
8.2 KiB
JavaScript
252 lines
8.2 KiB
JavaScript
// Prénoms, noms et matricule des membres de l'équipe:
|
|
// - Prénom1 NOM1 (matricule1)
|
|
// - Prénom2 NOM2 (matricule2)
|
|
|
|
|
|
// déclaration d'une structure pour contenir toutes les variables globales
|
|
var glob = { };
|
|
|
|
function handleMouseDown(event)
|
|
{
|
|
glob.mouseDown = true;
|
|
glob.positionSourisX = event.clientX-15;
|
|
glob.positionSourisY = event.clientY-15;
|
|
}
|
|
|
|
function handleMouseUp(event)
|
|
{
|
|
glob.mouseDown = false;
|
|
glob.positionSourisX = null;
|
|
glob.positionSourisY = null;
|
|
}
|
|
|
|
function handleMouseMove(event)
|
|
{
|
|
if (!glob.mouseDown) return;
|
|
glob.positionSourisX = event.clientX-15;
|
|
glob.positionSourisY = event.clientY-15;
|
|
}
|
|
|
|
//
|
|
// makeRepere
|
|
//
|
|
// Create a repere with vertices, normals and texCoords. Create VBOs for each as well as the index array.
|
|
// Return an object with the following properties:
|
|
//
|
|
// normalObject WebGLBuffer object for normals
|
|
// texCoordObject WebGLBuffer object for texCoords
|
|
// vertexObject WebGLBuffer object for vertices
|
|
// indexObject WebGLBuffer object for indices
|
|
// numIndices The number of indices in the indexObject
|
|
//
|
|
function makeRepere(ctx)
|
|
{
|
|
// box
|
|
// v2
|
|
// |
|
|
// |
|
|
// |
|
|
// v0 o------v1
|
|
// /
|
|
// v3
|
|
//
|
|
// vertex coords array
|
|
var vertices = new Float32Array(
|
|
[ 0, 0, 0, 1, 0, 0, // v0 -> v1 vec X
|
|
0, 0, 0, 0, 1, 0, // v0 -> v2 vec Y
|
|
0, 0, 0, 0, 0, 1 ]// v0 -> v3 vec Z
|
|
);
|
|
|
|
// colors array
|
|
var colors = new Float32Array(
|
|
[ 1, 0, 0, 1, 0, 0, // v0 -> v1 vec X
|
|
0, 1, 0, 0, 1, 0, // v0 -> v2 vec Y
|
|
0, 0, 1, 0, 0, 1 ]// v0 -> v3 vec Z
|
|
);
|
|
|
|
// index array
|
|
var indices = new Uint8Array(
|
|
[ 0, 1,
|
|
2, 3,
|
|
4, 5 ]
|
|
);
|
|
|
|
var retval = { };
|
|
|
|
retval.vertexObject = ctx.createBuffer();
|
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
|
|
ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
|
|
|
|
retval.colorObject = ctx.createBuffer();
|
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.colorObject);
|
|
ctx.bufferData(ctx.ARRAY_BUFFER, colors, ctx.STATIC_DRAW);
|
|
|
|
ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
|
|
|
|
retval.indexObject = ctx.createBuffer();
|
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
|
|
ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
|
|
ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
|
|
|
|
retval.numIndices = indices.length;
|
|
|
|
return retval;
|
|
}
|
|
function TPchargerTextures()
|
|
{
|
|
// Charger une image utilisée comme texture. (Retourne un objet WebGLTexture)
|
|
glob.texture1 = loadImageTexture( gl, "images/Brouillard.jpg" );
|
|
glob.texture2 = loadImageTexture( gl, "images/Exploration.jpg" );
|
|
//glob.texture3 = loadImageTexture( gl, "images/Modelisation.jpg" );
|
|
}
|
|
|
|
function TPcreerModele()
|
|
{
|
|
// Créer une boîte. Au retour, 'glob.box' contient une structure avec
|
|
// les VBOs pour les sommets, normales, coordonnées de texture et connectivité.
|
|
glob.box = makeRepere( gl );
|
|
|
|
// Initialiser les attributs pour les sommets, les normales et les coordonnées de texture
|
|
// (dans le même ordre qu'à l'appel à simpleSetup() dans la fonction TPinitialiser())
|
|
gl.enableVertexAttribArray( 0 );
|
|
gl.bindBuffer( gl.ARRAY_BUFFER, glob.box.vertexObject );
|
|
gl.vertexAttribPointer( 0, 3, gl.FLOAT, false, 0, 0 );
|
|
|
|
gl.enableVertexAttribArray( 1 );
|
|
gl.bindBuffer( gl.ARRAY_BUFFER, glob.box.colorObject );
|
|
gl.vertexAttribPointer( 1, 3, gl.FLOAT, false, 0, 0 );
|
|
|
|
// Lier le tableau de connectivité
|
|
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, glob.box.indexObject );
|
|
}
|
|
|
|
function TPinitialiser()
|
|
{
|
|
// Initialiser webgl
|
|
var gl = initWebGL( "tp-canevas" ); // L'identificateur du canevas
|
|
if (!gl) return;
|
|
|
|
glob.program = simpleSetup( gl,
|
|
// Les identificateurs des deux nuanceurs
|
|
"nuanceurSommets", "nuanceurFragments",
|
|
// Les attributs utilisés par les nuanceurs (donnés dans le même ordre que leur indice)
|
|
[ "vPosition", "vColor" ],
|
|
// La couleur de fond et la profondeur
|
|
[ 0, 0, 0.3, 1 ], 100);
|
|
|
|
// Les angles courants de rotation
|
|
glob.angleRotX = 0, glob.angleRotY = 0, glob.angleRotZ = 0;
|
|
// Les incréments à chaque affichage
|
|
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.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();
|
|
TPcreerModele();
|
|
|
|
glob.mouseDown = false;
|
|
glob.positionSourisX = null;
|
|
glob.positionSourisY = null;
|
|
glob.canevas.onmousedown = handleMouseDown;
|
|
glob.canevas.onmouseup = handleMouseUp;
|
|
glob.canevas.onmousemove = handleMouseMove;
|
|
|
|
// Initialiser les variables uniformes pour les nuanceurs
|
|
gl.uniform3f( gl.getUniformLocation( glob.program, "lightDir" ), 0, 0, 1 );
|
|
gl.uniform1i( gl.getUniformLocation( glob.program, "laTexture" ), 0 );
|
|
gl.uniform2f( gl.getUniformLocation( glob.program, "positionSouris" ), glob.positionSourisX, glob.positionSourisY );
|
|
|
|
return gl;
|
|
}
|
|
|
|
function TPafficherModele( gl )
|
|
{
|
|
gl.uniform2f( gl.getUniformLocation( glob.program, "positionSouris" ), glob.positionSourisX, glob.canevas.height-glob.positionSourisY );
|
|
|
|
// Tracer le cube
|
|
gl.drawElements( gl.LINES, glob.box.numIndices, gl.UNSIGNED_BYTE, 0 );
|
|
}
|
|
|
|
function TPafficherScene(gl)
|
|
{
|
|
glob.perspectiveMatrix = new J3DIMatrix4();
|
|
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 );
|
|
|
|
// 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;
|
|
function TPdebut()
|
|
{
|
|
glob.canevas = document.getElementById('tp-canevas');
|
|
//glob.canevas = WebGLDebugUtils.makeLostContextSimulatingCanvas(c);
|
|
// indiquer de perdre le contexte afin de tester
|
|
//glob.canevas.loseContextInNCalls(15);
|
|
glob.canevas.addEventListener('webglcontextlost', handleContextLost, false);
|
|
glob.canevas.addEventListener('webglcontextrestored', handleContextRestored, false);
|
|
|
|
var gl = TPinitialiser();
|
|
if ( !gl ) return;
|
|
|
|
var displayFunc = function()
|
|
{
|
|
TPafficherScene(gl);
|
|
requestId = window.requestAnimFrame( displayFunc, glob.canevas );
|
|
};
|
|
displayFunc();
|
|
|
|
function handleContextLost(e)
|
|
{
|
|
e.preventDefault();
|
|
clearLoadingImages();
|
|
if ( requestId !== undefined )
|
|
{
|
|
window.cancelAnimFrame(requestId);
|
|
requestId = undefined;
|
|
}
|
|
}
|
|
|
|
function handleContextRestored()
|
|
{
|
|
TPinitialiser();
|
|
displayFunc();
|
|
}
|
|
}
|