0% ont trouvé ce document utile (0 vote)
5 vues4 pages

Création d'un triangle en WebGL

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.

Transféré par

Nawres Mezzi
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd
0% ont trouvé ce document utile (0 vote)
5 vues4 pages

Création d'un triangle en WebGL

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.

Transféré par

Nawres Mezzi
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats TXT, PDF, TXT ou lisez en ligne sur Scribd

function InitBuffersVertices(vertices)

{
// Cr�er un buffer vide pour stocker les sommets
var vertex_buffer = [Link]();

// Lier ce buffer au tableau associ� en WebGL


[Link](gl.ARRAY_BUFFER, vertex_buffer);

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


[Link](gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);

// Dissocier le buffer
[Link](gl.ARRAY_BUFFER, null);

return vertex_buffer;
}

function InitBuffersColors(colors)
{
// Cr�er un buffer vide pour stocker les couleurs
var color_buffer = [Link]();

// Lier ce buffer au tableau associ� en WebGL


[Link](gl.ARRAY_BUFFER, color_buffer);

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


[Link](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 = [Link](gl.VERTEX_SHADER);

// Attacher le vertex shader au code source


[Link](vertShader, vertCode);

// Compiler le vertex shader


[Link](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 = [Link](gl.FRAGMENT_SHADER);

// Attacher le fragment shader au code source


[Link](fragShader, fragCode);

// Compiler le fragmentt shader


[Link](fragShader);

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


program combin�
var shaderProgram = [Link]();

// Attacher le vertex shader au shader program


[Link](shaderProgram, vertShader);

// Attacher le fragment shader au shader program


[Link](shaderProgram, fragShader);

// lier les deux programmes


[Link](shaderProgram);

// Utiliser le shader program object combin�


[Link](shaderProgram);

return shaderProgram;
}

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

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

var coord = [Link](shaderProgram, "coordinates");

// Pointer l'attribut au VBO courrant li�


[Link](coord, 3, [Link], false, 0, 0);

// Activer l'attribut
[Link](coord);

// Lier le vertex buffer object-couleurs


[Link](gl.ARRAY_BUFFER, color_buffer);

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


var col = [Link](shaderProgram, "col");

// Pointer l'attribut au VBO courrant li�


[Link](col, 3, [Link], false, 0, 0);
// Activer l'attribut
[Link](col);

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

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


var proj = [Link](shaderProgram, "uPMatrix");
var modelView = [Link](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 = [Link]('mon_Canvas');
//retourne un contexte de dessin sur le canvas
//gl sera l�interface permettant l�utilisation des fonctions OpenGL
gl = [Link]('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
[Link](0.9, 0.9, 0.9, 1.0);

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


profondeur
[Link](gl.DEPTH_TEST);

// Vider le buffer de couleurs


[Link](gl.COLOR_BUFFER_BIT);

// D�finir le viewport
[Link](0,0,[Link],[Link]);

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

var pMatrix = [Link]();


var mvMatrix = [Link]();

[Link](-1.0,1.0,-1.0,1.0, 0.0, 100.0, pMatrix);


//[Link](-100.0,100.0,-100.0,100.0, 0.0, 100.0, pMatrix);
[Link]([0.0, 0.0, 1.0],[0, 0, 0],[0, 1, 0],mvMatrix);
[Link](mvMatrix,[0.5,0.7,0.0],mvMatrix);
[Link](mvMatrix,[0.25,0.25,1.0],mvMatrix);
[Link](mvMatrix,[Link]/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);
[Link]([Link], 0, 3);

Vous aimerez peut-être aussi