Établir le contexte

Forme du projet

On supposera ici que l'on dispose de deux fichiers:

  1. Un fichier « index.html » à la racine du projet.
  2. Un fichier « index.js » à la position « ./js/index.js » où « . » est la racine du projet.

On aura besoin d'un canvas pour faire du WebGL donc l'index.html devra contenir le code suivant : 


<html>
    <head>
        <!-- [...] -->
        <!-- Pour rappelle l'attribut defer fait la même chose que onDOMContentLoaded -->
        <script src="js/index.js" defer></script>
    </head>
    <body>
        <!-- [...] -->       
        <canvas id="webgl-canvas" width="800px" height="800px"></canvas>
        <!-- [...] -->
    </body>
</html>

Initialiser le contexte

Une fois que l'on dispose d'un canvas côté on va pouvoir s'occuper de l'initisation pour cela on va :

  1. Récupérer l'élément sur la page.
  2. Initialiser le contexte du canvas en tant que WebGL2

Le code principal

Dans une application graphique on a généralement trois fonctions principales :

  1. La fonction start qui initialise nos objets
  2. La fonction update qui effectue une mise à jour des données e.g. déplacer le joueur
  3. La fonction render qui dessine nos objets sur l'écran

De plus la fonction update doit être appelé de manière périodique, on utilise requestAnimationFrame pour ça

Implémentation

Voici un résumé de ce que l'on a dit.


"use strict";

/** @type{HTMLCanvasElement} */
const cnv = document.querySelector("#webgl-canvas")
/** @type {WebGLRenderingContext} */
const gl = cnv.getContext("webgl2")

let backgroundColor = {
    r : 0.1,
    g : 0.3,
    b : 0.2
}

function start() {
    // Initialisation de la logique
    // Redimensionne le context en fonction de la taille du canvas
    gl.viewport(0,0, gl.canvas.width, gl.canvas.height);
    
    
    // Définie la couleur du fond du canvas
    gl.clearColor(
        backgroundColor.r,
        backgroundColor.g,
        backgroundColor.b,
        1.0 // alpha
    );

    requestAnimationFrame(update);
}
function update() {
    // Mise à jour de la logique
    render();
    requestAnimationFrame(update);
}
function render() {
    // Efface l'écran avec backgroundColor
    gl.clear(gl.COLOR_BUFFER_BIT);
    // D'ailleurs, comment faire pour changer la couleur du fond
    // au cours du temps ?
    // Ici on affichera des choses...
}
eof