Question

60

Change vertex buffer dynamically in WebGL

rated 0 times [ 61] [ 1] / answers: 1 / hits: 16727 / 13 Years ago, tue, august 23, 2011, 12:00:00

I'm developing a cloth simulator in WebGL, got all the physics and the animation ready but I just can't render it. I am used to use glVertex in Opengl, so in every iteration I can change the position of the vertex and it will move, but in WebGL (OpenGL ES) there is not such method.

This is my 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));

But it always renders at the same points!!!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

francokeganr

Add To Favorites

Follow

Total Points: 438

Total Questions: 102

Total Answers: 124

Location: Belarus

Member since Sat, Jul 18, 2020

4 Years ago

answered 13 Years ago jaredsages · Accepted Answer

I use additional calls to gl.bufferData(...) instead of gl.bufferSubData(...). I don't know if this matters or not, but I think it's the only thing I'm doing differently from your example.

You can see my current implementation of buffer management at jax/buffer.js#L48 and an older version at webgl/buffer.js#L26. As you can see, I'm not doing anything special:

gl.bindBuffer(self.bufferType, buffer);

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

You can see the animation in a live demo at webgldemos/md2.

However

If you're planning to update a lot of vertices at once then this is probably not the best method. Instead, I'd propose sending the relevant data down to the video card and performing animation directly within GLSL, so that you aren't limited by JavaScript slowness and can take advantage of hardware acceleration. In fact, I'm transitioning most of my code to work this way. Two live examples of vertex manipulation on the video card are available at jax/blobular and jax/meadow. The source code for those demos is freely available here and here, respectively.

I hope this was helpful to you.