Compute right uvs ?

[Bouh]

Hi !

I try to create a new shader, for merge two textures in one.
For this i use a main texture used as sprite, my filter is on this sprite.
And the second texture is pass by uniforms.

This works, i can see the second texture in my shader, but the ratio of this second texture is wrong. I guess it's related to UVs, so i've compute UVs with a matrix, but this matrix (otherMatrix in my pixi playground ) is set with default values.
I guess the matrix should be related to my second texture but i can't find how do this. I don't know how compute correct uvs.
You can try the shader here in my pixi playground.

Maybe i've said dumbs things, let me know ^^

 

[ivan.popelyshev]

HI!

You are lucky, usually people wait for week or two before such case is resolved. Thank my good mood.

Usuaally when people post abstract filter cases, I ask them if they actually need filters and not some other things

In your case, for pixi-v4 there's special plugin : https://github.com/pixijs/pixi-picture Basically it copies part of current framebuffer and gives it as a second input for a filter. Its better if that "blendMode" is inside another filter, otherwise it will use readPixels and be very slow

CTRL+C its code to your project or just connect it and make new blendmode that you want.

What can I say about your try: I see you tried many things  You almost did it: you actually made desync in clipping and texture.

1. vec2 cTexture_scCoord = vTexture_scCoord + vec2(-0.1);  < -- here, fixed version is just fine

2. pixi uses premultiplied alpha. All channels are premultiplied, color should be complete 0.0 if its transparent. in all channels.

3. blendMode was normal for non-premultiplied alpha, i fixed it for premultiplied.

4. mapCoord is fine, its used only for TEXTURE REIGONS, in case you place texture from an atlas. See SpriteMaskFilter sources to understand it. In fact, all your example should be based on SpriteMaskFilter

Here, I removed unnecessary things and added a few comments: https://codepen.io/ivanpopelyshev/pen/RwPzaMM?editors=0010

Also, remove that "uv-0.1" part , you should do it with sprite translation.

All rotations/ translation and stuff should be done with sprite! The whole idea is that you manipulate object in stage tree, and then filter calculates its relative matrix, so you dont have to do it in shader. Updating uniforms based on transforms is cheap.

In case you move it to v5 ( I see you tried to use outputFrame, well, its v5 uniform )

1. all uniforms should be specified in constructor or before filter is uesd, not in "apply".

2. "texture.transform" has to be swapped to "texture.uvMatrix"

In case you actually use texture from atlas:

1. Adjust clipping, it should use "clamp(texCoord, uClampMargin.xy, uClampMargin.zw)" , where uClampMargin taken from texture matrix. SpriteMaskFilter also does that.

[ivan.popelyshev]

Btw, Pixi-picture is used in RPGMaker-MV to emulate Overlay blendmode. Its a good example of shader that converts pixels to non-premultipleid-alpha , computes and converts back: https://github.com/pixijs/pixi-picture/blob/master/src/OverlayShader.ts Yes, most of blendModes are actually NPM, only simple ones are PM-friendly. Webapps work with PM mostly, because 2d images have to be blended good

Edited April 4, 2020 by ivan.popelyshev

[Bouh]

Thank you so much, you know i've spend 5 days on this uvs problem.
Now i will spend some hours to understand your fix and comments
I've started with displacement filter, start read tutorials about shaders and glsl, spend 4 hours in the chrome debugger for try to understand how works uniforms and how are compute these damn uvs.
And i've open all filters for found another one working with a external file, and yes i've found SpriteMaskFilter and read into it. And today i've dig in PIXI.Texture. But Matrix are still blurry for me.
 

Quote

Usuaally when people post abstract filter cases, I ask them if they actually need filters and not some other things

It's was a good reason for me to learn a bit shaders, this is a wonderful world. Finally all filters use webgl, no ? I prefer start at the root. i love see how thing works in the deep.

Thank you for your kindness, i'll read all your stuff !


 

[ivan.popelyshev]

13 hours ago, Bouh said:

It's was a good reason for me to learn a bit shaders, this is a wonderful world. Finally all filters use webgl, no ? I prefer start at the root. i love see how thing works in the deep.

Thank you for your kindness, i'll read all your stuff !

Thanks!

Yes, that's a good start. I recommend to go through webglfundamentals or webgl2fundamentals anyway. We want to make pixi-version of those tutorials, because pixi has all that low-level and its easier to use than plain webgl but we dont have enough demos

Regarding filters - they are mostly for processing rectangles, and the real usage usually works with multiple steps. Usually its blur-based: Glow, Bevel, DropShadow. PixiJS so far is the best thing for it and two projects use them for fullest: https://beatflyer.com/ and phase.com

Unfortunately I dont have available demos for multi-pass filters, usually people try to make their versions of blur/glow after looking through pixi-filters repo. Look in Dropshadow for that.

Edited April 5, 2020 by ivan.popelyshev