Je créer ce topic suite à cette discussion, pour résumer Darkyl cherchant à créer un moteur graphique 3D isométrique avec le contexte 2D de la balise <canva/> c'est très vite confronté a un problème de performance.
J’ai tenté de l’aider a migrer sur le context 3D afin qu’il bénéficie de l’accélération matériel.

Ce n’est pas la 1ère fois que j’observe la difficulté de la migration 2D à l’accélération matérielle des cartes graphique, même pour des personnes compétente avec les APIs vectoriel 2D.
La raison est, souvent, la précipitation … difficile de sans sortir lorsque l’on brule les étapes !

C’est pourquoi, j’ai proposé à Darkyl, mais également a toutes autre personnes intéressé par ce sujet (notamment Willpower), la création de ce topic, ayant pour but l’apprentissage des bases de la programmation graphique.
On procèdera par étape, je poserais un objectif à chaque étape sous la forme d’un exercice, je serais ouvert à répondre aux questions que dans le cadre l’objectif fixé (et également de la cadre de mes compétence sur le sujet, car je suis loin d’être un expert).

J’espère, ainsi, démocratiser l’utilisation de WebGL, car je sens bien qu’actuellement la sauce ne prend pas !

Etape 1 : Initialisation du context graphique WebGL.

Objectif : créer dans un document HTML5 un canvas de résolution 500x500 pixel, et le remplir d’une couleur de fond Vert.

Je vais donner quelque explications : lorsque l’on initialise une zone de rendu ( le canvas ) avec WebGL, la carte graphique va allouer dans sa mémoire vidéo, un certain nombre de buffer ayant la même résolution que la zone de rendu.
En WebGL on peut en manipuler 3 :
  • COLOR_BUFFER_BIT : c’est en gros le raster de la zone de rendu il contient, pour chaque pixel, la couleur, c’est celui-ci que je souhaite vous faire manipuler en 1er lieu !
  • DEPTH_BUFFER_BIT : ou plus souvent appelé ZBUFFER, il contient, pour chaque pixel, la profondeur. Nous verrons beaucoup plus tard son utilité.
  • STENCIL_BUFFER_BIT : ce buffer contient, pour chaque pixel, un masque. Ces masques servent principalement à restreindre la zone de rendu.