Прозрачное поведение текстур в WebGL

Окружающая среда: WebGL, Chrome. У меня есть следующее поведение при использовании прозрачных png в качестве текстур для моделей:

Изображение A - дерево скрывает здание за ним, и я вижу текстуру в мире коробки. Он также скрывается (задние ветки не видны).
В то же время - изображение B - работает правильно, окно прозрачно, и я вижу, что позади

A: B:

Оба скриншота были сделаны на одной сцене одновременно с разных позиций камеры. Текстуры создаются по тому же алгоритму.

Я не могу понять, какая разница между прозрачностью окон и веток. Мой главный вопрос: как исправить ветки, чтобы не скрывать объекты позади них? Шейдерный код:

gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a);

Я играл с включением/отключением blending и depth_test, иногда получая желаемые результаты, но не уверен, что это правильный способ сделать что-то.

Ответ 1

У вас проблемы с буфером глубины, это не имеет никакого отношения к вашим режимам шейдера или смешивания.

Что происходит, так это то, что порядок, в котором вы выполняете свою прозрачную геометрию, влияет на вашу способность отображать за ней. Это связано с тем, что буфер глубины не имеет понятия прозрачного или непрозрачного. В результате, несмотря на то, что они не визуально вносят вклад в сцену, эти прозрачные пиксели все равно записываются в буфер глубины, и после этого любые пиксели, которые вы рисуете за ними, будут отбрасываться, потому что они "не видны". Если сначала вы нарисовали геометрию за прозрачным объектом, она будет отображаться правильно, потому что она будет записана в кадр, прежде чем прозрачная глубина будет установлена на место, чтобы отбросить его.

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

Там нет "идеального решения" этой проблемы, но то, что она действительно сводит, пытается структурировать вашу сцену так:

Отобразить любую непрозрачную геометрию, отсортированную по состоянию (shader/texture/etc)
Далее выполните следующую прозрачную геометрию. Если возможно, соберите их по глубине, чтобы сначала вы нарисовали самый дальний из камеры.

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

Ответ 1

Ответ 2