Jump to content

Reduce redundant rendering and CPU/GPU usage


Recommended Posts



I would like to pose two questions on how to go about reducing CPU usage from redundant rendering and also on how to disable or bypass Phaser's audio subsystem which at the moment is also affecting CPU usage on my development laptop. My goal is to eventually make mobile apps where power consumption can be a major issue.


First a bit of background, maybe too much ;)


I was trying some of the demos for Phaser version 2.0.3 and found some abnormal CPU consumption. Specifically, I was using the "paint tiles" demo found at 



The relatively high CPU happened even when there was no action occurring, --no keyboard input and no mouse movements. After a few minutes,  the fan on my laptop would kick up and I could tell it was getting much hotter than in normal use.

A side note, I am running the equivalent of Ubuntu Mint 13.10 on a Sony Viao laptop with intel's i5 core and hybrid Nvidia graphics, but have enabled only the intel's graphics for now which do not consume as much power and can still perform some basic OpenGL without lag and without heating up too much. I believe the drivers are as good as they are going to get for now.


After some debugging  I found that the Phaser framework is calling PIXI's render function regardless if anything new needs to be rendered.  I added a conditional rendering based on a dirty flag that I manually set during the update function in the main javascript file.  

Here's the snippet of phaser's code modified:



18916         if (this.renderType != Phaser.HEADLESS)
18917         {
18918             if (this.renderDirty) {
18919             this.renderer.render(this.stage);
18920             this.plugins.render();
18921             this.state.render();
18922             this.plugins.postRender();
18923             this.renderDirty = false;
18924             }
18925         }
After the change, the CPU usage of the chromium browser dropped significantly from about 20% down to about 5%.   However, the cpu usage for pulseaudio remains at 10% even though there is no audio playing.
Now back to the two questions:
Is there a main render flag available such as what I described above to prevent render when not needed, or can my code be added?
Also how to disable and bypass Phaser's audio system? I mostly want to disable to continue development and also debugging the pulseaudio issue. However, I  would want to re-enable for the final mobile apps.
Kind regards
Link to comment
Share on other sites

  • 2 weeks later...

if this works .. maybe you should post it on github so rich is able to see it ....  


i'd also like to know if there is a possibility to calculate only visible objects..  for example.. if you have a world with 10 enemies..  every enemy is calculated in every step 60 times a second..  that means 600 collision calculations per second..  but maybe thats another topic  :)

Link to comment
Share on other sites

Using OpenSUSE 13.1 and i5 graphics. According to KDE Process Manager chrome uses 9% when running this example. PulseAudio uses hardly 1% while i have music playing in another tab. According to chrome profiling this example uses 6% of cpu to draw and it is the biggest of the total 13.5% of the used cpu. What am I doing wrong?  :mellow:


EDIT: if we set some 'dirty' flag, when something is updated. But what will happen if the canvas is temporally overlapped by something. I think the picture will be broken and the 'dirty' flag would not change, thus no repaint will occur,

Link to comment
Share on other sites

I'm also interested in a way to disable audio.

I'm working on a simple game without sounds; when I test it on the Chrome browser within my Nexus 4 phone, the phone general audio system stops working, even the volume controls become useless! In this situation the only way to have audio back is to reboot the phone.

It may be a bug with WebAudio in Chrome mobile, anyone here has the same issue?

Link to comment
Share on other sites


  • Recently Browsing   0 members

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