RenderTexture crash on Android

[stealman]

Hello guys, I am officialy stuck in desperation

I have upgraded from Pixi2 to Pixi4 (4-7-3) and RenderTexture causes crashes on Android Chrome (no problem on desktop).

I have 2D RPG game with tilebased background map, tiles are rendered to RenderTexture which is then added to the stage - this worked perfectly with Pixi2 (and Pixi3 too) but

stopped to work after upgrade to Pixi4.  It crashes WebGL after several seconds of walking around.

 

I have tried hour and hours of experiments to figure out what exactly is the cause, but no success. It worked with PIXI2 and PIXI3 which means that I dont have anyhing fundamentally wrong there.

 

Side notes:

1. Working on canvas renderer

2. Working when sprites are rendered directly and not into RenderTexture (but slow on mobiles)

3. Tried textures with power of 2 resolutions - didnt help

 

My approach is like this
 

//Create render texture and sprite that is containing it

var mapTexture = PIXI.RenderTexture.create(Data.gameWidth + 252, Data.gameHeight + 252, PIXI.SCALE_MODES.LINEAR, 1);

var bgSprite = new PIXI.Sprite(mapTexture);

// Place that sprite to the stage
window.stage.addChild(bgSprite);


....



// Whenever character moves, terrain is rerendered
function renderTerrain() {

  // Container that will be rendered to the texture
  var mapContainer = new PIXI.Container();

  // Array with sprites
  var sprites = [];

  // Loop that is taking tile data from array, making sprites based on them
  for (mapX = startMapX; mapX < startMapX + 32; mapX++) {
    picY = 0;
    for (mapY = startMapY; mapY < startMapY + ScreenMgr.viewHeight + 8; mapY++) {

      var tileId = window.worldmapProcessed[mapX][mapY];

      if (tileId == -1) {
        picY = picY + 42;
      } else {

        // Create sprite, position it and push to the array
        var field = new PIXI.Sprite(window.tiles[tileId]);
        field.x = picX;
        field.y = picY;
        sprites.push(field);
        picY = picY + 42;
      }
    }
    picX = picX + 42;
  }

  // Loop through array and add sprites to the mapCointainer
  for (var i = 0; i < sprites.length; i++) {
    mapContainer.addChild(sprites[i]);
  }

  // Render container to the texture
  window.renderer.render(mapContainer, mapTexture);

  // Empty container
  mapContainer.removeChildren();

}

 

I will be really glad for some help, this game is my life and I dont want to stay stuck on PIXI2 with it

[ivan.popelyshev]

What is the size of the map? do you empty container each time you re-calculate the sprites?

As a workaround, try that thing for WebGL: https://github.com/pixijs/pixi-tilemap , canvas fallback is slow. tutorial is here: https://github.com/Alan01252/pixi-tilemap-tutorial . However, it does not containt my advice for real applications: "maintain a window of 2x camera size and refill it when camera touches the edge"

[ivan.popelyshev]

I guess you are using Carmack optimization for tilemaps, same as RpgMaker MV.

[stealman]

Thanx for your reaction Ivan.

I dont use any particular optimizations so far - I rerender whole background each time I move to another tile (texture has size cca 1200 * 900).

The reason why I dont have any other optimizations is that I didnt need them so far - at PIXI2 I had fine 55 - 60 FPS on my old Samsung Galaxy S3, I am used

to optimize when I need and not too much in advance. I would guess that bad optimization should only affect FPS, not cause WebGL crash right ?

 In curent situation there is just simple reading from array and creating tile sprites at each character step, nothing more nothing less.

I may publish it if it might help ? It takes me just several minutes.

 

EDIT: As I stated - adding all these sprites directly to the stage works well (just slower than with RenderTexture offcouse) and dont cause crash.

[stealman]

Problem might be simulated on following URL, just login as GM1 (no password) and select "touchscreen" radiobutton.

You will see character on the island and try to walk around shore,  on my phone, it crashes after several steps (my friend is testing on better phone and doesnt have this problem so far, it might suggest that it has something to do with older devices)

http://darkenlight.net/darkenlight/

[ivan.popelyshev]

Its a shame that i dont own mobile devices

[ivan.popelyshev]

Your JS code looks very unoptimized, which is fine if it works for your case. I dont see any memory leaks. It shouldnt crash. You already enabled legacy renderer, i dont know what else to recommend.

[stealman]

I know that it is not optimized too much (I have better optimizations on animations and such but these are suspended now as I tried to isolate root cause of this particular problem).

We are trying it with my friedns and it crashes on some device while dont crash on some others (all are Android with Chrome browser).

It seems that it is definitely problem with older devices (although setting "legacy" attribute on PIXI.Application doesnt help).

Whats weird to me is, that it worked nicely with older PIXI versions, we have played it for months.

 

Dont you know about some utility to debug these webGL crashes ? I dont have any underlying info .. it just says that it crashed :-/

EDIT: According to memory leaks, I had them earlier and they behaved differently - it always slowed down after some while (as GC took all over the place) and then it ultimately crashed. This behavior is different, it doesnt slow down at all .. it just suddenly crash.