Jump to content

Large texture data on mobile with zoom pan


Recommended Posts

Looking for some feedback on best practices for handling large texture data.

On desktop, it seems I can easily load large textures exceeding 8k on a side; however, mobile fails to render past 4096 pixels on the longest side.

Project I'm working on loads schematic views, of sorts - there's a background image on which components are placed.  Zoom / pan is implemented from Pixi-Viewport project.


These are available as vector, but prototyping as SVG seems to incur a significant performance loss.

Not sure if there's a mipmapping approach, or some kind of level of detail such as TileMap.

Roughly following the TileMap project... background image is sliced and loaded via multiple frames.

Presume source code for the "webglzoomin and zoomout / retina webglzoomin and zoomout" examples are just https://github.com/pixijs/pixi-tilemap/blob/master/demo/main.js

The canvas version doesn't appear to be working:

main.js:104 Uncaught TypeError: Cannot read property 'flush' of undefined
    at update (main.js:104)

Edited by jasonsturges
Link to comment
Share on other sites

Splitting the image into smaller textures and displaying those side by side would be one option. The problem you are experiencing is that the maximum dimension a gpu can address is reached. For modern pc gpus this is something in the range of 16kx16k, but many mobiles still have 4k and when going to older devices even 2k is a possible limit.

With splitting you have basically these methods (at least in my knowledge):

- Add client side logic that splits the image on cpu to smaller chunks.
- Store the images in split versions.
- Create a serverside solution that splits an image into pieces and load whatever resolution matches the gl.MAX_TEXTURE_SIZE.

You could also maybe try canvas rendering, but I'm not sure how that works with very large textures and it would be slower than webgl.

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...