PIXI Sprite displays in black

[grosjardin]

I am trying to set a Sprite as a background in my viewport. The grid.png is 23040 x 9984 pixels.

   this.app.loader
      .add("grid", require("./assets/grid.png"))
      .load((loader, resources) => {
        const grid = new PIXI.Sprite(resources.grid.texture);
        grid.anchor.set(0, 0);
        grid.scale.set(1);
        this.container.addChild(grid);
      });

The Sprite shows in my Container but only in black. If I try with a smaller png (25 x 25 pixels) it works.

I also made sure my viewport world width and height were big enough :

   this.viewport = new Viewport({
      screenWidth: 953,
      screenHeight: 409,
      worldWidth: 25000,
      worldHeight: 10000,
      interaction: this.app.renderer.plugins.interaction 
    });

Here is the sandbox code https://codesandbox.io/s/pixi-sprite-loading-cn7re?file=/src/App.vue:572-875

[ivan.popelyshev]

> The grid.png is 23040 x 9984 pixels.

WebGL limitation. Usual max size is 4096 pixels, depends on devices of course.

Also, its.. 23 x 10 x 4 ... 920 megabytes in videomemory. 

Are you sure that you need that big image in your app?

[grosjardin]

I need to find a way to make the viewport big enough. The image is just a 744KB PNG background. There are certainly games with that big of a viewport.

Probably tiling the same texture would make my life easier. So if I understand correctly. This isnt about the size of the viewport itself?

 

EDIT: There was indeed no reason for my img to be that big. I tiled a 3000px x 3000px Sprite instead. Probably will learn how to implement culling() to optimize this. 

Edited June 4, 2020 by grosjardin

[ivan.popelyshev]

tiling is either done with TilingSprite, or juggling several sprites around. 3x3x4 = 36MB videomemory.. ok  actually it can be 64 depends on how devices handles textures, it likes pow2.