Webgl-only huge fps drop when mass creating sprites

[oxysoft]

I have encountered what seems to be a weird fluke that causes WebGL to be much slower than canvas.

 

I will let you see for yourself

 

webgl: http://pokesharp.com/maple3/webgl/

canvas: http://pokesharp.com/maple3/canvas/

 

With webgl, the fps seems to drop by about 10 while the game is spawning entities. If you release the mouse however, it goes back to 60.

Meanwhile, canvas sails at a smooth 60 constantly.

 

Here is the code. I am using P2 and the text stuff could probably be stripped as it is unlikely to be the source of the issue

var game = new Phaser.Game("100%", "100%", Phaser.WEBGL, "phaser", { preload: preload, create: create, update: update });var max = 1000;var titleText, fpsText, entitiesText;var entityGroup;var mouseDown = false; function preload() {        game.time.advancedTiming = true;        game.load.atlasXML('sprites', 'assets/sprites.png', 'assets/sprites.xml');        game.load.physics('body', 'assets/body.json');        game.load.audio('pain', 'assets/sounds.mp3');} function create() {        game.physics.startSystem(Phaser.Physics.P2JS);        game.physics.p2.restitution = 0.2;        game.physics.p2.gravity.y = 300;         entityGroup = game.add.group();         var style = { font: '30px Arial', fill: '#ff0044', border: '#ffffff', align: 'center'};        titleText = game.add.text(0, 0, 'Click to feel good', style)        titleText.anchor.set(0.5, 0.5);        style = { font: '16px Arial', fill: '#333333', align: 'center'};        fpsText = game.add.text(0, 0, 'fps: ', style);        entitiesText = game.add.text(0, 0, 'entities: ', style);         updateTexts();         game.input.onDown.add(function() { mouseDown = true; });        game.input.onUp.add(function() { mouseDown = false; });} function updateTexts() {        titleText.x = game.width / 2 - 5;        titleText.y = game.height / 2;        titleText.rotation = 0;        titleText.text = 'Click to acquire feels';         if (mouseDown) {                titleText.x += Math.floor(Math.random() * 100) - 50;                titleText.y += Math.floor(Math.random() * 100) - 50;                titleText.rotation = (Math.floor(Math.random() * 50) - 25) * Math.PI/180;                titleText.text = 'IT FEELS PRETTY GOOD';        }         fpsText.text = 'fps: ';        fpsText.x = 5;        fpsText.y = 5;        fpsText.text += game.time.fps;         entitiesText.text = 'entities: ';        entitiesText.x = 5;        entitiesText.y = fpsText.y + fpsText.height;        entitiesText.text += entityGroup.length;} var tick = 0; function update() {        tick++;               updateTexts();         if (tick % 5 == 0 && mouseDown) {                var j = game.rnd.integerInRange(0, max - 1);                var x = game.width / 2;                var sprite = entityGroup.create(x, 100, 'sprites', '' + j + '.png');                game.physics.p2.enable(sprite, false);                 sprite.body.damping = 0.5;                var lspeed = 800;                var hspeed = 700;                sprite.body.velocity.x = Math.random() < 0.5 ? game.rnd.integerInRange(-lspeed, -hspeed) : game.rnd.integerInRange(lspeed, hspeed);                sprite.body.velocity.y = -300;                sprite.body.allowSleep = true;        }         if (mouseDown) {                var v = Math.floor(Math.random() * 4).toString(16);                game.stage.backgroundColor = '#' + v + v + v;        } else {                game.stage.backgroundColor = 0;        }}

I'd be very interested in knowing why this happens and how I can avoid it

[ericjbasti]

Have you tried a version without the text updates? Perhaps use MrDoobs Stats plugin (https://github.com/mrdoob/stats.js/) to get an idea of FPS. Looking at what you have I think the problem may come down to the text rendering. Phaser has to do a lot of extra work to compensate for WebGL and text rendering. 

[oxysoft]

Have you tried a version without the text updates? Perhaps use MrDoobs Stats plugin (https://github.com/mrdoob/stats.js/) to get an idea of FPS. Looking at what you have I think the problem may come down to the text rendering. Phaser has to do a lot of extra work to compensate for WebGL and text rendering. 

 

While this is a sound theory, it turns out that turning off the text doesn't fix the issue

 

Have a look at the updated webgl version: http://pokesharp.com/maple3/webgl/

 

It still falls down to ~48 fps

The fps text still updates but was optimized to be once per second only. (which shouldn't cause any problem)

 

I tried commenting out all of the physics stuff, leaving only

var sprite = entityGroup.create(x, 100, 'sprites', '' + j + '.png');

and the problem persisted. As one would expect, commenting out that line indeed brings the fps back to 60 when holding the mouse button

[george]

1. Fix your stage size. Do not use 100% for width & height. Depending on the current browser size of the viewer you will get a pretty large stage size. And because every user willing to help you has another browser size you will get different feedback from different people. Fix it to a reasonable size.

 

2. Change your atlas size! It's currently 1965x1982px. Make the sides a power of two. That is for example 512, 1024 or 2048px. I would choose an atlas size of 1024x1024 or smaller in your case, to be compatible with most of the devices out there. Create two atlas files to hold all of your avatars. The texture doesn't have to be square. You can also use 2048x1024 or 1024x512.

 

3. I don't know what you're planning to do. But if you're going to display a lot of identical sprites from a texture atlas, try to use a SpriteBatch. You will gain a huge performance boost.

http://docs.phaser.io/Phaser.SpriteBatch.html

http://examples.phaser.io/_site/view_full.html?d=demoscene&f=starfield-batched.js&t=starfield-batched

 

Regards

George

[Vizcur]

Hi,

i have similar problems with Webgl, in a very simple state (just a simple sprite) the fps oscillate between 10 ~ 60 (detected with Phaser plugin debug), and with Canvas, everythings is OK (59 ~ 60 fps).

some suggestions?, maybe the computer needs some minimal requeriments (Hadware) for a good performance with webgl.

 

In advance thanks.