Jump to content

Aw, snap!


ruttydm
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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();

 

Link to comment
Share on other sites

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!

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.

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

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...