#webgl #alphablending #blending
#webgl #alphablending #смешивание
Вопрос:
Я написал библиотеку для webgl, в ней есть много тестов, и она отлично выполняет эти тесты, включая тот, который у меня есть для смешивания.
Я настроил тест на выполнение стандартного смешивания Src_Alpha, One_minus_Src_Alpha, и тест правильно отображает результат:
Это изображение создается путем пересечения 1000 строк со значением альфа 0,2. Обратите внимание, что изображение не выдает размытые белые цвета ни в одной заданной точке.
Это также текущее состояние смешивания, созданное с помощью плагина webgl Spector для Chrome:
Blend State
BLEND: true
BLEND_COLOR: 0, 0, 0, 0
BLEND_DST_ALPHA: ONE_MINUS_SRC_ALPHA
BLEND_DST_RGB: ONE_MINUS_SRC_ALPHA
BLEND_EQUATION_ALPHA: FUNC_ADD
BLEND_EQUATION_RGB: FUNC_ADD
BLEND_SRC_ALPHA: SRC_ALPHA
BLEND_SRC_RGB: SRC_ALPHA
Теперь я использую эту же библиотеку и отображаю те же края в макете, и они отображаются следующим образом:
Эти края имеют непрозрачность 0,2. И это режим наложения Spector:
Blend State
BLEND: true
BLEND_COLOR: 0, 0, 0, 0
BLEND_DST_ALPHA: ONE_MINUS_SRC_ALPHA
BLEND_DST_RGB: ONE_MINUS_SRC_ALPHA
BLEND_EQUATION_ALPHA: FUNC_ADD
BLEND_EQUATION_RGB: FUNC_ADD
BLEND_SRC_ALPHA: SRC_ALPHA
BLEND_SRC_RGB: SRC_ALPHA
Я бьюсь головой о стол, пытаясь выяснить, в чем может быть разница между двумя сценариями.
Логика шейдера просто передает цвет вершины шейдеру фрагмента, поэтому нет предварительно умноженных букв.
Мне просто нужны какие-либо мысли о том, что еще может повлиять на смешивание таким убийственным образом. Я могу опубликовать любую дополнительную информацию, которая необходима.
РЕДАКТИРОВАТЬ: Чтобы показать тот же точный тест в этой среде, вот рендеринг колеса и добавление к размыванию белого каким-либо образом:
Комментарии:
1. Возможно, вам это покажется полезным: webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
2. Это не было недостатком понимания того, как webgl выполняет смешивание. Я прочитал более чем достаточно материала, чтобы понять это правильно, просто было неопределенное поведение в настройке контекста, который я использовал. Как видно из моих настроек и выходных данных, режимы наложения были установлены очень правильно.
Ответ №1:
Кажется, в моей библиотеке потенциально было какое-то плохое неопределенное поведение:
Я дважды использовал контекст gl: canvas.getContext(…), и каждый из них потенциально мог иметь разные свойства для таких вещей, как предварительно умноженные атрибуты alpha и alpha setting для контекста.
Когда я исправил эту проблему, эта странная ошибка смешивания исчезла. Поэтому я предположу, что свойство предварительного умножения alpha между двумя захватами контекста было каким-то образом несовместимым.