Aw, snap!

[ruttydm]

I still didn't make any progress with pixijs. Every time after a couple seconds i get the Aw, snap! error in chrome. I think it's caused by PIXI.Graphics. (in the begin function)

I solved it but i don't now it's the correct way:

MainLoop.setMaxAllowedFPS(60);
//Create the renderer
var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight);
//Add the canvas to the HTML document
document.body.appendChild(renderer.view);
//Create a container object called the `stage`
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
window.onresize = function(event) {
    renderer.resize(window.innerWidth, window.innerHeight);
};
var opts = {
  "objects" : 10000
}
var fps;
function seed(){
  //the most important line in the whole game
  cells = [];
  //let's generate some random cells
  for(i=0;i<=opts.objects;i++){
    cells[i] = {
      "x": chance.integer({min: 0, max: renderer.width}),
      "y": chance.integer({min: 0, max: renderer.height}),
      "vecx": chance.integer({min: -3, max: 3}),
      "vecy": chance.integer({min: -3, max: 3})
    }
  }
}

function begin(){
  // Remove all objects we rendered last time so that we can add a new set.
  graphics = new PIXI.Graphics();// IF I REMOVE THIS LINE, I GET THE AW, SNAP ERROR!
  stage.removeChildren();
}

function update(delta){
  //update cells
  for(i=0;i<cells.length;i++){
    cells[i].x += cells[i].vecx;
    cells[i].y += cells[i].vecy;
  }
  //fps
  fps = Math.round(MainLoop.getFPS()); //usually 6 fps only
}

function draw(){
  //add the cells as children
  graphics.beginFill(0xFFFF0B, 1);
  for(i=0;i<cells.length;i++){
    graphics.drawCircle(cells[i].x,cells[i].y,1);
  }
  graphics.endFill();
  //Tell the `renderer` to `render` the `stage`
  stage.addChild(graphics);
  text = new PIXI.Text('FPS: ' + fps,{fontFamily : 'Arial', fontSize: 12, fill : 0xff1010, align : 'center'});
  stage.addChild(text);
  renderer.render(stage);
  //drawing fps
}

//calling seed function
seed();
//setting up loop
MainLoop.setBegin(begin).setUpdate(update).setDraw(draw).start();

Im using mainloop.js and chance.js as libraries.

And why is my fps so slow?

[xerver]

From mainloop.js documentation:

• MainLoop.setBegin(): the begin function runs at the beginning of each frame and is typically used to process input.

Every single frame you are removing all the children and creating a new Graphics object. Also in your draw loop you are creating a new text object every frame. The "Aw, snap" you are getting is likely an OOM error because you are drawing a new object every frame on your Graphics instance, but not clearing it inbetween. So in a few seconds you have thousands of shapes in the graphics object. Creating a new one each frame got you to not hit that memory limit; but creating objects (allocating) is expensive and doing it every frame is going to kill performance.

Try this instead:

MainLoop.setMaxAllowedFPS(60);

// Create the renderer
var renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight);

// Add the canvas to the HTML document
document.body.appendChild(renderer.view);

// Create a container object called the `stage`
var stage = new PIXI.Container();
var graphics = new PIXI.Graphics();
var text = new PIXI.Text('', { fontFamily: 'Arial', fontSize: 12, fill: 0xff1010, align: 'center' });
stage.addChild(graphics);
stage.addChild(text);
window.onresize = function(event) {
  renderer.resize(window.innerWidth, window.innerHeight);
};
var opts = {
  "objects" : 10000
}
var fps;
function seed(){
  //the most important line in the whole game
  cells = [];
  //let's generate some random cells
  for(i=0;i<=opts.objects;i++){
    cells[i] = {
      "x": chance.integer({min: 0, max: renderer.width}),
      "y": chance.integer({min: 0, max: renderer.height}),
      "vecx": chance.integer({min: -3, max: 3}),
      "vecy": chance.integer({min: -3, max: 3})
    }
  }
}

function update(delta){
  //update cells
  for(i=0;i<cells.length;i++){
    cells[i].x += cells[i].vecx;
    cells[i].y += cells[i].vecy;
  }
  //fps
  fps = Math.round(MainLoop.getFPS()); //usually 6 fps only
}

function draw(){
  //add the cells as children
  graphics.clear();
  graphics.beginFill(0xFFFF0B, 1);
  for(i=0;i<cells.length;i++){
    graphics.drawCircle(cells[i].x,cells[i].y,1);
  }
  graphics.endFill();

  //Tell the `renderer` to `render` the `stage`
  text.text = 'FPS: ' + fps;
  renderer.render(stage);
}

//calling seed function
seed();
//setting up loop
MainLoop.setUpdate(update).setDraw(draw).start();

 

[ruttydm]

Thanks for the clean explanation! But even when i use your code i got only 10 fps at 10000 objects and 35 at 100 objects. 

[xerver]

Yeah, clearing and redrawing 10k circles every frame is going to be expensive. May be better to draw 1 circle, use it as a texture for 10k sprites and put those sprites in a ParticleContainer. Stage -> ParticleContainer -> 10k sprites.

Then you can just move the sprites around and it should render really quickly.

Remember you can always use the Chrome profiling tools to know for sure what is taking the most time!