WebGL Z缓冲区工件? [英] WebGL z-buffer artifacts?

问题描述

我们正在研究一个基于Three.js的WebGL项目，但在理解WebGL如何处理透明度方面遇到困难.该图像显示了用alpha = 0.7绘制的双面表面，该表面在其右侧正确运行.但是，靠近中间的奇怪工件会出现，并且在左侧，透明度似乎根本不起作用.

We are working on a Three.js based WebGL project, and have trouble understanding how transparency is handled in WebGL. The image shows a doublesided surface drawn with alpha = 0.7, which behaves correctly on its right side. However closer to the middle strange artifacts appear, and on the left side the transparency does not seem to work at all.

http://emilaxelsson.se/sandbox/vis1/alpha.png

问题也可以在这里看到: http://emilaxelsson.se/sandbox/vis1/有人看过类似的东西吗?原因可能是什么?

The problem can also be seen here: http://emilaxelsson.se/sandbox/vis1/ Has anyone seen anything similar before? What could the reason be?

推荐答案

您的问题是透明对象需要按照从后到前的顺序进行排序和渲染(如果您尝试将网格的不透明度从0.7更改为(透明)到1.0(不透明)，您可以看到z缓冲区可以正常工作.)

Your problem is that transparent objects needs to be sorted and rendered in a back-to-front order (if you try to change the opacity of your mesh from 0.7 (transparent) to 1.0 (opaque), you can see that the z-buffer works just fine).

请参阅:

• http://www.opengl.org/wiki/Transparency_Sorting
• http://www.opengl.org/archives/resources/常见问题解答/技术/transparency.htm (15.050)

• http://www.opengl.org/wiki/Transparency_Sorting
• http://www.opengl.org/archives/resources/faq/technical/transparency.htm (15.050)

在您的情况下，由于我假设您只有一个网格，因此解决起来可能不太简单.

In your case it might be less trivial to solve, since I assume that you only have one mesh.

只是为了总结下面的讨论.可以实现这种双面透明网格的正确渲染.为此，您需要创建6个版本的网格，分别对应于多维数据集的6个边.每个版本都需要根据多维数据集的一面"(从前，向后，向左，向右，从顶部，从底部)按照从前到后的顺序排序.渲染时，选择正确的网格(基于摄影机的观看方向)并渲染单个网格.

Just to summarize the discussion below. It is possible to achieve correct rendering of such a double-sided transparent mesh. To do this, you need to create 6 versions of the mesh, corresponding to 6 sides of a cube. Each version needs to be sorted in a back-to-front order based on the 'side of the cube' (front, back, left, right, top, bottom). When rendering choose the correct mesh (based on the camera viewing direction) and render that single mesh.

这篇关于WebGL Z缓冲区工件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！