WebGL半透明对象隐藏对象前方

Question

我正在使用WebGL在javascript中制作类似Minecraft的游戏。我有半透明物体的问题。首先，我尝试使用深度测试和混合渲染所有对象

gl.blendEquation( gl.FUNC_ADD );
gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );

但是使用这种方法我必须对所有对象进行排序，才能正确渲染。 现在我试图首先使用深度测试和不混合来渲染普通对象。接下来渲染半透明混合，没有深度测试。这使得半透明物体变得很好，但它隐藏在前方。

屏幕：

Answer 1

您应该启用深度测试，但禁用深度写入。它在代码中看起来像这样：

gl.depthFunc(gl.LESS);

/* draw opaque objects */

gl.depthMask(false); // turn off depth write

/* draw transparent objects in back-to-front order */

gl.depthMask(true); // turn it on again