Changement vertex buffer de manière dynamique, en WebGL

Je suis le développement d'un tissu simulateur en WebGL, eu tous à la physique et à l'animation prêt, mais je ne peux pas le rendre. Je suis habitué à utiliser glVertex en Opengl, donc à chaque itération, je peux changer la position du vertex et il se déplace, mais en WebGL (OpenGL ES) il n'y a pas une telle méthode.

C'est mon code:

//Initialization:
    puntosBuffer= gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, puntosBuffer);
    telaVertices3=new Array(12);
    telaVertices3=[
    0.0,0.0,0.0,
    2.0,0.0,0.0,
    1.0,1.7,0.0,
    0.0,1.0,0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(telaVertices3), gl.DYNAMIC_DRAW);

//loop:
    posx=posx+0.2;
    telaVertices3[0]=posx;
    gl.bindBuffer(gl.ARRAY_BUFFER, puntosBuffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(telaVertices3));

Mais il rend toujours au même point!!!

Avez-vous vraiment besoin de changer le vertex buffer juste pour déplacer un objet sur la scène? Ne pourriez-vous utiliser un monde de la traduction de la matrice et de le multiplier à vos sommets des positions sur le Vertex Shader?
L'interlocuteur veut déplacer les points de semi-indépendante les uns des autres - par exemple, un drapeau représenté par une grille en agitant dans le vent.

OriginalL'auteur Sebastian Breit | 2011-08-23

  1. 13

    Je utiliser d'autres appels à gl.bufferData(...) au lieu de gl.bufferSubData(...). Je ne sais pas si c'est important ou pas, mais je pense que c'est la seule chose que je fais différemment à partir de votre exemple.

    Vous pouvez voir mon actuel de la mise en œuvre de la gestion de mémoire tampon au jax/tampon.js#L48 et une version plus ancienne à webgl/tampon.js#L26. Comme vous pouvez le voir, je ne fais rien de spécial:

    gl.bindBuffer(self.bufferType, buffer);
gl.bufferData(self.bufferType, instance, self.drawType);

    Vous pouvez voir l'animation dans une démo en live à webgldemos/md2.

    Cependant

    Si vous avez l'intention de mettre à jour beaucoup de sommets à la fois, puis ce n'est probablement pas la meilleure méthode. Au lieu de cela, je voudrais proposer l'envoi de données pertinentes vers le bas de la carte vidéo et l'exécution de l'animation directement dans GLSL, de sorte que vous n'êtes pas limité par JavaScript lenteur et peut profiter de l'accélération matérielle. En fait, je suis en transition plus de mon code fonctionne de cette façon. Deux exemples de vertex de la manipulation de la carte vidéo sont disponibles à l' jax/blobular et jax/vert. Le code source de ces maquettes est disponible gratuitement ici et ici, respectivement.

    J'espère que cela a été utile pour vous.

    Je viens de réaliser que je n'ai pas merci pour la réponse. Il a beaucoup aidé, merci 😉
    J'ai réfléchi à ce que vous avez dit sur la transition à la transformation dans le GPU, ce qui est logique, mais vous n'êtes pas limité. Par exemple, au lieu de simplement faire += 0.2, je suis en ajustant dynamiquement des données avec l'interaction de l'utilisateur. Comment cela pourrait-il être traité?

    OriginalL'auteur sinisterchipmunk