Institut Supérieur des Etudes Atelier : Programmation graphique 2D
Technologiques - Mahdia Enseignante : Mme Amel Tilouche
Département Technologies de Classe : MDW 4
l’Informatique
Travaux Pratiques n°1
Initiation à WebGL et au graphisme 2D
Objectifs
- Apprendre à activer l’utilisation de l’accélération matérielle ainsi que la bibliothèque
WebGL dans un navigateur supportant par le <canvas> HTML 5.
- Apprendre les bases d’un programme WebGL : contexte WebGL dans le canevas
HTML 5, buffers, shaders, attributes, varyings, uniforms, …
- Se familiariser avec les dessins 2D.
Introduction
WebGL 2.0 (Web Graphics Library) est une bibliothèque de graphisme Web. Il s’agit d’une
API JavaScript permettant l'affichage de graphismes 2D et 3D dans n'importe
quel navigateur web qui supporte le <canvas> HTML 5 par exemples : Firefox 4+, Google
Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+ ;
Cette bibliothèque est une implémentation JavaScript de l’API OpenGL ES 3.0. Cette
dernière est une bibliothèque graphique conçue pour les systèmes embarqués et les appareils
portables (Raspberry, Android, …) qui est basée sur OpenGL 4.3 et fondée sur les shaders.
Concernant l’OpenGL, elle est une API graphique 2D/3D qui exploite la carte graphique d'un
ordinateur permettant la synthèse d’images et la programmation des applications interactives
2D et 3D, par exemple les jeux vidéo. Elle est une API multi-plateforme, indépendante de
langage de programmation, du système d’exploitation et du système de fenêtrage.
I. Préparation de l’environnement du travail
Pour pouvoir utiliser l’API WebGL, on n’a pas besoin de faire aucune installation. Il suffit
seulement d’activer l’utilisation de l’accélération matérielle et le calcul WebGL au niveau du
navigateur.
Page 1 sur 9
Prenant l’exemple du navigateur Google Chrome :
1. Au niveau des Paramètres avancés de votre navigateur, allez vers le menu Système et
activez l’option Utiliser l'accélération matérielle.
2. Dans la barre des adresses, tapez chrome://flags et activez l’option WebGL 2.0
Compute.
A présent, vous pouvez écrire et tester vos programmes WebGL en utilisant des fichiers
.html, .js et les feuilles de style .css.
Page 2 sur 9
II. Mon premier programme WebGL
Un programme WebGL est organisé d’une façon standard contenant les éléments basiques
suivants :
- Initialisation de WebGL: définition du <canvas> HTML5 et du contexte WebGL.
- Création des tableaux : pour le stockage des données géométriques, photométriques
ou des index.
- Création des Buffer Objects (sommets, indices et couleurs) : ces derniers seront
associés aux Buffer Objects.
- Création et définition des Shaders: conception (création, code source), compilation
et connexion au Shader Program.
- Définition des Attributes : création, activation et association entre les buffers objects
et le Shader Program.
- Définition des Uniforms : définition et liaison aux shaders.
- Définition des varyings : définition et liaison aux shaders.
- Rendu : stockage de données pixels au niveau du frame buffer et affichage de résultat.
Figure 1: Pipeline graphique de WebGL.
Page 3 sur 9
Testez le programme suivant :
[Link]
<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id = "mon_Canvas"></canvas>
<script>
/*=== Création d'un canvas HTML5 et du contexte WebGL ====*/
//déclaration et définition de canvas HTML 5
var canvas = [Link]('mon_Canvas');
//retourne un contexte de dessin sur le canvas
gl = [Link]('experimental-webgl');
/*===== Définition et stockage de données géométriques ===*/
var vertices = [-0.2,-0.2,0.0, 0.7,-0.2,0.0, 0.25,0.5,0.0];
// Créer un buffer vide pour stocker les sommets
var vertex_buffer = [Link]();
// Lier ce buffer au tableau associé en WebGL
[Link](gl.ARRAY_BUFFER, vertex_buffer);
// Insérer les données sommets au buffer
[Link](gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
// Dissocier le buffer
[Link](gl.ARRAY_BUFFER, null);
/*================= Shaders =======================*/
// le code source de Vertex shader
var vertCode =
'attribute vec3 coordinates;' +
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'}';
// Créer un vertex shader object
var vertShader = [Link](gl.VERTEX_SHADER);
// Attacher le vertex shader au code source
[Link](vertShader, vertCode);
// Compiler le vertex shader
[Link](vertShader);
// le source code de Fragment shader
var fragCode =
'void main(void) {' +
' gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);' +
'}';
// Créer un fragment shader object
var fragShader = [Link](gl.FRAGMENT_SHADER);
Page 4 sur 9
// Attacher le fragment shader au code source
[Link](fragShader, fragCode);
// Compiler le fragmentt shader
[Link](fragShader);
// Créer le shader program object pour stocker le shader program
combiné
var shaderProgram = [Link]();
// Attacher le vertex shader au shader program
[Link](shaderProgram, vertShader);
// Attacher le fragment shader au shader program
[Link](shaderProgram, fragShader);
// lier les deux programmes
[Link](shaderProgram);
// Utiliser le shader program object combiné
[Link](shaderProgram);
/* ======= Association des shaders aux buffer objects =======*/
// Lier le vertex buffer object
[Link](gl.ARRAY_BUFFER, vertex_buffer);
// Avoir l'emplacement de la variable d'attribut dans le programme
var coord = [Link](shaderProgram, "coordinates");
// Pointer l'attribut au VBO courant lié
[Link](coord, 3, [Link], false, 0, 0);
// Activer l'attribute
[Link](coord);
/*============= Dessin du triangle ================*/
// Vider le canvas
[Link](0.0, 0.0, 0.0, 1.0);
// Activer la comparaison et la mise à jour au niveau de buffer de
profondeur
[Link](gl.DEPTH_TEST);
// Vider le buffer de couleurs
[Link](gl.COLOR_BUFFER_BIT);
// Définir le viewport
[Link](0,0,[Link],[Link]);
// Dessiner le tiangle
[Link]([Link], 0, 3);
</script>
</body>
</html>
Page 5 sur 9
On va séparer à l’instant la partie HTML de la partie JavaScript tout en ajoutant un buffer de
couleurs pour le triangle, testez ce nouveau programme :
[Link]
<!doctype html>
<html>
<body>
<canvas width = "570" height = "570" id = "mon_Canvas"></canvas>
<script type="text/javascript" src="[Link]"></script>
</body>
</html>
[Link]
function InitBuffersVertices(vertices)
{
// Créer un buffer vide pour stocker les sommets
var vertex_buffer = [Link]();
// Lier ce buffer au tableau associé en WebGL
[Link](gl.ARRAY_BUFFER, vertex_buffer);
// Insérer les données sommets au buffer
[Link](gl.ARRAY_BUFFER, new Float32Array(vertices),
gl.STATIC_DRAW);
// Dissocier le buffer
[Link](gl.ARRAY_BUFFER, null);
return vertex_buffer;
}
function InitBuffersColors(colors)
{
// Créer un buffer vide pour stocker les couleurs
var color_buffer = [Link]();
// Lier ce buffer au tableau associé en WebGL
[Link](gl.ARRAY_BUFFER, color_buffer);
// Insérer les données sommets au buffer
[Link](gl.ARRAY_BUFFER, new
Float32Array(colors), gl.STATIC_DRAW);
return color_buffer;
}
function InitShaders()
{
// le code source de Vertex shader
var vertCode =
'attribute vec3 coordinates;' +
'attribute vec3 col;' +
'varying vec3 vCol;'+
'void main(void) {' +
' gl_Position = vec4(coordinates, 1.0);' +
'vCol=col;'+
'}';
Page 6 sur 9
// Créer un vertex shader object
var vertShader = [Link](gl.VERTEX_SHADER);
// Attacher le vertex shader au code source
[Link](vertShader, vertCode);
// Compiler le vertex shader
[Link](vertShader);
// le source code de Fragment shader
var fragCode = 'precision mediump float;'+
'varying vec3 vCol;'+
'void main() {'+
' gl_FragColor = vec4(vCol, 1.0);' +
'}';
// Créer un fragment shader object
var fragShader = [Link](gl.FRAGMENT_SHADER);
// Attacher le fragment shader au code source
[Link](fragShader, fragCode);
// Compiler le fragment shader
[Link](fragShader);
// Créer le shader program object pour stocker le
shader program combiné
var shaderProgram = [Link]();
// Attacher le vertex shader au shader program
[Link](shaderProgram, vertShader);
// Attacher le fragment shader au shader program
[Link](shaderProgram, fragShader);
// lier les deux programmes
[Link](shaderProgram);
// Utiliser le shader program object combiné
[Link](shaderProgram);
return shaderProgram;
}
function ShadersBuffers(vertex_buffer,color_buffer,shaderProgram)
{
// Lier le vertex buffer object-sommets
[Link](gl.ARRAY_BUFFER, vertex_buffer);
// Avoir l'emplacement de la variable d'attribut dans le programme
var coord = [Link](shaderProgram,
"coordinates");
// Pointer l'attribut au VBO courant lié
[Link](coord, 3, [Link], false, 0, 0);
// Activer l'attribut
[Link](coord);
// Lier le vertex buffer object-couleurs
[Link](gl.ARRAY_BUFFER, color_buffer);
// Avoir l'emplacement de la variable d'attribut dans le programme
var col = [Link](shaderProgram, "col");
Page 7 sur 9
// Pointer l'attribut au VBO courrant lié
[Link](col, 3, [Link], false, 0, 0);
// Activer l'attribut
[Link](col);
}
/*===== Création d'un canvas HTML5 et du contexte WebGL ======*/
//déclaration et définition de canvas HTML 5
var canvas = [Link]('mon_Canvas');
//retourne un contexte de dessin sur le canvas
gl = [Link]('experimental-webgl');
/*== Définition et stockage de données géométriques et photométriques ===*/
var vertices = [-0.2,-0.2,0.0, 0.7,-0.2,0.0, 0.25,0.5,0.0];
var colors=[1.0,1.0,0.0, 1.0,1.0,0.0,1.0,1.0,0.0];
/*============= Dessin du triangle ================*/
// Vider le canvas
[Link](0.0, 0.0, 0.0, 1.0);
// Activer la comparaison et la mise à jour au niveau de buffer de
profondeur
[Link](gl.DEPTH_TEST);
// Vider le buffer de couleurs
[Link](gl.COLOR_BUFFER_BIT);
// Définir le viewport
[Link](0,0,[Link],[Link]);
// Dessiner le triangle jaune
var bv=InitBuffersVertices(vertices);
var bc=InitBuffersColors(colors);
var ps=InitShaders();
ShadersBuffers(bv,bc,ps);
[Link]([Link], 0, 3);
III. Dessin 2D
Ecrire les programmes WebGL permettant de tracer :
- Un carré rouge en utilisant 3 buffers pour les sommets, les couleurs et les indices.
- Une étoile bleue.
Page 8 sur 9
- Un sapin de tronc marron et de feuilletage vert.
- Un cercle magenta.
- Une locomotive de train ayant les couleurs indiquées ci-dessous :
C1, C2 : (136, 64, 28)
R1 : (255, 127, 0)
R2, R6 : (194, 247, 50)
R3 : (255, 255, 255)
R4 : (38, 196, 236)
R5, T : (255, 0, 127)
Page 9 sur 9
