Le modèle d'objet OpenGL/WebGL Buffers
OpenGL
make_buffer( )
en utilisant une fonction make_buffer( ) pour créer plus d'objets 3D appelés
tampons (buffers), et plus complexes. Ces objets contiendront les positons de
ses sommets (vertices )et y placer les positions des sommets La convention
d'OpenGL pour manipuler les objets est un peut inhabituel. Rappeler, ses
noms sont des variables de type GLuint. N'importe quelles données fournit ou
associé à l'objet est géré en interne par OpenGL. Pour stocker les positions des
sommets (vertices).
1. la fonction make_buffer() commence par appeler:
cas WebGL la méthode createBuffer( ) de contexte gl pour obtenir un
objet tampon (buffer)
cas OpenGL, on crée des buffers en générant un ou plusieurs noms
d'objet. Pour cela, on utilise une fonction glGen*s (ex: glGenBuffers,
glGenTextures, ...).
2. Pour manipuler un objet, d'abord lié (bound ) son nom à une cible, ex:
ARRAY_BUFFER, définie (target binding), en appelant:
Cas OpenGL la fonction glBind* correspondante (exemple:
glBindBuffer, glBindTexture, etc...).
Cas WebGL la méthode bindBuffer() du contexte gl
3. Ensuite, pour définir les positions des sommets de l'objet, on passe la
cible , ex: ARRAY_BUFFER, à une fonction en tant qu'argument:
Cas OpenGL glBufferData(GLenum target , const void *buffer_data ,
GLsizei buffer_size)
Cas WebGL à la méthode bufferData( ) de l'objet gl
ce qui set ses propriétés ou charge des données dans l'objet attaché.
Une fois que cela est fait, on crée des tableaux (arrays ) contenant la
position de chaque sommet du carré 2D. Déjà fait pour WebGL.
20
Le pipeline graphique qu'OpenGL/WebGL
implémente ressemble à ça:
1. Pendant que le plan de projection est
dans le framebuffer, le programme
principale remplis des buffers
(tampons) de la mémoire géré par
OpenGL/WebGL avec des vertex
arrays (des tableaux de vertex). Pour
cela on crée des "objets" de
différents types. On a:
les "objets" qu’on a besoin de
configurer est une structure globale
g_ressources.
2. buffer objects: on fabrique des objets
de type buffer qui contiendront ces
arrays dans la mémoire du GPU.
3. Le vertex array contiendra quatre
vertices, que le vertex shader
assignera aux coins de la fenêtre.
4. L'élément array assemblera ces
quatre vertices en deux triangles, se
qui nous donnera un rectangle qui
viendra couvrir notre fenêtre.
//Stocker nos données
static struct {
GLuint vertex_buffer,
element_buffer;
//GLuint textures[2];
/* fields for shader objects
... */
} g_resources;
static GLuint make_buffer(
GLenum target , const void
* buffer_data , GLsizei
buffer_size )
{
GLuint buffer;
glGenBuffers(1, &buffer);
glBindBuffer(target,
buffer);
glBufferData(target,
buffer_size, buffer_data,
GL_STATIC_DRAW);
return buffer;
}
Introduction à OpenGL et WebGL
Le Pipeline Graphique make_resources ( ) , render( )
Le Pipeline Graphique
function make_buffer(gl ) {
const positionBuffer =
gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,
positionBuffer);
// Créer maintenant un tableau
des positions pour le carré.
const positions = [ 0.5, 0.5, -
0.5, 0.5, 0.5, -0.5, -0.5, -0.5,
];
// Passer maintenant la liste
des positions à WebGL pour
construire la forme. Nous
faisons cela en créant un
Float32Array à partir du
tableau JavaScript,
// puis en l'utilisant pour
remplir le tampon en cours.
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(positions),
gl.STATIC_DRAW);
return {
position: positionBuffer,
};
}
WebGL
make_buffer( )