Enseignant du Cours: DJAFER BADDOU (PhD)
Courriel: djafer.baddou@uqo.ca
Programmation 2D/3D
1
2
Programmation 2D/3D
Préparation
OpenGL/WebGl
et Plan de
Projection
Introduction à
l’Infographie
Introduction à
OpenGL et
WebGL
Introduction
Contenu
Mathématiques
et l’infographie
Techniques
d'animation et
simulation 2D/3D
Effets Optiques et
Etat du Rendu
Le Cours
Le Cours
le pipeline Graphique.
INTRODUCTION
3
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.
Introduction à OpenGL et WebGL
Sommaire
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
4
Intro
Qu'est-ce
qu'OpenGL?
Le Pipeline
Graphique
les principaux
concepts.
expliquer le
fonctionnement d'un
pipeline graphique
et le cheminement
des données dans un
rendu.
Introduction à OpenGL et WebGL
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 fure 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
Silicon Graphics Inc.
OpenGL
OpenGL débuta son histoire dans le début des
années 90, en temps que standard
multiplateforme de la librairie graphique
propriétaire de SGI, qui pilotait les composants
graphiques qui étaient utilisé dans leur stations
de travail.
HISTOIRE
5
Pour accéder au système graphique, un programmeur
d'applications doit utiliser une librairie appelée GL
(Graphics Library), qui permettait de développer des
applications interactives 2D/3D.
GL développé par Silicon Graphics Inc. (SGI) en 1992.
Introduction à OpenGL et WebGL
OpenGL Multiplateforme
Extensions
Le succès de GL a conduit OpenGL (1992) à devenir une
API indépendante de la plateforme, qui est plus facile à
utiliser et proche du matériel, pour ainsi obtenir
d'excellentes performances.
Multiplateforme de OpenGL laisse autres interfaces de
logiciels, appelés extensions, ayant accès à toutes les
options du matériel ( hardware ) graphiques.
GPU
Quelques années plus tard, GLQuake et les
cartes "accélératrices" Voodoo 3dfx ont
propulsé les cartes graphiques avec le courent
de vague, et OpenGL devenu un standard au
coté de Direct3d (la librairie propriétaire de
Microsoft). "pour contrôler les cartes
graphiques."
OpenGL Actualisé
OpenGL a été développé par Silicon Graphics Inc. (SGI)
en 1992.
Silicon Graphics (SGI) a révolutionné la station de
travail graphique en mettant en œuvre le pipeline
graphique dans le matériel (1982).
HISTOIRE
6
OpenGL existe depuis longtemps, et en lisant toute la
documentation accumulée ça et là sur internet, il n'est
pas toujours aisé de distinguer quelles sont les parties
anciennes de celle qui sont vraiment utile et supporté
par les cartes graphiques modernes.
Il est temps de proposer une nouvelle introduction à
OpenGL qui aborde uniquement les parties qui
sont toujours d'actualités.
Introduction à OpenGL et WebGL
OpenGL Moderene
Dans sa forme moderne, OpenGL est une librairie
multiplateforme qui sert à communiquer avec les GPU
programmable, dans le but de rendre des images 3D en
temps réel.
Son utilisation est fréquente dans les jeux vidéos, la
CAD, et les applications de visualisation de données
(médecine par exemple).
pipeline graphique
Khronos Group
En 2006, c'est le Khronos Group qui pris la gérance des
spécifications OpenGL:
.
Shaders
Khronos Group mettant à jours pour supporter les
caractéristiques des GPU programmable modernes, les
shders.
.
OpenGL-ES WebGL
Khronos Group développant dans le domaine de
l'embarqué et du web avec, respectivement,
OpenGL ES et WebGL.
OpenGL 3 et Depreciation
Elles peuvent, en revanche, être utilisé aux cotés
d'OpenGL.
CUDA et OpenCL peuvent tous les deux partager
des buffers de la mémoire du GPU avec OpenGL et
transmettre des données entre les programmes
GPU et le pipeline Graphique.
HISTOIRE
7
Khronos Group rationalisant ("nettoyant") avec OpenGL
3, en dépréciant les caractéristiques désuètes qui
encombraient les versions antérieures de la librairie.
Introduction à OpenGL et WebGL
GPGPU CUDA OpenCL
Khronos Group fut l'adoption des librairies de "calcul générique
(general process) sur le processeurs graphiques" (GPGPU),
notamment CUDA de nVidia et OpenCL du Khronos Group.
Ces librairies implémentent la syntaxe du langage C en ajoutant la
gestion des données parallèles, permettant au GPU d'être utilisé
pour des calculs génériques, sans avoir à utiliser les fonctions
"orienté graphique" d'OpenGL.
Cela dit, ces librairies GPGPU ne remplace pas OpenGL; dans la
mesure ou le calcul graphique n'est pas leur fonction première,
elles ne donne accès qu'aux unités de calcul du GPU, en ignorant
les composants de calcul spécifiquement graphiques.
OpenGL CUDA OpenGL
Les versions OpenGL
La version 1.0 d’OpenGL apparait en 1994.
La dernière version 4.6 apparait en juillet 2017.
Portabilité Portabilité
En pratique : OpenGL peut rencontrer des difficultés avec la
portabilité
Difficultés liées à la version de la bibliothèque
Mise a jour de la bibliothèques OpenGL (.dll pour Windows, .so
pour Linux...), afin que l'API puisse être utilisé par le système (et
le matériel).
et pour chaque architecture du processeur (32/64 bits, intel ou
amd...).
Difficultés liées aux extensions
Certaines extensions sont dépendantes d'un système, d'une
plateforme, ou d'un matériel.
Par exemple, l'extension qui implémente la technologie Nvidia
PhysX ne fonctionne que pour les cartes graphiques de marque
Nvidia (et non ATI).
Les développeurs qui utilisent ces extensions sont bien
conscients de ces problèmes qu'ils peuvent rencontrer.
Hors, cela signifie qu'il n'existe pas de règles ou de norme à
Problèmes
8
OpenGL est cross-plateforme
L'une des grandes forces d'OpenGL - et l'une de ses
priorités - est sa portabilité dans les divers systèmes
d'exploitation.
OpenGL entant que source ouverte (open source)
offre des outils aux développeurs et les encourage à
faire évoluer la bibliothèque graphique et à la rendre
utilisable sur un très grand nombre de plateformes.
Cela a permis aux sociétés Sony et Nintendo de
développer une version d'OpenGL adapté pour leurs
consoles de jeux.
la portabilité d'OpenGL s'étend sur:
les plateformes mobiles et sur les systèmes
embarqués (grâce à l'API OpenGL ES: Embedded
System) et
le web (avec WebGL).
OpenGL est indépendante du système d'exploitation
Introduction à OpenGL et WebGL
Pourquoi le langage C
Le typage C dans OpenGL
OpenGL dispose de son propre set de typedef qui sont en fait les équivalents GL* des typedefs C:
Glubyte , Glbyte , Glushort , Glshort , Gluint , Glint , GLfloat , GLdouble
En plus de ces types de base, OpenGL fournit des typedefs additionnels:
GLchar*, utilisé par les fonctions qui gèrent les strings. C'est un pointeur vers une string ASCII
"null-terminated".
GLclampf et GLclampd, typdedefs pour GLfloat et GLdouble utilisé quand les valeurs attendues
doivent être comprise entre zéro et un.
GLsizei, un typedef integer utilisé pour récupérer/conserver la taille d'un memory buffer,
équivalent à size_t de la bibliothèque standard C.
GLboolean, un typedef pour GLbyte prévu pour contenir un GL_TRUE ou GL_FALSE, similaire au
bool du C++ ou C99
GLenum, un typedef de GLuint prévu pour contenir une constante GL_* prédéfini.
GLbitfield, un autre typedef de GLuint prévu pour contenir l'opérateur OR d'un masque ou plus de
GL_*_BIT
API OpenGL et le langage C
9
OpenGL (Open Graphics Library
) est une API de bas niveau,
développé en langage C.
L'utilisation de ce langage de
programmation lui a permis :
d'accéder à des fonctions
systèmes, et
de concevoir une interface
entre l'application (qui
utilise l'API) et le driver
matériel (donc le système).
De plus, l'architecture
développée par ce langage a
permis l'autorisation des
extensions, qui rajoutent de
nouvelles fonctions à la
bibliothèque graphique
OpenGL.
Introduction à OpenGL et WebGL
OpenGL est une machine d'état
OpenGL réutilise le Contexte
Enfin, OpenGL réutilise:
Le contexte
la notion de contexte (un
contexte = une fenêtre
graphique voir chapitre 2) et
l'utilisation des buffers (z-buffer,
buffer d'affichage...),
Dans ce chapitre nous allons présenter les
bases de fonctionnements d'OpenGL.
OpenGL Machine d'État
10
Le second point important concernant
l'API OpenGL est qu'il ne possède pas
de structure de données.
OpenGL est une machine d'état, dans
lequel nous activons ou désactivons
des modes, des paramètres et des
valeurs (explication a venir).
Introduction à OpenGL et WebGL
Exemples de spécifications API 3D
11
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
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
12
Intro
Qu'est-ce qu'OpenGL?
Le Pipeline Graphique
les principaux concepts.
expliquer le
fonctionnement d'un
pipeline graphique et le
cheminement des
données dans un rendu.
Introduction à OpenGL et WebGL
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 fure 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
Éléments de Formation d’Images
13
OpenGL (Open Graphics Library ) est une API standard:
Éléments de Formation d’Images: Trois éléments principaux indépendants contribuent à la
formation d’une image
Objet = API +
Application Objet
Source lumineuse =
API + Application
Lumière
Observateur(caméra) =
API + Application
Caméra
Introduction à OpenGL et WebGL
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 fure 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
Éléments de Formation d’Images
Interface des Programmes
d’Application Graphique
L’interface entre un programme
d’application (ex. Caméra ) et un système
graphique est spécifiée à l’aide des APIs
Graphiques qui peuvent être un
ensemble de fonctions dans une librairie
( ex Graphique API Caméra )
14
Trois éléments principaux indépendants
contribuent à la formation d’une image
API OpenGL
Objet =
API + App Objet
Lumière =
API + App Lumière
Caméra =
API + App Caméra
Introduction à OpenGL et WebGL
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( ) ;
}
15
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>
<html lang="en"><head>
<meta charset="utf-8">
<title>Hello WebGL</title>
<link rel="stylesheet"
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> webGLStart();
</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.
Introduction à OpenGL et WebGL
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( )
16
#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;
}
static void
update_fade_factor (void){
}
Introduction à OpenGL et WebGL
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..
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( )
17
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)
Introduction à OpenGL et WebGL
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 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...
18
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 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").
Introduction à OpenGL et WebGL
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
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 ajoutera des variables à la
structure au besoin comme des
textures et shaders 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.
19
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 {
GLuint vertex_buffer, element_buffer;
/* fields for texture... */
//GLuint textures[2];
/* fields for shader objects ... */
} g_resources;
Introduction à OpenGL et WebGL
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, ...).
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 gl
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.
20
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;
//GLuint textures[2];
/* 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;
}
Introduction à OpenGL et WebGL
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( )
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;
} 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;
}
21
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".
Introduction à OpenGL et WebGL
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; } 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.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 , shaders ... */ }
22
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.
Introduction à OpenGL et WebGL
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; } 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.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 , shaders ... */ }
23
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.
Introduction à OpenGL et WebGL
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,
};
}
24
Introduction à OpenGL et WebGL
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 ) {
buffers = make_buffer(gl);
/* make textures , shaders ... */
}
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;
GLuint textures[2];
/* 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; }
25
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.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) );
/* make textures and shaders */
}
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( ) {
buffers = make_buffer(gl);
/* make textures , shaders ... */
programInfo = {
program: shaderProgram,
attribLocations: {
Introduction à OpenGL et WebGL
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);
26
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);
Introduction à OpenGL et WebGL
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.
Le Pipeline Graphique
Les Shaders
On a maintenant nos vertex stockés dans les objets
tampons (buffer ) prêts à partir pour le pipeline graphique.
Les GPU modernes doivent leur flexibilité au fait que 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.
Il y a plusieurs types de shaders dont deux principaux:
1. les Vertex shaders : exécutés pour traiter les données de
chaque sommet ( vertex ) d‘objets géométriques. Ce sont
les étapes de projection sur le plan de projection ( le screen
space ) déjà obtenu (chapiter 2) et
2. les Fragments shaders (appelés aussi Pixel shaders pour
DirectX): exécutés pour traiter les données de chaque pixel
affiché. C’est pour l’assignation des couleurs.
3. 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...
27
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( )..
Introduction à OpenGL et WebGL
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 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.
Le Pipeline Graphique make_resources ( ) , render( )
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 gauche 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.
28
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader
//#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
Introduction à OpenGL et WebGL
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.
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.
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:
#version: GLSL borrows the C
preprocessor syntax for its own
directives. The directive indicates the
GLSL version of the source code; it
declares GLSL 1.10 version is used.
(GLSL versions are pretty tightly tied to
OpenGL versions; GLSL 1.10 is the
version that corresponds to OpenGL
2.0.)
La function main( ) : an entry point
much like C, a GLSL shader starts
executing from:
the main function, which in GLSL's case
takes no arguments and returns void.
29
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
}` ;
Le fragment shader
//#version 110
fsSource = `
void main() {
}`;
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.
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
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.
30
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
GLSL Variables
A variable is declared specifying
its type followed by the name of
the variable.
a variable can be initialized as part
of its declaration by using (=) sign.
The OpenGL ES Shading Language
is type safe. There are no implicit
conversions between types
31
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
GLSL 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.
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.
32
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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
Variable declarations may have a
storage qualifier, specified in front
of the type. These are summarized
as:
attribute: linkage between a vertex
shader and OpenGL for per-vertex
data. Ex: aVertexPosition
uniform: value does not change
across the primitive being
processed, uniforms form the
linkage between a shader, OpenGL,
and the application
33
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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
varying : linkage between a vertex
shader and a fragment shader for
interpolated data. Ex: vColor.
GLSL predefines some varying
variables to receive special outputs
used by the graphics pipeline,
including the gl_Position and
gl_FragColor variables used here.
gl_Position's other two vector
components are used in depth testing
and perspective projection; we'll look
at them closer next chapter when we
get into 3d math. For now, we just fill
them with their identity values zero
and one.
34
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
les Vertex shaders : exécutés pour
traiter les données de chaque sommet
( vertex ) et qui dessineront un carré
2D sur le plan de projection.
2. les Fragments shaders: exécutés
pour traiter les données de chaque
pixel affiché et créeront la couleur
pour notre scène.
Le shader de sommet (vertex)
Le shader de sommet reçoit 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.
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.
35
Introduction à OpenGL et WebGL
Programme Source des Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
les Vertex shaders : exécutés pour
traiter les données de chaque
sommet ( vertex ) et qui dessineront
un carré 2D sur le plan de projection.
2. les Fragments shaders: exécutés
pour traiter les données de chaque
pixel affiché et créeront la couleur
pour notre scène.
Le shader de sommet
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 ` `.
36
Introduction à OpenGL et WebGL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
37
Introduction à OpenGL et WebGL
Programme Source des Vertex Shaders
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
38
Introduction à OpenGL et WebGL
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( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
Rasterization
Rasterization
Comme mentionné au dessus, les
différents outputs du vertex shader
sont rastérisées.
1. Pixellisation: Le »raster » prend
chaque triangle, le découpe, rejette
les éléments qui sont en dehors de
l'écran, et localiser et mémoriser les
pixels de l’écran qui correspondent a
l’intérieur des parties restantes du
triangle.
2. Interpolation: Le « raster » fait
également une interpolation le long
de la surface rastérisée de chaque
triangle, en assignant un dégradé
des valeurs à chaque pixel appelé a
cet effet fragment.
Par exemple, si le vertex shader
assigne une couleur à chaque
vertex, le « raster » va dégrader ses
couleurs le long de la surface
pixelisé, comme montré dans le
diagramme.
39
Introduction à OpenGL et WebGL
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
The vertex shader file:
vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for the
fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 ,
1.0 ) ;
}`;
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.
Rasterization
Rasterization
Comme mentionné au dessus,
les différents outputs du
vertex shader sont
rastérisées.
1. Pixellisation
2. Interpolation
At present almost all
graphics systems are raster
based.
A picture elements called
fragments are produced as
an array called raster.
The raster are stored in
memory called framebuffer.
The conversion of geometric
entities to fragments array,
raster is called rasterization.
40
Introduction à OpenGL et WebGL
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , Rasterization et render( )
The vertex shader file:
vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for the
fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 ,
1.0 ) ;
}`;
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.
Rasterization : Pixelization
Système de formation d’images
Les primitives d’OpenGL sont:
Les points
Les segments
Les triangles
Polygones
Bien qu'on peut faire des objets
intéressants avec des points et des
segments, ce sont les polygones qui
font la majorité des scènes dans des
jeux vidéo.
Généralement, il est très conseillé
d’utiliser les triangles pour plusieurs
avantages:
41
Système de formation
d’images
Avantages des Triangles:
La plus part des circuits des
cartes graphique utilisent des
triangles pour les calculs de
rastérisation. Le calcul est
facile et rapide avec les
triangles qu’avec les autres
polygones.
Les points du triangles se
trouvent dans le même plan
dans l’espace 3D.
Triangles sont convexe ce
qui rend les régularités
telles que les détections de
collision simple a calculer.
ARB ( OpenGL Architecture
Review Board ) a marqué les
polygones et quadrilatères
pour un éventuel supprime
(disparition) de la
bibliothèque.
Introduction à OpenGL et WebGL
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.
Rasterization : Pixelization
Système de formation d’images
Triangle Setup:
Un triangle est un objet à 3 sommets.
Généralement un objet est constitué de grand
nombre de triangles.
Une fois tous les triangles non-visibles
éliminés, notre carte graphique va devoir
attribuer ces sommets de triangles à des pixels.
Car notre écran ne comprend que les pixels.
C'est l'étape de Triangle Setup.
Cette étape part du principe qu'un triangle est
composé de trois cotés.
Chacun de ces cotés est un segment, défini par
deux points: deux sommets du triangle.
Si on prolonge ce segment, on obtient une
droite, qui parcours l'écran.
Cette droite découpera l'écran en deux
parties distinctes.
42
Introduction à OpenGL et WebGL
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.
Rasterization : Pixelization
Système de formation d’images
Triangle Setup:
Cette droite peut être définie par un de ses points,
et par sa pente.
Dans l'algorithme qui suit, le point choisit sera un
des sommets du triangle.
Fonction de contours
Tout l'algorithme se base sur une fonction
mathématique appelée fonction de contours.
Si on dispose d'une droite, la fonction de contours
va, pour chaque point sur l'image, renvoyer un
nombre entier.
Si le point est placé d'un coté (à gauche, en haut, de
la droite), alors cette fonction renverra un nombre
négatif.
Si le point est placé sur la droite, la fonction revoit zéro.
Si le point est placé ( à droite , en bas de la droite ),
la fonction renvoie un nombre positif.
En bleu, les zones de pixels négatives, en rouge les
zones positives.
43
Introduction à OpenGL et WebGL
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.
Rasterization : Pixelization
Système de formation d’images
Triangle Setup : Fonction de contours
Comment calculer cette fonction ?
1. Tout d'abord, nous allons dire que le point que nous voulons
tester a pour coordonnées x et y sur l'écran.
2. Ensuite, nous allons prendre un des sommets du triangle, de
coordonnées X et Y.
3. L'autre sommet, placé sur cette droite, sera de coordonnées
X2 et Y2.
4. La fonction est alors égale à :
( x − X )
∗
( Y2 − Y ) − ( y − Y )
∗
( X2 − X )
on a utilise des circuits additionneurs, soustracteurs, et
multiplicateurs.
Notre triangle est composé de trois cotés, de trois segments.
Si on applique cette fonction sur chacun des segments
composant ce triangle :
à l'intérieur du triangle, les trois fonctions (une par coté)
donneront un résultat positif ;
à l'extérieur, une des trois fonctions donnera un résultat
négatif.
44
Introduction à OpenGL et WebGL
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.
Rasterization : Pixelization
Système de formation d’images
Triangle Setup : Fonction de contours
( x − X )
∗
( Y2 − Y ) − ( y − Y )
∗
( X2 − X )
on a utilise des circuits additionneurs, soustracteurs,
et multiplicateurs.
Notre triangle est composé de trois cotés, de
trois segments.
Pour savoir quels sont les pixels qui peuvent
former le triangle à l’affichage,
il suffit de tester, la carte graphique, pour chaque
pixel possible à l’écran le résultat des fonctions de
contours.
Si les 3 résultats sont positifs, l’information du
pixel est mémorisée dans la carte graphique, avec
les informations correspondant au triangle.
Une fois l'étape de triangle setup terminée, on sait
donc quels sont les pixels situés à l'intérieur d'un
triangle donné.
45
Introduction à OpenGL et WebGL
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.
Rasterization : Pixelization
Système de formation d’images
Triangle Setup : Fonction de contours
( x − X )
∗
( Y2 − Y ) − ( y − Y )
∗
( X2 − X )
on a utilise des circuits additionneurs, soustracteurs, et
multiplicateurs.
tester tous les pixels de l'écran pour chaque triangle et surtout
si le triangle est assez petit, une grande quantité de pixels
seront testés inutilement.
Pour éviter cela, diverses optimisations ont étés inventées:
La première consiste à déterminer le plus petit rectangle
possible qui contient le triangle, et à ne tester que les pixels
de ce rectangle.
De nos jours, les cartes graphiques actuelles se basent sur
une amélioration de cette méthode.
Le principe consiste à prendre un plus petit rectangle, et à le
découper en morceaux carrés. Tous les pixels d'un carré
seront testés simultanément, dans des circuits séparés, ce
qui est plus rapide que les traiter un par un.
Pixellisation: Le raster prend chaque triangle, le découpe,
rejette les éléments qui sont en dehors de l'écran, et localise
et mémorise les pixels de l’écran qui correspondent a
l’intérieur des parties restantes du triangle.
46
Introduction à OpenGL et WebGL
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.
Rasterization : Interpolation
Mais l'étape de rastérisation ne s’arrête pas à la localisation et
mémoriser les pixels à l’intérieur des triangles
Parce que chaque sommet (vertex ) d'un triangle, contient divers
paramètres:
une couleur ,
une profondeur z,
une texture, …etc.
Mais ces informations ne sont valables que pour les sommets, donc
pour les pixels à l’écran correspondants aux sommets.
Mais les pixels à l’intérieur du triangle doivent aussi être colorié,
avoir une coordonnée de profondeur, etc.
On doit calculer leur couleur, profondeur, etc. en fonction des
données situées aux sommets.
2. Interpolation: Le raster également fait une interpolation le long
de la surface rastérisée de chaque triangle, en assignant un
dégradé des valeurs à chaque pixel de l’écran appelé a cet effet
fragment.
les pixels à l’intérieurs du triangle sont obtenus par la méthode
de triangle setup.
47
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Par exemple, si j’ai:
un pixel qui correspond au premier sommet dont on a
attribué la couleur vert,
un autre pixel qui correspond au deuxième sommet dont on
a attribué la couleur rouge, et
un pixel qui correspond au troisième sommet dont on a
attribué la couleur bleu,
le triangle résultant doit être colorié par une étape
d'interpolation qui va être faite sur tous les pixels à
l’intérieurs du triangle.
La couleur n'est pas le seul paramètre qui est interpolé.
Toutes les valeurs attachées au pixel devront l'être. Par
exemple, la profondeur z attachée à un pixel le sera aussi.
les pixels à l’intérieurs du triangle sont obtenus par la
méthode de triangle setup.
Interpolation: Le raster également fait une interpolation le
long de la surface rastérisée de chaque triangle, en
assignant un dégradé des valeurs à chaque pixel de l’écran
appelé a cet effet fragment.
48
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Profondeur z
Généralement, un seul pixel est lié à plusieurs triangles et non un
seul triangle sur la trajectoire d'un pixel a l'étape de triangle
setup . Car plusieurs objets l'un derrière l'autre.
Dans ces conditions, ce que va fournir l'étape d'interpolation,
ce sont des informations déduites de l'influence des triangles
sur le pixel.
C’est l’ensemble de ces informations qu’on appelle fragment.
Le fragment peut contenir :
une position à l'écran
une profondeur
une couleur
une valeur de stencil
une transparence alpha
Texture, etc.
Fragments nommés ainsi tant qu'ils ne sont pas inscrits à
l'écran. Ces fragments vont être passes au shader fragment.
Le fragment shader va les inscrire pixels à l'écran.
49
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Coordonnées barycentriques
Plusieurs fragments pourront être combinés
pour obtenir la couleur finale d'un pixel a
l’écran.
Pour calculer chaque donnée de chaque
fragment dans un triangle en fonction de ce
qu'on trouve sur les sommets on utilise ce
qu'on appelle: les coordonnées
barycentriques
Ces coordonnées sont au nombre de trois, et
sont notées u, v et w. Pour les déterminer, on
doit relier le point dont on veut la valeur, aux
trois autres sommets du triangle.
On obtient ainsi trois triangles :
Les coordonnées barycentriques sont
proportionnelles aux aires de ces trois
triangles.
Ces trois aires sont divisées par l'aire totale du
triangle, qui se ramener dans l'intervalle [0, 1].
50
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Coordonnées barycentriques
Cela signifie que la somme de ces trois
coordonnées vaut 1:
u + v + w = 1
En conséquence, on peut se passer d'une
des trois coordonnées dans nos calculs,
w = 1 - (u + v).
L'aire totale du triangle, ainsi que l'aire des
trois sous-triangles, sont déterminées par un
calcul dans un circuit de la carte graphique.
Ces trois coordonnées permettent ainsi de
repérer chaque point et de faire
l'interpolation.
Il suffit pour cela de multiplier la couleur ou
la profondeur d'un sommet par la
coordonnée barycentrique associée, et de
faire la somme de ces produits.
51
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Coordonnées barycentriques
Si l'on note C1, C2, et C3 les couleurs des trois sommets, la
couleur d'un pixel a l’écran vaut:
(C1 * u) + (C2 * v) + (C3 * w).
Le résultat obtenu est alors celui de l’image du milieu.
Le problème : la perspective n'est pas prise en compte !
Perspective
la coordonnée de profondeur (z) n'était pas prise en compte
dans le calcul de l’interpolation. Pour résumer, le problème de la
mauvaise perspective :
en interpolant 1/z, et en calculant z à partir de cette valeur
interpolée, les problèmes disparaissent.
la carte graphique corrige toute seule la perspective, et qu'elle
utilise une méthode d'interpolation un peu plus compliquée que
les calculs vus au-dessus.
52
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Perspective
en fonction de la profondeur z du fragment en cours de tracé et du
z actuellement stocké dans le pixel visé, le pixel est ou non modifié (i.e.
sa couleur et son z). Ceci constitue le schéma de base,
le raster manager, à qui le pixel est confié pour être tracé à l'écran
après d'éventuels traitements supplémentaires (dithering: solution pour
afficher une image dans un dispositive de couleurs insuffisant, etc.).
53
Introduction à OpenGL et WebGL
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.
Rasterization : Fragment
Contenu d'un fragments
En mode true colors, la couleur se code avec 3 octets représentant les
composantes rouge, verte et bleue.
Mais les fragments peuvent contenir bien plus d'information au delà
de la simple couleur:
on utilise généralement aussi une profondeur z (utilisée pour le Z-
buffer) et une opacité alpha (d'où la notation RGBA).
De plus, ces valeurs sont doublées en mode double buffer, pour faire des
animations fluides en laissant visible l'image précédente pendant que l'on
trace la nouvelle dans le back-buffer. Comme ces informations diverses
réfèrent aux mêmes pixels, on parle de `plans', superposés comme des
calques.
On dispose également d'un plan de pop-up qui permet de tracer des
menus ou des pointeurs sans altérer le contenu de l'image,
de plans de stencil qui permettent de masquer certaines parties de
l'image,
voire d'une image de fond pour les machines qui ont assez de
mémoire.
Le nombre de bits alloué aux divers plans est paramétrable,
la quantité disponible dépendant de la mémoire de la carte graphique.
54
Introduction à OpenGL et WebGL
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.
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).
55
Introduction à OpenGL et WebGL
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( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
56
Introduction à OpenGL et WebGL
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( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
57
Introduction à OpenGL et WebGL
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( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
58
Introduction à OpenGL et WebGL
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( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
59
Introduction à OpenGL et WebGL
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( )
The vertex shader file: vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as I
see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 , 1.0 )
;
}`;
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.
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.
60
Introduction à OpenGL et WebGL
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( )
The vertex shader file:
vsSource.glsl
//#version 110
vsSource =`
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition ;
}` ;
Le fragment shader file: fsSource.glsl
#version 110
fsSource = `
//Why it is necessary to set precission for
the fragment shader?
//Vertex shader works without this, but
fragment shader
//doesn't work without this code row (as
I see).
// Why the different behaviour exist?
precision mediump float;
void main() {
gl_FragColor = vec4(1.0 , 1.0 , 1.0 ,
1.0 ) ;
}`;
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 struct {
/*fields for buffer and texture
objects*/
GLuint vertex_buffer,
element_buffer;
// GLuint textures[2];
/* fields for shader objects*/
GLuint vertex_shader,
fragment_shader, program;
} g_resources;
61
Introduction à OpenGL et WebGL
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. Pour ceci, 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) {
g_resources.vertex_buffer = make_buffer(
GL_ARRAY_BUFFER , g_vertex_buffer_data,
sizeof(g_vertex_buffer_data) );
g_resources.element_buffer = make_buffer(
GL_ELEMENT_ARRAY_BUFFER , g_element_buffer_data,
sizeof(g_element_buffer_data) );
/* make shaders ... */
g_resources.vertex_shader = make_shader(
GL_VERTEX_SHADER , « vsSource.glsl« );
if (g_resources.vertex_shader == 0) return 0;
g_resources.fragment_shader = make_shader(
GL_FRAGMENT_SHADER , « fsSource.glsl« );
if (g_resources.fragment_shader == 0) return 0;
g_resources.program = make_program (
g_resources.vertex_shader,g_resources.fragment_shader);
if (g_resources.program == 0) return 0;
}
62
Introduction à OpenGL et WebGL
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
function make_resources( gl ) {
buffers = make_buffer(gl);
shaderProgram = make_shader(gl );
programInfo = {
program: shaderProgram ,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram,
'aVertexPosition’),
},
};
} //end make_resources()
63
Introduction à OpenGL et WebGL
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;
// GLuint textures[2];
/* 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) );
64
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 ) {
buffers = make_buffer(gl);
shaderProgram = make_shader(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_resou
rces.fragment_shader);
if (g_resources.program == 0)
return 0;
}
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Programme Shaders
WebGL make_resources ( )
static struct {
/*fields for buffer and texture
objects*/
GLuint vertex_buffer,
element_buffer;
// GLuint textures[2];
/* 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) );
65
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_resou
rces.fragment_shader);
if (g_resources.program == 0)
return 0;
}
Introduction à OpenGL et WebGL
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; }
66
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;
}
Introduction à OpenGL et WebGL
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;
}
67
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;
}
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Programme Shaders
WebGL make_resources ( )
OpenGL make_resources ( )
Shader and program fonction
68
Introduction à OpenGL et WebGL
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. We create a shader object
by calling glCreateShader with the shader type (
either GL_VERTEX_SHADER or GL_FRAGMENT_SHADER). We then supply an
array of one or more pointers to strings of source code to glShaderSource, and
tell OpenGL to compile the shader with glCompileShader.
This step is analogous to the compilation stage of a C build process;
a compiled shader object is akin to a .o or .obj file. Just as in a C project, any
number of vertex and fragment shader objects can be linked together into a
working program, with each shader object referencing functions defined in the
others of the same type, as long as the referenced functions all resolve and
a main entry point is provided for both the vertex and fragment shaders. Also just
like a C program, a block of shader source code can fail to compile due to syntax errors,
references to nonexistent functions, or type mismatches. OpenGL maintains an info
log for every shader object that contains errors or warnings raised by the GLSL
compiler. After compiling the shader, we need to check
its GL_COMPILE_STATUS with glGetShaderiv.
If the compile fails, we display the info log using our show_info_log function and give
up.
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.
Shader and program fonction
69
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Compiling shader objects
Here's how show_info_log looks: We pass in
the glGetShaderiv and glGetShaderInfoLog functions as arguments
to show_info_log so we can reuse the function for program objects further
on. (Those PFNGL* function pointer type names are provided by GLEW.)
We use glGetShaderivwith the GL_INFO_LOG_LENGTH parameter to get
the length of the info log, allocate a buffer to hold it, and download the
contents using glGetShaderInfoLog.
Linking program objects
If shader objects are the object files of the GLSL build process, then
program objects are the finished executables. We create a program object
using glCreateProgram, attach shader objects to be linked into it
with glAttachShader, and set off the link process with glLinkProgram.
Of course, linking can also fail, due to functions being referenced but not
defined, missing mains, fragment shaders using varying inputs not supplied
by the vertex shader, and other reasons analogous to the reasons C
programs fail to link.
We check the program's GL_LINK_STATUS and dump its info log
using show_info_log, this time using the program-specific
glGetProgramiv and glGetProgramInfoLog functions
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
Une fois que les shaders sont
définis, que les emplacements
sont retrouvés, et que les
positions des sommets du carré
2D sont stockées dans le
tampon,
nous pouvons faire
effectivement le rendu de la
scène. Let's start writing the
code to set up our rendering job
state:
70
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
la fonction render( )
Pris conjointement, un ensemble de
shaders de sommet et de fragment sont
appelés un programme shader
On a écrit les sources des codes des deux
shaders, on a écrit le code pour de les
transmettre à OpenGL ou WebGL, les
codes seront compiler et les lier(link)
ensemble dans GPU.
Programme Shaders
Storing our shader objects Dans
OpenGL
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:
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
71
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.
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.useProgram(programInfo.program);
{
const numComponents = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition,
numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray( programInfo.attribLocations.vertexPosition);
}
{
const offset1 = 0;
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);
}
now *= 0.001; // convert to seconds
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glBindBuffer(GL_ARRAY_BUFFER,
g_resources.vertex_buffer);
glVertexAttribPointer(
g_resources.attributes.position, /* attribute */ 2, /* size */
GL_FLOAT, /* type */ GL_FALSE, /* normalized? */
sizeof(GLfloat)*2, /* stride */
(void*)0 /* array buffer offset */ );
glEnableVertexAttribArray(g_resources.attributes.position);
glBindBuffer(GL_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();
}
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Render the Scene
72
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
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.useProgram(programInfo.program);
{
const numComponents = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition,
numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray( programInfo.attribLocations.vertexPosition);
}
{
const offset1 = 0;
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glBindBuffer(GL_ARRAY_BUFFER,
g_resources.vertex_buffer);
glVertexAttribPointer(
g_resources.attributes.position, /* attribute */ 2, /* size */
GL_FLOAT, /* type */ GL_FALSE, /* normalized? */
sizeof(GLfloat)*2, /* stride */
(void*)0 /* array buffer offset */ );
glEnableVertexAttribArray(g_resources.attributes.position);
glBindBuffer(GL_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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
73
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
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.useProgram(programInfo.program);
{
const numComponents = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer( programInfo.attribLocations.vertexPosition,
numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray( programInfo.attribLocations.vertexPosition);
}
{
const offset1 = 0;
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glBindBuffer(GL_ARRAY_BUFFER,
g_resources.vertex_buffer);
glVertexAttribPointer(
g_resources.attributes.position, /* attribute */ 2, /* size
*/ GL_FLOAT, /* type */ GL_FALSE, /* normalized? */
sizeof(GLfloat)*2, /* stride */
(void*)0 /* array buffer offset */ );
glEnableVertexAttribArray(g_resources.attributes.position
);
glBindBuffer(GL_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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
74
Activating the shader program
and assigning uniforms
Ensuite, nous établissons la
position du carré 2D.
We begin by activating our shader
program by passing the name of
the linked program object to
glUseProgram.
// Indiquer à WebGL d'utiliser
notre programme pour dessiner
gl.useProgram(programInfo.program);
We begin by activating our
shader program by passing the
name of the linked program
object to glUseProgram.
glUseProgram(g_resources.progra
m);
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
75
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
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render(now) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
76
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 render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.useProgram(programInfo.program);
{
const numComponents = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
{
const offset1 = 0;
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
77
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 render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.useProgram(programInfo.program);
{
const numComponents = 2;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents, type, normalize, stride, offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
{
const offset1 = 0;
const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset1, vertexCount);
}
now *= 0.001; // convert to seconds
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
78
Submitting the rendering job
• glDrawElements is the function
that sets the graphics pipeline in
motion. We tell it what triangle
assembly mode we want, how
many vertices to assemble
triangles from, the type of the
components of our element array,
and the offset within the currently
bound GL_ELEMENT_ARRAY_BUF
FER of the first component to
render, again as a fake-pointer-
but-really-integer.
• It will then take the pointed-to
element array indexes, gather
them up with the currently bound
shader program, if any uniform
values, if any texture units, and
vertex attribute pointers we just
set up, bundle everything into a
rendering job, and place the job in
the GPU's queue.)
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
79
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 render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
80
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 render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
81
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.
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
82
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.
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
83
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.
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
84
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.
• WebGL requestAnimationFrame
function render( now ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT) ;
gl.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);
}
now *= 0.001; // convert to seconds
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
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();
}
Introduction à OpenGL et WebGL
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
85
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);
}
Introduction à OpenGL et WebGL
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
Liste des références sera donnée ultérieurement.
Références
86
Programmation 2D/3D
Introduction à OpenGL et WebGL
FIN DU CHAPITRE
FIN DU CHAPITRE
FIN DU CHAPITRE
FIN DU CHAPITRE
87
FIN DU CHAPITRE
Introduction à OpenGL et WebGL
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
Plaquage des Textures
Programmation 2D/3D:
INF 1483
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
Introduction à OpenGL et WebGL
Modèle de Caméra Synthétique
90
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
91
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.
92
Peut être utilisé soit pour afficher les images en mode
ligne (calligraphique) ou en mode raster?.
Système d’affichage
