Enseignant du Cours: DJAFER BADDOU (PhD)
Courriel: djafer.baddou@uqo.ca
Programmation 2D/3D
1
2
Programmation 2D/3D
Préparation GL
Plan de Projection
Introduction à
l’Infographie
Introduction à
OpenGL/ WebGL
Introduction
Contenu
Colorage de la
Scène
Techniques
d'animation et
simulation 2D/3D
Illiminage de la
Scene
Rastérisation et
Couleurs en GL
Mathématiques
et l’infographie
Notion sur les
couleurs
Ajouter des couleurs
3
Introduction
colour is most fundamental component in any art. It is
standard in every graphics library. It is the initial simplicity
involved in setting and changing colours in OpenGL.
Coding
OpenGL uses the method that interpret colours in the RGB
format. Like in an image editor.
while the image editor RGB colours will range from 0 to 255.
OpenGL works using colour values from 0 to 1.
but you can interchange between both by either multiplying
your OpenGL colour by 255, or dividing your other colour
method by 255.
Application de couleur
aux sommets
OpenGL vesion
WebGL version
example
To give an example to get the following
colours, you need the corresponding RGB
values:
Red (Red 1.0f, Green 0.0f, Blue 0.0f)
Green (Red 0.0f, Green 1.0f, Blue 0.0f)
Blue (Red 0.0f, Green 0.0f, Blue 1.0f)
White (Red 1.0f, Green 1.0f, Blue 1.0f)
Black (Red 0.0f, Green 0.0f, Blue 0.0f)
Yellow (Red 1.0f, Green 1.0f, Blue 0.0f)
Pink (Magenta) (Red 1.0f, Green 0.0f, Blue 1.0f)
Rastérisation et Couleurs en GL
Ajouter des couleurs
4
Coding
Ainsi, en supposant que la couleur est exprimée en
quadruplets RGBA,
on représente un pixel vert vif avec une opacité de 50 % par
les valeurs:
(0 ; 1 ; 0 ; 0.5)
Alors que dans une représentation RGB, le vert est
simplement codé par (0 ; 1 ; 0).
Cette transparence est gérée comme une sorte de couleur
ajoutée aux composantes RGB: elle est codée par un
nombre, le canal alpha, qui indique qu’un pixel est plus ou
moins transparent.
Application de couleur
aux sommets
RGBA OpenGL
OpenGL provides us with several methods for setting the
colours of shapes. There are:
methods that take 3 inputs, each one corresponding to
RGB: Red , Green, Blue values for our colours.
other methods that take 4 inputs, which relate to the
RGBA: Red , Green, Blue and Alpha values for our
colours.
Rastérisation et Couleurs en GL
Objet Couleur Buffer
Objet Couleur Buffer
5
So how do we change the colour of our shapes and vertices?
Well, back to chapter 3 Introduction of OpenGL, just like we created a
Vertex Buffer Object (VBO) to store our vertices, we can do exactly the
same thing with our colours and then place this new VBO inside of the
Vertex Array Object (VAO) with the vertices.
Is this difficult?
Definitely not, all we have to do :
is exactly the same thing as we did for the vertices.
Also, because when we set up our shaders we specified permanent
variables for passing vertices and colours to our shader,
So, the second VBO will automatically be interpreted as the colour
portion of our VAO.
Supposons que nous voulions faire un rendu en dégradé ou chaque coin du
carré est de couleur différente : rouge, bleu, vert et blanc. Reprenons
l’application du chapitre 3 Pour finir ces couleurs pour les quatre sommets.
On doit d'abord créer un tableau des couleurs des sommets.
Le tableau contient des vecteurs à 4 valeurs, un pour chaque couleur
de sommet. puis
static struct {
GLuint vertex_buffer , element_buffer , color_buffer;
} g_resources;
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 opaque */
1.0f,, 0.0f, 0.0f, 1.0f,, /* red opaque*/
0.0f,, 1.0f,, 0.0f, 1.0f,, /*green opaque*/
0.0f, 0.0f, 1.0f,, 1.0f,, /*blue opaque*/
];
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Rastérisation et Couleurs en GL
Objet Couleur Buffer make_resources( )
Objet Couleur Buffer make_resources( )
6
Supposons que nous voulions faire un rendu en
dégradé ou chaque coin du carré est de couleur
différente : rouge, bleu, vert et blanc. Reprenons
l’application du chapitre 3.
An important thing to note is that for every per-
vertex attribute you have, you can store it all
inside of the same Vertex Array Object, each in
its own Vertex Buffer Object
and link the VBO to the shader by binding the
attribute locations, the same way we bound
position and color.
Supposons que nous voulions faire un rendu en
dégradé ou chaque coin du carré est de couleur
différente : rouge, bleu, vert et blanc.
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
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 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
7
Comme cet application va faire une
dégradation des couleurs. On va montrer
l’étape de rastérisation dans la pipeline
graphique. Le dégradé est obtenu par le
raster au niveau GPU. Reprenons
l’application du chapitre 3.
Un tampon doit être alloué pour
stocker ces couleurs, Pour définir ces
couleurs pour les quatre sommets
On doit créer un tableau des couleurs
des sommets.
OpenGL: g_color_buffer_data le
code en rouge.
WebGL: colors le code en rouge.
le stocker dans le tampon (buffer)
OpenGL: Dans la fonction
make_resources( ) le code en rouge..
WebGL: Dans la fonction make_buffer( ) le
code en rouge.
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 :
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
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. Cest 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
9
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. Cest 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: make_resources( )
WebGL: make_buffer( ) le tableau est
converti en flottants et stocké dans le
tampon, cas WebGL.
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( )
WebGL: dans programInfo structure
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
10
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Un shader est un programme, écrit en
OpenGL Shading Language (GLSL), un
langage qui ressemble au langage C.
OpenGL / WebGL passe le texte du code
source à GPU pour exécution dans la GPU.
A droite les codes sources de deux shaders
exécutés au GPU lors du dessin d'un
contenu OpenGL/WebGL:
1. les Vertex shaders : exécutés pour traiter
les données de chaque sommet ( vertex
) et qui dessineront un carré 2D sur le
plan de projection.
2. les Fragments shaders: exécutés pour
traiter les données de chaque pixel
affiché et créeront la couleur pour notre
scène.
Ces deux programmes shaders utilisent les
données stockées dans les objets buffers et
génèrent les positions des pixels et leurs
couleurs dans le framebuffer pour un rendu
des pixels à l'écran. un coup d'œil rapide aux
codes sources:
11
Rastérisation et Couleurs en GL
Programme Source des Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position =
aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rappel: Variables and Types
GLSL Variables: All variables
and functions must be
declared before being used.
Identifiers: are variable and
function names.
A variable is declared
specifying its type followed
by the name of the
variable.
a variable can be initialized
as part of its declaration by
using (=) sign.
The OpenGL ES Shading
Language is type safe. There
are no implicit conversions
between types
12
Rastérisation et Couleurs en GL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rappel: Variables and Types
GLSL Types: There are no
default types. All variable and
function declarations must
have a declared type, and
optionally qualifiers.
GLSL does away with pointers
and most of C's sized numeric
types. It keeps only the bool,
int, and float types in common,
but it adds a suite of vector
(vec )and matrix (mat ) types
up to four components length.
The vec2 and vec4 types you
see here are two- and four-
component vectors of floats,
respectively.
These basic types can be
aggregated into array and user-
defined struct types.
13
Rastérisation et Couleurs en GL
Programme Source des Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Attributes Varying Storage
Qualifiers
Variable declarations may have a
storage qualifier, specified in front
of the type. These are summarized
as:
attribute: linkage between a vertex
shader and OpenGL for per-vertex
data. Ex: aVertexPosition and
aVertexColor
and uniform: value does not change
across the primitive being
processed, uniforms form the
linkage between a shader, OpenGL,
and the application. It will be seen
in the next chapter.
14
Rastérisation et Couleurs en GL
Programme Source des Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Attributes Varying Storage
Qualifiers
varying: linkage between a
vertex shader and a fragment
shader for interpolated data.
Ex: vColor.
GLSL predefines some varying
variables to receive special
outputs used by the graphics
pipeline, including the
gl_Position and gl_FragColor
variables used here.
gl_Position's other two vector
components are used in depth
testing and perspective
projection; we'll look at them
closer next chapter when we
get into 3d math. For now, we
just fill them with their identity
values zero and one.
15
Rastérisation et Couleurs en GL
Programme Source des Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
les Vertex shaders : exécutés pour traiter les
données de chaque sommet ( vertex ) et qui
dessineront un carré 2D sur le plan de projection.
2. les Fragments shaders: exécutés pour traiter les
données de chaque pixel affiché et créeront la
couleur pour notre scène.
Le shader de sommet (vertex)
Le shader de sommet reçoit de
OpenGL/WebGL des valeurs de position et
de couleur de sommet à partir d'un
attribut définis, appelé aVertexPosition ,
aVertexColor.
Les informations de position sont stockées
dans une variable varying spéciale fournie
par GLSL, gl_Position.
Ces informations alors stockées dans:
1. des variations (varying) vColor pour être
partagées avec le shader de fragment ou
2. des attributs gl_Position pour être
partagées avec OpenGL.
16
Rastérisation et Couleurs en GL
Programme Source des Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4
aVertexPosition;
attribute vec4 aVertexColor
;
varying vec4 vColor;
void main() {
gl_Position =
aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization
Rasterization
Comme mentionné au dessus, les
différents outputs du vertex shader
sont rastérisées.
1. Pixellisation: Le »raster » prend
chaque triangle, le découpe, rejette
les éléments qui sont en dehors de
l'écran, et localiser et mémoriser les
pixels de l’écran qui correspondent a
l’intérieur des parties restantes du
triangle.
2. Interpolation: Le « raster » fait
également une interpolation le long
de la surface rastérisée de chaque
triangle, en assignant un dégradé
des valeurs à chaque pixel appelé a
cet effet fragment.
Par exemple, si le vertex shader
assigne une couleur à chaque
vertex, le « raster » va dégrader ses
couleurs le long de la surface
pixelisé, comme montré dans le
diagramme.
17
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en ajoutant
des couleurs et faire le dégradé.
Reprenons l’application du chapitre 3.
On est prêt:
1. à ajouter dans make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on avance dans
le cours.
Les prochains chapitres, on introduit
les textures OpenGL.
Les spécifications des objets de la
scène sont indépendants des
spécifications de la camera.
Implémenter les objets dans la
scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Rasterization
Rasterization
Comme mentionné au dessus,
les différents outputs du
vertex shader sont
rastérisées.
1. Pixellisation
2. Interpolation
At present almost all
graphics systems are raster
based.
A picture elements called
fragments are produced as
an array called raster.
The raster are stored in
memory called framebuffer.
The conversion of geometric
entities to fragments array,
raster is called rasterization.
18
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
1. Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et passer
la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Pixelization
Système de formation d’images
Les primitives d’OpenGL sont:
Les points
Les segments
Les triangles
Polygones
Bien qu'on peut faire des objets
intéressants avec des points et des
segments, ce sont les polygones qui
font la majorité des scènes dans des
jeux vidéo.
Généralement, il est très conseillé
d’utiliser les triangles pour plusieurs
avantages:
19
Système de formation
d’images
Avantages des Triangles:
La plus part des circuits des
cartes graphique utilisent des
triangles pour les calculs de
rastérisation. Le calcul est
facile et rapide avec les
triangles qu’avec les autres
polygones.
Les points du triangles se
trouvent dans le même plan
dans l’espace 3D.
Triangles sont convexe ce
qui rend les régularités
telles que les détections de
collision simple a calculer.
ARB ( OpenGL Architecture
Review Board ) a marqué les
polygones et quadrilatères
pour un éventuel supprime
(disparition) de la
bibliothèque.
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Pixelization
Système de formation d’images
Triangle Setup:
Un triangle est un objet à 3 sommets.
Généralement un objet est constitué de grand
nombre de triangles.
Une fois tous les triangles non-visibles
éliminés, notre carte graphique va devoir
attribuer ces sommets de triangles à des pixels.
Car notre écran ne comprend que les pixels.
C'est l'étape de Triangle Setup.
Cette étape part du principe qu'un triangle est
composé de trois cotés.
Chacun de ces cotés est un segment, défini par
deux points: deux sommets du triangle.
Si on prolonge ce segment, on obtient une
droite, qui parcours l'écran.
Cette droite découpera l'écran en deux
parties distinctes.
20
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Pixelization
Système de formation d’images
Triangle Setup:
Cette droite peut être définie par un de ses points,
et par sa pente.
Dans l'algorithme qui suit, le point choisit sera un
des sommets du triangle.
Fonction de contours
Tout l'algorithme se base sur une fonction
mathématique appelée fonction de contours.
Si on dispose d'une droite, la fonction de contours
va, pour chaque point sur l'image, renvoyer un
nombre entier.
Si le point est placé d'un coté (à gauche, en haut, de
la droite), alors cette fonction renverra un nombre
négatif.
Si le point est placé sur la droite, la fonction revoit zéro.
Si le point est placé ( à droite , en bas de la droite ),
la fonction renvoie un nombre positif.
En bleu, les zones de pixels négatives, en rouge les
zones positives.
21
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Pixelization
Système de formation d’images
Triangle Setup : Fonction de contours
Comment calculer cette fonction ?
1. Tout d'abord, nous allons dire que le point que nous voulons
tester a pour coordonnées x et y sur l'écran.
2. Ensuite, nous allons prendre un des sommets du triangle, de
coordonnées X et Y.
3. L'autre sommet, placé sur cette droite, sera de coordonnées
X2 et Y2.
4. La fonction est alors égale à :
( x − X )
( Y2 − Y ) − ( y − Y )
( X2 − X )
on a utilise des circuits additionneurs, soustracteurs, et
multiplicateurs.
Notre triangle est composé de trois cotés, de trois segments.
Si on applique cette fonction sur chacun des segments
composant ce triangle :
à l'intérieur du triangle, les trois fonctions (une par coté)
donneront un résultat positif ;
à l'extérieur, une des trois fonctions donnera un résultat
négatif.
22
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Pixelization
Système de formation d’images
Triangle Setup : Fonction de contours
( x − X )
( Y2 − Y ) − ( y − Y )
( X2 − X )
on a utilise des circuits additionneurs, soustracteurs,
et multiplicateurs.
Notre triangle est composé de trois cotés, de
trois segments.
Pour savoir quels sont les pixels qui peuvent
former le triangle à l’affichage,
il suffit de tester, la carte graphique, pour chaque
pixel possible à l’écran le résultat des fonctions de
contours.
Si les 3 résultats sont positifs, l’information du
pixel est mémorisée dans la carte graphique, avec
les informations correspondant au triangle.
Une fois l'étape de triangle setup terminée, on sait
donc quels sont les pixels situés à l'intérieur d'un
triangle donné.
23
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Pixelization
Système de formation d’images
Triangle Setup : Fonction de contours
( x − X )
( Y2 − Y ) − ( y − Y )
( X2 − X )
on a utilise des circuits additionneurs, soustracteurs, et
multiplicateurs.
tester tous les pixels de l'écran pour chaque triangle et surtout
si le triangle est assez petit, une grande quantité de pixels
seront testés inutilement.
Pour éviter cela, diverses optimisations ont étés inventées:
La première consiste à déterminer le plus petit rectangle
possible qui contient le triangle, et à ne tester que les pixels
de ce rectangle.
De nos jours, les cartes graphiques actuelles se basent sur
une amélioration de cette méthode.
Le principe consiste à prendre un plus petit rectangle, et à le
découper en morceaux carrés. Tous les pixels d'un carré
seront testés simultanément, dans des circuits séparés, ce
qui est plus rapide que les traiter un par un.
Pixellisation: Le raster prend chaque triangle, le découpe,
rejette les éléments qui sont en dehors de l'écran, et localise
et mémorise les pixels de l’écran qui correspondent a
l’intérieur des parties restantes du triangle.
24
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Interpolation
Mais l'étape de rastérisation ne s’arrête pas à la localisation et
mémoriser les pixels à l’intérieur des triangles
Parce que chaque sommet (vertex ) d'un triangle, contient divers
paramètres:
une couleur ,
une profondeur z,
une texture, …etc.
Mais ces informations ne sont valables que pour les sommets, donc
pour les pixels à l’écran correspondants aux sommets.
Mais les pixels à l’intérieur du triangle doivent aussi être color,
avoir une coordonnée de profondeur, etc.
On doit calculer leur couleur, profondeur, etc. en fonction des
données situées aux sommets.
2. Interpolation: Le raster également fait une interpolation le long
de la surface rastérisée de chaque triangle, en assignant un
dégradé des valeurs à chaque pixel de l’écran appelé a cet effet
fragment.
les pixels à l’intérieurs du triangle sont obtenus par la méthode
de triangle setup.
25
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Par exemple, si jai:
un pixel qui correspond au premier sommet dont on a
attribué la couleur vert,
un autre pixel qui correspond au deuxième sommet dont on
a attribué la couleur rouge, et
un pixel qui correspond au troisième sommet dont on a
attribué la couleur bleu,
le triangle résultant doit être colorié par une étape
d'interpolation qui va être faite sur tous les pixels à
l’intérieurs du triangle.
La couleur n'est pas le seul paramètre qui est interpolé.
Toutes les valeurs attachées au pixel devront l'être. Par
exemple, la profondeur z attachée à un pixel le sera aussi.
les pixels à l’intérieurs du triangle sont obtenus par la
méthode de triangle setup.
Interpolation: Le raster également fait une interpolation le
long de la surface rastérisée de chaque triangle, en
assignant un dégradé des valeurs à chaque pixel de lécran
appelé a cet effet fragment.
26
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Profondeur z
Généralement, un seul pixel est lié à plusieurs triangles et non un
seul triangle sur la trajectoire d'un pixel a l'étape de triangle
setup . Car plusieurs objets l'un derrière l'autre.
Dans ces conditions, ce que va fournir l'étape d'interpolation,
ce sont des informations déduites de l'influence des triangles
sur le pixel.
Cest l’ensemble de ces informations qu’on appelle fragment.
Le fragment peut contenir :
une position à l'écran
une profondeur
une couleur
une valeur de stencil
une transparence alpha
Texture, etc.
Fragments nommés ainsi tant qu'ils ne sont pas inscrits à
l'écran. Ces fragments vont être passes au shader fragment.
Le fragment shader va les inscrire pixels à l'écran.
27
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Coordonnées barycentriques
Plusieurs fragments pourront être combinés
pour obtenir la couleur finale d'un pixel a
l’écran.
Pour calculer chaque donnée de chaque
fragment dans un triangle en fonction de ce
qu'on trouve sur les sommets on utilise ce
qu'on appelle: les coordonnées
barycentriques
Ces coordonnées sont au nombre de trois, et
sont notées u, v et w. Pour les déterminer, on
doit relier le point dont on veut la valeur, aux
trois autres sommets du triangle.
On obtient ainsi trois triangles :
Les coordonnées barycentriques sont
proportionnelles aux aires de ces trois
triangles.
Ces trois aires sont divisées par l'aire totale du
triangle, qui se ramener dans l'intervalle [0, 1].
28
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Coordonnées barycentriques
Cela signifie que la somme de ces trois
coordonnées vaut 1:
u + v + w = 1
En conséquence, on peut se passer d'une
des trois coordonnées dans nos calculs,
w = 1 - (u + v).
L'aire totale du triangle, ainsi que l'aire des
trois sous-triangles, sont déterminées par un
calcul dans un circuit de la carte graphique.
Ces trois coordonnées permettent ainsi de
repérer chaque point et de faire
l'interpolation.
Il suffit pour cela de multiplier la couleur ou
la profondeur d'un sommet par la
coordonnée barycentrique associée, et de
faire la somme de ces produits.
29
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Coordonnées barycentriques
Si l'on note C1, C2, et C3 les couleurs des trois sommets, la
couleur d'un pixel a l’écran vaut:
(C1 * u) + (C2 * v) + (C3 * w).
Le résultat obtenu est alors celui de l’image du milieu.
Le problème : la perspective n'est pas prise en compte !
Perspective
la coordonnée de profondeur (z) n'était pas prise en compte
dans le calcul de l’interpolation. Pour résumer, le problème de la
mauvaise perspective :
en interpolant 1/z, et en calculant z à partir de cette valeur
interpolée, les problèmes disparaissent.
la carte graphique corrige toute seule la perspective, et qu'elle
utilise une méthode d'interpolation un peu plus compliquée que
les calculs vus au-dessus.
30
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Perspective
en fonction de la profondeur z du fragment en cours de
tracé et du z actuellement stocké dans le pixel visé, le
pixel est ou non modifié (i.e. sa couleur et son z). Ceci
constitue le schéma de base,
le raster manager, à qui le pixel est confié pour être
tracé à l'écran après d'éventuels traitements
supplémentaires (dithering: solution pour afficher une
image dans un dispositive de couleurs insuffisant, etc.).
31
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Rasterization : Fragment
Contenu d'un fragments
En mode true colors, la couleur se code avec 3 octets représentant les
composantes rouge, verte et bleue.
Mais les fragments peuvent contenir bien plus d'information au delà
de la simple couleur:
on utilise généralement aussi une profondeur z (utilisée pour le Z-
buffer) et une opacité alpha (d'où la notation RGBA).
De plus, ces valeurs sont doublées en mode double buffer, pour faire des
animations fluides en laissant visible l'image précédente pendant que l'on
trace la nouvelle dans le back-buffer. Comme ces informations diverses
réfèrent aux mêmes pixels, on parle de `plans', superposés comme des
calques.
On dispose également d'un plan de pop-up qui permet de tracer des
menus ou des pointeurs sans altérer le contenu de l'image,
de plans de stencil qui permettent de masquer certaines parties de
l'image,
voire d'une image de fond pour les machines qui ont assez de
mémoire.
Le nombre de bits alloué aux divers plans est paramétrable,
la quantité disponible dépendant de la mémoire de la carte graphique.
32
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
2. Rastérisation: créer des fragments de la taille
d'un pixel.
1. assemblé en triangle et clipper et enfin
2. "rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader pour
assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
les Vertex shaders : exécutés pour traiter les
données de chaque sommet ( vertex ) et qui
dessineront un carré 2D sur le plan de
projection.
2. les Fragments shaders: exécutés pour traiter
les données de chaque pixel affiché et
créeront la couleur pour notre scène.
Le fragment shader
varying variables of the vertex shader
become inputs In a fragment shader:
Each varying variable, vColor, in the
fragment shader is linked to the vertex
shader's varying variable, vColor, of the
same name, and
Les informations de couleur sont
stockées dans une variable varying
spéciale fournie par GLSL,
gl_FragColor.
33
Rastérisation et Couleurs en GL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
les Vertex shaders : exécutés pour
traiter les données de chaque
sommet ( vertex ) et qui
dessineront un carré 2D sur le plan
de projection.
2. les Fragments shaders: exécutés
pour traiter les données de
chaque pixel affiché et créeront la
couleur pour notre scène.
Le fragment shader
Fragment shaders are also given a
different set of predefined gl_*
variables.
gl_FragColor is the most
important, a vec4 to which the
shader assigns the RGBA color
value for the fragment
34
Rastérisation et Couleurs en GL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
les Vertex shaders : exécutés pour
traiter les données de chaque
sommet ( vertex ) et qui dessineront
un carré 2D sur le plan de projection.
2. les Fragments shaders: exécutés
pour traiter les données de chaque
pixel affiché et créeront la couleur
pour notre scène.
Le fragment shader
Identique au shader de sommet qui
reçoit des valeurs de position de
sommet à partir d'un attribut
aVertexPosition. Les informations de
position sont stockées dans la
variable spéciale gl_Position fournie
par GLSL,.
la fragment shader reçoit les valeurs
de couleur de sommet a partir du
varying vColor. Les informations sont
stockées dans une variable spéciale
fournie par GLSL, appelée
gl_FragColor
35
Rastérisation et Couleurs en GL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
3. Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
les Vertex shaders : exécutés pour
traiter les données de chaque
sommet ( vertex ) et qui dessineront
un carré 2D sur le plan de projection.
les Fragments shaders: exécutés
pour traiter les données de chaque
pixel affiché et créeront la couleur
pour notre scène.
Vertex et fragment shaders
The shader first assigns the vertex's
screen space position to the
predefined varying variable
gl_Position, that GLSL provides for the
purpose.
gl_FragColor is the most important, a
vec4 to which the shader assigns the
RGBA color value for the fragment
each invocation of the fragment
shader receives a rasterized version
of the vertex shader's outputs for that
varying variable , vColor,.
36
Rastérisation et Couleurs en GL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
Pour que ces couleurs soient
effectivement utilisées:
le shader de sommet doit être
mis à jour pour extraire la
couleur appropriée du tampon
des couleurs :
Pour mémoire, voici à quoi
ressemblait précédemment le
shader de fragment
Afin de choisir la couleur
interpolée pour chaque pixel,
on le changer pour récupérer
la valeur depuis le varying
vColor :
La différence clé est ici que,
pour chaque sommet, nous
passons sa couleur au shader
de fragment en utilisant un
varying.
37
The vertex shader
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
Coloriage des fragments Programme Source des Shaders
const fsSource = `void
main() {gl_FragColor =
vec4(1.0, 1.0, 1.0, 1.0);}`;
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
In screen space, the
coordinates (1, 1) and (1, 1)
correspond respectively to the
lower-left and upper-right
corners of the framebuffer;
since our vertex array's
vertices already trace that
same rectangle, we can
directly copy the x and y
components from each
vertex's position value as it
comes out of the vertex array.
38
Rastérisation et Couleurs en GL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
1. les Vertex shaders : exécutés
pour traiter les données de
chaque sommet ( vertex ) et qui
dessineront un carré 2D sur le
plan de projection.
2. les Fragments shaders: exécutés
pour traiter les données de
chaque pixel affiché et créeront
la couleur pour notre scène.
Le fragment shader
une fois que les sommets de la
forme ont été traités par le
shader de sommet, le shader de
fragment est appelé une fois
pour chaque pixel.
La couleur est ensuite renvoyée
à la couche OpenGL ou WebGL
en la stockant dans la variable
spéciale gl_FragColor.
Cette couleur est alors dessinée
à l'écran dans la position
correcte.
39
Rastérisation et Couleurs en GL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition ;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
40
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
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. Cest la rastérisation. dans l’application du
chapitre 3.
Ajouter les instructions de couleurs dans code
des vertex shader pour projeter les sommets sur
plan de projection, par les vertex shaders et
passer la variable de couleur au fragment shader.
Rastérisation: créer des fragments de la taille
d'un pixel.
assemblé en triangle et clipper et enfin
"rastérisé" (pixelisé) en fragments de la taille
d'un pixel (en gros, fragment = pixel).
Ajouter les instructions des couleurs des
sommets dans la source des fragment shader
pour assignés des couleurs aux pixels de la scène.
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le framebuffer.
Sur le plan de projection
4. la plan de projection est dessiné sur l'espace
écran ("screen space").
41
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Une fois que les shaders sont finis,
que les emplacements sont retrouvés, et
que les positions des sommets du carré
2D sont stockées dans le tampon,
nous pouvons faire effectivement le
rendu de la scène. Let's start writing the
code to set up our rendering job state:
4. Ajouter les instructions dans rendu(
).
3. la scène est dessinée dans le
framebuffer. Sur le plan de
projection
4. la plan de projection est dessiné
sur l'espace écran ("screen
space").
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 :
Ensuite, (render ( ) ) peut être
modifié pour utiliser réellement ces
couleurs lors du dessin du carré :
function
make_resources( gl ) {
buffers = make_buffer(gl);
shaderProgram =
initShaders(gl );
programInfo = {
program:
shaderProgram,
attribLocations: {
vertexPosition:
gl.getAttribLocation(sha
derProgram,
'aVertexPosition'),
vertexColor:
gl.getAttribLocation(sha
derProgram,
'aVertexColor'),
}, };
}
OpenGL version WebGL version
static struct {
/*fields for buffer objects*/
GLuint vertex_buffer, element_buffer; struct{ GLint
position , color ; } attributes;
/* fields for shader objects*/
GLuint vertex_shader, fragment_shader, program; } g_resources;
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) );
/* make shaders ... */
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.fragme
nt_shader);
if (g_resources.program == 0) return 0;
g_resources.attributes.position =
glGetAttribLocation(g_resources.program ,
'aVertexPosition’);
g_resources.attributes.color =
glGetAttribLocation(g_resources.program ,
'aVertexColor’);
}
The vertex shader
vsSource =`
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor ;
varying vec4 vColor;
void main() {
gl_Position = aVertexPosition
;
vColor = aVertexColor;
}` ;
Le fragment shader
//#version 110
fsSource = `
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}`;
Plan de Travail du Modèle de
la Camera Synthétique
satisfaction d'avoir:
plan de projection,
projeter la scène.
4: Rastérisation en
ajoutant des couleurs et faire
dégradé.
l’application du
On est prêt:
ajouter dans
make_resources( ) :
buffer des couleurs
texture objects
dans render( ). Les
instructions reliées.
et à mesure qu’on
dans le cours.
prochains chapitres, on
les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
Implémenter les objets dans
Définir le frustum.
la camera synthétique
l’image sur le plan de
projection.
Source des Vertex
Shaders
42
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
2. Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
Une fois que les shaders sont finis, que
les emplacements sont retrouvés, et que
les positions des sommets du carré 2D sont
stockées dans le tampon,
nous pouvons faire effectivement le rendu
de la scène. Let's start writing the code to
set up our rendering job state:
4. Ajouter les instructions dans rendu( ).
3. la scène est dessinée dans le
framebuffer. Sur le plan de
projection
4. la plan de projection est dessiné sur
l'espace écran ("screen space").
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 :
Ensuite, (render ( ) ) peut être modifié
pour utiliser réellement ces couleurs
lors du dessin du carré :
render( void ) OpenGL version
render( now ) WebGL version
43
Overview of a rendering job
Rendering potentially takes a
lot of parameters. In addition to
all of the buffers and shaders,
it may involve, there are
dozens of others such as
textures and uniform
parameters etc. to be
discussed in the next chapters.
La mise a jour de la function
render( ) est d’ajouter le code
souligne pour OpenGL et le code
en rouge pour WebGL.
Tell WebGL how to pull out the
colors from the color buffer into
the vertexColor attribute.
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT |gl.DEPTH_BUFFER_BIT) ;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.useProgram(programInfo.program);
{ const numComponents = 2; const type = gl.FLOAT;
const normalize = false; const stride = 0; const offset = 0;
gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition,
numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray( programInfo.attribLocations.vertexPosition); }
{ ////////////// color //////////////
const numComponents1 = 4; const type1 = gl.FLOAT;
const normalize1 = false; const stride1 = 0; const offset2 = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
gl.vertexAttribPointer( programInfo.attribLocations.vertexColor,
numComponents1, type1, normalize1, stride1, offset2);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexColor);
} /////////// end color//
{ const offset1 = 0; const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);
}
now *= 0.001; deltaTime = now - then; then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glBindBuffer(GL_ARRAY_BUFFER, g_resources.vertex_buffer);
glVertexAttribPointer(
g_resources.attributes.position, /* attribute */ 2, /* size */ GL_FLOAT, /* type */ GL_FALSE,
/* normalized? */ sizeof(GLfloat)*2, /* stride */
(void*)0 /* array buffer offset */ );
glEnableVertexAttribArray(g_resources.attributes.position);
glBindBuffer(GL_ARRAY_BUFFER, g_resources.color_buffer);
glVertexAttribPointer(
g_resources.attributes.color, /* attribute */ 2, /* size */
GL_FLOAT, /* type */ GL_FALSE, /* normalized? */
sizeof(GLfloat)*2, /* stride */
(void*)0 /* array buffer offset */ );
glEnableVertexAttribArray(g_resources.attributes.color);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER ,
g_resources.element_buffer);
glDrawElements( GL_TRIANGLE_STRIP, /* mode */ 4, /* count */
GL_UNSIGNED_SHORT, /* type */ (void*)0 /* element array buffer offset */
);
glDisableVertexAttribArray(g_resources.attributes.position);
glDisableVertexAttribArray(g_resources.attributes.color);
glUseProgram(g_resources.program);
glutSwapBuffers();
}
Introduction des Couleurs de GL
Le Pipeline Graphique make_resources ( ) , render( )
Render the Scene
44
Overview of a rendering job
Rendering potentially takes a
lot of parameters. In addition to
all of the buffers and shaders,
it may involve, there are
dozens of others such as
textures and uniform
parameters etc. to be
discussed in the next chapters.
La mise a jour de la function
render( ) est d’ajouter le code
souligne pour OpenGL et le code
en rouge pour WebGL.
Tell WebGL how to pull out the
colors from the color buffer into
the vertexColor attribute.
Introduction des Couleurs de GL
Le Pipeline Graphique make_resources ( ) , render( )
Render the Scene
a state machine
Rather than offer a monolithic "draw" function with all of these flags as arguments, or require you to
fill out a struct with dozens of fields,
OpenGL's approach is to lay all of these settings out as a state machine.
a state machine
When you bind objects to targets using glBindTexture , glBindBuffer, and their kin, you are not only
making the objects available for modification, you are also binding them to the current rendering
job's state.
There are also state manipulation functions that set the current shader program, assign values to
uniform parameters, and describe the structure of the vertex array.
When you finally submit a job with glDrawElements, OpenGL takes a snapshot of the current state
and adds it to the GPU's command queue, where it will be executed as soon as the GPU is
available.
Meanwhile, you can change the OpenGL state around and queue up additional jobs without waiting
for your previous jobs to finish.
Once you're done queueing up jobs, you tell the window system to "swap buffers", which will wait for
all of the queued jobs to finish and then commit the result to the screen
45
Rastérisation et Couleurs en GL
Le Pipeline Graphique
Le Pipeline Graphique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
Plan de Travail du Modèle de
la Camera Synthétique
Avec la satisfaction d'avoir:
Chap. 2: plan de projection,
Chap. 3: projeter la scène.
Chap. 4: Rastérisation en
ajoutant des couleurs et faire
le dégradé.
Reprenons l’application du
chapitre 3. On est prêt:
1. à ajouter dans
make_resources( ) :
Le buffer des couleurs
2. des texture objects
Ajouter dans render( ). Les
instructions reliées.
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures OpenGL.
Les spécifications des objets
de la scène sont indépendants
des spécifications de la
camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de
projection.
Une fois que les shaders sont finis, que
les emplacements sont retrouvés, et que
les positions des sommets du carré 2D sont
stockées dans le tampon,
nous pouvons faire effectivement le rendu
de la scène. Let's start writing the code to
set up our rendering job state:
Ajouter les instructions dans rendu( ).
la scène est dessinée dans le
framebuffer. Sur le plan de
projection
la plan de projection est dessiné sur
l'espace écran ("screen space").
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 :
Ensuite, (render ( ) ) peut être modifié
pour utiliser réellement ces couleurs
lors du dessin du carré :
Liste des références sera donnée ultérieurement.
http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html
Références
46
Programmation 2D/3D
Rastérisation et Couleurs en GL
FIN DU CHAPITRE
FIN DU CHAPITRE
FIN DU CHAPITRE
FIN DU CHAPITRE
47
FIN DU CHAPITRE
Rastérisation et Couleurs en GL
La constante GLUT_RGBA de
OpenGL en appelant la fonction
glutInitDisplayMode.
Les attributs des primitives graphiques
48
La plupart des propriétés de couleurs pour les
primitives OpenGL sont exprimées en mode RGB.
En plus des trois composantes R, G et B, il existe
une 4
e
composante alpha: α, qui est utilisée pour
contrôler le mélange de couleur (blending).
La spécification de la couleur avec les 4
dimensions s’appelle le mode RGBA.
color is something we'd rather like to specify per
corner of the triangle! Let's add a color attribute
to the vertices to accomplish this.
We'll first have to add the extra attributes to the
vertex data. Transparency isn't really relevant, so
we'll only add the red, green and blue
components:
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de couleur de OpenGL
Ajouter des couleurs
49
A world without colour is a very dull world indeed. Colour makes up absolutely everything you see and without it, everything
would either be a shade of grey, or just black.
Colour Models
First we’ll have a look at some different colour models. There are many ways to describe colour in computer graphics. You may
have a CMYK printer for example, which stores colours according to their Cyan, Magenta, Yellow and Key (black) values, or you may
have a printer with an RGB cartridge, which takes Red, Green and Blue values, often with a separate cartridge for black. Then there
are other formats such as HSL and HSV which stand for Hue, Saturation and Luminance or Value. You may have noticed the ability
in some image editors to set the Hue and Saturation values, and they may refer to Luminance and Value as the Brightness. Then
there is YUV which is often used for cameras, and it is harder to describe. The Y value determines how bright the colour is, while
the U and V values determine the colour. YUV is used because it uses less storage and therefore less bandwidth in cameras.
Application de couleur
aux sommets
OpenGL vesion
WebGL version
Programmation 2D/3D
Introduction des Couleurs de GL
OpenGL possède 3 autres tables
de couleur qui peuvent être
activée par la fonction glEnable,
en utilisant l’un des paramètres:
GL_COLOR_TABLE.
GL_POST_CONVOLUTION_COLOR
_TABLE.
GL_POST_COLOR_MATRIX_COLO
R_TABLE
Les attributs des primitives graphiques
50
Il existe dans GLUT une fonction
qui interagit avec les système des
fenêtre pour initialiser la valeur de
couleur à une position donnée:
glutSetColor(Index, red, green,
blue);
Les paramètres red, green, blue
prennent des valeurs entre 0.0 et
1.0..
La couleur va être chargée dans la
table à la position spécifiée par la
valeur du paramètre Index.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de couleur de OpenGL
La couleur du premier objet est
appelée la couleur destination et
celle du deuxième objet est
appelée la couleur source.
Le mélange de couleurs peut être
fait en mode RGB ou RGBA.
Les attributs des primitives graphiques
51
Dans certaines situations (ex. créer
un effet de transparence, etc.), il est
utile de combiner des couleurs
d’objets en chevauchement, ou la
couleur d’un objet et celle du fond,
pour créer une image composite.
Dans OpenGL, les couleurs de 2
objets peuvent être mélangées en
chargeant d’abord un premier objet
dans le tampon frame, et ensuite
ajouter la couleur du deuxième
objet.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de mélange de couleurs (blending)
( S
r
R
s
+ D
r
R
d
, S
g
G
s
+ D
g
G
d
,
S
b
B
s
+ D
b
B
d
, S
a
A
s
+ D
a
A
d
)
Avec:
(R
s
,G
s
,B
s
,A
s
) et (R
d
,G
d
,B
d
,A
d
)
sont les couleurs source et
destination respectivement.
(S
r
,S
g
,S
b
,S
a
) et (D
r
,D
g
,D
b
,D
a
)
sont les facteurs de mélange des
sources et destination,
respectivement.
Les attributs des primitives graphiques
52
Pour appliquer la fonction de
mélange, on doit d’abord activer
la fonction suivante:
glEnable(GL_BLEND);
Pour désactiver la fonction, on
doit utiliser l’appel:
glDisable(GL_BLEND);
La formule appliquée pour le
mélange est la suivante:
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de mélange de couleurs (blending)
Les paramètres sFactor et
dFactor prennent des valeurs de
constantes de OpenGL. Par
exemple,
la constate GL_ZERO donne les
valeurs (0.0, 0.0, 0.0, 0.0) et
GL_ONE pour les valeurs (1.0,
1.0, 1.0, 1.0).
Les attributs des primitives graphiques
53
La valeur de la formule de
mélange est entre 0 et 1.
Toute valeur supérieure à 1 est
tronquée à 1, et toute valeur
inférieure à 0 est tronquée à 0.
On sélectionne les valeurs de
mélange via l’appel:
glBlendFunc(sFactor, dFactor);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de mélange de couleurs (blending)
.
Les attributs des primitives graphiques
54
D’autres constantes existent
comme:
GL_DST_ALPHA,
GL_SRC_ALPHA,
GL_ONE_MINUS_SRC_ALPHA,
GL_ONE_MINUS_DST_ALPHA,
etc.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de mélange de couleurs (blending)
Les attributs des primitives graphiques
55
On peut spécifier aussi des valeurs de couleurs pour une scène en combinaison avec
des coordonnées dans un tableau de sommets. Pour ce faire, on doit d’abord activer
l’option par l’appel:
glEnableClientState(GL_COLOR_ARRAY);
Pour le monde RGB, on doit spécifier la position et le format des composantes de
couleurs par l’appel:
glColorPointer(nColorComponents, dataType, offset, colorArray);
Le paramètre nColorComponents prend la valeur 3 en mode RGB et 4 en mode
RGBA.
Le paramètre dataType prend la valeur GL_INT ou GL_FLOAT.
Le paramètre offset est le nombre d’octets entre chaque ensemble de couleurs.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les tableaux de couleur (color arrays)
Les attributs des primitives graphiques
56
typedef GLint vertex3[3], colors[3];
Vertex3 pt[8] = {{0,0,0}, {0,1,0}, {1,0,0}, {1,1,0}, {0,0,1}, {0,1,1}, {1,0,1}, {1,1,1}};
color3 hue[8]= {{1,0,0}, {1,0,0}, {0,0,1}, {0,0,1}, {1,0,0}, {1,0,0}, {0,0,1}, {0,0,1}};
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glVertexPointer(3, GL_INT, 0, pt);
glVertexPointer(3, GL_INT, 0, hue);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les tableaux de couleur (exemple)
Les attributs des primitives graphiques
57
On peut aussi entrelacer la couleur et les sommets:
static GLint hueAndpt[] = {
1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0,
0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0,
1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1,
0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1, 1
};
glVertexPointer(3, GL_INT, 6*sizeof(GLint), hueAndpt[3]);
glColorPointer(3, GL_INT, 6*sizeof(GLint), hueAndpt[0]);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les tableaux de couleur (exemple)
Les attributs des primitives graphiques
58
Principalement, on peut assigner deux attributs à un point: la taille et la couleur. La valeur de
la couleur est initialisée par des valeurs RGB ou un index sur une table. La taille d’un point est
initialisée par la fonction:
glPointSize(size);
Le paramètre size détermine la taille du point en pixels (1 pour un pixel, 2 pour 2x2 pixels,
etc.). Voici un exemple:
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de points
Les primitives de OpenGL
59
Les images en OpenGL sont
représentées a l’aide d’un
tableau de pixels appelée
pixmap ou chaque pixel design
une couleur. Exemple:
Déclaration d’un tableau
Bitmap de 40 octets (10 x 16
bits).
Le motif Bitmap a droite défini
dans un tableau à 10 lignes et 9
colonnes
Les valeurs de remplissage des
cellules sont exprimées avec
des valeurs hexadécimales
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Représentation et Traitement des Images OpenGL
GLubyte bitShape [20] = { 0x1c, 0x00, 0x1c, 0x00,
0x1c, 0x00, 0x1c, 0x00, 0x1c, 0x00, 0xff, 0x80,
0x7f, 0x00, 0x3e, 0x00, 0x1c, 0x00, 0x08, 0x00 }
Les primitives de OpenGL
60
Si vous avez une image de 100
par 100, vous obtiendrez un
tableau qui comportera
100*100=10000 éléments.
Raisonnons sur une image de 4
par 4 :
Chaque carré représente 1 pixel.
On obtient le tableau (array)
suivant :
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Représentation et Traitement des Images OpenGL
{p0,p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p1
2,p13,p14,p15}.
Avec p0,p1... étant de type "color"
Ce tableau a pour noms "img.pixels" (si
l'image s'appelle "img").
Pour récupérer les informations concernant
le pixel de coordonnées (2,3) (sachant que
le pixel "p0" a pour coordonnées (0,0)), il
faudra écrire "img.pixels [14] "
OpenGL possède aussi des
routines pour sauvegarder,
copier et manipuler des tableaux
de pixels.
glReadPixels()
glCopyPixels()
glPixelTransfer()
glPixelZoom()
Les primitives de OpenGL
61
Il existe deux fonctions de
OpenGL pour finir une forme
ou un motif avec un tableau 2D
(rectangle).
1. glBitmap(width, height, x
0
, y
0
,
xOffset, yOffset, bitShape);
2. void glRasterPos*( TYPE x, TYPE
y , TYPE z , TYPE w );
void glRasterPos*v( TYPE* coords);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Tableaux de pixels (Bitmap) En OpenGL
La fonction Bitmap de OpenGL est définie comme suit:
glBitmap(width, height, x
0
, y
0
, xOffset, yOffset, bitShape);
Les paramètres width et height définissent les dimensions du
tableau. À chaque élément du paramètre bitShape est assig la
valeur 1 ou 0 (bitmap activé ou non-activé sur le pixel).
Les paramètres x
0
et y
0
définissent la position qui sera
considérée comme l’origine du rectangle.
Cette position est spécifiée relativement au coin gauche en bas
du bitShape. Les valeurs de x
0
et y
0
peuvent être positives ou
négatives.
Les valeurs de xOffset et yOffset déterminent les coordonnées à
mettre à jour sur le frame buffer une fois le Bitmap affiché.
Les primitives de OpenGL
62
Il existe deux fonctions de
OpenGL pour définir une
forme ou un motif avec un
tableau 2D (rectangle).
1. glBitmap(width, height,
x
0
, y
0
, xOffset, yOffset,
bitShape);
2. void glRasterPos*( TYPE
x, TYPE y , TYPE z , TYPE
w );
void glRasterPos*v( TYPE*
coords);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Tableaux de pixels (Bitmap) En OpenGL
On utilise la fonction glRasterPos*() pour
initialiser les coordonnées de la position
courante du raster (image).
Lexemple suivant montre l’ utilisation
Les primitives de OpenGL
63
Il existe deux fonctions de
OpenGL pour définir une
forme ou un motif avec un
tableau 2D (rectangle).
1. glBitmap(width, height,
x
0
, y
0
, xOffset, yOffset,
bitShape);
2. void glRasterPos*( TYPE x,
TYPE y , TYPE z , TYPE w );
void glRasterPos*v( TYPE*
coords);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Tableaux de pixels (Bitmap) En OpenGL
64
65
66
// Initialiser le mode de rangement
de pixels (1 octet)
glPixelStorei(GL_UNPACK_ALIG
NMENT, 1);
glRasterPos2i(30, 40);
glBitmap(9, 10, 0.0, 0.0, 20.0, 15.0,
bitShape);
Les primitives de OpenGL
67
Lexemple suivant montre une
utilisation de la fonction
glRasterPos*();
// Déclaration d’un tableau Bitmap de 40 octets (10 x 16
bits). Les valeurs de remplissage des cellules sont
exprimées avec des valeurs hexadécimales
GLubyte bitShape [20] = {
0x1c,0x00, 0x1c, 0x00, 0x1c, 0x00, 0x1c, 0x00, 0x1c,
0x00,
0xff, 0x80, 0x7f, 0x00, 0x3e, 0x00, 0x1c, 0x00, 0x08,
0x00
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Tableaux de pixels (Bitmap) En OpenGL
Les primitives de OpenGL
68
Un motif Bitmap
fini dans un
tableau à 10
lignes et 9
colonnes
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Tableaux de pixels (Bitmap)
Les primitives de OpenGL
69
Cela met en évidence la quantité de mémoire vidéo que nécessite votre carte
graphique en fonction de la définition de l'écran (nombre de points affichés) et du
nombre de couleurs. L'exemple montre ainsi qu'il faut une carte ayant au minimum 4
Mo de mémoire vidéo afin d'afficher une résolution de 1024x768 en true color...
Voici quelques exemples (en considérant que l'image n'est pas compressée) :
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Représentation et Traitement des Images
Définition
de
l'image
Noir et blanc
(1 bit)
256 couleurs
(8 bits)
65000 couleurs
(16 bits)
True color
(24 bits)
320x200
7.8 Ko
62.5 Ko
125 Ko
187.5 Ko
640x480
37.5 Ko
300 Ko
600 Ko
900 Ko
800x600
58.6 Ko
468.7 Ko
937.5 Ko
1.4 Mo
1024x768
96 Ko
768 Ko
1.5 Mo
2.3 Mo
Les primitives de OpenGL
70
Un motif défini dans un tableau avec des valeurs de couleur est appliqué à
un bloc du frame buffer comme suit:
glDrawPixels(width, height, dataFormat, dataType, pixMap);
Les paramètres width et height définissent les dimensions du tableau. Le
paramètre dataFormat est assigné une constante OpenGL indiquant
comment la couleur des pixel est déterminée. Le paramètre dataType définit
type de données (ex. GL_BYTE, GL_INT, etc.).
Dans l’appel suivant, un Pixmap est fini dans un tableau de 128 x 128 avec
des valeurs de couleur RGB:
glDrawPixels(128, 128, GL_RGB, GL_UNSIGNED_BYTE, colorShape);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
La fonction Pixmap
Les primitives de OpenGL
71
Des ensembles de caractères sont prédéfinis dans la libraire GLUT. Cette librairie
possède aussi des routines pour afficher les caractères Bitmap et les polices.
On peut afficher un caractère Bitmap de GLUT comme suit:
glutBitmapCharacter(police, caractère);
Le paramètre police doit avoir une valeur de constante de la libraire GLUT. Le
paramètre caractère doit avoir une valeur du code ASCII (ex. 65 pour le caractère
A’).
On peut soit sélectionner une police avec des espaces a taille fixe, ex:
GLUT_BITMAP_8_BY_13, etc., ou bien avec des espaces proportionnés, ex:
GLUT_BITMAP_TIMES_ROMAN_10, etc.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonction de texte
Les commandes sont
rangées dans une liste
comme suit:
glNewList(listID,
listMode);
.
.
.
glEndList();
Les primitives de OpenGL
72
Parfois il est commode de ranger une
description d’un objet comme une
séquence d’instructions qui porte un
nom. OpenGL permet cela en utilisant
une structure appelée display List.
Une liste peut être utile pour être
appelée plusieurs fois. Elle est utilisée
aussi lors de la modélisation hiérarchique
des objets chaque partie de l’objet est
décrite à part.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les listes d’affichage
Pour générer un
identificateur, on utilise
la fonction:
listID = glGenLists(1);
Lexécution d’une liste
listID se fait par l’appel:
glCallList(listID );
Les primitives de OpenGL
73
Le paramètre listID sert de nom pour la liste.
Le paramètre listMode peut avoir deux valeurs:
1. GL_COMPILE : sauvegarder la liste pour
une future exécution.
2. GL_COMPILE_AND_EXECUTE: les
commandes sont exécutés dès qu’elles
sont placées sur la liste.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les listes d’affichage
Un système graphique qui garde
une liste des valeurs courantes
des attributs est appelé une
machine à états.
Certains autres attributs comme
la position du tampon frame, etc.
sont appelées les variables d’état.
Toutes les variables d’états ont
des valeurs par défaut qui sont
gardés jusqu’à leurs mise à jour.
Les attributs des primitives graphiques
74
En général, un paramètre qui
affecte la manière dont une
primitive est affichée est appelé
un attribut de la primitive (ex.
couleur, taille, etc.).
Une manière de spécifier les
attributs d’une primitive est
d’inclure des options dans la liste
des attributs finissant la
primitive.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Machine et Variables d’État
Les primitives graphiques sont
affichées avec leurs valeurs
courantes des attributs.
Remarque:
Dans ce chapitre, nous
introduisons comment initialiser
les variables des primitives à
afficher (couleur, etc.).
D’autres variables d’état seront
introduites dans les chapitres
suivants.
Les attributs des primitives graphiques
75
Le variables d’états incluent, par
exemple, les attributs de
couleurs, le mode d’affichage, le
modèle de la matrice de vue, la
position courante dans le tampon
frame, les effets d’illumination
dans la scène, etc.
À tout moment, on peut
interroger le système sur les
valeurs courantes des variables
d’état.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Machine et Variables d’État
Les attributs des primitives graphiques
76
Une ligne droite peut être affichée avec trois attributs: la couleur, l’épaisseur
et le style. Lépaisseur d’une ligne est initialisée avec la fonction:
glLineWidth(width);
Le paramètre width prend une valeur flottante, qui est tronquée au plus
proche entier non négatif. Si width = 0.0, la ligne aura une épaisseur par
faut de 1.0.
Par défaut une ligne est continue. Cependant, elle peut être aussi en
pointillée (dashed, dotted ou en combinaison des deux). Le style d’une ligne
est initialisé par la fonction:
glLineStipple(repeatFactor, motif);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de lignes
Les attributs des primitives graphiques
77
Le paramètre motif référence un entier de 16 bits qui décrit comment la ligne doit
être affichée. Un bit est mis à 1 si le pixel est actif et 0 sinon. Le motif est alors
appliqué à la ligne.
Le paramètre repeatFactor spécifie combien de fois chaque bit dans le pattern est
répété avant le prochain bit du motif.
Avant l’affichage d’une ligne, on doit activer le style de ligne de OpenGL par la
fonction:
glEnable(GL_LINE_STIPPLE);
Loption est désactivé par la fonction:
glDisable(GL_LINE_STIPPLE);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de lignes
Les attributs des primitives graphiques
78
Traçage de 3 graphes avec 3 styles différents:
typedef struct {float x, y;} wcPt2D ; // Structure pour
garder les coordonnées
wcPt2D dataPts[5];
void linePlot( wcPt2D dataPts[5] ){
int k;
glBegin( GL_LINE_STRIP );
for (k=0; k<5; k++)
glVertex2f( dataPts[k].x, dataPts[k].y
);
glEnd(); }
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de lignes (exemple)
glEnable(GL_LINE_STIPPL
E);
glLineStripple(1, 0x1C47); //
Ligne en pointillées
linePlot(dataPts);
Les attributs des primitives graphiques
79
glLineStripple(1, 0x00FF); // Ligne en pointillées d’épaisseur 2.0
glLineWidth(2.0);
linePlot(dataPts);
glLineStripple(1, 0x0101); // Ligne en pointillées d’épaisseur 3.0
glLineWidth(3.0);
linePlot(dataPts);
glDisable(GL_LINE_STIPPLE);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de lignes (exemple)
Les attributs des primitives graphiques
80
OpenGL ne considère pas les courbes comme des primitives à part entière, telles
que les lignes et les points. La plus simple thode pour approximer une courbe en
OpenGL est par des petits segments.
Les routines pour les régions remplies sont disponibles pour les polygones convexes
uniquement, via les étapes suivantes:
- Définir un motif de remplissage.
- Appeler la fonction de remplissage de polygones.
- Activer l’option de remplissage d’OpenGL.
- Décrire le polygone à remplir.
Le polygone rempli sera affiché avec sa frontière.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs des régions remplies
Les attributs des primitives graphiques
81
Par défaut, un polygone convexe est affiché comme région remplie
avec les valeurs courantes initialisées pour la couleur. Pour remplir un
polygone en OpenGL, on utilise un masque de taille 32 x 32.
Une valeur de 1 pour un bit indique que le point va être initialisé à la
couleur courante. Une valeur de 0 laisse la couleur inchangée. Le motif
de remplissage est spécifié par des valeurs de type GLubyte OpenGL.
On définit un motif avec des valeurs hexadécimales par la fonction
suivantes:
GLubyte fillPattern[] = {0xff, 0x00, 0xff, 0x00, …};
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs des régions remplies
Les attributs des primitives graphiques
82
Le motif est répliqué sur la fenêtre
entière, commençant par le point
inférieur-gauche de cette dernière. Les
polygones qui sont en intersection avec
les motifs seront remplis:
Une fois le masque initialisé, on peut le
rendre comme le motif de remplissage
courant par la fonction:
glPolygoneStripple(fillPattern);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs des régions remplies
.
Les attributs des primitives graphiques
83
Par la suite, on doit activer les routines de
remplissage avant de spécifier les sommets
des polygones à remplir par le motif
courant. On fait cela grâce à la fonction:
glEnable(GL_POLYGON_STIPPLE);
De manière similaire on désactive le
remplissage par l’appel de fonction:
glDisable(GL_POLYGON_STIPPLE);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs des régions remplies
.
Exemple de remplissage avec
un motif de 3x3
Les attributs des primitives graphiques
84
Une autre méthode pour le remplissage
est l’utilisation des motifs de texture. Ceci
permet de simuler l’apparence des
surfaces (ex. bois, briques, etc.).
Pour ce faire, on affecte des couleurs
différentes aux sommets du polygone.
L’interpolation à l’intérieur du polygone est
ensuite utilisée pour produire des surfaces
avec un bon rendu.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les motifs de texture et d’interpolation
Par exemple, on a:
glShadeModel(GL_SMOOTH
);
glBegin(GL_TRIANGLES);
glColor3f(0.0, 0.0,
1.0); glVertex2i(50, 50);
glColor3f(1.0, 0.0,
0.0); glVertex2i(150, 50);
glColor3f(0.0, 1.0,
0.0); glVertex2i(75, 150);
glEnd();
Les attributs des primitives graphiques
85
Ce mode affiche seulement les contours des polygones. Cette option est
sélectionnée par la fonction:
glPolygoneMode(face, displayMode);
Le paramètre face désigne quelle face doit être affichée en mode contours
seulement. Ce paramètre est assigné l’une des constante suivante:
GL_FRONT_AND_BACK, GL_FRONT et GL_BACK.
Le paramètre displayMode est assigné la valeur GL_LINE pour afficher la face
concernée en mode fil-de-fer. Pour afficher uniquement les sommets des polygones,
on utilise la constante GL_POINT. Une troisième valeur est GL_FILL qui est le
mode par défaut.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Laffichage en mode fil-de-fer (wire-frame)
Les attributs des primitives graphiques
86
Une autre option existe aussi, qui affiche
l’intérieur d’un polygone rempli et son
contour avec une autre couleur ou motif.
Ceci est réalisé en spécifiant le polygone
deux fois: une fois avec le paramètre
displayMode initialisé à la valeur GL_FILL
et ensuite à la valeur GL_LINE (ou
GL_POINT).
Le programme suivant montre un exemple:
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Laffichage en mode fil-de-fer (wire-frame)
glColor3f(0.0, 1.0, 0.0);
// Appeler la fonction de
génération de polygone;
glColor3f(1.0, 0.0, 0.0);
glPolygoneMode(GL_FR
ONT, GL_LINE);
// Appeler la fonction de
génération de polygone
une deuxième fois;
Les attributs des primitives graphiques
87
On peut trouver la valeur courante de n’importe quel paramètre d’état. En utilisant
les fonctions de requêtes de OpenGL. Ces fonctions copient les valeurs spécifiés
dans un tableau.
Pour la valeur courante d’un attribut, on utilise la fonction glGet, par exemple:
glGetBooleanv();
glGetInteger();
glGetFloatv();
glGetDoublev();
Ces fonctions comportent deux arguments: le 1
er
argument est une constante
OpenGL qui identifie un attribut ou une variable d’état. Le 2
e
argument est un
pointeur vers un tableau de données du type indiqué par le nom de la fonction.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de requêtes
Les attributs des primitives graphiques
88
Par exemple, l’appel suivant retrouve les valeurs RGBA sous le type flottant:
glGetFloatv(CL_CURRENT_COLOR, colorValues);
Les valeurs de couleur sont ainsi passées au tableau colorValues. D’autres valeurs de
constantes d’attributs sont:
GL_POINT_SIZE,
GL_LINE_WIDTH,
GL_CURRENT_RASTER_POSITION, etc.
On peut demander combien de bits par pixel que système utilise dans le tampon
frame pour une couleur donnée:
glGetIntegerv(CL_RED_BITS, redBitSize);
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les fonctions de requêtes
Les attributs des primitives graphiques
89
Les attributs peuvent être rattachées dans des groupes d’attributs. Par
exemple, le groupe d’attributs de points contient la taille et les
paramètres d’anti-aliasing. Le groupe d’attributs de lignes contient
l’épaisseur, le motif, etc.
OpenGL contient environ 20 groupes d’attributs et chaque paramètre
dans un groupe peut être sauvegarder ou réinitialisé avec une
fonction. La sauvegarde de tous les paramètres se fait par la fonction:
glPushAttrib(attrGroup);
Le paramètre attrGroup prend la valeur d’une constante OpenGL,
telles que: GL_POINT_BIT, GL_LINE_BIT, etc.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de groupe
Les attributs des primitives graphiques
90
Pour sauvegarder les paramètres de couleur, on utilise la constante:
GL_CURRENT_BIT,
et on sauvegarde tous les paramètres d’état par la constante:
GL_ALL_ATTRB_BITS.
Pour sauvegarder les paramètres pour deux groupes ou plus, on combine leurs
constante avec l’opérateur logique OU, comme illustré dans l’exemple suivant:
glPushAttrib(GL_POPINT_BIT | GL_LINE_BIT | GL_POLYGON_BIT);
Une fois un groupe de paramètres est sauvegardé, on peut réinitialiser toutes les
valeurs dans la pile des attributs par l’appel de fonction:
glPopAttrb();
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
Les attributs de groupe
Les Couleurs OpenGL
API OpenGL
91
- Exemple:
- Dans la production d’un frame dans une animation,
on a besoin d’abord de faire le design et positionner
l’objet sur la scène. Cette étape requiert beaucoup
d’interactivité avec le système. Lutilisation d’une
station interactive dans ce cas, avec un matériel
graphique puissant, serait requise.
- Létape du rendu (c.-à-d. ajout de sources
Programmation 2D/3D:
INF 1483
Le pipeline: modélisation-rendu-animation
Les Couleurs OpenGL
Application OpenGL
92
En utilisant les valeurs de couleur RGB, la couleur du fond de la
fenêtre d’affichage est fixée par la fonction (ici à blanc):
glClearColor(1.0, 1.0, 1.0, 0.0)
Les trois premiers paramètres de la fonction donnent les valeurs de
couleurs des bandes R, G et B (0 pour le noir et 1 pour blanc).
Le 4
e
paramètre de la fonction appelée α (alpha), donne la valeur de
mélange (blending) ou opacité.
La valeur de α détermine la couleur résultant d’un chevauchement de
deux objets:
La valeur α=0 donne un objet transparent.
La valeur α=1 donne un objet opaque.
Programmation 2D/3D:
INF 1483
Les Couleurs OpenGL
Application OpenGL
93
La fonction glClearColor assigne une couleur à la fenêtre, mais elle
n’affiche pas la fenêtre sur l’écran.
Programmation 2D/3D:
INF 1483
Primitive assembly: Suite de la première opération, les vertex sont
transformés à nouveau par la matrice de projection, afin de produire
un repère en 2D pour la fenêtre d'affichage. Ces transformations
génèrent une suite de primitives géométriques simples (points, lignes,
ou triangles).
Pixel transfer operation: Après que tous les pixels soient chargés, ils
subissent des opérations de transformation d'images. Ces données
seront stockées dans la Texture memory, avant d'être utilisé avec les
formes géométriques (comme une texture).
Rasterization: L'objectif de la Rasterization est de convertir toutes les
primitives géométriques et toutes les images en fragment : Un
ensemble d'informations sous la forme d'un tableau (couleur,
profondeur, taille...). Ces fragments seront utilisés pour calculer
l'affichage des pixels de couleurs (finaux) sur l'écran.
Fragment operation: Cette dernière partie est composée de 2 étapes.
Dans un premier temps, nous générons un Texel (qui est une texture)
INTRODUCTION
94
Le pipeline de rendu
L'API OpenGL utilise deux types de primitives :
Les primitives géométriques (ou Vertex): Les points, les lignes,
les triangles...
Les pixels: Les textures, les images...
Pour générer une image à partir de ces primitives, OpenGL utilise
une architecture en Pipeline :
Depuis la réception des données (vertex ou pixels) jusqu'au buffer
d'affichage :
Vertex Data / Pixel Data: Les données géométriques et les
images que nous souhaitons "dessiner" sur le contexte. Les
premières opérations se font sur ces données.
Display List: Les Display List permettent de "compiler" un
ensemble de fonctions OpenGL et de données. Cela a pour but
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
OpenGL est un système de pipeline de rendu graphique à base de rastérisation.
INTRODUCTION
95
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
OpenGL est un système de pipeline de rendu graphique à base de rastérisation.
INTRODUCTION
96
Cette chaîne (ou pipeline) de
production d’image qu'utilise OpenGL
depuis les opérations sur les données
géométriques primitives d’un objet
en passent à travers les opérations de
rastérisation pour devenir des pixels
jusqu'au gestion des textures stockés
dans le tampon (ou framebuffer ) et le
contrôle du moindre pixel pour
produire une image affichables (
rendering ) à l‘écran classifie OpenGL
de système de pipeline graphique
rendu à base de rastérisation.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
OpenGL est un système de pipeline de rendu graphique à base de rastérisation.
INTRODUCTION
97
Le pipeline graphique qu'OpenGL s’ implémente de la façon suivante:
Objet: ensemble de données géométriques primitives ( vertex de points,
lignes et/ou triangles ).
Le programme principale: remplis des buffers de la mémoire géré par
OpenGL avec des vertex arrays (des tableaux de vertex).
Les vertex shaders:
projettent ces vertex dans l'espace écran ("screen space"),
rassemblent les vertex en points, lignes et/ou triangles (ici triangle ) et
enfin
"rastérisent" (pixélisent) en fragments de la taille d'un pixel. Un pixel
est le plus petit élément visible à l’écran.
Les fragments shaders: finalement, assignent à ces fragments (les pixels)
des textures ( couleurs, lumière, etc. ) et sont dessinés sur une tampon de
frames ( frame buffer ). Une tampon de frame est une petite mémoire que
le matériel ( hardware ) manage and feed à l’écran d’affichage.
Les Couleurs OpenGL
Programmation 2D/3D:
INF 1483
OpenGL est un système de pipeline de rendu graphique à base de rastérisation.
Les Couleurs OpenGL
Application OpenGL
98
Effacement de la fenêtre de dessin (viewport)
void glClearDepth(GLclampf depth) ;
Choix de la profondeur d'initialisation du tampon
profondeur
depth: Valeur de remplissage du tampon profondeur
lors d'un effacement par glClear
Programmation 2D/3D:
INF 1483
Contenu
Introduction
Mathématiques
de l’infographie
Notions de
Mathématiques
Transformations
Géométriques
Applications OpenGL
Effets Optiques
Et État du Rendu
Effet de lumière
sur les objets,
rayons lumineux,
camera.
Plaquage des
Textures et
ombrages.
Rendu de volume.
Techniques
d'animation et
simulation 2D/3D
Equations des
mouvements des objets.
Animation:
Temps Réel , a
Frame par Frame.
Applications
OpenGL
Introduction à
l’Infographie
Introduction à
OpenGL
IDE en OpenGL
Programmation 2D/3D: INF 1483
Applications
OpenGL