WebGL - Contexte

Pour écrire une application WebGL, la première étape consiste à obtenir l'objet de contexte de rendu WebGL. Cet objet interagit avec le tampon de dessin WebGL et peut appeler toutes les méthodes WebGL. Les opérations suivantes sont effectuées pour obtenir le contexte WebGL -

Créer un canevas HTML-5
Obtenez l'ID du canevas
Obtenir WebGL

Création d'un élément de canevas HTML-5

Dans le chapitre 5, nous avons expliqué comment créer un élément de canevas HTML-5. Dans le corps du document HTML-5, écrivez un canevas, donnez-lui un nom et passez-le comme paramètre à l'ID d'attribut. Vous pouvez définir les dimensions du canevas à l'aide des attributs de largeur et de hauteur (facultatif).

Exemple

L'exemple suivant montre comment créer un élément de canevas avec les dimensions 500 × 500. Nous avons créé une bordure sur le canevas en utilisant CSS pour la visibilité. Copiez et collez le code suivant dans un fichier avec le nommy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

Il produira le résultat suivant -

Obtenez l'identifiant du canevas

Après avoir créé le canevas, vous devez obtenir le contexte WebGL. La première chose à faire pour obtenir un contexte de dessin WebGL est d'obtenir l'id de l'élément de canevas courant.

L'ID du canevas est acquis en appelant la méthode DOM (Document Object Model) getElementById(). Cette méthode accepte une valeur de chaîne comme paramètre, nous lui transmettons donc le nom du canevas actuel.

Par exemple, si le nom du canevas est my_canvas, alors l'ID du canevas est obtenu comme indiqué ci-dessous -

var canvas = document.getElementById('my_Canvas');

Obtenir le contexte de dessin WebGL

Pour obtenir l'objet WebGLRenderingContext (ou l'objet de contexte de dessin WebGL ou simplement le contexte WebGL), appelez le getContext() méthode du courant HTMLCanvasElement. La syntaxe de getContext () est la suivante -

canvas.getContext(contextType, contextAttributes);

Passer les ficelles webgl ou experimental-webgl comme le contentType. lecontextAttributesle paramètre est facultatif. (Tout en poursuivant cette étape, assurez-vous que votre navigateur implémente WebGL version 1 (OpenGL ES 2.0)).

L'extrait de code suivant montre comment obtenir le contexte de rendu WebGL. Icigl est la variable de référence à l'objet de contexte obtenu.

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

Le paramètre WebGLContextAttributesn'est pas obligatoire. Ce paramètre fournit diverses options qui acceptent les valeurs booléennes comme indiqué ci-dessous -

Sr.No.	Attributs et description
1	Alpha Si sa valeur est true, il fournit un tampon alpha au canevas. Par défaut, sa valeur est true.
2	depth Si sa valeur est true, vous obtiendrez un tampon de dessin contenant un tampon de profondeur d'au moins 16 bits. Par défaut, sa valeur est true.
3	stencil Si sa valeur est true, vous obtiendrez un tampon de dessin contenant un tampon de gabarit d'au moins 8 bits. Par défaut, sa valeur est false.
4	antialias Si sa valeur est true, vous obtiendrez un tampon de dessin qui effectue l'anti-aliasing. Par défaut, sa valeur est true.
5	premultipliedAlpha Si sa valeur est true, vous obtiendrez un tampon de dessin contenant des couleurs avec un alpha pré-multiplié. Par défaut, sa valeur est true.
6	preserveDrawingBuffer Si sa valeur est true, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'ils soient effacés ou écrasés par l'auteur. Par défaut, sa valeur est false.

L'extrait de code suivant montre comment créer un contexte WebGL avec un tampon de gabarit, qui ne fonctionnera pas anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

Au moment de la création du WebGLRenderingContext, un tampon de dessin est créé. L'objet Context gère l'état d'OpenGL et effectue le rendu dans le tampon de dessin.

WebGLRenderingContext

C'est la principale interface de WebGL. Il représente le contexte de dessin WebGL. Cette interface contient toutes les méthodes utilisées pour effectuer diverses tâches sur le tampon de dessin. Les attributs de cette interface sont donnés dans le tableau suivant.

Sr.No.	Attributs et description
1	Canvas Il s'agit d'une référence à l'élément canvas qui a créé ce contexte.
2	drawingBufferWidth Cet attribut représente la largeur réelle du tampon de dessin. Il peut différer de l'attribut width de HTMLCanvasElement.
3	drawingBufferHeight Cet attribut représente la hauteur réelle du tampon de dessin. Il peut différer de l'attribut height du HTMLCanvasElement.