blend mode not changing (PIXI.Mesh state)

[2CL]

It seems like PIXI isn't applying the blend function changes to the webgl state. I created a Mesh object

const state: State = new State();
state.blend = true;
state.blendMode = BLEND_MODES.NORMAL_NPM;

const mesh: Mesh = new Mesh(geometry, <MeshMaterial>shader, state); // unable to pass PIXI.Shader here without type casting (typescript) 
container.addChild(mesh);

No matter what blendMode i specify, it makes no difference. So I overwrote WebGL2RenderingContext to check if it is even making the calls.

WebGL2RenderingContext.prototype._blendFunc = WebGL2RenderingContext.prototype.blendFunc; 
WebGL2RenderingContext.prototype.blendFunc = function(a, b) {
  console.log("blendFunc: ", a, b);
  this._blendFunc(a, b);
}

WebGL2RenderingContext.prototype._blendFuncSeparate = WebGL2RenderingContext.prototype.blendFuncSeparate;
WebGL2RenderingContext.prototype.blendFuncSeparate = function(a, b, c, d) {
  console.log("blendFuncSeparate: ", a, b, c, d);
  this._blendFuncSeparate(a, b, c, d);
}

which logs this only once in start:

blendFunc:  1 771
blendFunc:  1 771

(gl.ONE = 1, gl.ONE_MINUS_SRC_ALPHA = 771)

Is it me doing something wrong or is it a bug in PIXI? I recently started looking into the mid level API and do not know much about it and would like to get some help with that too.
Also I wasn't able to find [SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA] for both RGB and alpha channels in BLEND_MODES. (https://github.com/pixijs/pixi.js/blob/00af8df56cfeadbc22bc5c2a1305eb8518fef993/packages/core/src/state/utils/mapWebGLBlendModesToPixi.ts)

Pixi version: 5.3.0

Edited July 17, 2020 by 2CL

[ivan.popelyshev]

Hello and Welcome to the forums!

I love those questions.

That's where state is changed: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.ts#L327

if you have only one object on stage, it will change state only once and then use it in all frames.

Unless, its going to different branch! https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.ts#L280 , there's also render batched , please check that its not going to that route.

> Also I wasn't able to find [SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA] for both RGB and alpha channels in BLEND_MODES.

there's no such blendMode, usually alpha is ONE, ONE_MINUS_SRC_ALPHA

I recommend to debug it a bit more or give me a demo and more information. zip-file, jsfiddle, whatever works for you.

[2CL]

14 hours ago, ivan.popelyshev said:

Hello and Welcome to the forums!

Thank you!
 

14 hours ago, ivan.popelyshev said:

I recommend to debug it a bit more or give me a demo and more information. zip-file, jsfiddle, whatever works for you.

Here: https://www.pixiplayground.com/#/edit/xZcW_XwbIIJOuLEyjG4SR
There is a root container with:
1) A normal square PIXI.SPRITE with PIXI.TEXTURE.WHITE as its texture.
2) A PIXI.Mesh square with the bottom two corners having 0 alpha and NORMAL_NPM as blend function specified in the Mesh's state object.

Now, since these two squares use completely different WebGLProgram, PIXI shouldnt be able to batch them, and so does spectorjs shows.

 

But I can't see PIXI making calls to blendFunc / blendFuncSeparate to change the blend function except in the start, neither in spectorjs nor by hooking into WebGL2RenderingContext (as I told before).

If I force the blend function from my side (line 100, 101), it works but then it breaks the PIXI's state management system.

Line 100 and 101 commented out (don't force change blend mode):

 

Line 100 and 101 uncommented (force change blend mode):

Edited July 17, 2020 by 2CL

[ivan.popelyshev]

OH, i know whats wrong. 

https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.ts#L149

it sets blendmode in constructor ?  I'll make PR for pixi a bit later.

Edited July 17, 2020 by ivan.popelyshev

[ivan.popelyshev]

btw, this blendMode wont work for sprite because batch renderer automatically switches between NORMAL and NORMAL_NPM based on texture alphaMode. Mesh doesnt have auto-switch code for NPM

You look like you know everything, but just in case: http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/ , https://www.w3.org/TR/compositing-1/#blending

Edited July 17, 2020 by ivan.popelyshev

[2CL]

1 hour ago, ivan.popelyshev said:

OH, i know whats wrong. 

https://github.com/pixijs/pixi.js/blob/dev/packages/mesh/src/Mesh.ts#L149

it sets blendmode in constructor ?  I'll make PR for pixi a bit later.

 

Oh I see, so it was getting overwritten ? 

1 hour ago, ivan.popelyshev said:

btw, this blendMode wont work for sprite because batch renderer automatically switches between NORMAL and NORMAL_NPM based on texture alphaMode. Mesh doesnt have auto-switch code for NPM

You look like you know everything, but just in case: http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/ , https://www.w3.org/TR/compositing-1/#blending

I don't want to change blend mode for sprites, only for the mesh, and now I think I won't be doing that too. Before this I wasn't using premultiplied alpha because I thought that the color gradient (eg: rgba(1.0, 0.5, 0.7,1.0) -> rgba(1.0, 0.5, 0.7,0.0)) may leave some black artifacts since after multiplication the end gradient color will have 0 for r, g and b values too. I just tried it and everything seems perfectly fine ? (at least in the case I am talking about).

I still have some more questions about the mid level API.
1) Is there a way to tell what part of Buffer Pixi should update on GPU instead of updating the whole buffer? Also how many triangles to render (right now it seems like PIXI auto guesses from the size of indices buffer).
2) Does PIXI provide some uniforms itself?

If so then what are they? And how to use them? And are there reserved uniform names that we shouldn't be using because of this?

Also there is a definition error in PIXI.Mesh's constructor. 2nd parameter type is specified as PIXI.MeshMaterial, so i have to type cast PIXI.SHader objects at MeshMaterial everytime. A very minor thing but will help make awesome PIXI even more awesome ?

Edited July 17, 2020 by 2CL

[ivan.popelyshev]

1) geometry buffer or texture buffer? both are possible, I use it at my work, but the algorithms are hard.

2) projectionMatrix, but you can add your own in renderer, there were global uniforms somewhere. Also you can add uniforms in the list before the shader gets compiled, thats how stuff like translationMatrix works in your shader - its defined before shader is bound first time.

I really enjoy our conversation.

Edited July 17, 2020 by ivan.popelyshev

[2CL]

1 minute ago, ivan.popelyshev said:

1) geometry buffer or texture buffer? both are possible, I use it at my work, but the algorithms are hard.

2) projectionMatrix, but you can add your own in renderer, there were global uniforms somewhere. Also you can add uniforms in the list before the shader gets compiled, thats how stuff like translationMatrix works in your shader - its defined before shader is bound first time.

I really enjoy our conversation.

Geometry buffer

[ivan.popelyshev]

hack GeometrySystem. You can even do it from outside, those classes are exposed - you can change prototypes.

its not as hackable as Texture Resource , but its possible

Edited July 17, 2020 by ivan.popelyshev

[2CL]

2 minutes ago, ivan.popelyshev said:

hack GeometrySystem. You can even do it from outside, those classes are exposed - you can change prototypes.

Oh ? the dirty way. I guess Ill try that if there is a real need, right now the cases I have use small buffers. Anyway thank you, I too enjoyed this conversation and got to know a lot more than what I came here for ?