webgl: белая рамка при использовании прозрачности (альфа)

Question

При рендеринге текстур, имеющих альфа-канал, вокруг непрозрачной части появляется белая рамка (кажется, что это пиксели с альфа-каналом> 0 и <1): </p>

Исходная текстура создается в иллюстраторе и экспортируется в виде png. вот оно:

(ну, кажется, переполнение стека изменило изображение, настроив пиксели, которые не являются полностью непрозрачными / прозрачными, так что здесь есть ссылка )

это, вероятно, смешивание, хотя я не знаю, что не так с настройкой:

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

[Update]

Вот отрендеренная версия, в которой я добавил альфа-градиент в левую часть текстуры (так что он становится от 0 непрозрачности до 1 до половины)

эта текстура является текстурой only , отображаемой в этой позиции. кажется, что он белый с а = 0,5. очень странно. фон - только очищенный цвет:

gl.clearColor(0.603, 0.76, 0.804, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render objects here

функция глубины выглядит следующим образом:

gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);

есть идеи? Большое спасибо.

[Обновление 2]

Отвечая на мой собственный вопрос: эффект возникает, когда фоновым цветом холста или тела html-страницы является белый. У меня нет объяснения.

Answer 1

Используйте предварительно умноженную альфу, и эта проблема исчезнет.

См .: http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D

Answer 2

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

Answer 3

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

Общее правило - рисовать прозрачные объекты после непрозрачных объектов, как правило, сзади и вперед. Если вы используете аддитивное смешивание, то часто бывает достаточно отключить буфер глубины после непрозрачного рисования и рисовать их в любом порядке.

Answer 4

При настройке FragColor в шейдере попробуйте умножить изображение RGB на изображение альфа.

Answer 5

Отвечая на мой собственный вопрос: эффект возникает, когда фоновый цвет холста или тела html-страницы белый.У меня нет объяснения.

(добавил это из Обновления 2 моего первоначального поста, просто чтобы найти ответ легче)