WebGL - Introduction

Bonjour là-bas, futurs magiciens de WebGL ! Bienvenue dans notre passionnante aventure dans le monde de la graphique 3D sur le web. Je suis ravi d'être votre guide alors que nous explorons le domaine fascinant de WebGL. En tant que quelqu'un qui enseigne la graphique informatique depuis plus d'une décennie, je peux vous assurer que bien que la route à venir pourrait sembler intimidante, elle est également incroyablement gratifiante. Alors, bouclez votre ceinture et plongez avec moi !

Qu'est-ce que OpenGL ?

Avant de plonger dans WebGL, faisons unquick detour pour comprendre son prédécesseur, OpenGL. Imaginez que vous êtes un artiste essayant de peindre un chef-d'œuvre. OpenGL est comme votre ensemble magique de peintures et de pinceaux qui vous permet de créer des œuvres visuelles éblouissantes sur votre écran d'ordinateur.

OpenGL, qui signifie Open Graphics Library, est une API (Interface de programmation d'applications) multiplateforme pour le rendu de graphiques vectoriels 2D et 3D. Il existe depuis 1992 et a été la colonne vertébrale de nombreux jeux, simulations et applications visuelles.

Voici une analogie simple : Si votre écran d'ordinateur est une toile, OpenGL est l'ensemble d'outils qui aide les programmeurs à peindre sur cette toile avec un détail et une vitesse incroyables.

Qu'est-ce que WebGL ?

Passons maintenant notre attention sur la vedette de notre spectacle : WebGL. Si OpenGL est le pinceau pour les applications de bureau, WebGL est le pinceau pour le web. Il s'agit d'une API JavaScript qui vous permet de créer des graphiques 3D époustouflants directement dans votre navigateur web, sans avoir besoin de plugins.

WebGL apporte la puissance d'OpenGL ES 2.0 (une version d'OpenGL pour les systèmes embarqués) au web, permettant aux développeurs d'utiliser directement le GPU (Processeur graphique) via JavaScript.

Voici un exemple simple "Hello, World !" en WebGL :

<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Impossible d'initialiser WebGL. Votre navigateur ou machine pourrait ne pas le supporter.");
return;
}

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;
</script>

Ce code crée une toile noire sur votre page web. Cela peut ne pas sembler beaucoup, mais c'est votre premier pas dans le monde de WebGL !

Qui a développé WebGL ?

WebGL a été développé par le Khronos Group, les mêmes personnes derrière OpenGL. Il a été introduit pour la première fois en 2011, et depuis lors, il a révolutionné la way dont nous pensons aux graphiques sur le web.

Curiosité : Le développement de WebGL a été inspiré par des expériences réalisées par Vladimir Vukićević chez Mozilla. Il a créé un élément de toile qui exposait OpenGL ES à JavaScript, ce qui a posé les bases de ce qui allait devenir WebGL.

Rendu

Le rendu est le processus de génération d'une image à partir d'un modèle 2D ou 3D. En WebGL, cela se produit en temps réel, ce qui signifie que les images sont générées à la volée pendant que vous interagissez avec elles.

Voici un exemple simple qui rend un triangle rouge :

// Programme du shader de sommet
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;

// Programme du shader de fragment
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

// ... (code d'initialisation)

// Dessiner la scène
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Effacer en noir, complètement opaque
gl.clearDepth(1.0);                 // Effacer tout
gl.enable(gl.DEPTH_TEST);           // Activer le test de profondeur
gl.depthFunc(gl.LEQUAL);            // Les choses proches occultent les choses lointaines

// Effacer le canevas avant de commencer à dessiner dessus.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// ... (configuration de la scène)

{
const numComponents = 2;  // extraire 2 valeurs par itération
const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32 bits
const normalize = false;  // ne pas normaliser
const stride = 0;         // combien d'octets pour passer d'un ensemble de valeurs au suivant
const offset = 0;         // combien d'octets à l'intérieur du tampon pour commencer
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}

// Indiquer à WebGL d'utiliser notre programme lors du dessin
gl.useProgram(programInfo.program);

{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}

Ce code configure les shaders et les tampons nécessaires pour rendre un simple triangle rouge à l'écran.

GPU

GPU signifie Graphics Processing Unit. C'est un processeur spécialisé conçu pour gérer les mathématiques complexes impliquées dans le rendu des graphiques. Bien que les CPUs soient excellents pour le calcul à usage général, les GPUs excellents pour effectuer de nombreux calculs simples en parallèle, ce qui est parfait pour les travaux graphiques.

En d'autres termes : si le rendu d'une scène 3D complexe est comme peindre un immense mur, le CPU est comme avoir un artiste extrêmement talentueux, tandis que le GPU est comme avoir des milliers d'artistes corrects travaillant ensemble.

Calcul accéléré par GPU

Le calcul accéléré par GPU fait référence à l'utilisation d'un GPU en combinaison avec un CPU pour accélérer les applications scientifiques, analytiques, d'ingénierie, de consommation et d'entreprise. Dans le contexte de WebGL, cela signifie que vos calculs graphiques sont délégués au GPU, libérant ainsi le CPU pour d'autres tâches et resulting en des graphiques plus fluides et rapides.

Navigateurs pris en charge

La beauté de WebGL est son large support parmi les navigateurs modernes. En 2023, WebGL est pris en charge par :

Navigateur	Version
Chrome	9+
Firefox	4+
Safari	5.1+
Opera	12+
Internet Explorer	11+
Microsoft Edge	12+

Avantages de WebGL

WebGL offre de nombreux avantages :

1. Compatibilité multiplateforme : Écrivez une fois, exécutez n'importe où (tant qu'il y a un navigateur).
2. Aucun plugin nécessaire : Il est intégré dans le navigateur.
3. Accélération matérielle : Utilise le GPU pour une meilleure performance.
4. Intégration avec les technologies web : Peut être combiné avec d'autres API web pour des expériences riches et interactives.
5. Standard ouvert : N'importe qui peut contribuer à son développement.

Configuration de l'environnement

Configurer votre environnement WebGL est étonnamment simple. Tout ce dont vous avez besoin est :

1. Un navigateur web moderne
2. Un éditeur de texte (je recommande Visual Studio Code)
3. Un serveur web local (vous pouvez utiliser le serveur intégré de Python ou le http-server de Node.js)

Voici un processus de configuration simple :

1. Créez un nouveau répertoire pour votre projet
2. Créez un fichier HTML (par exemple, index.html) et un fichier JavaScript (par exemple, script.js)
3. Dans votre fichier HTML, incluez votre fichier JavaScript et configurez un canevas :

<!DOCTYPE html>
<html>
<head>
<title>Mon Premier Projet WebGL</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>

4. Dans votre fichier JavaScript, initialisez WebGL :

function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl === null) {
alert("Impossible d'initialiser WebGL. Votre navigateur ou machine pourrait ne pas le supporter.");
return;
}

// Code WebGL ici
}

window.onload = main;

Et voilà ! Vous êtes maintenant prêt à commencer votre aventure WebGL. Souvenez-vous, apprendre WebGL est comme apprendre à faire du vélo - cela pourrait sembler bancal au début, mais avec de la pratique, vous serez bientôt à fond la caisse en un rien de temps. Bon codage !

Credits: Image by storyset