Help with shader (some strange behavior)

[pokrishka]

Hi guys.

I was working on some shading and discovered a strange behavior. I'm new to all this so maybe I just don't understand something, perhaps you could help - I localized that behaviour in this shader:

fragmentSrc = [
    'precision mediump float;',
    'varying vec2 vTextureCoord;',
    'uniform sampler2D texture;',
    'void main(void) {',
    '    vec4 ownColor = texture2D(texture, vTextureCoord);',
    '    gl_FragColor = vec4(1.0, 0.0, 0.0, ownColor.a);',
    '}'
];

Now it looks to me that my shader should tint a sprite in red, but instead it sorta does but then it also snaps it into screen blending mode whenever alpha is less than 1. I've created this codepen with some colors where you can clearly see screen blending is taking place:

http://codepen.io/waterplea/pen/dMzXje

Can anybody explain to me why it behaves not as I expected it to? The way I see it it should output fully transparent pixels where original sprite had 0 alpha but instead it outputs 100% opaque red pixels in screen blending mode.

[Fatalist]

You should multiply the color by alpha. 

gl_FragColor = vec4(vec3(1.0, 0.0, 0.0) * ownColor.a, ownColor.a)

[pokrishka]

Thank you, that works. But why is it so? I was under the impression that in shader I define the color of pixel and the transparency of it and I was actually struggling to have screen blending of my effect and turns out it is there for free when alpha is 0

[Fatalist]

Because PIXI uses "premultiplied alpha". 

https://developer.nvidia.com/content/alpha-blending-pre-or-not-pre 

" So you might be asking: If the result is the same, why bother with pre-multiplied alpha? The reason is texture filtering. When you take samples from a texture, unless you have disabled texture filtering, the hardware is blending neighboring texels together and returning a weighted average as a result. With traditional post-multiplied alpha, this result will be incorrect. "

[pokrishka]

Thank you Fatalist, that was very informative!