Jump to content

Repeated Texture


Recommended Posts


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;

//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:


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


Any hints on this? 


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...