WebGL 2.0: Draw call succeeds even VBO is deleted

Question

So I am using a VAO to store pointers from a VBO. I wanted to test what happens when I delete my data buffers (vbo, ibo, etc.) before binding the VAO and calling a draw. Since VAOs store pointers to the data in the corresponding data buffers, I expected the renderer to crash. However, everything keeps working. How is this possible? I am using a WebGL 2.0 context. The documentation states that VAOs are implemented according to OpenGL documentation. Does this has to do with how JavaScript works with objects? Maybe my vbo gets cached somewhere (unknowingly) before I call a deleteBuffer on it. Is this possible? What is happening here?

Answer 1

If a buffer object is tried to be deleted by gl.DeleteBuffers, then the buffer object is not deleted, if it attached to a vertex array object, which is unbound. In this case the name of the object becomes invalid and it is marked unused:

gl.bindVertexArray( vao );
gl.bindBuffer( gl.ARRAY_BUFFER, vbo );
gl.vertexAttribPointer( ... );
.....
gl.bindVertexArray( 0 );
gl.deleteBuffers( 1, vbo );

But if the vertex array object is bound, then the buffer object is detached and deleted:

gl.bindVertexArray( vao );
gl.bindBuffer( gl.ARRAY_BUFFER, vbo );
gl.vertexAttribPointer( ... );
.....
gl.deleteBuffers( 1, vbo );
gl.bindVertexArray( 0 ); 

See OpenGL ES Specification 3.2 - 5.1.3 Deleted Object and Object Name Lifetimes, page 45:

When a buffer, texture, transform feedback or renderbuffer object is successfully deleted, it is unbound from any bind points it is bound to in the current context, and detached from any attachments of container objects that are bound to the current context ....

Attachments to unbound container objects, such as deletion of a buffer attached to a vertex array object which is not bound to the context, are not affected and continue to act as references on the deleted object ....

When a buffer, query, renderbuffer, sampler, sync, or texture object is deleted, its name immediately becomes invalid (e.g. is marked unused), but the underlying object will not be deleted until it is no longer in use.