WebGL 半透明对象隐藏前面的对象答案

【问题标题】：WebGL Semi-transparent object hiding objects aheadWebGL 半透明对象隐藏前面的对象
【发布时间】：2017-02-27 17:12:41
【问题描述】：

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

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

但是使用这种方法我必须对所有对象进行排序，才能正确渲染。现在我正在尝试首先通过深度测试而不是混合来渲染普通对象。接下来通过混合渲染半透明且不进行深度测试。这可以很好地渲染半透明物体，但它会隐藏前面的物体。

屏幕：

【问题讨论】：

标签： javascript webgl

【解决方案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

【讨论】：