Sign in to follow this  
2CL

blend mode not changing (PIXI.Mesh state)

Recommended Posts

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 by 2CL

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

 image.thumb.png.3be4e8702bef79ca36452b6a762a9118.png

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):

image.png.6c0d65e368bcdc1239185aa5decceeba.png

 

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

image.png.85552190f75636c1d542f3df89f7a970.png

Edited by 2CL

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites
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?

image.png.cbb172a31089249a4ff5300ee0303bd6.png
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 by 2CL

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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 🙂

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.