Артефакты z-буфера WebGL?

Question

Мы работаем над проектом WebGL на основе Three.js, и у нас возникают проблемы с пониманием того, как прозрачность обрабатывается в WebGL. Изображение показывает двухстороннюю поверхность, нарисованную с альфа = 0,7, которая ведет себя правильно на правой стороне. Однако ближе к середине появляются странные артефакты, а с левой стороны прозрачность, похоже, не работает вообще.

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

Проблему также можно увидеть здесь: http://emilaxelsson.se/sandbox/vis1/ Кто-нибудь видел что-нибудь подобное раньше? В чем может быть причина?

Answer 1

Ваша проблема в том, что прозрачные объекты нужно сортировать и отображать в обратном порядке (если вы попытаетесь изменить непрозрачность вашей сетки с 0,7 (прозрачная) до 1,0 (непрозрачная), вы можете увидеть, что z-буфер работает просто отлично).

Увидеть:

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

В вашем случае это может оказаться менее тривиальным, поскольку я предполагаю, что у вас есть только один меш.

Изменить: просто, чтобы подвести итог обсуждения ниже. Можно добиться правильного рендеринга такой двусторонней прозрачной сетки. Для этого вам нужно создать 6 версий меша, соответствующих 6 сторонам куба. Каждая версия должна быть отсортирована в обратном порядке на основе "стороны куба" (спереди, сзади, слева, справа, сверху, снизу). При рендеринге выберите правильную сетку (в зависимости от направления просмотра камеры) и визуализируйте эту единственную сетку.

Answer 2

Простое решение для вашего случая (на основе изображения, которое вы прикрепили), без дорогостоящей сортировки и нескольких сеток, состоит в том, чтобы отключить проверку глубины и включить выборку лица. Это дает приемлемые результаты, если у вас нет непрозрачных объектов перед сеткой.