webgl 中的 alpha 混合工作不正常

Question

代码：

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LESS);

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

问题在于在图形上绘制了“多余”：
如何纠正？
PSα=0.9

Answer 1

你的视角 zNear 和 zFar 设置为多少？有没有可能你把它设置得太近，立方体的背面被剪掉了？请参阅下面的示例，其中设置得太近。这看起来不像你的问题，但很难说。

您还在对多边形进行排序吗？渲染透明物体时，通常必须从前到后绘制。对于像球体、金字塔或立方体这样的凸面物体，您可以在剔除的情况下绘制两次，首先gl.cullFace(gl.FRONT)仅绘制背面的三角形，即距离相机较远的三角形，然后再次仅gl.cullFace(gl.BACK)绘制正面的三角形，即距离相机较远的三角形。离相机更近。

还有一个问题是你是否正确地向画布提供了预乘的 alpha 值？大多数着色器都会这样做

gl_FragColor = someUnpremultipliedAlphaColor;

但默认情况下你需要提供预乘的 alpha 颜色

gl_FragColor = vec4(color.rgb * color.a, color.a);

或者您可以将画布设置为使用未预乘的颜色

gl = someCanvas.getContext("webgl", { premultipliedAlpha: false });

gl_FragColor = someUnpremultipliedAlphaColor;

gl_FragColor = vec4(color.rgb * color.a, color.a);

gl = someCanvas.getContext("webgl", { premultipliedAlpha: false });