Shader Texture Oddness

[RichJ]

I'm trying to render a sprite using a shader that takes a texture as a parameter and combines the sprite with that texture, so the desired outcome is the texture being overlaid onto the original sprite texture.  They successfully combine, but the texture passed in appears slightly scaled up and therefore misaligned with the sprite texture.  I'm new to shaders, so I hope I haven't missed something obvious.  Pulling my hair out with this one.  Here's an example fiddle

 

[ivan.popelyshev]

The easiest way to position second texture is to use  an extra sprite, and then calculate their relative matrices. 

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

Look at DisplacementFilter code, its using extra sprite: https://github.com/pixijs/pixi.js/tree/dev/src/filters/displacement . Dont forget that sprite has to be added to stage and made non-renderable, otherwise coordinates wont be calculated properly and coordinates is the thing we need from extra sprite.

If you need to use texture from an atlas for your extra sprite, look at how latest version of SpriteMaskFilter does it: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/filters/spriteMask/SpriteMaskFilter.js#L59

Filters are made to cover containers and store the result in temporary framebuffer, thus there are problems with "mapCoord" and other coordinates-related stuff. Alternatively, you can make a sprite plugin: https://github.com/pixijs/pixi-plugin-example 

[ivan.popelyshev]

Thanks for the fiddle, we'll use it if you have problems with my explanations. 

Btw, your current version can be emulated with two sprites and ADD blendMode, then a AlphaFilter (aka VoidFilter) over them.

What exactly do you want to do with two textures?

[RichJ]

Thanks for the tips, I'll take a look at all that info later today.  What I want to do with the extra texture is use it as masking information for the actual sprite, so this combining is just a test to see if the texture gets into the shaders ok, it's not what I actually want to do.  So when a pixel is transparent on the mask, I set gl_FragColor to 0,0,0,0 on the sprite texture and therefore suppress rendering of that pixel.  The mask texture will be generated dynamically in JS code.  I'm new to PIXI, there may be a better way of doing this.  I've used shaders to do this in the past with a Monogame project.

[ivan.popelyshev]

You can use default pixi mask for it, make a container with two sprites, and use `sprite1.mask = sprite2`.

How many of those sprites you want to be on screen? The main problems for custom shaders is that they are slow and pixi can't batch them.

[RichJ]

Not sure about the number of sprites yet, just trying to get the technique to work, but if performance is a potential issue then I may abandon it.  The sprite mask stuff sounds interesting, I'll try that out shortly.  Thanks for the quick and very concise answers 

[ivan.popelyshev]

Performance can be fixed later  

[RichJ]

Really easy with sprite masks, here's a link to the new fiddle using masking

Thanks again, much appreciated.

[ivan.popelyshev]

Nice. Btw, dont forget that pixi has "tint" on sprites, so you can use it if you just need to fill a mask with single color. Also, there's `PIXI.Texture.WHITE` that has 10x10 size and you can make any rectangle/square sprite of any color with this texture. Those two things are handy in that field you are exploring right now.

[RichJ]

Yeh I've been using tint on other things, but I didn't know about PIXI.Texture.WHITE.  That's a great little feature, thanks for the info 

[ivan.popelyshev]

You can also take only a region of texture or even rotated region with `new PIXI.Texture(oldTexture, frame)`, the support of texture regions in masks was added only in latest version of pixi (4.6.0).

No need to use "scale.x=-1" if you want to flip something.

[RichJ]

Time for an upgrade then, I'm still on 4.5.6