Porting OpenGL 1.x code to WebGL

Question

I am trying to port OpenGL 1.x code here (original code is written by a Super User regular, BenRichards) to the WebGL-safe subset of OpenGL 2.x. My plan is to compile the code using Emscripten so that this C++/SDL app runs as JS/WebGL in a modern browser, but to achieve that, I must eliminate the use of the GL 1.x API, since Emscripten is not properly supporting the GL 1.x code that we are using with its imperfect/broken 1.x emulation code. BenRichards is also interested in seeing his "newbie" GL 1.x code forward-ported to a more modern GL API, as long as it runs on both the desktop and in the browser.

Both BenRichards and myself are new-ish to OpenGL in general, so we have a lot of learning to do in order to understand how to forward-port it. The general approach seems to be to avoid client-side data for performance reasons (see here), but I wanted to learn by example.

Take this little snippet from here for example:

void TCell::OnRender() {
  glPushMatrix();
  glColor3ub(color.red, color.green, color.blue);

  glBegin(GL_QUADS);
  glVertex2i(20 * column - 40, 20 * row - 40);
  glVertex2i(20 * column - 20, 20 * row - 40);
  glVertex2i(20 * column - 20, 20 * row - 20);
  glVertex2i(20 * column - 40, 20 * row - 20);
  glEnd();
  //....
  glPopMatrix();
}

If someone could write a heavily commented port of this general rendering pattern into WebGL-ish code (still C++ though, not JavaScript), that would be great. This should provide me a starting point to port the remainder of the app.

A good answer to this question will be generally useful beyond the immediate problem I am facing, by explaining the thought process of how to translate this type of immediate-mode GL 1.x code into the deferred rendering model of GL 2.x. External references to blogs, guides, etc. are welcome/encouraged.

Answer 1

If you consider keeping GL 1.x style instead, you may be interested in this stuff:

https://github.com/stefanhaustein/WebGLue

Edit: For use with emscripten, you may want to build something like MeshBuilder (in webglue.js) and the fixed function emulation in C. MeshBuilder makes it relatively easy to port begin/end style GL code to modern GL by using basically the same calls to fill a buffer that can be resused. We have used a similar approach to port Quake II to WebGL (but in Java/GWT instead of C)