Repeated Texture

[Bastl34]

Hi,

I want to achieve a repeated texture effect something like this:

In plain OpenGL you can set the texture wrap to GL_REPEAT and multiply the UV's by a factor and your are done.

 

In Pixi i've tried PIXI.extras.TilingSprite (with hundreds of objects) but this seems to be very slow on my MacBook.

 

So i thought it would be possible by simply changing the UVs and set the texture wrap mode to repeat but this does not work:

let resources = PIXI.loader.resources;

let tex = resources[item.texture].texture;
tex.wrapMode = PIXI.WRAP_MODES.REPEAT;

//texture size is 128x128 
let texRectangle = new Rectangle(0, 0, 256, 256);
tex.frame = texRectangle;

let pixiItem = new Sprite(tex);

//using this instead I have a FPS drop from 60fps to 5fps
let pixiItem = new PIXI.extras.TilingSprite(tex);

With a little research I found this:

https://github.com/pixijs/pixi.js/commit/7db340ce8e62de3a14bc796fe34fe344de27a701#diff-450b030630803a4d2e7ad3ba09ff17f6

It seems that texture coordinates are now based on UINT16. So a float based scale would not be possible

 

Any hints on this? 

Thanks!

[xerver]

It is a float, we just pack it into 16-bits. All values in GLES 2.0 (without extensions) are floats.

Do you have a running example where a single TilingSprite runs at 5FPS? I've never seen anything like that. Also, I wouldn't make the texture frame size bigger than the actual size of the image; you likely won't get results you want. Instead just use the width/height parameters to the TilingSprite constructor.

[Bastl34]

A full example would be to much code.
But every item created in the scene is somewhere based on this snipped. (exept of the hardcoded frame size)

The texture size varies. But there are a lot texture which are not power of two. Is this may the problem? WebGL does not seem to support "repeat" on such textures.

Its just packed to float? ok. I did not notice that. But its somehow not possible to have a frame bigger than the texture wich is size passed to the sprite.