pixi v5.3.3 shader problem ,please help me

[AndyZhengLL]

I have wrote my own mask fuction and I found a UV problem with shader

const sprite = PIXI.Sprite.from(slottexture)
const maskFrag = `
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform sampler2D maskTexture;

void main() {
vec2 uv = fract( vTextureCoord );
vec4 originalColor = texture2D(uSampler, uv);
vec4 maskColor = texture2D(maskTexture, uv);
gl_FragColor =  originalColor * maskColor.r;
}
`

const maskTexture = resources.mask.texture
maskTexture.baseTexture.mipmap = false;

const filter = new PIXI.Filter(null, maskFrag, {
  maskTexture: maskTexture,
});

sprite.filters = [filter];
root.addChild(sprite);

and it`s just render a quarter, I dont know why?

and  change the gl_FragColor = maskColor it`s still render a quarter, so I think it`s a uv problem!

[ivan.popelyshev]

There are different coordinate systems in filter. Input is actually bigger than filter area, so you need to multiply/divide on something to get correct result for your mask. Most probably

maskUV = vTextureCoord * inputSize.xy / outputFrame.zw

where inputSize / outputFrame are uniforms. For more tricks, see how DisplacementFilter works in source code of pixijs - it allows to overlay displacement mask, and then applies it. There are "calculateNormalCoord" or whatever, i dont remember exactly.

I'm sorry I cant post a long lecture here, but here are explanations:

https://github.com/pixijs/pixijs/wiki/v5-Creating-filters

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

I can recommend to use mesh-shader instead, when possible: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , just make a quad geometry and use two textures.

[AndyZhengLL]

16 hours ago, ivan.popelyshev said:

There are different coordinate systems in filter. Input is actually bigger than filter area, so you need to multiply/divide on something to get correct result for your mask. Most probably

maskUV = vTextureCoord * inputSize.xy / outputFrame.zw

where inputSize / outputFrame are uniforms. For more tricks, see how DisplacementFilter works in source code of pixijs - it allows to overlay displacement mask, and then applies it. There are "calculateNormalCoord" or whatever, i dont remember exactly.

I'm sorry I cant post a long lecture here, but here are explanations:

https://github.com/pixijs/pixijs/wiki/v5-Creating-filters

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

I can recommend to use mesh-shader instead, when possible: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , just make a quad geometry and use two textures.

can`t thank you enough