How to do transparency with WebGL/OpenGLES - transparent outer object *enclosing* inner object

Question

Hi,

I'm trying to work out a strategy for transparency using WebGL, to support the case of a transparent object that encloses another.

As described over at http://learningwebgl.com/blog/?p=859, conceptually we can

1. Render background
2. Enable blending and disable depth test
3. Render foreground

I'm a little naive here, and I'd appreciate a seasoned graphics pro to set me right. Traditionally (with fixed function pipeline), I suppose I would decompose those objects into a list of faces, depth-sort them, then render them in far-to-near order while enabling/disabling blend/depth on a per-face basis.

But how to do transparency in this case using WebGL, where we load entire geometries onto the GPU as monolithic VBOs?

Anyone have any technical hints or links?

cheers, Lindsay