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

при рендеринге текстур с альфа-каналом вокруг непрозрачной части появляется белая граница (граница, похоже, является пикселями с Альфа > 0 и

enter image description here

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

enter image description here

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

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

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

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

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

enter image description here

текстура -только текстура отображается в этом положении. он кажется самым белым вокруг a=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-страницы белые. Но у меня нет объяснений.

9
blending graphics opengl-es webgl

5 ответов

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

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

4

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

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

2

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

2

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

1

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

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

-1