Can't figure out how to use filters

[alextewpin]

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

 

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));
}

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?

[ivan.popelyshev]

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

[alextewpin]

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

[ivan.popelyshev]

> 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
 

[alextewpin]

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.

[ivan.popelyshev]

Pixi renders whole container into separate framebuffer (maybe not the same size, but pow2), then applies a shader to render it on screen. There're no materials in pixi, renderer plugins are the only analogue, and they aren't newbie-safe. 

[ivan.popelyshev]

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.

[alextewpin]

@ivan.popelyshev got it! Owe you a beer.

[xerver]

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.

[alextewpin]

@xerver thank you, I've already figured it out. However, your example is still really useful, and I will defiantly use parts of it in my code.