Enseignant du Cours: DJAFER BADDOU (PhD)

Courriel: djafer.baddou@uqo.ca

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

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

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

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 dé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( )

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

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

Comme cet application va faire une dégradation

des couleurs. Elle va montrer l’étape de

rastérisation dans la pipeline graphique. Le dégradé

est obtenu par le raster au niveau GPU. C’est la

rastérisation.

dans l’application du chapitre 3.

 Un tampon de couleur déjà alloué

 On doit créer un tableau des couleurs des sommets. Le

tableau contient des vecteurs à 4 valeurs, un pour chaque

couleur de sommet..

 le stocker dans un tampon (buffer)

 OpenGL: Dans la fonction make_resources( ) on

ajoute les instruction reliées au sujet.

 WebGL: Dans la fonction make_buffer( ) le tableau

est converti en flottants et stocké dans le tampon,

cas WebGL et on ajoute au return instruction le code

reliés au sujet.

 Ensuite, il est nécessaire d'ajouter le

code recherchant les couleurs dans

l'emplacement de l'attribut, et de

configurer cet attribut pour le

programme shader :

 OpenGL: Dans make_resources( ) on

ajoute les instruction reliées au sujet.

 WebGL: Dans la structure

programInfo on ajoute le code reliés

au sujet.

 Ajouter les instructions dans code des vertex

shader et fragment shader.

 Ajouter les instructions dans rendu( ).

Rastérisation et

Application des Couleurs

aux Sommets

OpenGL version WebGL version

function make_buffer(gl ){

const positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// tableau des positions pour le carré.

const positions = [ 0.5, 0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, ];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions),

gl.STATIC_DRAW);

const elements = [ 0,1 , 2 , 3 , ];

const elementBuffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,elementBuffer);

gl.bufferData(gl.ARRAY_BUFFER, new Uint16Array(elements ),

gl.STATIC_DRAW );

const colors = [ 1.0, 1.0, 1.0, 1.0, /*white */

1.0, 0.0, 0.0, 1.0, /* red */ 0.0, 1.0, 0.0, 1.0, /* green

*/ 0.0, 0.0, 1.0, 1.0, /*blue */ ];

const colorBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);

gl.bufferData( gl.ARRAY_BUFFER,

new Float32Array(colors) , gl.STATIC_DRAW);

return { position: positionBuffer,

color: colorBuffer,

elements: elementBuffer, }; }

programInfo = { program: shaderProgram,

attribLocations: { vertexPosition:

gl.getAttribLocation(shaderProgram,'aVertexPosition'),

vertexColor: gl.getAttribLocation(shaderProgram

, 'aVertexColor'),

}, }; }

static struct { GLuint vertex_buffer, element_buffer , color_buffer ; struct{

GLint position , color ; } attributes;

GLuint vertex_shader, fragment_shader, program; } g_resources;

static GLuint make_buffer( GLenum target,const void *buffer_data,GLsizei buffer_size ){

GLuint buffer ; glGenBuffers(1, &buffer) ; glBindBuffer(target, buffer);

glBufferData(target, buffer_size, buffer_data, GL_STATIC_DRAW); return buffer; }

static const GLfloat g_vertex_buffer_data[] = { -1.0f, -1.0f, 1.0f, -1.0f, -1.0f, 1.0f, 1.0f, 1.0f };

static const GLushort g_element_buffer_data[] = { 0, 1, 2, 3 };

// Now set up the colors for the vertices

static const GLfloat g_color_buffer_data[] =

[1.0f,, 1.0f,, 1.0f,, 1.0f,, /*white */ 1.0f,, 0.0f, 0.0f, 1.0f,, /* red */

0.0f,, 1.0f,, 0.0f, 1.0f,, /*green*/ 0.0f, 0.0f, 1.0f,, 1.0f,, /*blue*/ ];

static int make_resources(void) {

g_resources.vertex_buffer = make_buffer( GL_ARRAY_BUFFER , g_vertex_buffer_data,

sizeof(g_vertex_buffer_data) );

g_resources.element_buffer = make_buffer( GL_ELEMENT_ARRAY_BUFFER ,

g_element_buffer_data, sizeof(g_element_buffer_data) );

g_resources.color_buffer = make_buffer( GL_ARRAY_BUFFER,

g_color_buffer_data, sizeof(g_vertex_color_data) );

g_resources.vertex_shader = make_shader( GL_VERTEX_SHADER , « vsSource.glsl« );

if (g_resources.vertex_shader == 0) return 0;

g_resources.fragment_shader = make_shader( GL_FRAGMENT_SHADER , « fsSource.glsl« );

if (g_resources.fragment_shader == 0) return 0;

g_resources.program = make_program ( g_resources.vertex_shader,g_resources.fragment_shader);

if (g_resources.program == 0) return 0;

g_resources.attributes.position = glGetAttribLocation(g_resources.program , ‘position’);

g_resources.attributes.color =

glGetAttribLocation(g_resources.program , ‘color’);

}

Le Pipeline Graphique make_resources ( ) , Rasterization et render( )

Rastérisation et Couleurs en GL

Comme cet application va faire une dégradation

des couleurs. Elle va montrer l’étape de

rastérisation dans la pipeline graphique. Le dégradé

est obtenu par le raster au niveau GPU. C’est la

rastérisation. dans l’application du chapitre 3.

 Un tampon de couleur déjà alloué

 On doit créer un tableau des couleurs

des sommets. Le tableau contient des

vecteurs à 4 valeurs, un pour chaque

couleur de sommet.

 le stocker dans un tampon (buffer)

 OpenGL: 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

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. C’est 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:

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. C’est 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

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. C’est 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.

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. C’est 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.

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. C’est 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.

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. C’est 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.

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. C’est 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

 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.

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. C’est 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

 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.

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. C’est 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:

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. C’est 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.

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. C’est 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.

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. C’est 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.

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. C’est 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é.

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. C’est 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.

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. C’est 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 colorié,

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.

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. C’est 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 j’ai:

 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.

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. C’est 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.

 C’est 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.

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. C’est 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].

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. C’est 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.

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. C’est 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.

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. C’est 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.).

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. C’est 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.

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. C’est 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.

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. C’est 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

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. C’est 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

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. C’est 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,.

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. C’est 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.

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. C’est 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.

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. C’est 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.

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. C’est 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").

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. C’est 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").

Rastérisation et Couleurs en GL

Le Pipeline Graphique

Le Pipeline Graphique make_resources ( ) , Rasterization et render( )

Une fois que les shaders sont dé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

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.

Une fois que les shaders sont dé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

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

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

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

 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 dé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

Programmation 2D/3D

Rastérisation et Couleurs en GL

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

 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

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

• 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

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

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

+ D

, S

+ D

, S

+ D

)

Avec:

(R

) et (R

)

sont les couleurs source et

destination respectivement.

(S

) et (D

)

sont les facteurs de mélange des

sources et destination,

respectivement.

Les attributs des primitives graphiques

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

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

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

 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

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

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

 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

 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

 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)

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

Il existe deux fonctions de

OpenGL pour définir une forme

ou un motif avec un tableau 2D

(rectangle).

1. glBitmap(width, height, x

, y

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

, y

, xOffset, yOffset, bitShape);

 Les paramètres width et height définissent les dimensions du

tableau. À chaque élément du paramètre bitShape est assigné la

valeur 1 ou 0 (bitmap activé ou non-activé sur le pixel).

 Les paramètres x

et y

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

et y

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

 Il existe deux fonctions de

OpenGL pour définir une

forme ou un motif avec un

tableau 2D (rectangle).

1. glBitmap(width, height,

, y

, 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).

L’exemple suivant montre l’ utilisation

Les primitives de OpenGL

 Il existe deux fonctions de

OpenGL pour définir une

forme ou un motif avec un

tableau 2D (rectangle).

1. glBitmap(width, height,

, y

, 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

// 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

L’exemple 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

Un motif Bitmap

dé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

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

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

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 dé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

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

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 où 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);

L’exécution d’une liste

listID se fait par l’appel:

glCallList(listID );

Les primitives de OpenGL

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

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 dé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

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

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

dé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

 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);

 L’option 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

 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

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

 OpenGL ne considère pas les courbes comme des primitives à part entière, telles

que les lignes et les points. La plus simple mé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

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

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

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

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

 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

L’affichage en mode fil-de-fer (wire-frame)

Les attributs des primitives graphiques

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

L’affichage 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

 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

argument est une constante

OpenGL qui identifie un attribut ou une variable d’état. Le 2

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

 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

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

 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

- 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. L’utilisation 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

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

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

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

 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

Les Couleurs OpenGL

Programmation 2D/3D:

INF 1483

OpenGL est un système de pipeline de rendu graphique à base de rastérisation.

INTRODUCTION

• 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

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

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