WebGL / Javascript: transformations d'objets avec plusieurs objets

Je veux dessiner plusieurs objets puis les transformer en sélectionnant celui spécifique avec un index de clavier. Disons 1-5.

  • J'ai chargé le canevas.
  • J'ai initialisé le contexte webgl.
  • J'ai défini les shaders de vertex / fragment et les ai liés à un programme, que j'ai "utilisé" ( gl.useProgram("program") ).

Ensuite, j'ai initialisé VertexBuffer (c'est une fonction propre). Là, j'ai défini les sommets pour un cube et je liaisons ce tampon. Dans la même fonction, j'ai défini mes sommets en cône et je l'ai lié à un tampon différent.

La chose est, comment puis-je faire des objets différents, que je peux transformer séparément? Je veux dire que le shader obtient les données du tampon. Mais lorsque je l'ai essayé la dernière fois, un seul objet a été dessiné.

C'est le pseudo code pour presque tous les programmes WebGL

Pseudo code

 // At init time for each shader program create and compile vertex shader create and compile fragment shader create program and attach shaders link program record locations of attributes and uniforms for each model/set of geometry/points/data create buffer(s) for model copy data into buffer(s) for model for each texture create texture usually asynchronously load textures // at draw time clear for each model useProgram(program for model) setup attributes for model setup textures for model set uniforms for model draw 

Ce n'est pas différent du modèle de dessin 1 avec 1 programme de shader. Faites simplement la même configuration.

Un peu plus de code …

Pour la configuration des attributs, il ressemblerait à

 for each attribute used by model gl.enableVertexAttribArray(attribLocation); gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithDataForAttribute); gl.vertexAttribPointer(attribLocation, ...); 

Créer des textures (peut-être) ressemble à quelque chose

 for each texture used by model gl.activeTexture(gl.TEXTURE0 + ndx); gl.bindTexture(gl.TEXTURE_2D, texture); 

Enfin, vous utiliserez le programme

 gl.useProgram(programForModel); for each uniform gl.uniform???(uniformLocation, uniformValue); gl.drawArrays(...) or gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferOfIndicesForModel); gl.drawElements(...);