8
Comme cet application va faire une dégradation
des couleurs. Elle va montrer l’étape de
rastérisation dans la pipeline graphique. Le dégradé
est obtenu par le raster au niveau GPU. C’est la
rastérisation.
dans l’application du chapitre 3.
Un tampon de couleur déjà alloué
On doit créer un tableau des couleurs des sommets. Le
tableau contient des vecteurs à 4 valeurs, un pour chaque
couleur de sommet..
le stocker dans un tampon (buffer)
OpenGL: Dans la fonction make_resources( ) on
ajoute les instruction reliées au sujet.
WebGL: Dans la fonction make_buffer( ) le tableau
est converti en flottants et stocké dans le tampon,
cas WebGL et on ajoute au return instruction le code
reliés au sujet.
Ensuite, il est nécessaire d'ajouter le
code recherchant les couleurs dans
l'emplacement de l'attribut, et de
configurer cet attribut pour le
programme shader :
OpenGL: Dans make_resources( ) on
ajoute les instruction reliées au sujet.
WebGL: Dans la structure
programInfo on ajoute le code reliés
au sujet.
Ajouter les instructions dans code des vertex
shader et fragment shader.
Ajouter les instructions dans rendu( ).
Rastérisation et
Application des Couleurs
aux Sommets
OpenGL version WebGL version
function make_buffer(gl ){
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// tableau des positions pour le carré.
const positions = [ 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, ];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions),
gl.STATIC_DRAW);
const elements = [ 0,1 , 2 , 3 , ];
const elementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,elementBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Uint16Array(elements ),
gl.STATIC_DRAW );
const colors = [ 1.0, 1.0, 1.0, 1.0, /*white */
1.0, 0.0, 0.0, 1.0, /* red */ 0.0, 1.0, 0.0, 1.0, /* green
*/ 0.0, 0.0, 1.0, 1.0, /*blue */ ];
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData( gl.ARRAY_BUFFER,
new Float32Array(colors) , gl.STATIC_DRAW);
return { position: positionBuffer,
color: colorBuffer,
elements: elementBuffer, }; }
programInfo = { program: shaderProgram,
attribLocations: { vertexPosition:
gl.getAttribLocation(shaderProgram,'aVertexPosition'),
vertexColor: gl.getAttribLocation(shaderProgram
, 'aVertexColor'),
}, }; }
static struct { GLuint vertex_buffer, element_buffer , color_buffer ; struct{
GLint position , color ; } attributes;
GLuint vertex_shader, fragment_shader, program; } g_resources;
static GLuint make_buffer( GLenum target,const void *buffer_data,GLsizei buffer_size ){
GLuint buffer ; glGenBuffers(1, &buffer) ; glBindBuffer(target, buffer);
glBufferData(target, buffer_size, buffer_data, GL_STATIC_DRAW); return buffer; }
static const GLfloat g_vertex_buffer_data[] = { -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f };
static const GLushort g_element_buffer_data[] = { 0, 1, 2, 3 };
// Now set up the colors for the vertices
static const GLfloat g_color_buffer_data[] =
[1.0f,, 1.0f,, 1.0f,, 1.0f,, /*white */ 1.0f,, 0.0f, 0.0f, 1.0f,, /* red */
0.0f,, 1.0f,, 0.0f, 1.0f,, /*green*/ 0.0f, 0.0f, 1.0f,, 1.0f,, /*blue*/ ];
static int make_resources(void) {
g_resources.vertex_buffer = make_buffer( GL_ARRAY_BUFFER , g_vertex_buffer_data,
sizeof(g_vertex_buffer_data) );
g_resources.element_buffer = make_buffer( GL_ELEMENT_ARRAY_BUFFER ,
g_element_buffer_data, sizeof(g_element_buffer_data) );
g_resources.color_buffer = make_buffer( GL_ARRAY_BUFFER,
g_color_buffer_data, sizeof(g_vertex_color_data) );
g_resources.vertex_shader = make_shader( GL_VERTEX_SHADER , « vsSource.glsl« );
if (g_resources.vertex_shader == 0) return 0;
g_resources.fragment_shader = make_shader( GL_FRAGMENT_SHADER , « fsSource.glsl« );
if (g_resources.fragment_shader == 0) return 0;
g_resources.program = make_program ( g_resources.vertex_shader,g_resources.fragment_shader);
if (g_resources.program == 0) return 0;
g_resources.attributes.position = glGetAttribLocation(g_resources.program , ‘position’);
g_resources.attributes.color =
glGetAttribLocation(g_resources.program , ‘color’);
}
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Rastérisation et Couleurs en GL