WebGL alpha blending

Question

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

Текущее состояние фреймбуфером (непрозрачный):

Прозрачная текстура, вынесенное в закадровым фреймбуфером:

Результат при попытке смешать два. Обратите внимание на края по окружности:

Вот blendFunc:

_gl.blendFuncSeparate(_gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA); 

Вот шейдер. Просто основной рендеринг текстуры:

uniform sampler2D texture; 
varying vec2 vUv; 

void main() { 
    vec4 tColor = texture2D(texture, vUv); 

    gl_FragColor = tColor; 
} 

Answer 1

Скорее всего ваши текстуры с использованием предварительно умноженный альфа и поэтому ваша функция смеси должна быть

_gl.blendFunc(_gl.ONE, _gl.ONE_MINUS_SRC_ALPHA); 

Если ваши текстуры не умножается вы, вероятно, хотите предварительное умножение их либо в ваш шейдер

gl_FragColor.rgb *= gl_FragColor.a 

или при загрузке их (перед вызовом gl.texImage2D), вы можете сообщить браузеру для предварительного умножения их

_gl.pixelStorei(_gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

This document probably explains the issues better

и вы могли бы найти это отношение, а также

WebGL: How to correctly blend alpha channel png