alextewpin

Can't figure out how to use filters

Recommended Posts

My goal is to make palette-applying filter. I have grayscale sprite where colors are set on equal distances (eg. 0, 0.33, 0.66, 1) and palette as 4x1 pixel texture. Idea is taking red channel from sprite and using it as x coord on palette texture. I've made this with Unity some time before no problem.

All of my sprites and palettes are placed on spritesheets. Problem is I can't get proper coords in shader.

If I use default shader, everything works fine, sprites renders as is.

gl_FragColor = texture2D(uTexture, vTextureCoord);

1679509604_ScreenShot2018-10-20at21_19_26.png.a1a9722142b594c3cd050660e4394331.png

 

Now with my shader:

uniform sampler2D uTexture;
uniform sampler2D uPalette;

varying vec2 vTextureCoord;

void main() {
  vec4 color = texture2D(uTexture, vTextureCoord);
  gl_FragColor = texture2D(uPalette, vec2(color.r, 0.5));
}

1718462508_ScreenShot2018-10-20at21_34_44.png.b9de4beeb3dae819768fcb91b42d083a.png

It's kinda works, but colors are mangled. I believe the reason it wrong texture coords. I've already read everything I could find here and on Github, but still can't figure it out.

 

Extra question 1

How Pixi determines main uniform texture name? It look like I can give it any name and it's just works.

 

Extra question 2

Why gl_FragColor = texture2D(uTexture, vTextureCoord); works just fine, but if I pass exact same texture in uniform param it renders the whole spritesheet in a weird way?

1714693658_ScreenShot2018-10-20at21_47_25.png.20cf5dad9c1c4f4530058953712dd80f.png

Share this post


Link to post
Share on other sites


It's kinda works, but colors are mangled. I believe the reason it wrong texture coords. I've already read everything I could find here and on Github, but still can't figure it out.

Disable mipmap on palette baseTexture.

If something else is wrong, try  "color.r + 0.5 / 256.0" where 256 is height of your texture. Also disable linear filtering for texture in uPalette (scaleMode in baseTexture should be PIXI.SCALE_MODES.NEAREST)

How Pixi determines main uniform texture name? It look like I can give it any name and it's just works.


It doesn't . It binds input texture to location 0, and uSampler is 0 by default.

Share this post


Link to post
Share on other sites

@ivan.popelyshev thank you, but all suggested solutions didn't worked.

Mipmaps didn't affected anything, proper scaleMode is already set.

Quote

If something else is wrong, try  "color.r + 0.5 / 256.0" where 256 is height of your texture.

Not sure what are you trying to achieve here. There should be no point in flipping Y axis, because palette is 1px tall. I'm pretty sure wrong coord is the problem, because if I changing Y coord colors are changed too, which shouldn't be the case with 4x1 texture.

I'll provide online demo tomorrow.

Share this post


Link to post
Share on other sites

> Mipmaps didn't affected anything, proper scaleMode is already set.

Filtering is the issue. Mips are the biggest problem here. Its not easy to switch them off ;)

I'll provide online demo tomorrow.

Yep, we'll solve it together.

After that, I'll help you to convert that filter into renderer plugin ( https://github.com/pixijs/pixi-plugin-example) or batcher ( https://github.com/gameofbombs/pixi-heaven/blob/master/src/twotint/sprites/SpriteMaskedRenderer.ts )
Filters are slow, every time you use it, it switches framebuffer
 

Share this post


Link to post
Share on other sites

Ivan, thank you so much for your help!

I've made a demo illustrating the issue: https://codesandbox.io/s/6knqx90lz.

Quote

After that, I'll help you to convert that filter into renderer plugin ( https://github.com/pixijs/pixi-plugin-example) or batcher ( https://github.com/gameofbombs/pixi-heaven/blob/master/src/twotint/sprites/SpriteMaskedRenderer.ts )
Filters are slow, every time you use it, it switches framebuffer

I think I'm missing the point here. What is purpose of filters in PIXI anyway? Isn't it a go-to way to apply shaders to sprites, like materials in other engines?

“Renderer plugin” sounds a bit scary, but I'm ready to do whatever it takes.

Share this post


Link to post
Share on other sites

Pixi filters do work with baseTexture input, however you specified texture region, and its ignored. YUou have to supply texture coords inside uniforms somehow.

First, try to use pure palette texture, without atlas. Then add a uniforms and figure out how to specify a region in it. 

Reference: https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

SpriteMaskFilter creates texture transform to multiply UV's by it: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js#L41 , try use that mapCoord matrix. Pass it straight to fragment shader uniform and multiply UV's by it.

Share this post


Link to post
Share on other sites

I threw a simple palette example together that hopefully can help you track down your issue: https://www.pixiplayground.com/#/edit/cJY98QTkz7yv7QQVp9jRN

I create the map texture with a utility I wrote a long time ago, that I'm not even sure if it works anymore: https://github.com/englercj/paletter

The original image, map image, and palette image that I use for the demo are in that repository as well.

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...

  • Recently Browsing   0 members

    No registered users viewing this page.