Tutor: DJAFER BADDOU (PhD)

email: dbaddou@gmail.com

Computer Graphics with GL

Préparation GL

Plan de Projection

Introduction à

l’Infographie

Introduction à

OpenGL/ WebGL

Introduction

Contenu

Rastérisation et

Couleurs en GL

Notion sur

les Couleurs

Plaquage des

Texture en GL

Attributes

Colorage de la

Scène

Optique et

Infographie

Illuminée la

Scène

Phong Shading

Model WebGL

Transformations

Géométriques

Notions

Mathématiques

Pipeline de GL

Revisited

Les Mathématiques

et l’Infographie

GL Buffers

Attributes

Le Cours

Attributes and Buffers

The first step of the rendering pipeline is to fetch

application provided data from one or multiple places

(think of array buffers) and pass them as attributes

into the vertex shader stage. This fetch can be

controlled by an index and N attributes will get pulled

from M arrays. In this chapter, I will describe data

attributes and I will introduce buffers.

INTRODUCTION

Dans ce cours, je vais partir du principe que:

1. vous êtes développeur

2. vous connaissez les langages: C/C++ ou

Javascript, ( sinon voir les rappels de C/C++ et

de JavaScript dans le chapitre 2

3. Mais vous n'avez pas nécessairement utilisé

OpenGL, WebGL ou fait de la programmation

graphique avant.

4. Connaitre au moins quelques concepts

d'algèbre de base et de géométrie vous

aideront beaucoup.

5. Je vais utiliser OpenGL 2.0, et éviter de parler

des fonctions de l'API qui ont dépréciées ou

supprimées dans OpenGL 3, WebGL ou

OpenGL ES.

6. je vais discuter quelques nouvelles possibilités

d'OpenGL 3 et 4, après que nous ayons traité

les bases.

GL Buffers Attributes

Sommaire

un simple programme qui dessine un

objet sur l'écran en mettant le pipeline

graphique en pratique. Les vertex et

éléments arrays

 Uniform state et couleurs (prochain

chapitres)

 Les vertex shaders

 Assemblage des triangles

 La rastérisation (ou pixellisation)

 Le fragment shader

 Les framebuffers, test, et fusion

 Conclusion

INTRODUCTION

Le Pipeline

Graphique

les principaux

concepts.

expliquer le

fonctionnement d'un

pipeline graphique

et le cheminement

des données dans un

rendu.

GL Buffers Attributes

on va implementer le modèle de la camera synthétique selon les

hypotheses discutées :

 Choisir librairies: OpenGL WebGL.

 Implémenter un Contexte qui va représenter le plan de

projection a deux dimension ou la scène sera projetée.

 All code below will be independent of your choice of OpenGL

extensions.

Le Code a droite pour OpenGL et WebGL va être utilisé jusqu’a la

fin du cours. Les fonctions make_resources() et render() vont être

implémenter au fur et a mesure qu’on avance dans le cours.

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

 Etc…

Plan

Exemples de spécifications API 3D

 Le modèle de caméra synthétique est la base de plusieurs API

populaires (OpenGL, DirectX, etc.) . Les fonctions implantées dans

ces API incluent les spécifications suivantes:

 des objets: Un objet est défini à l’aide d’ensemble de sommets

(vertices). Les API peuvent aussi contenir des primitives rapide

pour l’affichage (ex. lignes, polygones, texte);

 de l’observateur (camera): Pour une bonne flexibilité de la

camera on a 4 types de spécifications:

1. Sa position donnée par le Centre de Projection (GOP) ;

2. Son orientation par rapport au system de coordonnées de

la camera dont l’origine est GOP;

3. Sa longueur focale pour déterminer la portion visible de la

scène projetée sur le plan de projection;

4. Son plan de projection donnée par son hauteur (h) et sa

largeur (w);

 des sources lumineuses définir pour chaque source sa position,

sa puissance, sa couleur et sa direction;

 de la propriété du matériel qui est une caractéristique des

objets en présence de la lumière.

Interface de Programmation d’Applications (API)

IDE pour OpenGL

Triangle

Spécifications de la caméra

Sommaire

Mettre le pipeline en pratique:

 Les vertex et éléments arrays

 Uniform state et couleurs

 Les vertex shaders

 Assemblage des triangles

 La rastérisation (ou pixellisation)

 Le fragment shader

 Les framebuffers, test, et fusion

 Conclusion

INTRODUCTION

Le Pipeline Graphique

les principaux concepts.

expliquer le

fonctionnement d'un

pipeline graphique et le

cheminement des

données dans un rendu.

GL Buffers Attributes

on va implementer le modèle de la camera synthétique selon les

hypotheses discutées :

 Choisir librairies: OpenGL WebGL.

 Implémenter un Contexte qui va représenter le plan de

projection a deux dimension ou la scène sera projetée.

 All code below will be independent of your choice of OpenGL

extensions.

Le Code a droite pour OpenGL et WebGL va être utilisé jusqu’a la

fin du cours. Les fonctions make_resources() et render() vont être

implémenter au fur et a mesure qu’on avance dans le cours.

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

 Etc…

Plan

OpenGL et GLUT

WebGL

./js/ WebGLMain.js

function webGLStart() {

const canvas =

document.querySelector("#glCanvas")

;

// var canvas =

document.getElementById('#glCanvas

');

// Initialisation du contexte WebGL

initWebGL(canvas);

render( ) ;

make_resources( ) ;

}

int main(int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow("Hello OpenGL");

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glewInit();

if (!GLEW_VERSION_2_0) {

fprintf(stderr, "OpenGL 2.0 not available\n");

return 1; }

if (!make_resources()) {fprintf(stderr, "Failed to

load resources\n");

return 1; }

glutMainLoop();

return 0;

}

nomFichier.htm

<!doctype html>

<title>Hello WebGL</title>

href="./css/webgl.css"

type="text/css">

</head><body>

<canvas id="glCanvas"

width="640" height="480">

</canvas> </body>

<script src= “

./js/WebGLMain.js"> </script>

</script>

</html>

Le Pipeline Graphique make_resources ( ) , render( )

Dans le chapiter 2 on a :

 Choisi librairies: OpenGL

WebGL.

 Implémentée:

1. le contexte

2. le plan de projection

a deux dimension ou

la scène sera projetée

Du modèle de la camera

synthétique selon les

hypotheses discutées dans

le chapitre 1

 Le Code a droite pour

OpenGL et WebGL va

être utilisé jusqu’a la fin

du cours.

Plan de Travail du Modèle

de la Camera Synthétique

 OpenGL: Si, make_resources ( ) nos ressources sont correctement

chargé, glutMainLoop prend le relais. Il affiche la fenêtre, recevoir les

évents de l'UI, et appel les fonctions que l'on a configuré en réponse à

ses évents (les callbacks ici render()). glutMainLoop fermera aussi le

programme quand on le quitte. Le return 0 supprime simplement les

avertissements du compilateur et il n'est, de toute façon, jamais

réellement atteint.

GL Buffers Attributes

OpenGL et GLUT

WebGL

./js/ WebGLCanvasTest.js

function make_resources( )

{ make_shader();

//make_buffer();

}

function render( ){// Définir

la couleur d'effacement noir,

et opaque

gl.clearColor(0.0, 0.0, 0.0,

1.0);

// Effacer le tampon de

couleur avec la couleur

d'effacement spécifiée

gl.clear(gl.COLOR_BUFFER_B

IT|gl.DEPTH_BUFFER_BIT);

gl.enable(gl.DEPTH_TEST);

drawScene();

}

Le Pipeline Graphique make_resources ( ) , render( )

#include <stdlib.h>

#include <GL/glew.h>

#ifdef __APPLE__

# include <GLUT/glut.h>

#else

# include <GL/glut.h>

#endif

static void render(void){

// Définir la couleur

d'effacement noir, et opaque

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

// Effacer le tampon de couleur

avec la couleur d'effacement

spécifiée

glClear(GL_COLOR_BUFFER_BIT);

glutSwapBuffers();

}

./js/ WebGLCanvasTest.js

var gl;

// Initialize the GL context

function initWebGL(canvas) {

gl = null;

try { // standard context. If it fails,

fallback to experimental.

gl = canvas.getContext( “webgl“)

canvas.getContext("experimental

-webgl");

}catch(e) { }

// If we don't have a GL context,

give up now

if (!gl) {

alert(" navigateur ou machine

ne supporte pas WebGL..");

return gl;

}

// Continuer si WebGL est

disponible

return gl;

}

static int

make_resources(void ) {

return 1;

}

GL Buffers Attributes

Plan de Travail du Modèle

de la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même programme.

On est prêt:

1. à remplir la fonction

make_resources( ) avec des

vertex et

2. à projeter (dessiner) la

scène avec la fonction

render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

introduit les buffers et

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.

 Etc…

1. à remplir la

fonction

make_resources( )

avec des vertex

etc..

2. Déjà fait avec les

shaders

Triangle, Vertex et Attributs

 Bien que les GPU

modernes puisse

faire toute sorte

d'effets, les

triangles restent

ceux avec quoi

ils travaillent.

 Toujours, depuis

les premier jours

de la 3d temps

réel, le triangle a

été le "pinceaux"

avec lequel les

scènes furent

dessinées.

Le Pipeline Graphique make_resources ( ) , render( )

 Une fois créer un contexte OpenGL ou WebGL, on peut

commencer à écrire des codes dans les deux fonctions:

1. make_resources( ) pour dessiner un objet, dans le buffer et

2. rendre( ) pour rendre ( projeter ) l’objet sur le plan de

projection.

3. L’objet est un simple carré 2D

 Une tache de rendu (un rendering job) commence sa journée

dans le pipeline sous la forme de groupes ("sets") de

sommets (vertices) dans un tampon ( vertex buffer) .

 Chaque groupe est remplis avec des tableaux (arrays)

d'attributs par vertex (vertex attributes). Pour cela on peut

construire des tableaux d’éléments (element arrays)

GL Buffers Attributes

Plan de Travail du Modèle

de la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même programme.

On est prêt:

1. à remplir la fonction

make_resources( ) avec des

vertex et

2. à projeter (dessiner) la scène

avec la fonction render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

introduit les buffers et 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.

 Etc…

Le Pipeline Graphique

 Le programme principal ou l’application qui réside

dans le CPU délègue les taches de projection, et

assignement des couleurs à des petits programmes

appelés shaders. Il envoie ces shaders au GPU. Au

mois deux types de shaders:

1. vertex shader pour les étapes de projection plan

de projection et

2. fragment shader pour l’assignation d’une couleur

 Les taches d’assemblement, de rastérisation entre la

projection et l’assignement des couleurs est délégué

au raster dans le GPU.

 Regardons chaque étape plus en détail...

Le pipeline graphique qu'OpenGL/WebGL

implémente ressemble à ça:

1. Pendant que le plan de projection est dans le

framebuffer, le programme principale

remplis des buffers (tampons) de la mémoire

géré par OpenGL/WebGL avec des vertex

arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans le plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment = pixel).

3. Les fragments dans le framebuffer assignés

des couleurs par des fragments shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Plan de Travail du Modèle

de la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même programme.

On est prêt:

1. à remplir la fonction

make_resources( ) avec:

1. des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

introduit les textures

OpenGL.

Vertex et Éléments Arrays Ajout du code struct

 Objects in GL are created from a primitives which are points ,

lines or triangles.

 There are two ways to create a rectangle from 2 triangles

with:

1. One buffer filled of 6 vertices. 3 vertices each triangle

x1, y1, // vertex 0

x2, y1, // vertex 1

x1, y2, // vertex 2

x1, y2, // vertex 3

x2, y1, // vertex 4

x2, y2, // vertex 5

The basic drawing function for a buffer filled with 6 vertices,

3 for each triangle is gl.drawArrays( ) in WebGL. and

Le pipeline graphique qu'OpenGL

implémente ressemble à ça:

1. Le programme principale remplis

des tampons buffers de la

mémoire géré par OpenGL/

WebGL avec des vertex arrays

(des tableaux de vertex).

créant des "objets" de différents

types.

avant de dessiner quoi que ce soit,

on a besoin d'envoyer des

données à OpenGL en créant des

"objets" de différents types

exemple une structure.

les "objets" qu’on a besoin de

configurer est une structure

globale g_ressources.

g_ressources est la manière la plus

simple de partager des données

entre notre code d'initialisation

et notre contexte GLUT.

GL Buffers Attributes

Plan de Travail du Modèle

de la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même programme.

On est prêt:

1. à remplir la fonction

make_resources( ) avec des

vertex et

2. à projeter (dessiner) la scène

avec la fonction render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

introduit les buffers et 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.

 Etc.…

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Vertex et Éléments Arrays Ajout du code struct

 Objects in GL are created from a primitives which are points ,

lines or triangles.

 There are two ways to create a rectangle from 2 triangles with:

2. Two buffers filled with:

1. one buffer filled with 4 vertices

x1, y1, // vertex 0

x2, y1, // vertex 1

x1, y2, // vertex 2

x2, y2, // vertex 3

2. Second buffer filled with 4 indices

0, 1, 2, // first triangle

2, 1, 3, // second triangle

the basic drawing function for 2 buffers filled one with 4

vertices and the other filled with 4 indices for the 2 triangles is

gl.drawElements( ) in WebGL.

Le pipeline graphique qu'OpenGL

implémente ressemble à ça:

1. Le programme principale remplis

des tampons buffers de la

mémoire géré par OpenGL/

WebGL avec des vertex arrays

(des tableaux de vertex).

créant des "objets" de différents

types.

avant de dessiner quoi que ce soit,

on a besoin d'envoyer des

données à OpenGL en créant des

"objets" de différents types

exemple une structure.

les "objets" qu’on a besoin de

configurer est une structure

globale g_ressources.

g_ressources est la manière la plus

simple de partager des données

entre notre code d'initialisation

et notre contexte GLUT.

GL Buffers Attributes

Plan de Travail du Modèle

de la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même programme.

On est prêt:

1. à remplir la fonction

make_resources( ) avec des

vertex et

2. à projeter (dessiner) la scène

avec la fonction render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

introduit les buffers et 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.

 Etc.…

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Vertex et Éléments Arrays Ajout du code struct

 La structure g_ressources contient

deux variables GLuint utilisées pour

conserver le nom des vertex buffer

et élément buffer.

 OpenGL utilise des valeurs GLunint

pour la manipulation des objets.

 On a déjà ajouté les variables

shaders dans le 3eme. Chapitre.

 on ajoutera des variables à la

structure au besoin comme des

textures qu’on codera dans la

prochaine partie. On a:

1. Le vertex array contiendra quatre

vertices, que le vertex shader

assignera aux coins de la fenêtre.

2. L'élément array assemblera ces

quatre vertices en deux triangles,

se qui nous donnera un rectangle

qui viendra couvrir notre fenêtre.

Le pipeline graphique qu'OpenGL

implémente ressemble à ça:

1. Le programme principale remplis

des tampons buffers de la

mémoire géré par OpenGL/

WebGL avec des vertex arrays

(des tableaux de vertex).

créant des "objets" de différents

types.

avant de dessiner quoi que ce soit,

on a besoin d'envoyer des

données à OpenGL en créant des

"objets" de différents types

exemple une structure.

les "objets" qu’on a besoin de

configurer est une structure

globale g_ressources.

g_ressources est la manière la plus

simple de partager des données

entre notre code d'initialisation

et notre contexte GLUT.

static struct {

/* fields for shader objects*/

GLuint vertex_shader, fragment_shader,

program;

GLuint vertex_buffer, element_buffer;

struct{ GLint position ; } attributes;

/* fields for texture... */

//GLuint textures[2];

} g_resources;

GL Buffers Attributes

Plan de Travail du Modèle

de la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même programme.

On est prêt:

1. à remplir la fonction

make_resources( ) avec des

vertex et

2. à projeter (dessiner) la scène

avec la fonction render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

introduit les buffers et 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.

 Etc.…

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Le modèle d'objet OpenGL/WebGL Buffers

OpenGL

make_buffer( )

 En utilisant une fonction make_buffer( ) pour créer

plus d'objets 3D appelés tampons (buffers), et plus

complexes.

 Ces objets contiendront les positons de ses sommets

(vertices )et y placer les positions des sommets.

 La convention d'OpenGL pour manipuler les objets

est un peut inhabituel.

 Rappeler, ses noms sont des variables de type

GLuint.

 N'importe quelles données fournit ou associé à

l'objet est géré en interne par OpenGL.

 Pour stocker les positions des sommets (vertices).

1. la fonction make_buffer() commence par appeler:

 cas WebGL la méthode createBuffer( ) de

contexte gl pour obtenir un objet tampon (buffer)

 cas OpenGL, on crée des buffers en générant un

ou plusieurs noms d'objet. Pour cela, on utilise

une fonction glGen*s (ex: glGenBuffers,

glGenTextures, ...).

Le pipeline graphique qu'OpenGL/WebGL

implémente ressemble à ça:

1. Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers

(tampons) de la mémoire géré par

OpenGL/WebGL avec des vertex

arrays (des tableaux de vertex). Pour

cela on crée des "objets" de

différents types. On a:

 les "objets" qu’on a besoin de

configurer est une structure globale

g_ressources.

2. buffer objects: on fabrique des objets

de type buffer qui contiendront ces

arrays dans la mémoire du GPU.

3. Le vertex array contiendra quatre

vertices, que le vertex shader

assignera aux coins de la fenêtre.

4. L'élément array assemblera ces

quatre vertices en deux triangles, se

qui nous donnera un rectangle qui

viendra couvrir notre fenêtre.

//Stocker nos données

static struct {

GLuint vertex_buffer,

element_buffer;

struct{ GLint position ; }

attributes;

//GLuint textures[2];

/* fields for shader objects*/

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;

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

function make_buffer(gl ) {

const positionBuffer =

gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER,

positionBuffer);

// Créer maintenant un tableau

des positions pour le carré.

const positions = [ 0.5, 0.5, -

0.5, 0.5, 0.5, -0.5, -0.5, -0.5,

];

// Passer maintenant la liste

des positions à WebGL pour

construire la forme. Nous

faisons cela en créant un

Float32Array à partir du

tableau JavaScript,

// puis en l'utilisant pour

remplir le tampon en cours.

gl.bufferData(gl.ARRAY_BUFFER,

new Float32Array(positions),

gl.STATIC_DRAW);

return {

position: positionBuffer,

};

}

WebGL

make_buffer( )

Le modèle d'objet OpenGL/WebGL Buffers

OpenGL

make_buffer( )

Pour stocker les positions des sommets

(vertices).

2. Pour manipuler un objet, d'abord lié (bound ) son

nom à une cible, ex: ARRAY_BUFFER, définie

(target binding), en appelant:

 Cas OpenGL la fonction glBind* correspondante

(exemple: glBindBuffer, glBindTexture, etc...).

 Cas WebGL la méthode bindBuffer() du contexte

3. Ensuite, pour définir les positions des sommets

de l'objet, on passe la cible , ex: ARRAY_BUFFER,

à une fonction en tant qu'argument:

 Cas OpenGL glBufferData(GLenum target , const

void *buffer_data , GLsizei buffer_size)

 Cas WebGL à la méthode bufferData( ) de

l'objet gl

 ce qui set ses propriétés ou charge des données

dans l'objet attaché.

 Une fois que cela est fait, on crée des tableaux

(arrays ) contenant la position de chaque sommet

du carré 2D. Déjà fait pour WebGL.

Le pipeline graphique qu'OpenGL/WebGL

implémente ressemble à ça:

1. Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers

(tampons) de la mémoire géré par

OpenGL/WebGL avec des vertex

arrays (des tableaux de vertex). Pour

cela on crée des "objets" de

différents types. On a:

 les "objets" qu’on a besoin de

configurer est une structure globale

g_ressources.

2. buffer objects: on fabrique des objets

de type buffer qui contiendront ces

arrays dans la mémoire du GPU.

3. Le vertex array contiendra quatre

vertices, que le vertex shader

assignera aux coins de la fenêtre.

4. L'élément array assemblera ces

quatre vertices en deux triangles, se

qui nous donnera un rectangle qui

viendra couvrir notre fenêtre.

//Stocker nos données

static struct {

GLuint vertex_buffer,

element_buffer;

struct{ GLint position ; } attributes;

//GLuint textures[2];

/* fields for shader objects*/

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;

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

function make_buffer(gl ) {

const positionBuffer =

gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUF

FER, positionBuffer);

// Créer maintenant un

tableau des positions

pour le carré.

const positions = [ 0.5,

0.5, -0.5, 0.5, 0.5, -0.5, -

0.5, -0.5, ];

// Passer maintenant la

liste des positions à

WebGL pour construire

la forme. Nous faisons

cela en créant un

Float32Array à partir du

tableau JavaScript,

// puis en l'utilisant pour

remplir le tampon en

cours.

gl.bufferData(gl.ARRAY_BUF

FER, new

Float32Array(positions),

gl.STATIC_DRAW);

return {

position: positionBuffer,

};

WebGL

make_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 };

static struct {

GLuint vertex_buffer, element_buffer;

struct{ GLint position ; } attributes;

} 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;

}

3. Le vertex array : On

défini les coins du

rectangle en "set" de

quatre vecteurs,

composé de deux

composantes chacun.

4. L’élément array est un

tableau de GLushorts

pour définir l'ordre

des index des vertex de

manière à ce qu'ils

puissent être assemblé

en rectangle sous la

forme de "triangle

strip".

GL Buffers Attributes

Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers (tampons)

de la mémoire géré par OpenGL/WebGL

avec des vertex arrays (des tableaux de

vertex). Pour cela on crée des "objets" de

différents types. On a:

avant de dessiner quoi que ce soit, on a

besoin d'envoyer des données à

OpenGL en créant des "objets" de

différents types

 structure globale g_ressources:

contient deux variables GLuint pour

conserver des vertex buffer et

élément buffer.

 buffer objects: on fabrique des objets

de type buffer qui contiendront ces

arrays dans la mémoire du GPU

make_buffer ( ).

3. Le vertex array a 4 sommets, le vertex

shader assignera a la fenêtre. WebGL

done

4. L'élément array assemble les 4 vertices

en deux triangles, qui dessine un

rectangle sur la fenêtre.

Le Pipeline Graphique make_resources ( ) , render( )

Objets Buffer et Vertex

Ajout du Vertex et Élément Arrays

Le Pipeline Graphique

Objets Buffer : Vertex

static struct { GLuint vertex_buffer , element_buffer; struct{ GLint position ; } attributes; }

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 };

static int make_resources(void) { g_resources.program = make_program ( ) // done ch. 3

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 textures , ... */ }

Les buffers sont des pointeurs vers la mémoire OpenGL utilisés pour stocker:

1-- des vertex arrays (en utilisant la cible GL_ARRAY_BUFFER) et

2-- des éléments array (en utilisant la cible GL_ELEMENT_ARRAY_BUFFER)

Les buffers de vertex array et d’élément array utiliseront le "hint" (l'intention) GL_*_DRAW.

Le mot STATIC indique et DRAW indique lire le buffer uniquement depuis le GPU.

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

on a besoin d'envoyer des

données à OpenGL en

créant des "objets" de

différents types

 structure g_ressources:

 Le vertex array.

 L’élément array

 buffer objects

1. Le programme principale

remplis des buffers de la

mémoire géré par

OpenGL/ WebGL avec

des "objets" au dessus

 make_ressources( ) doit

être implémentée on fait

appel à make_buffer( )

qui allouera et rempliera

nos buffers

La prochaine fois, les

textures avant de

dessiner quoi que ce soit,

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec des

vertex et les buffers

2. on va configurer le buffer et

les shaders.

3. à projeter (dessiner) la

scène avec la fonction

render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

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

Ajout du codes dans make_resources ( )

Objets Buffer OpenGL Ajout du codes dans make_resources ( )

static struct { GLuint vertex_buffer , element_buffer; struct{ GLint position ; } attributes;}

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 };

static int make_resources(void) { g_resources.program = make_program ( ) // done ch. 3

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 textures , ... */ }

Les buffers sont des pointeurs vers la mémoire OpenGL utilisés pour stocker:

1-- des vertex arrays (en utilisant la cible GL_ARRAY_BUFFER) et

2-- des éléments array (en utilisant la cible GL_ELEMENT_ARRAY_BUFFER)

Les buffers de vertex array et d’élément array utiliseront le "hint" (l'intention) GL_*_DRAW.

Le mot STATIC indique et DRAW indique lire le buffer uniquement depuis le GPU.

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

on a besoin d'envoyer des

données à OpenGL en

créant des "objets" de

différents types

 structure g_ressources:

 Le vertex array .

 L’élément array

 buffer objects

1. Le programme principale

remplis des buffers de la

mémoire géré par

OpenGL/ WebGL avec

des "objets" au dessus

 make_ressources( ) doit

être implémentée on fait

appel à:

 make_buffer( ) qui

allouera et rempliera

nos buffers

La prochaine fois, les textures

avant de dessiner quoi que ce

soit,

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

 à remplir la fonction

make_resources( ) avec

des vertex et les buffers

2. on va configurer le buffer

et les shaders.

3. à projeter (dessiner) la

scène avec la fonction

render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

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

WebGL Version Buffer object Ajout du codes dans make_resources ( )

function make_buffer(gl) {

const positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// Créer maintenant un tableau des positions

pour le carré.

const positions = [ 0.5, 0.5, -0.5, 0.5, 0.5, -

0.5, -0.5, -0.5, ];

// Passer maintenant la liste des positions à

WebGL pour construire la forme. Nous

faisons cela en créant un Float32Array à

partir du tableau JavaScript,

// puis en l'utilisant pour remplir le tampon en

cours.

gl.bufferData(gl.ARRAY_BUFFER, new

Float32Array(positions), gl.STATIC_DRAW);

return {

position: positionBuffer,

};

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

on a besoin d'envoyer des

données à OpenGL/

WebGL en créant des

"objets" de différents

types

× structure g_ressources:

 Le vertex array .

× L’élément array

 buffer objects

1. Le programme principale

remplis des buffers de la

mémoire géré par

OpenGL/ WebGL avec

des "objets" au dessus

 make_ressources( ) doit

être implémentée on fait

appel à:

 make_buffer( ) qui

allouera et rempliera

nos buffers et

 programInfo?

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

 à remplir la fonction

make_resources( ) avec

des vertex et les buffers

2. on va configurer le buffer

et les shaders.

3. à projeter (dessiner) la

scène avec la fonction

render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

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

function make_resources( gl ) {

/* fields for shader objects*/

shaderProgram = make_shader(gl ); //is done in chap 3

//buffers fields

buffers = make_buffer(gl);

/* make textures , ... */

programInfo = {

program: shaderProgram,

};

}

Les buffers sont des pointeurs vers la mémoire WebGL

utilisés pour stocker:

 des vertex arrays (en utilisant la cible

GL_ARRAY_BUFFER).

Les buffers de vertex array utilisera le "hint" (l'intention)

GL_*_DRAW.

Le mot STATIC indique et DRAW indique lire le buffer

uniquement depuis le GPU.

make_resources ( ) OpenGL vs WebGL

static struct {

GLuint vertex_buffer,

element_buffer;

struct{ GLint position ; }

attributes;

/* fields for shader objects. */

} 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 };

static int

make_resources(void) {

/* Done for shaders */

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_BUFF

ER , g_element_buffer_data,

sizeof(g_element_buffer_da

ta) );

}

function make_buffer() { // or function

make_buffer(gl) {

// Créer un tampon des positions pour

le carré.

const positionBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER,

positionBuffer);

const positions = [ { 1.0, 1.0, 0.0 }, { -

1.0, 1.0, 0.0 }, { 1.0, -1.0, 0.0 }, { -

1.0, -1.0, 0.0 } ];

gl.bufferData(gl.ARRAY_BUFFER, new

Float32Array(positions),

gl.STATIC_DRAW);

return { position: positionBuffer, };

}

function make_resources( ) {

/* Done for shaders */

buffers = make_buffer(gl);

/* make textures , */

}

GL Buffers Attributes

on a besoin d'envoyer des

données à OpenGL/

WebGL en créant des

"objets" de différents

types

× structure g_ressources:

 Le vertex array .

× L’élément array

 buffer objects

1. Le programme principale

remplis des buffers de la

mémoire géré par

OpenGL/ WebGL avec

des "objets" au dessus

 make_ressources( ) doit

être implémentée on fait

appel à:

 make_buffer( ) qui

allouera et rempliera

nos buffers

La prochaine fois, les textures

avant de dessiner quoi que ce

soit,

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

 à remplir la fonction

make_resources( ) avec

des vertex et les buffers

2. on va configurer le buffer

et les shaders.

3. à projeter (dessiner) la

scène avec la fonction

render( ).

 au fur et à mesure qu’on

avance dans le cours.

 Les prochains chapitres, on

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

Le Pipeline Graphique make_resources ( ) , render( )

Objets Buffer

La Fonction bufferData( )

OpenGL:

glBufferData(GL_ARRAY_BUFFER, buffer_size, g_vertex_buffer, GL_STATIC_DRAW);

glBufferData(GL_ELEMENT_ARRAY_BUFFER , buffer_size, g_element_buffer_data, GL_STATIC_DRAW);

La fonction glBufferData considère vos

variables de la même façon que memcpy.

la structure des arrays sera précisée à

OpenGL qu'une fois qu'on s’en servira

pour le rendu. Ceci permet aux buffers de

stocker des vertex attributes (et autres

données) dans n'importe quel format, ou

bien d'envoyer ces données d'une façon

différente aux render jobs.

buffers peuvent aussi être "hinted" en:

DYNAMIC: Qui indique qu’on compte

écrire dans le buffer fréquemment.

STREAM: régulièrement remplacer

entièrement le contenu du buffer.

DRAW indique qu’on compte lire le buffer

uniquement depuis le GPU.

Les alternatives à DRAW sont:

READ, qui défini un buffer qui sera

principalement lu par le CPU.

COPY, qui indique que le buffer sera un

"intermédiaire" entre le CPU et le GPU et

qu'aucune préférence n'est défini

On défini les coins de notre rectangle en tant que "set" de quatre vecteurs, composé de deux

composant chacun.

Notre élément array est également simple, un tableau de GLushorts servant à définir l'ordre des

index des vertex de manière à ce qu'ils puissent être assemblé en rectangle sous la forme de

"triangle strip« .

Sur les implémentations OpenGL standard, un élément array peut être de type:

GLubyte (8bits), GLushort (16bits) ou GLuint (32bits);

Pour OpenGL ES, seul GLubyte et GLushort peuvent être utilisés.

WebGL:

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

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Les buffers sont des pointeurs vers la mémoire OpenGL utilisés pour stocker:

1-- des vertex arrays (en utilisant la cible GL_ARRAY_BUFFER) et

2-- des éléments array (en utilisant la cible GL_ELEMENT_ARRAY_BUFFER)

Les buffers de vertex array et d’élément array utiliseront le "hint" (l'intention) GL_*_DRAW.

Le mot STATIC indique et DRAW indique lire le buffer uniquement depuis le GPU.

Programme Source des Shaders

Un shader est un programme,

écrit en OpenGL Shading

Language (GLSL), un langage

qui ressemble au langage C.

on passe le texte du code

source à OpenGL / WebGL 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.

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

GL Buffers Attributes

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans le

framebuffer, le programme principale remplis des

buffers (tampons) de la mémoire géré par

OpenGL/WebGL avec des vertex arrays (des tableaux

de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les vertex

shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la taille d'un

pixel (en gros, fragment = pixel).

3. Les fragments dans le framebuffer assignés des

couleurs par des fragments shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée on fait

appel à:

 make_buffer( ) qui allouera et rempliera nos

buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

Ces deux programmes shaders utilise les

données stockées dans les buffers par

make_buffer( ), et génère les données

(les positions des pixels et leurs couleurs)

pour un rendu des pixels à l'écran.

un coup d'œil rapide aux codes sources:

Variables and Types

All variables and functions must be

declared before being used.

Identifiers: are variable and function

names.

Types : There are no default types.

All variable and function declarations

must have a declared type, and

optionally qualifiers.

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.

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers (tampons)

de la mémoire géré par OpenGL/WebGL

avec des vertex arrays (des tableaux de

vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par

les vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Variables and Types

The OpenGL ES Shading Language

is type safe. There are no implicit

conversions between types

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.

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Variables and Types

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.

Attributes Varying Storage Qualifiers

Variable declarations may have a

storage qualifier, specified in front of

the type. These are summarized as:

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Variables and Types.

Attributes Varying Storage Qualifiers

These are summarized as:

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 Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Variables and Types.

Attributes Varying Storage Qualifiers

These are summarized as:

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.

attribute: linkage between a vertex

shader and OpenGL for per-vertex data.

Ex: aVertexPosition

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Attributes Varying Storage Qualifiers

These are summarized as:

Le shader de sommet (vertex)

Le shader de sommet reçoit des valeurs

de position 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.

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Attributes Varying Storage Qualifiers

These are summarized as:

Le shader de sommet (vertex)

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.

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Attributes Varying Storage Qualifiers

These are summarized as:

Le shader de sommet (vertex)

The shader first assigns the vertex's

screen space position to the

predefined varying variable

gl_Position, that GLSL provides for

the purpose.

Finally note both codes are strings

between quotes ` `.

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Attributes Varying Storage Qualifiers

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.

GL Buffers Attributes

Programme Source des Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

Le Pipeline Graphique make_resources ( ) , render( )

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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

Now we need to code how a vertex

shader communicates with the

surrounding graphics pipeline using:

 specially-declared global

variables in the GLSL program.

 Its inputs come from:

1- attribute variables, which

supply per-vertex attributes from

for instance: the vertex array, and

2- uniform variables, which

supply values from the uniform

state. See next chapters

 The shader assigns its per-vertex

outputs to varying variables.

GL Buffers Attributes

Programme Source des Vertex Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

 Rasterization will be disscussed in details

in chapter 6 Rastérisation et Couleurs en

GL Buffers Attributes

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers (tampons)

de la mémoire géré par OpenGL/WebGL

avec des vertex arrays (des tableaux de

vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par

les vertex shaders,

2. assemblé en triangle et enfin

3. "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné

sur l'espace écran ("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file:

fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for

the //fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5,

1); // outColor = v_color ;

}`;

 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

Les fragments générés (ne sont pas

encore tout à fait des pixels) passe

ensuite dans un autre "program"

appelé le fragment shader.

Le fragment shader reçoit, en

input, les valeurs, vColor, de

l'output du vertex shader (qui ont

été, rappelez vous, interpolé par le

raster).

GL Buffers Attributes

Programme Source des Fragment Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est dans le

framebuffer, le programme principale

remplis des buffers (tampons) de la mémoire

géré par OpenGL/WebGL avec des vertex

arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer assignés

des couleurs par des fragments shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

 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

 each invocation of the fragment

shader receives a rasterized version of

the vertex shader's outputs for that

varying variable.

GL Buffers Attributes

Programme Source des Fragment Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

 les Vertex shaders :

2. les Fragments shaders:

The 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

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

GL Buffers Attributes

Programme Source des Fragment Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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

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.

GL Buffers Attributes

Programme Source des Fragment Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

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.

Now we need to code how a vertex

shader communicates with the

surrounding graphics pipeline using:

 specially-declared global variables in

the GLSL program. Its inputs come

from:

 1- attribute variables, which

supply per-vertex attributes from for

instance: the vertex array, and

 2- uniform variables, which

supply values from the uniform

state.

 The shader assigns its per-vertex

outputs to varying variables.

GL Buffers Attributes

Programme Source des Fragment Shaders

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

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

 Pendant que le plan de projection est dans

le framebuffer, le programme principale

remplis des buffers (tampons) de la

mémoire géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection, par les

vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments de la

taille d'un pixel (en gros, fragment =

pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des fragments

shaders.

4. Finalement, le framebuffer est dessiné sur

l'espace écran ("screen space").

 make_ressources( ) doit être implémentée

on fait appel à:

 make_buffer( ) qui allouera et rempliera

nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

Objets Buffer: Couleurs

As with vertex position values

are obtain from the attribute

aVertexPosition. The vertex

couleur values are obtained

from the attribute

aVertexColor and are assigned

to the varying vColor in the

vertex shader. LES COULEUR

DANS NEXT CHAPTER.

GL Buffers Attributes

Programme Source des Fragment Shaders

Le Pipeline Graphique

Plan de Travail du Modèle

de la Camera Synthétique

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

 Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers

(tampons) de la mémoire géré par

OpenGL/WebGL avec des vertex

arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection,

par les vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments

de la taille d'un pixel (en gros,

fragment = pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des

fragments shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran ("screen

space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

The vertex shader file: vsSource.glsl

vsSource =`#version 300 es

attribute vec4 aVertexPosition;

//varying

Out vec4 v_color ;

void main() {

gl_Position = aVertexPosition ;

v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;

// gl_PointSize = 10.0;

}` ;

Le fragment shader file: fsSource.glsl

fsSource = `#version 300 es

precision highp float;

//precision mediump float;

//varying

In vec4 v_color ;

// we need to declare an output for the

//fragment shader

out vec4 outColor;

void main() {

// gl_FragColor = vec4(1, 0, 0.5, 1); //

outColor = v_color ;

}`;

OpenGL/WebGL objects shaders

static struct {

/* fields for shader objects*/

GLuint vertex_shader,

fragment_shader, program;

/*fields for buffer and texture

objects*/

GLuint vertex_buffer,

element_buffer;

struct{ GLint position ; }

attributes;

// GLuint textures[2];

} g_resources;

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

OpenGL Ajout du codes dans make_resources ( )

Maintenant qu’on a écrit les sources des codes des

deux shaders, on a besoin de les transmettre au

GPU pour être exécuter car seul le GPU et non CPU

est capable de comprendre le langage GLSL and

exécute les codes écrit en GLSL. La même chose

comme au chapitre 3, on a besoin de écrire un

programme qui crée des objets OpenGL ou WebGL

pour transmettre les codes sources des shaders au

GPU. Les objets OpenGL/WebGL sont des objets

shaders.

Le programme créant les objets shaders va être

compilé et les lié(link) au niveau du CPU en

utilisant la Library OpenGL

OpenGL/WebGL objects shaders

On commence par définir les variables:

OpenGL: Dans la structure g_ressources on ajoute

trois variables de type GLuint pour conserver le

nom des objets des shaders vertex, fragment et

program.

La variable program représente conjointement,

l’ensemble de shaders de sommet et de fragment

appelés un programme shader.

 Pendant que le plan de projection est

dans le framebuffer, le programme

principale remplis des buffers

(tampons) de la mémoire géré par

OpenGL/WebGL avec des vertex

arrays (des tableaux de vertex).

2. Ces vertex sont:

1. projetés dans plan de projection,

par les vertex shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en fragments

de la taille d'un pixel (en gros,

fragment = pixel).

3. Les fragments dans le framebuffer

assignés des couleurs par des

fragments shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran ("screen

space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

OpenGL/WebGL objects shaders

static int make_resources(void) {

/* 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.fragment_shader);

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

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.attributes.position =

glGetAttribLocation(g_resources.program , ‘position’);

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

OpenGL Ajout du codes dans make_resources ( )

OpenGL/WebGL objects

shaders

Initialisation des shaders

l’initialisation des shaders sera

faites dans la fonction

make_resources()

Now we can fill in the last part

of make_resources that

compiles and links our shader

program:

Cas OpenGL:

 La fonction make_shader

crée les objets shaders de

sommet et de fragment.

 La fonction make_program

crée l’objet program qui

représente conjointement,

l’ensemble de shaders de

sommet et de fragment

appelés un programme

shader.

 Pendant que le plan de

projection est dans le

framebuffer, le programme

principale remplis des buffers

(tampons) de la mémoire géré

par OpenGL/WebGL avec des

vertex arrays (des tableaux de

vertex).

2. Ces vertex sont:

1. projetés dans plan de

projection, par les vertex

shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en

fragments de la taille d'un

pixel (en gros, fragment =

pixel).

3. Les fragments dans le

framebuffer assignés des

couleurs par des fragments

shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran

("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera

et rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

OpenGL/WebGL objects shaders

static int make_resources(void) {

/* 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.fragment_shader);

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

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.attributes.position =

glGetAttribLocation(g_resources.program , ‘position’);

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

OpenGL Ajout du codes dans make_resources ( )

OpenGL/WebGL objects

shaders

Initialisation des shaders

l’initialisation des shaders

sera faites dans la fonction

make_resources()

Now we can fill in the last

part of make_resources that

compiles and links our

shader program:

Cas OpenGL:

 Ensuite, il est nécessaire

d'ajouter le code

recherchant les positions ,

vertexPosition, dans

l'emplacement de

l'attribut,

'aVertexPosition, et de

configurer cet attribut

pour le programme

shader program.

 Pendant que le plan de

projection est dans le

framebuffer, le programme

principale remplis des buffers

(tampons) de la mémoire géré

par OpenGL/WebGL avec des

vertex arrays (des tableaux de

vertex).

2. Ces vertex sont:

1. projetés dans plan de

projection, par les vertex

shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en

fragments de la taille d'un

pixel (en gros, fragment =

pixel).

3. Les fragments dans le

framebuffer assignés des

couleurs par des fragments

shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran

("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera

et rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

OpenGL/WebGL objects shaders

function make_resources( gl ) {

buffers = make_buffer(gl);

shaderProgram = make_shader(gl );

programInfo = {

program: shaderProgram ,

attribLocations: {

vertexPosition: gl.getAttribLocation(shaderProgram,

'aVertexPosition’),

};

} //end make_resources()

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

WebGL Ajout du codes dans

make_resources ( )

Initialisation des shaders

Cas WebGL

 La function make_shader a

crée l’objet shaderProgram

qui représente

conjointement, l’ensemble

de shaders de sommet et

de fragment appelés un

programme shader.

 Ensuite, il est nécessaire

d'ajouter le code

recherchant les positions ,

vertexPosition, dans

l'emplacement de

l'attribut, 'aVertexPosition,

et de configurer cet

attribut pour le

programme shader

shaderProgram.

 Pendant que le plan de projection

est dans le framebuffer, le

programme principale remplis des

buffers (tampons) de la mémoire

géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de

vertex).

2. Ces vertex sont:

1. projetés dans plan de

projection, par les vertex

shaders,

2. assemblé en triangle et enfin

 "rastérisé" (pixelisé) en

fragments de la taille d'un pixel

(en gros, fragment = pixel).

3. Les fragments dans le

framebuffer assignés des

couleurs par des fragments

shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran

("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

2. des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

Programme Shaders

WebGL make_resources ( )

static struct {

/*fields for buffer and texture

objects*/

GLuint vertex_buffer,

element_buffer;

struct{ GLint position ; } 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) );

Initialisation des

shaders

OpenGL: Le code

crée les deux objets

shaders en appelant

make_shader( ), lui

passant le type et la

source du shader.

Il crée alors un

shader programme,

en appelant

make_program( )

attache les shaders

et les relie ensemble.

Si la compilation ou la

liaison échoue, le code

affiche une alerte.

function make_resources( gl ) {

shaderProgram = make_shader(gl );

buffers = make_buffer(gl);

programInfo = {

program: shaderProgram,

attribLocations: {

vertexPosition:

gl.getAttribLocation( shaderProgram

, 'aVertexPosition’ ),

};

}

OpenGL make_resources ( )

/* 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.frag

ment_shader);

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

g_resources.attributes.position =

glGetAttribLocation(g_resources.program ,

‘position’);

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Programme Shaders

WebGL make_resources ( )

static struct {

/*fields for buffer and texture

objects*/

GLuint vertex_buffer,

element_buffer;

struct{ GLint position ; } 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) );

Initialisation des shaders

WebGL: le code crée l’objet

shader programme en

appelant make_shader( ), lui

passant le contexte gl et les 2

sources du shader sommet et

de fragment.

Pour créer les deux objets

shaders make_shader( )

appelle makeShader( ), lui

passant le contexte gl, le

type et la source du shader.

Il crée alors un shader

programme, en appelant

makeShaderProgram( )

attache les shaders et les

relie ensemble en lui passant

le contexte gl les deux objets

shader créées au dessus.

Si la compilation ou la liaison

échoue, le code affiche une

alerte.

// Initialiser un programme

shader, de façon à ce que

WebGL sache comment

dessiner nos données

function make_shader( gl,

vsSource, fsSource) {

const vertexShader =

makeShader(gl,

gl.VERTEX_SHADER, vsSource);

const fragmentShader =

makeShader(gl,

gl.FRAGMENT_SHADER,

fsSource);

// Créer le programme shader

const shaderProgram =

makeShaderProgram( gl ,

vertexShader , fragmentShader

);

return shaderProgram;

}

OpenGL make_resources ( )

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

(vertex_shader, fragment_shader) (

g_resources.vertex_shader,g_resources.frag

ment_shader);

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

g_resources.attributes.position =

glGetAttribLocation(g_resources.program ,

‘position’);

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

static GLuint make_shader(GLenum type, const char *filename){

GLuint shader;

GLint length;

GLchar *source = file_contents(filename, &length);

GLint shader_ok;

if (!source) return 0;

shader = glCreateShader(type);

glShaderSource(shader, 1, (const GLchar**)&source, &length);

free(source);

glCompileShader(shader);

glGetShaderiv(shader, GL_COMPILE_STATUS, &shader_ok);

if (!shader_ok) { fprintf(stderr, "Failed to compile %s:\n",

filename);

show_info_log(shader, glGetShaderiv, glGetShaderInfoLog);

glDeleteShader(shader); return 0; }

return shader; }

Initialisation des shaders

Maintenant qu’on a défini les deux shaders, on doit les

transmettre à OpenGL ou WebGL, les compiler et les lier(link)

ensemble.

 shader objects named by GLuint handles.

 Here we read our shader source out of a separate file,

which lets us change the shader source without

recompiling our C, this is for OpenGL. For WebGL is done

before.

 Crée un shader du type fourni, charge le source et le

compilé.

 Here, we create a shader object by calling glCreateShader

with the shader type either GL_VERTEX_SHADER or

GL_FRAGMENT_SHADER.

 Envoyer le source à l'objet shader. // Compiler le

programme shader.

 OpenGL compiles shader objects from their GLSL

source code and keeps the generated GPU machine

code to itself.

 There is no standard way to precompile a GLSL

program into a binary—you build the shader from

source every time.

function makeShader(gl, type,

source) {

const shader =

gl.createShader(type);

gl.shaderSource(shader,

source);

gl.compileShader(shader);

// Vérifier s'il a été compilé

avec succès

if (!gl.getShaderParameter(

shader,

gl.COMPILE_STATUS)) {

alert('An error occurred

compiling the shaders: ‘ +

gl.getShaderInfoLog(shader) );

gl.deleteShader(shader);

return null;

}

return shader;

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Programme Shaders

WebGL make_resources ( )

OpenGL make_resources ( )

static GLuint make_program(GLuint vertex_shader, GLuint

fragment_shader){

GLint program_ok;

GLuint program = glCreateProgram( );

glAttachShader(program, vertex_shader);

glAttachShader(program, fragment_shader);

glLinkProgram(program);

glGetProgramiv(program, GL_LINK_STATUS, &program_ok);

if (!program_ok) {

fprintf(stderr, "Failed to link shader program:\n");

show_info_log(program, glGetProgramiv,

glGetProgramInfoLog);

glDeleteProgram(program); return 0;

}

return program;

}

program object

To plug the shaders into OpenGL, we'll

create a program object to link

together the vertex and fragment

shader objects. This is done by calling

the function:

Initialiser un programme shader, de

façon à ce que WebGL sache comment

dessiner nos données Le code crée

alors un objet shader., en appelant

makeShader( ), lui passant le type et la

source du shader.

OpenGL make_program ( )

WebGL makeShaderProgram ( )

En appelantmake_program ( ) OpenGL

/ WebGL makeShaderProgram( ) Le

code crée alors un objet programme.,

en appelant CreateProgram ( ). attache

les shaders ensemble l’objet program

avec glAttachShader() et les relie (linke)

avec linkProgram ( )

Si la compilation ou la liaison échoue,

le code affiche une alerte.

WebGL:

function makeShaderProgram(gl, vsSource,

fsSource) {

vertexShader = makeShader(gl, gl.VERTEX_SHADER,

vsSource);

fragmentShader = makeShader( gl,

gl.FRAGMENT_SHADER, fsSource);

// Créer le programme shader

// const

shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertexShader);

gl.attachShader(shaderProgram, fragmentShader);

gl.linkProgram(shaderProgram);

// Si la création du programme shader a échoué,

alerte

if (!gl.getProgramParameter(shaderProgram,

gl.LINK_STATUS)) {

alert('Impossible d'initialiser le programme

shader : ' + gl.getProgramInfoLog(shaderProgram));

return null;

}

return shaderProgram;

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Programme Shaders

WebGL make_resources ( )

OpenGL make_resources ( )

Shader and program fonction

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Shader and program objects deviate from the glGen-and-glBind protocol that buffer and

texture objects follow. Unlike buffer and texture functions, functions that operate on

shaders and programs take the object's integer name directly as an argument. The

objects don't need to be bound to any target to be modified.

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

 Pendant que le plan de projection

est dans le framebuffer, le

programme principale remplis des

buffers (tampons) de la mémoire

géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de

vertex).

 Ces vertex sont:

 projetés dans plan de

projection, par les vertex

shaders,

 assemblé en triangle et enfin

 "rastérisé" (pixelisé) en

fragments de la taille d'un pixel

(en gros, fragment = pixel).

 Les fragments dans le framebuffer

assignés des couleurs par des

fragments shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran

("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

 des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

make_resources ( ) complet

 nous pouvons faire

effectivement le rendu de la

scène. Let's start writing the

code to set up our rendering job

state:

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

la fonction 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,

Le Pipeline Graphique

Plan de Travail du Modèle de

la Camera Synthétique

 Pendant que le plan de projection

est dans le framebuffer, le

programme principale remplis des

buffers (tampons) de la mémoire

géré par OpenGL/WebGL avec des

vertex arrays (des tableaux de

vertex).

 Ces vertex sont:

 projetés dans plan de

projection, par les vertex

shaders,

 assemblé en triangle et enfin

 "rastérisé" (pixelisé) en

fragments de la taille d'un pixel

(en gros, fragment = pixel).

 Les fragments dans le framebuffer

assignés des couleurs par des

fragments shaders.

4. Finalement, le framebuffer est

dessiné sur l'espace écran

("screen space").

 make_ressources( ) doit être

implémentée on fait appel à:

 make_buffer( ) qui allouera et

rempliera nos buffers.

 make_shader( )..

 Avec la satisfaction d'avoir le

plan de projection, on va ré-

utiliser le même

programme. On est prêt:

1. à remplir la fonction

make_resources( ) avec:

 des vertex objects,

 des shader objects et

3. des texture objects

2. à projeter (dessiner) la

scène avec la fonction

render( ).

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

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 fonction render( ) de OpenGL

et render( now ) de WebGL utilise

quelques routines utilitaires:

• La première étape consiste à

effacer le canvas avec notre

arrière plan ;

• glClearColor // effacement en

blanc, complètement opaque

glClearColor sets an RGBA clear

color (in this case, white), which

glClear then uses to fill the

framebuffer's color buffer.

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime

= now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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)

;

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(render);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

drawScene(gl );

}

Void drawScene(gl ){

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

glUseProgram(g_resources.program);

glutSwapBuffers();

}

GL Buffers Attributes

Le Pipeline Graphique make_resources ( ) , render( )

Render the Scene

La fonction render( ) de

OpenGL et render(now ) de

WebGL utilise quelques

routines utilitaires:

• La première étape consiste

à effacer le canevas avec

notre arrière plan ;

• glClearColor // effacement

en blanc, complètement

opaque

glClearColor sets an RGBA

clear color (in this case,

white), which glClear then

uses to fill the framebuffer's

color buffer.

// effacement en noir,

complètement opaque

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime = now -

lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(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_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);

glUseProgram(g_resources.program);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

gl.clearDepth(1.0); //tout effacer

gl.enable(gl.DEPTH_TEST); //

activer le test de profondeur

gl.depthFunc(gl.LEQUAL); // les

choses proches cachent les

choses lointaines

// Effacer le canvas avant de

commencer à dessiner dessus.

gl.clear(gl.COLOR_BUFFER_BIT |

gl.DEPTH_BUFFER_BIT);

// Effacer le tampon de couleur

avec la couleur d'effacement

spécifiée

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime = now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(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_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.positio

n);

glUseProgram(g_resources.program);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Activating the shader program //

Indiquer à WebGL d'utiliser notre

programme pour dessiner

We begin by activating our

shader program by passing the

name of the linked program

object to glUseProgram.

glUseProgram(g_resources.pro

gram);

gl.useProgram(programInfo.progr

am);

Function drawScene(gl ) {

gl.useProgram(programInfo.program);

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

{

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

}

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Activating the shader program

Après cela, nous lions le tampon (buffer) des sommets du carré à

l'attribut que le shader utilise comme aVertexPosition et nous

indiquons à WebGL comment en extraire les données.

Ensuite, établir la position du carré 2D.

// Indiquer à WebGL comment extraire les positions du tampon pour

les mettre dans l'attribut vertexPosition:

 const numComponents = 2; // extraire 2 valeurs par itération

 const type = gl.FLOAT; // les données dans le tampon sont des

flottants 32bit

 const normalize = false; // ne pas normaliser

 const stride = 0; // combien d'octets à extraire entre un jeu de

valeurs et le suivant ( 0 = utiliser le type et numComponents ci-

dessus)

 const offset = 0; // démarrer à partir de combien d'octets

dans le tampon

1- Le vertex array contiendra quatre vertices, que le vertex shader

assignera aux coins de la fenêtre.

2- L'élément array assemblera ces quatre vertices en deux triangles, se qui

nous donnera un rectangle qui viendra couvrir notre fenêtre.

Function drawScene(gl ) {

gl.useProgram(programInfo.program);

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

{

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

}

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1,

vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

glBindBuffer( GL_ARRAY_BUFFER,

g_resources.vertex_buffer);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER ,

g_resources.element_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);

glDrawElements( GL_TRIANGLE_STRIP, /* mode */ 4, /* count

GL_UNSIGNED_SHORT, /* type */ (void*)0 /* element array buffer

offset */ );

glDisableVertexAttribArray(g_resources.attributes.position);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render(now) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Setting up the vertex array

Indiquer à WebGL comment extraire les positions à

partir du tampon des positions pour les mettre dans

l'attribut vertexPosition.

Tell WebGL how to pull out the positions from the

position buffer into the vertexPosition attribute. Next,

we tell OpenGL the format of our vertex array. We

do this by going through each vertex attribute and

calling:

1. glVertexAttribPointer, takes as arguments the

attribute location, the size and component type

of the associated attribute variable (for

our position attribute, size 2 and type GL_FLOAT

), the number of bytes between attribute values

(called the stride), and the offset of the first

attribute value inside the currently

bound GL_ARRAY_BUFFER. It associates a

part of a vertex buffer with the attribute, and

2. glEnableVertexAttribArray, which tells OpenGL

to read values for that attribute from the vertex

array while rendering.

Function drawScene(gl ) {

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

}

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

glBindBuffer( GL_ARRAY_BUFFER,

g_resources.vertex_buffer);

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER ,

g_resources.element_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.attribut

es.position);

glDrawElements( GL_TRIANGLE_STRIP, /* mode */ 4, /* count

GL_UNSIGNED_SHORT, /* type */ (void*)0 /* element array

buffer offset */ );

glDisableVertexAttribArray(g_resources.attributes.position);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Setting up the vertex array

• For historic reasons, the offset is

passed as a pointer, but the parameter

is used for its integer value, so we pass

an integer cast to void*. .

• In our case, our vertex array consists

only of the single vec2

position attribute; if we had multiple

attributes, the attributes' values could

be either interleaved, like an array

of structs, or kept in separate arrays.

• The

flexibility glVertexAttribPointer gives in

letting us choose the stride and offset of

each attribute can accommodate either

arrangement. Different attributes can

even be potentially read from separate

buffer objects; changing

the GL_ARRAY_BUFFER binding

won't affect the buffer used by attribute

array pointers that have already been

set.

• (The normalized? argument I skipped

mentioning above is used with arrays of

integers in the vertex array.

• If true, the components will be mapped

from the range of their integer type,

such as 0–255 for an unsigned byte, to

the floating-point range 0.0–1.0, like

color components in an image. If false,

their integer values will be preserved.

• For components like ours that are

already floating-point, it doesn't have

any effect.)

Function drawScene(gl ) {

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

}

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1,

vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Submitting the rendering job

Ensuite, on établis la position du carré 2D.

By calling the glDrawElements( ) function.

Submitting the rendering job

 glDrawElements is the function that

sets the graphics pipeline in motion.

 We tell it what triangle assembly mode

we want:

 TRIANGLE , TRIANGLE STRIP and

TRIANGLE FAN

 LINES or POINTS

 Count = 4 how many vertices to

assemble triangles from,

 Unsigned short: the type of the

components of element array, and

 the offset = 0: within the currently

bound GL_ELEMENT_ARRAY_BUFFER o

f the first component to render, again

as a fake-pointer-but-really-integer.

Function drawScene(gl ) {

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

}

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1,

vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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_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.positi

on);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Submitting the rendering

job

 glDrawElements will then

take the pointed-to element

array indexes,

 gather them up with

 the currently bound

shader program,

 if any vertex attribute

pointers,

 if any uniform values,

 if any texture units, and

 bundle everything into a

rendering job, and place the

job in the GPU's queue.)

Function drawScene(gl ) {

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

}

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1,

vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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_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.positi

on);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Submitting the rendering job

Enfin, nous dessinons l'objet en

appelant la méthode render(now).

Ensuite, le GPU relit les vertex

projetés sous forme de triangle. Il

fait cela en prenant les vertex dans

l'ordre spécifié par l'element array et

en les groupant par paquets de trois.

Les sommets peuvent être groupé

de trois façon différentes:

Function drawScene(gl ) {

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

}

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1,

vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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_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.positi

on);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Submitting the rendering job

Les sommets peuvent être groupé de trois

façon différentes:

1. Prendre chacun des trois éléments

entant que triangle indépendant.

2. Faire une "bande de triangle" (triangle

strip), en réutilisant les deux derniers

vertex de chaque triangle comme les

deux premiers vertex du triangle

suivant.

3. Faire un "ventilateur de triangle"

(triangle fan), en reliant le premier

élément à chaque paire d'élément

suivant.

Le diagramme montre comment les trois

méthodes se comportent.

Les méthodes "strip" et "fan" n'ont besoin

que d'un seul nouvel index par triangle

après avoir initialisé les trois premiers, ce

qui permet d'économiser de la mémoire

dans l'element array.

Function drawScene(gl ) {

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

}

gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);

{

const offset1 = 0;

const vertexCount = 4;

gl.drawArrays(gl.TRIANGLE_STRIP, offset1,

vertexCount);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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_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.positi

on);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Cleaning up after ourselves

 A downside of OpenGL's state machine

model is that all of these bindings and

settings persist globally, even

after glDrawElements is called.

 This means that we have to take some care

with how our OpenGL code will interact with

all of the other OpenGL code throughout the

program.

 While there is no other OpenGL code yet in

this program to interact with, we should still

start learning good habits.

Particular care is needed with vertex

attributes:

 In a complex program involving multiple

shader programs and multiple vertex arrays,

an incorrectly enabled vertex attribute array

could potentially cause glDrawElements to try

to feed the GPU invalid data, leading to

corrupted output or segfaults.

 It's a good idea to keep a vertex

array attribute enabled only as long

as it's needed. Here, we disable the

vertex attribute array for position.

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime =

now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(render);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

sition);

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

ributes.position);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Cleaning up after ourselves

• You might also be thinking, we're

rebinding all of the same objects,

setting all of the same uniform

values (aside from the fade_factor),

and reactivating all of the same

vertex attributes every time we

render.

• If the state settings persist

across glDrawElements calls, we

could technically do without almost

all of this per-frame setup, getting

away with binding everything once

before entering glutMainLoop and

having render only update the fade

factor and call glDrawElements.

• But again, it's a good idea to set up

all the state you expect at the point

you expect it.

• Depending on bits of OpenGL state

to remain unchanged between

frames is an easy way to breed

bugs as your programs grow.

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime =

now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(render);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

sition);

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

ributes.position);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Activating the shader program and

assigning uniforms

• Uniforms will be discussed

in the next Chapitre

• OpenGL provides a family

of glUniform* functions for

assigning to uniform variables,

with each member

corresponding to a possible type

for a uniform variable in a GLSL

program.

• These functions all have names

of the form glUniform{dim}{type},

where the dim indicates the size

of a vector type (1 for

an int or float uniform, 2 for

a vec2, etc.), and

the type indicates the

component type: either i for

integer, or f for floating-point.

• Our fade_factor uniform is a

simple float, so we assign it by

calling glUniform1f, passing in

the uniform's location and new

value as arguments.

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; //

elapsedTime = now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(render);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Displaying our finished

scene

• We only have the one rendering job to

wait on, so now that we've submitted

the job and tidied up, we can sync

immediately.

• The GLUT

function glutSwapBuffers waits for all

running jobs to finish, then swaps the

color buffers of our double-buffered

framebuffer, moving the currently

visible buffer to the "back" to be

rendered into by the next frame, and

pushing the image we just rendered to

the "front", showing the newly-

rendered scene in our window. Our

rendering is done!

glutSwapBuffers then brings our cleared

color buffer to the screen.

glutSwapBuffers amène ensuite notre color

buffer à l'écran.

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime =

now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(render);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

sition);

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

ributes.position);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

Displaying our finished

scene

• We only have the one rendering job to

wait on, so now that we've submitted

the job and tidied up, we can sync

immediately.

 WebGL:

window.requestAnimationFrame()

method tells the browser that you wish

to perform an animation and requests

that the browser calls a specified

function to update an animation before

the next repaint. The method takes a

callback as an argument,

requestAnimationFrame(render), to be

invoked before the repaint.

 Your callback routine render() must

itself call requestAnimationFrame()

again if you want to animate another

frame at the next repaint.

requestAnimationFrame() is 1 shot.

 You should call this method whenever

you're ready to update your animation

onscreen. This will request that your

var elapsedTime ; var lastTime = 0;

function animate() {

var timeNow = new Date().getTime();

//now *= 0.0001; // convert to seconds

if (lastTime != 0) {

elapsedTime = timeNow - lastTime; // elapsedTime = now - lastTime;

}

lastTime = timeNow; // lastTime = now;

}

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

animate( ); // swapBuffers( ) ;

drawScene(gl ) ; //dessiner les objets

requestAnimationFrame(render);

// requestAnimFrame(render);

}

static void render(void){

glClearColor(1.0f, 1.0f, 1.0f, 1.0f);

glClear(GL_COLOR_BUFFER_BIT);

glUseProgram(g_resources.program);

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

sition);

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

ributes.position);

glutSwapBuffers();

}

GL Buffers Attributes

Render the Scene

render( void ) OpenGL version

render( now ) WebGL version

Le Pipeline Graphique make_resources ( ) , render( )

GLUT

WEBGL

int main(int argc, char** argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);

glutInitWindowSize(400, 300);

glutCreateWindow(“GLUT WINDOW");

glewInit();

if (!GLEW_VERSION_2_0) { fprintf(stderr, "OpenGL 2.0 not

available\n") ; return 1;

}

if (!make_resources()) { fprintf(stderr, "Failed to load

resources\n") ; return 1;

}

glutDisplayFunc(&render);

glutIdleFunc(&update_fade_factor);

glutMainLoop();

return 0;

}

Le Pipeline Graphique

Overview of a

rendering job

var deltaTime ;

var cubeRotation = 0.0;

var then = 0;

/////////////////webGLStart ici Start

here

var gl;

function webGLStart() {

var canvas =

document.getElementById("codeRunni

ng-canvas");

// Initialisation du contexte WebGL

gl = initWebGL(canvas);

//introduire les resources

make_resources( gl ) ;

//render( gl );

requestAnimationFrame(render);

}

GL Buffers Attributes

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

Data Processing

we always think of the rendering pipeline as box gets explicitly feed

with data, processes it and passes intermediate results from one stage

to the next and produces some kind of image in the end.

But at the very beginning of this pipeline, OpenGL has a surprise for us:

It is possible to render something without any data at all!

In the good old days of the fixed-function pipeline and even later in

OpenGL 2.1 there were special functions to generate geometry

respectively a special vertex position attribute.

With user defined attributes and vertex shaders the programmer can

define in any way he/she likes what will define the output vertex

position – it does not have to depend on any inputs. But, at least

vertex attribute 0 had to be defined. This limitation, however, is gone

in the OpenGL core profile (but still valid in the compatibility profile!).

This means, that it is now legal in core profile (and only there) to call

glDrawArrays() without a bound array buffer. A vertex array object on

the other hand must be bound, the default VAO 0 is not allowed for

rendering (this in turn would be legal in the compatibility profile…).

Uses for attribute-less rendering would be simple objects that can be

defined statically in the vertex shader.

Le Pipeline Graphique

Also in cases where the data layout has to be too complex for the

default attribute fetching (so it might come from textures) or most of

the work is done procedurally.

While it can be useful to render without attributes, disallowing it in

the compatibility profile is less useful. Historically it made sense to

define rendering by providing data and it is also useful to keep the

latest API 100% compatible with the old behavior. But, removing the

limitation that attribute 0 (the vertex position) has to be defined will

not break any working software but software that should not work

would now ‘work’ (old buggy software that forgets to set attribute 0

will no longer receive an OpenGL error but will try to render

something).

A vertex shader with no explicit inputs has implicit inputs from the

GL: gl_VertexID and gl_InstanceID. This can be sufficient to generate

useful output positions either procedurally or with data from

uniforms, textures etc.

The first step of the rendering pipeline is to fetch application provided

data from one or multiple places (think of array buffers) and pass

them as attributes into the vertex shader stage. This fetch can be

controlled by an index and N attributes will get pulled from M arrays.

That’s for next chapter and those follow.

Introduction à OpenGL et WebGL

Liste des références sera donnée ultérieurement.

1. https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html

2. http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html

3. http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html

4. https://webgl2fundamentals.org/webgl/lessons/webgl-indexed-vertices.html

Références

Computer Graphics with GL

GL Buffers Attributes

FIN DU CHAPITRE

GL Buffers Attributes

The pipeline revisited

Conclusion

In the next chapter,

we'll mess around

with the vertex

shader to

demonstrate the

basics

of 3d transformation

and projection.

If you're interested in

breaking off on your

own at this point and

looking over

the OpenGL

specifications yourse

The pipeline revisited

Conclusion

lf, note that the

OpenGL 2 specs still

include all of the

deprecated features

I've been avoiding

discussing. I would

highly recommend

looking instead at the

spec for OpenGL 3.1

or later, being sure to

look at the "core

profile" specs rather

than the ones for the

"compatibility

profiles".

Plaquage des Textures

Computer Graphics with GL

Conclusion

OpenGL ES also adds

additional features for

mobile platforms, such as

fixed-point numeric support

and offline shader

compilation, that the

desktop version of the

spec doesn't offer. If you

want to try your hand at

OpenGL ES development,

it is part of the Android

NDK and iPhone SDKs,

among other mobile

development platforms. On

Conclusion

While OpenGL 3 and later add

a lot of new features over

OpenGL 2, all of the basic

APIs I've gone over here for

OpenGL 2 still form the basis

for newer versions.

OpenGL ES 2 is also worth

looking at. It consists mostly of

the forward-looking subset of

OpenGL 2 I've been covering;

all of the OpenGL APIs I've

mentioned are present in

OpenGL ES 2 as well.

Conclusion

Hopefully this

chapter has given

you a good taste of

the OpenGL API and

GLSL language. As

always, if you felt

something I touched

on bears clarification,

or there's something

in particular you'd

like to see me

cover, .

OpenGL C types

OpenGL defines its

own set

of GL* typedefs

that mirrors the

standard menagerie

of C types:

GLubyte, GLbyte, G

Lushort, GLshort, G

Luint, GLint, GLfloat

and GLdouble alias

their corresponding

C types as you

would expect.

OpenGL C types

 On top of

this basic

set of

types,

OpenGL

provides

some

additional

typedefs

with more

semantic

meaning:

Plaquage des Textures

•GLchar*, used by functions that handle strings and expect pointers to null-terminated,

ASCII strings

•GLclampf and GLclampd, typedefs for GLfloat and GLdouble used when values are

expected to be in the range zero to one

•GLsizei, an integer typedef suitable for holding the size of a memory buffer, akin to the

standard C library's size_t

•GLboolean, a typedef for GLbyte intended to contain a GL_TRUE or GL_FALSE value,

similar to C++ or C99's bool

•GLenum, a typedef of GLuint intended to contain a predefined GL_* constant

•GLbitfield, another GLuint typedef intended to contain the bitwise-or of one or

more GL_*_BIT masks

GL Buffers Attributes

Modèle de Caméra Synthétique

Systèmes de Construction de l’Image

• Finally, we need to look into how we can render a scene from any given viewpoint. This is something we already talked about in the previous lesson, but this point will be covered again

briefly in this chapter.

• How Do We Represent Cameras in the CG World?

• The Near Clipping Plane and the Image Plane

We only made that choice because it simplified the equations for computing the points projected coordinates, but in fact, as you can see in figure 3, the projection of the geometry onto the

canvas produces the same image regardless of its position, thus you are not required to keep the distance from the eye to the canvas equal to 1. We also know that the viewing frustum is a

truncated pyramid (the base of the pyramid is defined by the far clipping plane and the top of the pyramid is cut off by the near clipping plane). This volume defines the part of the scene that

is visible to camera. A very common way of projecting points onto the canvas in CG, is to remap points contained within the volume defined by the viewing frustum to the unit cube (a cube of

side length 1). This technique is central to the development of the perspective projection matrix which is the topic of our next lesson. We don't really need to understand it for now. What is

interesting to know about the perspective projection matrix in the context of this lesson though, is that it works on the basis that the image plane is located at the near clipping plane. We

won't be using the matrix in this lesson nor studying it, however in anticipation for the next lesson devoted to this topic, we will place the canvas at the near clipping plane. Keep in mind

though that this is an arbitrary decision, and that, unless you use a special technique such as the perspective projection matrix that requires the canvas to be positioned at a specific location,

it can otherwise be positioned anywhere along the camera local z-axis.

From now on and for the rest of this lesson, we will though assume that the canvas (or screen or image plane), is positioned at the near clipping plane. Keep in mind that this is just an

arbitrary decision, and that the equations we will develop in the next chapter to project points onto the canvas works independently from the its position along the camera's line of sight

(which is also the camera z-axis). This setup is illustrated in figure 4.

Keep in mind as well, that the distance between the eye and the canvas, the near clipping plane and the focal length are all different things. We will focus on this point more fully in the next

chapter.

• Computing the Canvas Size and the Canvas Coordinates

• The reason why we insisted a lot in the previous section on the fact that the canvas could be anywhere along the camera local z-axis, is because that position has an effect on the canvas

size. When the distance between the eye and the canvas decreases, the canvas gets smaller, and when that distance increases, it gets bigger. The bottom-left and top-right coordinates of

the canvas are directly linked to the canvas size. Once we know the size, computing these coordinates is trivial considering that the canvas (or screen) is centred about the image plane

coordinate system origin. Why are these coordinates important? Because they can be used to easily check whether a point projected on the image plane lies within the canvas and is

therefore visible to camera. In figure 5, 6 and 7 two points are projected onto the canvas. One of them (P1') is contained within the canvas limits and is visible to the camera. The other

(P2') is outside the boundaries and is thus invisible. When we both know the canvas coordinates and the point projected coordinates, then testing if the point is visible is really simple.

• Let's see how we can mathematically compute these coordinates. In the second chapter of this lesson, we gave the equation to compute the canvas size (we will assume that the canvas is

a square for now as in figure 3, 4 and 6):

Le pipeline: modélisation-rendu-animation

Systèmes de Construction de l’Image

Dans plusieurs situations (ex. design assisté par ordinateur: CAD ou les animations), on peut séparer le

processus de modélisation de la scène (modelling) et la production de l’image /rendu (rendering).

 De ce fait, on peut implémenter les deux modules avec différentes architectures logicielles

(software) et matérielles (hardware), dépendamment des besoins en calcul et en mémoire requis par

ces derniers.

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 lumineuses, de couleur, de textures et d’autres effets)

requiert un calcul intensif. On aura donc besoin d’un matériel puissant (ex. un cluster d’ordinateurs).

- L’interface entre les modules de modélisation et de rendu est implantée à l’aide d’un fichier de

description.

Peut être utilisé soit pour afficher les images en mode

ligne (calligraphique) ou en mode raster?.

Système d’affichage