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

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 开发者_Go百科geometries onto the GPU as monolithic VBOs?

Anyone have any technical hints or links?

cheers, Lindsay

---

I'm no expert, but i can tell you you can first render all your opaque models (and to boot, use a shader which doesn't support alpha) and then render your transparent models (with the transparency enabled shader). This solution would need you to "view z-order" your models because you will want to render farther models first.

This solution has one huge pitfall though: Double sided transparent models don't work well.

---

As far as I know, you will have to break up your enclosing model into sections which are separate VBOs and depth-sort the sections. The sections don't have to be individual faces — just small enough that each one is not simultaneously in front of and behind the enclosed object.

As Chiguireitor points out, anything opaque can be drawn first, but transparency must be sorted (or use strictly additive or subtractive blending).