Large texture data on mobile with zoom pan

[jasonsturges]

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 "webgl: zoomin and zoomout / retina webgl: zoomin 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 February 6, 2020 by jasonsturges

[Exca]

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.