These are chat archives for pixijs/pixi.js

28th
Feb 2017
Lenin
@Randore
Feb 28 2017 14:26
Hi
Guys why PIXI all tutorials are based on AutoDetectRenderer and examples are in PIXI.Application();
And also all the pixi examples uses PIXI.Sprite.fromImage();
Are there any tutorials which makes use of latest build?
schoening
@schoening
Feb 28 2017 16:18
Hey @Randore it might help to know what kind of tutorial YOU are looking for :D
Like, specifically. Whats wrong with those tutorials :)
Lenin
@Randore
Feb 28 2017 16:42
Some of them not getting rendered for example when we use Application we have to pass 'new' and for autoRender it's not,

This is not the only case I'm talking about I am confused about Sprite loading.

In example it is different direct render of Sprite
var parrot = PIXI.Sprite.fromImage("images/parrot.png");

And in github tutorials it's like
loader.add().load(setup); function setup(){ .. }

It's confusing to understand PIXI.Texture and PIXI.BaseTexture. I am following different tutorials on the web.

So I am asking here, if someone knows good tutorials which will be standard and future usable - PIXI.v4.4
schoening
@schoening
Feb 28 2017 16:55
Yeah, I'm also a bit confused about the whole change to application. You do however still have access to renderer and stage. So u can build it the old way
Chris Barnes
@clbarnes
Feb 28 2017 19:55
Hi all
I'm trying to prevent pixi v3 from premultiplying my alphas
because i'm just using 8bit RGBA channels to pack a 32-bit integer and don't want 1/256 of them disappearing
how might i go about setting this, ideally on the texture rather than the renderer?
Enriko Riba
@enriko-riba
Feb 28 2017 19:59
I don't think pixi does anything like that, its your tooling that either premultiplies alpha or not...so unless you blend such a texture nothing will happen inside pixi that changes your texture channels
Chris Barnes
@clbarnes
Feb 28 2017 20:01
i'm fairly sure it is pixi doing it - I'm using a minimal example based on this tutorial https://www.awwwards.com/a-gentle-introduction-to-shaders-with-pixi-js.html and have verified that my (local) PNG is not premultiplied
but then when I tinker with my shader GLSL it's using premultiplied alpha
Enriko Riba
@enriko-riba
Feb 28 2017 20:02
without looking at the example what crosses my mind is sampling+mipmap...that would change in a rather ugly way the encoded ints
and yes all pixi internals are layed out to use premultiplied alpha
Chris Barnes
@clbarnes
Feb 28 2017 20:04
the sampling and mipmapping issues can be avoided by doing nearest neighbour interpolation, right?
Enriko Riba
@enriko-riba
Feb 28 2017 20:07
according to docs yes but tbh I never actually tried and verified that...nevertheless the sampler has to interpolate based on the uv coords. But I am not that fluent
this just verifies that the shader works and that i'm not doing anything untoward with the PNG
I've seen blend modes mentioned a few times? but nowhere with a good explanation of how to use them right
Enriko Riba
@enriko-riba
Feb 28 2017 20:12
yeah but this just sets every pixel to white. when you sample from a texture the uv's will be fractional numbers so not sure what will happen under GL_NEAREST and without mipmaps - thats all I meant with the above
Chris Barnes
@clbarnes
Feb 28 2017 20:13
yeah, that sets every pixel to white- my point is that it comes out 100% white and opaque if I vary the alpha channel because it's premultiplied, so it effectively just ignores the alpha
whereas if i can get webGL to respect that it's not premultiplied, i'm in business
Enriko Riba
@enriko-riba
Feb 28 2017 20:15
it ignores the texture alpha channel because you explicitly set the alpha to 1 in the shader and you dont even use the texture
Chris Barnes
@clbarnes
Feb 28 2017 20:16
right, but if i explicitly set the alpha to 0 then it looks exactly the same, because it ignores it
because it's premultiplied
this is just proving that pixi is premultiplying my alpha when i don't want it t
to*
and my question is, how do i make it stop doing that
Enriko Riba
@enriko-riba
Feb 28 2017 20:17
so you are saying that if you change it to gl_FragColor.rgba = vec4(1,1,1,1); it will show your texture?
Chris Barnes
@clbarnes
Feb 28 2017 20:17
no
Enriko Riba
@enriko-riba
Feb 28 2017 20:17
sorry 111,0
Chris Barnes
@clbarnes
Feb 28 2017 20:17
no, it shows exactly the same white square as 1,1,1,1
which proves that internally, webGL doesn't care about the value in the A channel
which means that somewhere between my un-multiplied texture and my shader, pixi is multiplying by alpha, which i don't want it to do
i want pixi to not multiply by the alpha, and i want webgl to respect the alpha value, so that 1,1,1,1 and 1,1,1,0 show different things
Enriko Riba
@enriko-riba
Feb 28 2017 20:21
well pixi must be doing something like pixel = source.rgb + (dest.rgb * (1 – source.a)) because pixi expects premultiplied alpha
Chris Barnes
@clbarnes
Feb 28 2017 20:21
yeah, exactly
and i'd like it to... not do that
if possible
Enriko Riba
@enriko-riba
Feb 28 2017 20:22
I am not that fluent in GL but must be the same is in DirectX /hlsl.
there should be a sourceblend renderstate and destinationblend renderstate that you set before the frag shader
Chris Barnes
@clbarnes
Feb 28 2017 20:25
yeah, i think that's what the blendmode is for
Enriko Riba
@enriko-riba
Feb 28 2017 20:25
hmmm looking at the source there is a BLEND_MODES var
Chris Barnes
@clbarnes
Feb 28 2017 20:25
was just hoping that someone had any more direct advice
Enriko Riba
@enriko-riba
Feb 28 2017 20:28
sorry, as I said I am not that fluent.
I see that the filter has a blendMode property. What you are looking for is to set it to SourceBlend=sourcealpha and DetsinationBlend = InverseSourceAlpha.
But I also dont see any obvious way to do it
```function mapWebGLBlendModesToPixi(gl) {
var array = arguments.length > 1 && arguments1 !== undefined ? arguments1 : [];
// TODO - premultiply alpha would be different.
// add a boolean for that!
array[_const.BLEND_MODES.NORMAL] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.ADD] = [gl.ONE, gl.DST_ALPHA];
array[_const.BLEND_MODES.MULTIPLY] = [gl.DST_COLOR, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.SCREEN] = [gl.ONE, gl.ONE_MINUS_SRC_COLOR];
array[_const.BLEND_MODES.OVERLAY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.DARKEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.LIGHTEN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.COLOR_DODGE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.COLOR_BURN] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.HARD_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.SOFT_LIGHT] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.DIFFERENCE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.EXCLUSION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.HUE] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.SATURATION] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.COLOR] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];
array[_const.BLEND_MODES.LUMINOSITY] = [gl.ONE, gl.ONE_MINUS_SRC_ALPHA];

return array;```
how can it be that most are the same???
Chris Barnes
@clbarnes
Feb 28 2017 20:33
i've read in a couple of places that webGL doesn't respect all of those options
so it might be that if the renderer is webGL and you select an option it doesn't like, it defaults to one it does, and this is handling that default process
i think webGL only likes add, multiply and screen
Enriko Riba
@enriko-riba
Feb 28 2017 20:57
did some digging cause I find this topic interesting. The texture has a property premultiplyAlpha = true | false. Its used during GPU upload and if true (default) the texture gets converted to premultiplied alpha via gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this.premultiplyAlpha);
Chris Barnes
@clbarnes
Feb 28 2017 20:58
aha
so if i do mySprite.texture.premultiplyAlpha = false before it renders, will that work then?
Enriko Riba
@enriko-riba
Feb 28 2017 20:58
If this is true it raises another question for me as I have a premultiply step in my build pipeline
That would mean that all my images are two times premultiplied :-)
Chris Barnes
@clbarnes
Feb 28 2017 21:00
hmm, doesn't seem to change anything (setting the sprite's texture's premultiplyAlpha to either true or false)
haha, yeah, that might cause some problems
my IDE is telling me that mySprite.texture doesn't have a premultiplyAlpha property
Enriko Riba
@enriko-riba
Feb 28 2017 21:02
its on the basetexture
which is the actuall texture sent to gpu
Chris Barnes
@clbarnes
Feb 28 2017 21:03
mySprite doesn't have a baseTexture property
Enriko Riba
@enriko-riba
Feb 28 2017 21:03
not the sprite but the sprites texture has a basetexture
Chris Barnes
@clbarnes
Feb 28 2017 21:03
ah, right
stil doesn't seem to be doing anything
Enriko Riba
@enriko-riba
Feb 28 2017 21:05
well this should just prevent unpacking the texture as premultiplied - didn't know that webgl feature even exists :-)
Chris Barnes
@clbarnes
Feb 28 2017 21:05
my IDE tells me that the property name is premultipliedAlpha
ah, hang on
Enriko Riba
@enriko-riba
Feb 28 2017 21:06
yes it is
Chris Barnes
@clbarnes
Feb 28 2017 21:07
so maybe it unpacks the texture as not premultiplied, but then when you're changing the alpha value in the shader it treats it as if it is
i can work with that
Enriko Riba
@enriko-riba
Feb 28 2017 21:07
thats the blend operation, but you are not blending your "data texture" with the scen
e.
I think you need to have all three conditions: nearest filtering, no mipmaps, no premultiplied alpha
Chris Barnes
@clbarnes
Feb 28 2017 21:10
does mipmapping not respect the scale mode, then?
(bear in mind that my understanding of mipmapping is basically what I've gleaned from the first paragraph of wikipedia in the last few minutes)
:P
Enriko Riba
@enriko-riba
Feb 28 2017 21:11
not sure what you mean but it basically creates say 1 pixel from 4
for colors thats cool but for ints not so much
Chris Barnes
@clbarnes
Feb 28 2017 21:11
yeah, but does it necessarily do so by averaging
Enriko Riba
@enriko-riba
Feb 28 2017 21:12
that the filter operation, nearest, linear
Josh Groves
@grovesNL
Feb 28 2017 22:12
There are a bunch of ways to control premultiplied alpha in WebGL (unfortunately). I don't know which settings Pixi v3 uses, I know there were some changes to it in v3
So you can inspect blendFunc (by querying it, breakpoints, or a WebGL extension) when your texture is being rendered and pixelStorei when your texture is being uploaded
You can also check whether premultipliedAlpha is being set on your canvas element by breakpoints or providing a context if v3 allows you to do that
(3) and (4) are less likely to be used but you could check those as well
Josh Groves
@grovesNL
Feb 28 2017 22:26
@clbarnes @enriko-riba Just FYI in case it helps