WebGL - Dessiner un modèle

Après avoir associé les tampons aux shaders, la dernière étape consiste à dessiner les primitives requises. WebGL propose deux méthodes à savoir,drawArrays() et drawElements() pour dessiner des modèles.

drawArrays ()

drawArrays()est la méthode utilisée pour dessiner des modèles à l'aide de sommets. Voici sa syntaxe -

void drawArrays(enum mode, int first, long count)

Cette méthode prend les trois paramètres suivants -

mode- Dans WebGL, les modèles sont dessinés à l'aide de types primitifs. En utilisant le mode, les programmeurs doivent choisir l'un des types primitifs fournis par WebGL. Les valeurs possibles pour cette option sont - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN et gl.TRIANGLES.
first- Cette option spécifie l'élément de départ dans les tableaux activés. Cela ne peut pas être une valeur négative.
count - Cette option spécifie le nombre d'éléments à rendre.

Si vous dessinez un modèle en utilisant drawArrays() , puis WebGL, lors du rendu des formes, crée la géométrie dans l'ordre dans lequel les coordonnées des sommets sont définies.

Exemple

Si vous souhaitez dessiner un seul triangle en utilisant drawArray() méthode, alors vous devez passer trois sommets et appeler la drawArrays() méthode, comme indiqué ci-dessous.

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

Il produira un triangle comme indiqué ci-dessous.

Supposons que vous vouliez dessiner des triangles contigus, alors vous devez passer les trois sommets suivants dans l'ordre dans le tampon de sommets et mentionner le nombre d'éléments à rendre comme 6.

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

Il produira un triangle contigu comme indiqué ci-dessous.

drawElements ()

drawElements()est la méthode utilisée pour dessiner des modèles à l'aide de sommets et d'indices. Sa syntaxe est la suivante -

void drawElements(enum mode, long count, enum type, long offset)

Cette méthode prend les quatre paramètres suivants -

mode- Les modèles WebGL sont dessinés à l'aide de types primitifs. En utilisant le mode, les programmeurs doivent choisir l'un des types primitifs fournis par WebGL. La liste des valeurs possibles pour cette option est - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN et gl.TRIANGLES.
count - Cette option spécifie le nombre d'éléments à rendre.
type - Cette option spécifie le type de données des index qui doivent être UNSIGNED_BYTE ou UNSIGNED_SHORT.
offset- Cette option spécifie le point de départ du rendu. C'est généralement le premier élément (0).

Si vous dessinez un modèle en utilisant drawElements(), alors l'objet tampon d'index doit également être créé avec l'objet tampon de sommet. Si vous utilisez cette méthode, les données de sommet seront traitées une fois et utilisées autant de fois que mentionné dans les indices.

Exemple

Si vous souhaitez dessiner un seul triangle à l'aide d'indices, vous devez passer les indices avec les sommets et appeler le drawElements() méthode comme indiqué ci-dessous.

var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Il produira la sortie suivante -

Si vous souhaitez dessiner des triangles contagieux en utilisant drawElements() méthode, ajoutez simplement les autres sommets et mentionnez les indices des sommets restants.

var vertices = [
   -0.5,-0.5,0.0,
   -0.25,0.5,0.0,
   0.0,-0.5,0.0,
   0.25,0.5,0.0,
   0.5,-0.5,0.0 
];

var indices = [0,1,2,2,3,4];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Il produira la sortie suivante -

Opérations requises

Avant de dessiner une primitive, vous devez effectuer quelques opérations, qui sont expliquées ci-dessous.

Effacer la toile

Tout d'abord, vous devez effacer le canevas en utilisant clearColor()méthode. Vous pouvez transmettre les valeurs RGBA d'une couleur souhaitée en tant que paramètre à cette méthode. Ensuite, WebGL efface le canevas et le remplit avec la couleur spécifiée. Par conséquent, vous pouvez utiliser cette méthode pour définir la couleur d'arrière-plan.

Jetez un œil à l'exemple suivant. Ici, nous transmettons la valeur RGBA de la couleur grise.

gl.clearColor(0.5, 0.5, .5, 1);

Activer le test de profondeur

Activez le test de profondeur à l'aide du enable() méthode, comme indiqué ci-dessous.

gl.enable(gl.DEPTH_TEST);

Effacer le bit de tampon de couleur

Effacez la couleur ainsi que le tampon de profondeur en utilisant le clear() méthode, comme indiqué ci-dessous.

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Définir le port de vue

Le port de vue représente une zone visible rectangulaire qui contient les résultats de rendu du tampon de dessin. Vous pouvez définir les dimensions du port de vue en utilisantviewport()méthode. Dans le code suivant, les dimensions du port de vue sont définies sur les dimensions du canevas.

gl.viewport(0,0,canvas.width,canvas.height);