Scribd Logo
Importer

Bienvenue sur Scribd !

  • 16 vues

    Triangle

    Transféré par

    Nawres Mezzi
    La fonction Initialise les tampons de sommets et de couleurs, crée et lie les shaders vertex et fragment, définit les matrices de projection et de vue, et dessine le triangle.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme TXT, PDF, TXT ou lisez en ligne sur Scribd

    Triangle

    Transféré par

    Nawres Mezzi
    16 vues4 pages
    La fonction Initialise les tampons de sommets et de couleurs, crée et lie les shaders vertex et fragment, définit les matrices de projection et de vue, et dessine le triangle.

    Titre original

    triangle

    Copyright

    © © All Rights Reserved

    Formats disponibles

    TXT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    La fonction Initialise les tampons de sommets et de couleurs, crée et lie les shaders vertex et fragment, définit les matrices de projection et de vue, et dessine le triangle.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme TXT, PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format txt, pdf ou txt
    16 vues4 pages

    Triangle

    Transféré par

    Nawres Mezzi
    La fonction Initialise les tampons de sommets et de couleurs, crée et lie les shaders vertex et fragment, définit les matrices de projection et de vue, et dessine le triangle.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme TXT, PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format txt, pdf ou txt
    Vous êtes sur la page 1sur 4

    function InitBuffersVertices(vertices)

    {
    // Cr�er un buffer vide pour stocker les sommets
    var vertex_buffer = gl.createBuffer();

    // Lier ce buffer au tableau associ� en WebGL


    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

    // Ins�rer les donn�es sommets au buffer


    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices),
    gl.STATIC_DRAW);

    // Dissocier le buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, null);

    return vertex_buffer;
    }

    function InitBuffersColors(colors)
    {
    // Cr�er un buffer vide pour stocker les couleurs
    var color_buffer = gl.createBuffer();

    // Lier ce buffer au tableau associ� en WebGL


    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);

    // Ins�rer les donn�es sommets au buffer


    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors),
    gl.STATIC_DRAW);

    return color_buffer;
    }

    function InitShaders()
    {
    // le code source de Vertex shader
    var vertCode =
    'attribute vec3 coordinates;' +
    //****Nouveau****//
    'uniform mat4 uPMatrix;'+
    'uniform mat4 uMVMatrix;'+
    'attribute vec3 col;' +
    ' varying vec3 vCol;'+
    'void main(void) {' +
    ' gl_Position = uPMatrix*uMVMatrix*vec4(coordinates, 1.0);' +
    'vCol=col;'+
    '}';

    // Cr�er un vertex shader object


    var vertShader = gl.createShader(gl.VERTEX_SHADER);

    // Attacher le vertex shader au code source


    gl.shaderSource(vertShader, vertCode);

    // Compiler le vertex shader


    gl.compileShader(vertShader);
    // le source code de Fragment shader
    var fragCode = 'precision mediump float;'+
    'varying vec3 vCol;'+
    'void main() {'+
    ' gl_FragColor = vec4(vCol, 1.0);' +
    '}';

    // Cr�er un fragment shader object


    var fragShader = gl.createShader(gl.FRAGMENT_SHADER);

    // Attacher le fragment shader au code source


    gl.shaderSource(fragShader, fragCode);

    // Compiler le fragmentt shader


    gl.compileShader(fragShader);

    // Cr�er le shader program object pour stocker le shader


    program combin�
    var shaderProgram = gl.createProgram();

    // Attacher le vertex shader au shader program


    gl.attachShader(shaderProgram, vertShader);

    // Attacher le fragment shader au shader program


    gl.attachShader(shaderProgram, fragShader);

    // lier les deux programmes


    gl.linkProgram(shaderProgram);

    // Utiliser le shader program object combin�


    gl.useProgram(shaderProgram);

    return shaderProgram;
    }

    function ShadersBuffers(vertex_buffer,color_buffer,shaderProgram,pMatrix,mvMatrix)
    {
    // Lier le vertex buffer object-sommets
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

    // Avoir l'emplacement de la variable d'attribut dans le programme

    var coord = gl.getAttribLocation(shaderProgram, "coordinates");

    // Pointer l'attribut au VBO courrant li�


    gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);

    // Activer l'attribut
    gl.enableVertexAttribArray(coord);

    // Lier le vertex buffer object-couleurs


    gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);

    // Avoir l'emplacement de la variable d'attribut dans le programme


    var col = gl.getAttribLocation(shaderProgram, "col");

    // Pointer l'attribut au VBO courrant li�


    gl.vertexAttribPointer(col, 3, gl.FLOAT, false, 0, 0);
    // Activer l'attribut
    gl.enableVertexAttribArray(col);

    //****Nouveau****//

    //Cr�er l'emplacement des uniforms (projection et vue)


    var proj = gl.getUniformLocation(shaderProgram, "uPMatrix");
    var modelView = gl.getUniformLocation(shaderProgram, "uMVMatrix");

    //Renseigner les valeurs des uniforms


    gl.uniformMatrix4fv(proj, false, pMatrix);
    gl.uniformMatrix4fv(modelView, false, mvMatrix);

    /*============ Cr�ation d'un canvas =================*/

    //d�claration et d�finition de canvas HTML 5


    var canvas = document.getElementById('mon_Canvas');
    //retourne un contexte de dessin sur le canvas
    //gl sera l�interface permettant l�utilisation des fonctions OpenGL
    gl = canvas.getContext('experimental-webgl');

    /*===== D�finition et stockage de donn�es g�om�triques et photom�triques =====*/

    //var vertices = [0.0,0.0,0.0, 0.9,0.0,0.0, 0.45,0.5,0.0];

    //var vertices = [-70.0,-50.0,0.0, 70.0,-50.0,0.0, 0.0,50.0,0.0];


    var vertices = [-0.7,-0.5,0.0, 0.7,-0.5,0.0, 0.0,0.5,0.0];
    var colors=[1.0,0.0,0.0, 1.0,0.0,0.0,1.0,0.0,0.0];

    /*============= Dessin du triangle ================*/

    // Vider le canvas
    gl.clearColor(0.9, 0.9, 0.9, 1.0);

    // Activer la comparaison et la mise � jour au niveau de buffer de


    profondeur
    gl.enable(gl.DEPTH_TEST);

    // Vider le buffer de couleurs


    gl.clear(gl.COLOR_BUFFER_BIT);

    // D�finir le viewport
    gl.viewport(0,0,canvas.width,canvas.height);

    //**** Nouveau ****//

    var pMatrix = mat4.create();


    var mvMatrix = mat4.create();

    mat4.ortho(-1.0,1.0,-1.0,1.0, 0.0, 100.0, pMatrix);


    //mat4.ortho(-100.0,100.0,-100.0,100.0, 0.0, 100.0, pMatrix);
    mat4.lookAt([0.0, 0.0, 1.0],[0, 0, 0],[0, 1, 0],mvMatrix);
    mat4.translate(mvMatrix,[0.5,0.7,0.0],mvMatrix);
    mat4.scale(mvMatrix,[0.25,0.25,1.0],mvMatrix);
    mat4.rotate(mvMatrix,Math.PI/2,[0.0,0.0,1.0],mvMatrix);

    // Dessiner le triangle jaune


    var bv=InitBuffersVertices(vertices);
    var bc=InitBuffersColors(colors);
    var ps=InitShaders();
    ShadersBuffers(bv,bc,ps,pMatrix,mvMatrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    Vous aimerez peut-être aussi