Enseignant du Cours: DJAFER BADDOU (PhD)
Courriel: djafer.baddou@gmail.ca
Programmation 2D/3D
1
2
Programmation 2D/3D
Préparation GL
Plan de Projection
Introduction à
l’Infographie
Introduction à
OpenGL/ WebGL
Introduction
Contenu
Rastérisation et
Couleurs en GL
Notion sur
les Couleurs
Plaquage des
Texture en GL
Attributes
Colorage de la
Scène
Optique et
Infographie
Illuminée la
Scène
Phong Shading
Model WebGL
Transformations
Géométriques
Notions
Mathématiques
Pipeline de GL
Revisited
Les Mathématiques
et l’Infographie
GL Buffers
Attributes
The Cours
Le Cours
For these tutorials, I'm going to assume:
1. you're already a programmer and
2. that you know C/C++ or JavaScript, if not see into about C/C++ and
JavaScript
3. but that you haven't necessarily seen OpenGL or WeGL or done
graphics programming before.
4. Knowing at least some basic algebra and geometry will help a lot.
5. I'm going to cover OpenGL 3.0, WebGL 2 or OpenGL ES.
6. If I write enough chapters, I might talk about some of the new
features of OpenGL 3 and 4 after I go through the basics.
7. In addition to OpenGL, I'll be using two helper libraries:
1. GLUT (the GL Utility Toolkit), which provides a cross-platform
interface between the window system and OpenGL, and
2. GLEW (the GL Extensions Wrangler), which streamlines dealing
with different versions of OpenGL and their extensions.
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
Simple program that draws an object on
the screen that makes in practice the
graphic pipeline / un simple programme
qui dessine un objet sur l'écran en
mettant le pipeline graphique en
pratique.
Les vertex shaders vertex
Assemblage des triangles
La rastérisation (ou pixellisation)
Le fragment shader fragment
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 fur et a mesure qu’on avance dans le cours.
Les spécifications des objets de la scène sont indépendants des
spécifications de la camera.
Implémenter les objets dans la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan de projection.
Etc…
Plan
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 WebGL
La version 1.0 d’OpenGL apparait en 2011.
La dernière version WebGL2.0 apparait en 2017.
Les versions GLSL
La version 1.10 d’OpenGL apparait en 1992.
La dernière version 3.00 apparait en juillet 2017.
Les versions OpenGL
La version 1.0 d’OpenGL apparait en 1992.
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 à respecter
pour encourager les développeurs à concevoir des extensions portables.
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 et du
matériel.
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
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..
Le Pipeline Graphique
Les Shaders
On a maintenant nos vertex stockés dans les mémoires du
GPU 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.
Entre les vertex shaders et fragment shader se trouve 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...
17
1. des données dites 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).
2. Les fragments dans le framebuffer assignés
des couleurs par des fragments shaders.
3. Finalement, le framebuffer est dessiné sur
l'espace écran ("screen space").
make_ressources( ) doit être implémentée on fait
appel à:
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:
1. des shader objects et
2. des vertex 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 droite les codes sources de
deux shaders exécutés au GPU
lors du dessin d'un contenu
OpenGL/WebGL:
1. les Vertex shaders :
exécutés pour traiter les
données de chaque
sommet ( vertex ) et qui
dessineront un carré 2D
sur le plan de projection.
2. les Fragments shaders:
exécutés pour traiter les
données de chaque pixel
affiché et créeront la
couleur pour notre scène.
18
The vertex shader
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
Introduction à OpenGL et WebGL
Le Pipeline Graphique
Plan de Travail du Modèle de
la Camera Synthétique
Le Pipeline Graphique make_resources ( ) , render( )
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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
mémoires GPU 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 300 es version is used.
(GLSL versions are pretty tightly tied to
OpenGL that corresponds to OpenGL
3.0.) #version directive must occur on
the first line of the shader.
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. all shaders
have a main function
19
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1);
// outColor = vec4(0.5, 0.5, 0.5, 1) ;
v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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.
20
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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
21
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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.
22
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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.
Varying Storage Qualifiers
Variable declarations may have a storage
qualifier, specified in front of the type.
These are summarized as:
varying: linkage between a vertex
shader and a fragment shader for
interpolated data. Ex: vColor.
we declare a varying in vertex shader
by making an out to pass data to the
fragment shader.
And then we declare the same varying
as an in in the fragment shader.
23
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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.
Varying Storage Qualifiers
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 is a special variable a
vertex shader. A gl_Position's
other two vector components are
used in depth testing and
perspective projection; we'll look at
them closer in chapter when we get
into 3d math. For now, we just fill
them with their identity values zero
and one. // is responsible for setting
24
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
1. des shader objects et
2. des vertex 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)
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 gl_Position pour être partagées
avec le shader de fragment.
The shader first assigns the vertex's
screen space position to the predefined
varying variable gl_Position, that GLSL
provides for the purpose.
25
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée
on fait appel à:
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
Finally note both codes are strings
between quotes ` `.
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.
26
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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.
call glDrawArrays() without a bound
array buffer.
A vertex shader with no explicit inputs
has implicit inputs from the GL:
gl_VertexID and
gl_InstanceID.
Traditionally, WebGL apps put
geometry data in buffers. They then
use attributes to pull vertex data from
those buffers into shaders and convert
them to clip space. The word
traditionally is important. It's only a
tradition to do it this way. It is in no
way a requirement. WebGL doesn't
care how we do it, it only cares that
our vertex shaders assign clip space
coordinates to gl_Position. In GLSL ES
3.0 there is a special variable,
gl_VertexID available in vertex shaders.
Effectively it counts vertices.
27
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer
est dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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.
call glDrawArrays() without a bound
array buffer.
A vertex shader with no explicit inputs
has implicit inputs from the GL:
gl_VertexID and
gl_InstanceID.
Let's use it to draw calculate vertex
positions with no buffer data. Well
compute the points of a circle based
on that variable. This can be sufficient
to generate useful output positions
procedurally. data object can be
defined statically in the vertex shader.
use attribute-less rendering together
with GL_QUADS which are no longer
present in the core profile (so in core
an attribute-less screen filling quad has
to be at least a GL_TRIANGLE_STRIP –
less intuitive).
28
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer
est dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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.
call glDrawArrays() without a bound array
buffer.
A vertex shader with no explicit inputs has
implicit inputs from the GL:
gl_VertexID and
gl_InstanceID.
If you now test this and it works even in
compatibility profile, you’re most likely to
have a NVidia GPU, as NVidias drivers will
accept this. They are wrong here and the ATI
drivers are correct in not allowing attribute-
less rendering in compatibility. Sadly, NVidia
is more error tolerant than the spec –
sounds great at first, but can be problematic
when testing wrong code on other graphics
cards (‘it worked before, that’s not my
fault…’).
After some problems with this, in core
attribute-less rendering works for both, ATI
and NVidia cards. You can download the
OpenGL sample pack from g-truc creation to
test this on your card.
29
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer
est dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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:
The shader assigns its per-
vertex outputs to varying
variables.
30
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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 des valeurs à
chaque pixel appelé a cet effet
fragment.
Rasterization will be disscussed in
details in chapter 6 Rastérisation et
Couleurs en GL
31
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) )
;
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[
gl_VertexID ] , 0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 )
;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
In vec4 v_color ;
// we need to declare an output for
the //fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1);
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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
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?
fragment shaders don't have a
default precision so we need to
pick one. highp is a good default. It
means "high precision"
32
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = vec4(0.5, 0.5, 0.5, 1) ; v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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).
the values set on a varying by a
vertex shader will be interpolated
while executing the fragment
shader.
33
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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.
34
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
// v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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
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 outColor (
gl_FragColor )
Fragment shaders are also given
a different set of predefined
gl_* variables.
No more: gl_FragColor is the
most important, a vec4 to
which the shader assigns the
RGBA color value for the
fragment.
35
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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
outColor (gl_FragColor).
Cette couleur est alors dessinée à
l'écran dans la position correcte.
36
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
vsSource =`#version 300 es
const vec2 data[4] = vec2[ ] (
vec2(-0.5, 0.5) , vec2(-0.5, -0.5),
vec2( 0.5, 0.5) , vec2( 0.5, -0.5) ) ;
//varying
Out vec4 v_color ;
void main( ){
gl_Position = vec4( data[ gl_VertexID ] ,
0.0, 1.0);
v_color = vec4(1.0 , 0.0 , 1.0 , 1.0 ) ;
// gl_PointSize = 10.0;
}`;
Le fragment shader file: fsSource.glsl
fsSource = `#version 300 es
precision highp float;
//precision mediump float;
//varying
In vec4 v_color ;
// we need to declare an output for the
//fragment shader
out vec4 outColor;
void main() {
// gl_FragColor = vec4(1, 0, 0.5, 1); //
outColor = v_color ;
}`;
1. des données dites 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).
2. Les fragments dans le framebuffer
assignés des couleurs par des
fragments shaders.
3. Finalement, le framebuffer est
dessiné sur l'espace écran ("screen
space").
make_ressources( ) doit être implémentée on
fait appel à:
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 shader objects*/
GLuint vertex_shader,
fragment_shader, program;
} g_resources;
37
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.
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des fragments
shaders.
3. Finalement, le framebuffer
est dessiné sur l'espace
écran ("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
make_shader( ).
Avec la satisfaction d'avoir le
plan de projection, on va ré-
utiliser le même
programme. On est prêt:
1. à remplir la fonction
make_resources( ) avec:
des vertex objects,
2. des shader objects et
3. des texture objects
2. à projeter (dessiner) la
scène avec la fonction
render( ).
au fur et à mesure qu’on
avance dans le cours.
Les prochains chapitres, on
introduit les textures
OpenGL.
Les spécifications des objets
de la scène sont
indépendants des
spécifications de la camera.
Implémenter les objets dans
la scène.
Définir le frustum.
Définir la camera synthétique
Dessiner l’image sur le plan
de projection.
OpenGL/WebGL objects shaders
static int make_resources(void) {
/* make shaders ... */
g_resources.vertex_shader = make_shader(
GL_VERTEX_SHADER , « vsSource.glsl« );
if (g_resources.vertex_shader == 0) return 0;
g_resources.fragment_shader = make_shader(
GL_FRAGMENT_SHADER , « fsSource.glsl« );
if (g_resources.fragment_shader == 0) return 0;
g_resources.program = make_program (
g_resources.vertex_shader ,
g_resources.fragment_shader );
if (g_resources.program == 0) return 0;
}
38
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 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.
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés des
couleurs par des
fragments shaders.
3. Finalement, le
framebuffer est dessiné
sur l'espace écran
("screen space").
make_ressources( ) doit
être implémentée on fait
appel à:
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 ) {
shaderProgram = make_shader(gl );
programInfo = {
program: shaderProgram ,
};
} //end make_resources()
39
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.
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés
des couleurs par des
fragments shaders.
3. Finalement, le
framebuffer est dessiné
sur l'espace écran
("screen space").
make_ressources( ) doit
être implémentée on fait
appel à:
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 shader objects*/
GLuint vertex_shader, fragment_shader, program;
} g_resources;
static int make_resources(void) {
/* make shaders ... */
g_resources.vertex_shader = make_shader ( GL_VERTEX_SHADER ,
« vsSource.glsl« ) ;
if (g_resources.vertex_shader == 0) return 0;
g_resources.fragment_shader = make_shader ( GL_FRAGMENT_SHADER ,
« fsSource.glsl« );
if (g_resources.fragment_shader == 0) return 0;
g_resources.program = make_program (
g_resources.vertex_shader , g_resources.fragment_shader );
if (g_resources.program == 0) return 0;
}
40
Initialisation des
shaders
OpenGL: Le code
crée les deux objets
shaders en appelant
make_shader( ), lui
passant le type et la
source du shader.
Il crée alors un
shader programme,
en appelant
make_program( )
attache les shaders
et les relie ensemble.
Si la compilation ou la
liaison échoue, le code
affiche une alerte.
function make_resources( gl ) {
shaderProgram = make_shader(gl );
programInfo = {
program: shaderProgram,
};
}
OpenGL make_resources ( )
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Programme Shaders
WebGL make_resources ( )
41
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 ( )
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
static struct {
/* fields for shader objects*/
GLuint vertex_shader, fragment_shader, program;
} g_resources;
static int make_resources(void) {
/* make shaders ... */
g_resources.vertex_shader = make_shader ( GL_VERTEX_SHADER ,
« vsSource.glsl« ) ;
if (g_resources.vertex_shader == 0) return 0;
g_resources.fragment_shader = make_shader ( GL_FRAGMENT_SHADER ,
« fsSource.glsl« );
if (g_resources.fragment_shader == 0) return 0;
g_resources.program = make_program (
g_resources.vertex_shader , g_resources.fragment_shader );
if (g_resources.program == 0) return 0;
}
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; }
42
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;
}
43
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
44
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Functions that operate on shaders and programs objects take the
object’s name directly as an argument. 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
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés
des couleurs par des
fragments shaders.
3. Finalement, le
framebuffer est dessiné
sur l'espace écran
("screen space").
make_ressources( ) doit
être implémentée on fait
appel à:
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
45
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
1. des données dites 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).
2. Les fragments dans le
framebuffer assignés
des couleurs par des
fragments shaders.
3. Finalement, le
framebuffer est dessiné
sur l'espace écran
("screen space").
make_ressources( ) doit
être implémentée on fait
appel à:
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 données comme
variable dans le code du vertex
shaders,
nous pouvons faire
effectivement le rendu de la
scène. Let's start writing the
code to set up our rendering job
state:
46
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
des données dites 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.
Finalement, le framebuffer
est dessiné sur l'espace écran
("screen space").
make_ressources( ) doit être
implémentée on fait appel à:
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
47
Overview of a rendering job
Rendering potentially takes a lot of parameters. In
addition to shaders, it may involve, there are
dozens of others such as buffers, 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
l’ arrière plan ;
glClearColor effacement en blanc, complètement
opaque glClearColorsets an RGBA clear color (in this
case, white), which glClear then uses to fill the
framebuffer's color buffer. webGL: //Clear to black,
fully opaque Définir la couleur d'effacement noir,
et opaque effacement en noir, complètement
opaque
gl.clear: Effacer le canevas de dessiner dessus.
Effacer le tampon de couleur avec la couleur
d'effacement spécifiée. glClear uses to fill the
framebuffer's color buffer.
function drawScene(gl ){
// Indiquer à WebGL d'utiliser notre programme pour dessiner
gl.useProgram(programInfo.program);
{
const offset1 = 0;
const vertexCount = 1; //4 ;
// gl.drawArrays(gl.LINES, offset1, vertexCount);
// gl.drawArrays(gl.POINTS, offset1, vertexCount);
// gl.drawArrays(gl.TRIANGLE_STRIP, offset1,
vertexCount);
gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 );
} }
//////////////////////////// FUNCTION render()
function render( now ){
//function render( gl ){ // programInfo, buffers ){
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
drawScene(gl ) ;
}
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
drawScene(gl )
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements(
GL_TRIANGLE_STRIP, /* mode */
4, /* count */
GL_UNSIGNED_SHORT, /* type */
(void*)0 /* element array buffer
offset */ );
glutSwapBuffers();
}
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Render the Scene
48
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
gl.clear(gl.COLOR_BUFFER_BIT |
gl.DEPTH_BUFFER_BIT);
// Effacer le tampon de couleur
avec la couleur d'effacement
spécifiée // Effacer le canvas avant
de commencer à dessiner dessus.
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.enable(gl.DEPTH_TEST);
// drawScene(gl, programInfo, buffers);
drawScene(gl ) ; // , programInfo, buffers);
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);
drawScene(gl )
}
Void drawScene(gl ){
glDrawElements(
GL_TRIANGLE_STRIP, /* mode */
4, /* count */
GL_UNSIGNED_SHORT, /* type */
(void*)0 /* element array buffer
offset */ );
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( )
49
Activating the shader program //
Indiquer à WebGL d'utiliser notre
programme pour dessiner
We begin by activating our shader
program by passing the name of the
linked program object
to glUseProgram.
glUseProgram(g_resources.program)
;
gl.useProgram(programInfo.program);
Ensuite, on établis la position du carré
2D.
By calling the glDrawElements( )
function.
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) ;
drawScene(gl ) ;
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
function drawScene(gl ){
gl.useProgram(programInfo.program);
{
const offset1 = 0;
const vertexCount = 4 ;
gl.drawArrays( gl.TRIANGLE_STRIP, offset1,
vertexCount );
} }
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
drawScene(gl );
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements(
GL_TRIANGLE_STRIP, /* mode */
4, /* count */
GL_UNSIGNED_SHORT, /* type */
(void*)0 /* element array buffer offset */ );
glutSwapBuffers();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
50
Submitting the rendering job
glDrawElements is the function
that sets the graphics pipeline in
motion.
We tell it what triangle assembly
mode we want:
TRIANGLE , TRIANGLE STRIP
and TRIANGLE FAN
LINES or POINTS
Count = 4 how many vertices to
assemble triangles from,
Unsigned short: the type of the
components of element array, and
the offset = 0: within the currently
bound GL_ELEMENT_ARRAY_BUF
FER of the first component to
render, again as a fake-pointer-
but-really-integer.
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) ;
drawScene(gl ) ;
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
function drawScene(gl ){
gl.useProgram(programInfo.program);
{
const offset1 = 0;
const vertexCount = 4 ;
gl.drawArrays( gl.TRIANGLE_STRIP, offset1,
vertexCount );
} }
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
drawScene(gl );
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements( GL_TRIANGLE_STRIP, /* mode */
4, /* count */
GL_UNSIGNED_SHORT, /* type */
(void*)0 /* element array buffer offset */ );
glutSwapBuffers();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
51
Submitting the rendering
job
glDrawElements will then
take the pointed-to element
array indexes,
gather them up with
the currently bound
shader program,
if any vertex attribute
pointers,
if any uniform values,
if any texture units, and
bundle everything into a
rendering job, and place the
job in the GPU's queue.)
function 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) ;
drawScene(gl ) ;
now *= 0.001; // convert to seconds
//const
deltaTime = now - then;
then = now;
requestAnimationFrame(render);
}
function drawScene(gl ){
gl.useProgram(programInfo.program);
{
const offset1 = 0;
const vertexCount = 4 ;
gl.drawArrays( gl.TRIANGLE_STRIP, offset1,
vertexCount );
} }
static void render(void){
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
drawScene(gl );
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements( GL_TRIANGLE_STRIP, /* mode */
4, /* count */
GL_UNSIGNED_SHORT, /* type */
(void*)0 /* element array buffer offset */ );
glutSwapBuffers();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
52
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) ;
drawScene(gl ) ; // , programInfo, buffers);
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);
drawScene(gl );
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements( GL_TRIANGLE_STRIP, /* mode */ 4, /*
count */
GL_UNSIGNED_SHORT, /* type */ (void*)0 /* element
array buffer offset */ );
glutSwapBuffers();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
53
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.
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) ;
drawScene(gl ) ; // , programInfo, buffers);
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);
drawScene(gl );
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements( GL_TRIANGLE_STRIP, /* mode */ 4, /*
count */
GL_UNSIGNED_SHORT, /* type */ (void*)0 /* element
array buffer offset */ );
glutSwapBuffers();
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
54
Displaying our finished
scene
so now that we've submitted the
job, 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.
glutSwapBuffers then brings our
cleared color buffer to the screen.
glutSwapBuffers amène ensuite notre
color buffer à l'écran.
Our rendering is done!
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) ;
drawScene(gl ) ; // , programInfo, buffers);
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);
drawScene(gl );
}
Void drawScene(gl ){
glUseProgram(g_resources.program);
glDrawElements (
GL_TRIANGLE_STRIP, /* mode */
4, /* count */
GL_UNSIGNED_SHORT, /* type */
(void*)0 /* element array buffer offset */
);
glutSwapBuffers( );
}
Introduction à OpenGL et WebGL
Render the Scene
render( void ) OpenGL version
render( now ) WebGL version
Le Pipeline Graphique make_resources ( ) , render( )
WebGL requestAnimationFrame
Data Processing
Data Processing
we always think of the rendering pipeline as box gets explicitly feed
with data, processes it and passes intermediate results from one stage
to the next and produces some kind of image in the end.
But at the very beginning of this pipeline, OpenGL has a surprise for us:
It is possible to render something without any data at all!
With user defined attributes and vertex shaders the programmer can
define in any way he/she likes what will define the output vertex
position – it does not have to depend on any inputs. But, at least
vertex attribute 0 had to be defined. This limitation, however, is gone
in the OpenGL core profile (but still valid in the compatibility profile!).
This means, that it is now legal in core profile (and only there) to call
glDrawArrays() without a bound array buffer.
A vertex array object on the other hand must be bound, the default
VAO 0 is not allowed for rendering (this in turn would be legal in the
compatibility profile…).
Uses for attribute-less rendering would be simple objects that can be
defined statically in the vertex shader.
Le Pipeline Graphique
55
While it can be useful to render without attributes, disallowing it in
the compatibility profile is less useful. Historically it made sense to
define rendering by providing data and it is also useful to keep the
latest API 100% compatible with the old behavior.
But, removing the limitation that attribute 0 (the vertex position) has
to be defined will not break any working software but software that
should not work would now ‘work’ (old buggy software that forgets
to set attribute 0 will no longer receive an OpenGL error but will try
to render something).
A vertex shader with no explicit inputs has implicit inputs from the
GL: gl_VertexID and gl_InstanceID. This can be sufficient to generate
useful output positions procedurally, etc.
The first step of the rendering pipeline is to fetch application provided
data from one or multiple places (think of array buffers) and pass
them as attributes into the vertex shader stage. This fetch can be
controlled by an index and N attributes will get pulled from M arrays.
That’s for next chapter and those follow.
Introduction à OpenGL et WebGL
Liste des références sera donnée ultérieurement.
1. https://webgl2fundamentals.org/webgl/lessons/webgl-fundamentals.html
2. http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html
3. http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html
Références
56
Programmation 2D/3D
Introduction à OpenGL et WebGL
FIN DU CHAPITRE
FIN DU CHAPITRE
FIN DU CHAPITRE
FIN DU CHAPITRE
57
FIN DU CHAPITRE
Introduction à OpenGL et WebGL
