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

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

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

A: Дерево над домом B: Прозрачность окна

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

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

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

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

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

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

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

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

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

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

    Отменить fragmentы с альфами ниже, чем, например, 0,5 может помочь (конечно, есть побочный эффект).

    if (gl_FragColor.a <0.5) отказаться;

    AlphaFunctions в WebGL?

    Давайте будем гением компьютера.