alchemist/main.js

// 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.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" );

    // 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, num )
{
    // 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
    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, 1, 10 );

    // 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 );
}

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();
    }
}