Slow performance on mobile

[sergiy-oliynik]

Hi for all. 

I'm trying to create application for mobile devices. I have some troubles with tag <meta name='viewport'>:

1. I have 59-60 fps if i set attribute content like this: content='initial-scale=no,width=device-width,initial-scale=1';  but images looks blured.

2. Images looks great if i set attribute content like this: content='initial-scale=no,width=device-width,initial-scale=' + 1 / window.devicePixelRatio;  but i have 15 fps.

I set options.resolution = window.devicePixelRatio || 1 for both cases;

[ivan.popelyshev]

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">

Also make sure that you've enabled autoResize in renderer
 

renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, { resolution: window.devicePixelRatio, autoResize: true));

That thing changes canvas CSS, of course you can do it manually, just check that in CSS width and height are innerWidth and innerHeight respectively. 

Remember that "renderer.screen" and all pixi elements are in CSS pixels.  - use it.
"renderer.view" (Canvas) and "renderer.width" are real pixels - dont use it.

As a result, with pixelRatio=2, innerWidth=640, innerHeight=480, CSS pixels must be 640x480, while real 1280x960. Check everything one more time

[sergiy-oliynik]

10 minutes ago, ivan.popelyshev said:

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">

Also make sure that you've enabled autoResize in renderer
 

renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, { resolution: window.devicePixelRatio, autoResize: true));

That thing changes canvas CSS, of course you can do it manually, just check that in CSS width and height are innerWidth and innerHeight respectively. 

Remember that "renderer.screen" and all pixi elements are in CSS pixels.  - use it.
"renderer.view" (Canvas) and "renderer.width" are real pixels - dont use it.

As a result, with pixelRatio=2, innerWidth=640, innerHeight=480, CSS pixels must be 640x480, while real 1280x960. Check everything one more time

Thanks. With your example i have 45 fps. 

[ivan.popelyshev]

Good! That's something you can work with. Now with resolution=1 it will be even faster. You can add pixi button that changes resolution and reloads the page