Lower FPS with webgl renderer?

[Meow]

I've been playing around and doing something really simple: blocks falling down to the ground.

I noticed that when I used the default renderer (the autoDetectRenderer) then I get a FPS that varies a lot between 45-55.

But if I use the CanvasRenderer I get a nice stable 60 FPS.

 

This is on Firefox on both Linux and Window.

 

This is my code:

        var blocks = new Array();        var Block = function(texture) {            PIXI.Sprite.call(this, texture);            this.speedy = 64;        }        Block.prototype = Object.create(PIXI.Sprite.prototype);        Block.prototype.constructor = Block;        var stage = new PIXI.Stage(0x000000);        var renderer = new PIXI.autoDetectRenderer(800, 600);        document.body.appendChild(renderer.view);        var loader = new PIXI.AssetLoader(["images.json"]);        loader.onComplete = onTilesLoaded;        loader.load();        var lasttick = 0;        var dt = 0;        var step = 1/60;        function onTilesLoaded() {            var t = PIXI.TextureCache[1];            for (i = 0; i <= 4; i++) {                var b = new Block(t);                b.position.x = Math.floor(Math.random() * 800);                blocks.push(;                stage.addChild(;            };        };        var meter = new FPSMeter();        function frame(timestamp) {            meter.tickStart();            requestAnimFrame(frame);            dt = dt + Math.min(1, (timestamp - lasttick) / 1000);            while (dt > step) {                dt = dt - step;                update(step);            }            lasttick = timestamp;            renderer.render(stage);            meter.tick();        };        function update(step) {            blocks.forEach(function(v, i, a) {                v.position.y += Math.floor(v.speedy * step);                if (v.position.y> 512) {                    v.position.y = 512;                };            });        };        requestAnimFrame(frame);

Anyone have a clue on what may cause this?

[Sebi]

var renderer = PIXI.autoDetectRenderer(800, 600);

Try detecting the renderer without the new keyword.

[Meow]

var renderer = PIXI.autoDetectRenderer(800, 600);

Try detecting the renderer without the new keyword.

 

 

This doesn't seem to fix it.

 

To make sure it's a problem with the webgl renderer I also tried using it explicitly, with the same issue (low fps, jittery animation. Like a very small freeze every 1 second)

[Sebi]

This doesn't seem to fix it.

 

To make sure it's a problem with the webgl renderer I also tried using it explicitly, with the same issue (low fps, jittery animation. Like a very small freeze every 1 second)

Ah okay.

Well, Firefox has never been a gaming browser and I struggling with webgl for a long time now.

Did you try reinstalling your graphics card drivers?

[Meow]

I haven't tried reinstalling my drivers, as they seem to work fine and games do work.

 

I'll just use the canvas renderer then. Maybe it was just an issue with my code and if that was the case I wanted to know that.

[Sebi]

But if you force the CanvasRenderer, then you lower the fps of everyone who doesn't have this issue in their Firefox Browser.

I do know of people who had the same issue and only in Firefox (other browsers were fine) and they were able to fix it by reinstalling their graphics card drivers.

Maybe you can measure the fps in the first few seconds, using the WebGL renderer.

If the fps are not satisfying, then force the Canvas renderer.

I would just reinstall the drivers for the sake of finding out if that is what is causing the issue. If not, then there might be other ways to solve that problem.

[spencerTL]

I've been experimenting with webGL this week due to the imminent arrival of its support on iOS8 and on that platform on iPad 2 I'm getting terrible results. Rather than the boost I was expecting to get, as I always use the auto option for the renderer I'm having to go back to everything and detect iOS to force canvas as it's unplayable if webGL is enabled. Unless it's something I'm doing wrong, which is quite possible, but I don't see what, others may need to follow suit come next week when iOS8 gets fully released. Having said that everybody else I find on google with first experiments on the beta of iOS 8 think webGL results are awesome on the platform.

I must admit my knowledge of PIXI is limited as I use Phaser. This was my thread on this on the Phaser forum, but I guess as most people doing html5 don't need an Apple Dev account it hasn't attracted much comment yet.

http://www.html5gamedevs.com/topic/9142-ios8-webgl-poor-performance/

[BitOfGold]

Interesting, I had a problem with WebGL last week on Windows, but only on Latest Firefox version 32.0.1. When I install Firefox 31 everything is nice stable 60FPS!
I stilldon't find any reports of this on Bugzilla yet ...
Coincidence? :-O
 

[Meow]

Trying with reinstalled drivers -seems- to have fixed it at first: I got 60fps (though not as stable as with the canvas renderer)

But after a while it stopped working well again.

 

When the framerate was ok I had just started firefox and didn't have any other tabs open. The slow downs happens with other tabs open in the background...

[hubert]

Well if you have some other tabs running a canvas animation or anything to do with graphics rendering it will slow down all of your scripts. All browsers like chrome, firefox etc. are a shared-environment.

 

Have you considered that there might be some kind of memory leak when you run a webGL context. (I know it sound improbable in such a simple script)

 

Have you checked your memory profile. Could you please show us the chrome profiler results?

 

Maybe your autodetectRenderer is using experimental-webGL??? This might cause some unexpected behavior? 

 

Give us a little bit more!

 

 

BTW.

 

What linux distro are you using and what windows version are you one?

 

http://www.sevenative.com

[Meow]

The only other tab was gmail and maybe youtube. With just gmail open it also gives trouble. No other tabs seems to work better

 

For memory leaks: I checked about:memory a few times while having it running but I didn't notice any real change there.

The javascript profiler shows that the frame method is most run, what I expected. Inside there the most run method was the render one from Pixi.js.

 

Hmm...for experimental webgl: I'm not sure how to check that? I did try replacing the autodecect by an explicit call to the webglrenderer, without any noticeable difference.

 

As for OS: Linux is arch linux with FF 32.0 and two extensions: https everywhere and adblock. The windows one was a friends and I have no clue what version of FF he has or what extensions.

[hubert]

Ha! is it possible that you did not enable the webGL in your firefox? I know that some time back then I had a similar issue while testing on my friends computer? Context was set to webGL and wanted to use hardwareAcceleration but the feature itself was blocked?

 

https://support.mozilla.org/en-US/questions/984663

 

This is how pixi detects webGL

return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) );

This might additionally return webGL even if your gpu is blacklisted

 

https://bugzilla.mozilla.org/show_bug.cgi?id=736232

 

So practically you would be running a webGL without the hardware acceleration wich would be simply pointless. Please try to make a similar test using chromium.

 

If the webGL context runs smoothly in Chromium (I assume it will) it will mean that this is the browsers fault. Firefox is not that awesome like it used to be!

 

Anyway. I'm waiting for your feedback!

 

http://www.sevenative.com