Is there a WebGL equivalent of glGenVertexArrays and glBindVertexArrays?

Question

I'm making a WebGL program and require the GL functions glGenVertexArrays and glBindVertexArrays. Does anybody know if there is an equivalent of these in WebGL? Here's what I have so far:

  canvas = document.getElementById("WEB_GL_CANVAS");//Specify the viewing window

  gl = WebGLUtils.setupWebGL(canvas);
  if (!gl)
    alert("WebGL isn't available");

  gl.viewport(0, 0, canvas.width, canvas.height);
  {
    var color = getRandomColor();
    gl.clearColor((color[0] / 2) + 0.5, (color[1] / 2) + 0.5, (color[2] / 2) + 0.5, 1);
  }
  gl.enable(gl.DEPTH_TEST);


  // Create a vertex array object
  GLuint vao;
  gl.genVertexArrays( 1, &vao );//Won't work
  gl.bindVertexArray( vao );//Need a WebGL version

Answer 1

Only if the OES_vertex_array_object extension is implemented.

However, you don't need these functions. You can do just fine without them. You just have to bind your buffers and use glVertexAttribPointer and its ilk before you render a mesh (or set of meshes, or whatever).

Answer 2

As it just so happens, Chrome Canary and Chromium builds from the last week or so have basic support for OES_vertex_array_object now. It's also been available in WebKit for a little while. It's not perfect yet: There's no ANGLE support yet, for example. Still, if you want to develop against the extension you can start doing so now.

I've got quick blog post and demo of OES_vertex_array_object in action, if you want to see how it works in the context of WebGL.

Answer 3

The OpenGL 3.0 features will be available within WebGL 2.0, you can check if your browser already support WebGL 2.0 for example here: http://webglreport.com/?v=2, or wathever experimental extension ( like some features form OpenGL 3.0 ) for WebGL 1.0 are available

Answer 4

This is how Emscripten does it:

GLctx = canvas.getContext("webgl")
// Extension available from Firefox 25 and WebKit
var vaoExt = GLctx.getExtension('OES_vertex_array_object');
if (vaoExt) {
    GLctx['createVertexArray'] = function() { return vaoExt['createVertexArrayOES'](); };
    GLctx['deleteVertexArray'] = function(vao) { vaoExt['deleteVertexArrayOES'](vao); };
    GLctx['bindVertexArray'] = function(vao) { vaoExt['bindVertexArrayOES'](vao); };
    GLctx['isVertexArray'] = function(vao) { return vaoExt['isVertexArrayOES'](vao); };
}