How to get a tiled texture with mirrored repeat?

[Blake Mann]

Hello! I've been trying to get a texture to tile with a mirrored repeat - I've tried doing this with TilingSprite and setting the wrapMode of the base texture but that didn't seem to work - it just will only tile with a standard repeat. So far I've only had any luck just manually making separate sprites for each tile which is less than ideal.

Is there a proper way to do this?

[Exca]

I dont think the regular tilingsprite supports mirrored rendering out of the box. You could create a custom shader for it that detects if it's on an odd or even tile and then flips the uv-coordinates depending on that.

[ivan.popelyshev]

> setting the wrapMode of the base texture but that didn't seem to work 

only textures of size pow-2 can be repeated by WebGL.

TilingSprite has special shader that allows repeat of other textures, but it does not account for mirrored repeat. You have to either modify that shader, either make a texture of 2x size, both by width and height, and then using it in TilingSprite  You can do it through RenderTexture

Individual sprites solution is also ok, i dont know why dont we have that fallback in default pixi too

Edited November 3, 2020 by ivan.popelyshev

[Blake Mann]

Using RenderTexture to make a 2-up texture to apply to the TilingSprite is a pretty good solution! I wasn't aware of RenderTexture before.

I think I'm pretty happy to use that approach, but for the sake of learning - how would I modify the shader that TilingSprite uses? I saw in the Pixi v4 docs that TilingSprite had a `shader` property on it, but I couldn't see any reference to a shader on it in v5.

[ivan.popelyshev]

Take TilingSpriteRenderer from https://github.com/pixijs/pixi.js/tree/dev/packages/sprite-tiling/src and its shader code (inline as strings), add a uniform that tracks whether texture is mirror-repeated, and adjust the math a bit, like, %2.0 there and 1.0-x in that case.

then tilingSprite.pluginName = "myPlugin" should work

"shader" is from v3 , but in v4 it existed only as obsolete field. The way its done in v4 is the same as in v5.

Also in v5 there is new general way of doing shaders, "mesh-shader": https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js , you can make a quad there, but all props like "tileTransform" you'll have to re-implement, because mesh doesnt have it.

Yes, its still a mess

[Blake Mann]

Thank you for taking the time to explain! Much appreciated.