WebGL（关于混合）

试了很久，发现效果都不满意。后来，看到了：

When using depth buffering in an application, you need to be careful about the order in which you render primitives. Fully opaque primitives need to be rendered first, followed by partially opaque primitives in back-to-front order. If you don't render primitives in this order, the primitives, which would otherwise be visible through a partially opaque primitive, might lose the depth test entirely.

结论：

先画不透明，再画半透明。都是半透明，那么由远及近的画（z轴）。

补充：

This is a quick solution, but it’s not very satisfactory because, as we’ve seen in Chapter 7 , hidden surface removal is often needed to correctly draw a 3D scene.

You can overcome this problem by drawing objects while turning the hidden surface removal function on and off.

1. Enable the hidden surface removal function.
   gl.enable(gl.DEPTH_TEST);

2. Draw all the opaque objects (whose alpha values are 1.0).

3. Make the depth buffer ( Chapter 7 ), which is used in the hidden surface removal, read-only.
   gl.depthMask(false);

4. Draw all the transparent objects (whose alpha values are smaller than 1.0). Note, they should be sorted by the depth order and drawn back to front.

5. Make the depth buffer readable and writable.
   gl.depthMask(true);

If you completely disable the hidden surface removal function, when there are transpar-ent objects behind opaque objects, the transparent object will not be hidden behind the opaque objects. So you need to control that with gl.depthMask() . gl.depthMask() has the following specification.

参考

• WebGL Lesson 8
• OpenGL FAQ