webgl - bufferData - usage parameter differences

Question

While reading specification at Khronos, I found:

bufferData(ulong target, Object data, ulong usage) 

'usage' parameter can be: STREAM_DRAW, STATIC_DRAW or DYNAMIC_DRAW

My question is, which one should I use? What are the advantages, what are the differences? Why would I choose to use some other instead STATIC_DRAW?

Thanks.

Answer 1

For 'desktop' OpenGL, there is a good explanation here:

http://www.opengl.org/wiki/Buffer_Object

Basically, usage parameter is a hint to OpenGL/WebGL on how you intend to use the buffer. The OpenGL/WebGL can then optimize the buffer depending on your hint.

The OpenGL ES docs writes the following, which is not exactly the same as for OpenGL (remember that WebGL is inherited from OpenGL ES):

STREAM

• The data store contents will be modified once and used at most a few times.

STATIC

• The data store contents will be modified once and used many times.

DYNAMIC

• The data store contents will be modified repeatedly and used many times.

The nature of access must be:

DRAW

• The data store contents are modified by the application, and used as the source for GL drawing and image specification commands.

The most common usage is STATIC_DRAW (for static geometry), but I have recently created a small particle system where DYNAMIC_DRAW makes more sense (the particles are stored in a single buffer, where parts of the buffer is updated when particles are emitted).

http://jsfiddle.net/mortennobel/YHMQZ/

Code snippet:

function createVertexBufferObject(){
    particleBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, particleBuffer);
    var vertices = new Float32Array(vertexBufferSize * particleSize);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.DYNAMIC_DRAW);
    bindAttributes();
}

function emitParticle(x,y,velocityX, velocityY){
    gl.bindBuffer(gl.ARRAY_BUFFER, particleBuffer);
    // ...
    gl.bufferSubData(gl.ARRAY_BUFFER, particleId*particleSize*sizeOfFloat, data);
    particleId = (particleId +1 )%vertexBufferSize;
}