[SOLVED] - BJS Mobile Web Browser Performance

[MackeyK24]

I know this will pretty vague but "What the Deal With Mobile And BabylonJS".

1... Is mobile in web browser 'performant' enough now to get good play fps

2... Has anyone use the newer IOS WKWebView to package a BJS game and get good fps

When i first started playing with BabylonJS a few months ago, using just raw javascript (before i made the toolkit)... I put a few basic boxes and cube and simple rotation with some 1 or two lights... I was getting horrible frame rate (15-18 fps) with just a few static items when i ran on I'm old iPad 2 Air. I searched around the internet and found things like CocoonJS that was supposed to provide and IOS/Android 'native' WebGL emulation layer (or something like that). There file thing was that the state of webgl on IOS and Android devices very poor and required some kinda of native port. So i just forgot about mobile platform and concentrated on the toolkit.

But today after talking to @MrVR who is making mobile type VR projects (and gets fair frame rate some of his scenes ... around 30+ fps I think)

i decided to re-visit that how mobile thing and just for shits and giggles pointed my IPAD 2 AIR and iPhone 7 at: Test Shooter Scene just to see what frame rate i would get on my test space shooter scene...

Keep in mind i am doing all kind of COMPLEX model prefab instantiation for the waves of asteroids... got particles system, physics collisions and movement, detail meshes, collision meshes, tracking dynamic mesh intersections, playing background audio, shot audio, explosion audio in particle system explosion controller start function... All kinda stuff...

PLEASE CHECK OUT http://mackey.cloud/games/space/ on your mobile device and tell me what kind of frame rate you get (I having a problem with hand.js on that version so you can't move the ship... but just let it sit there and see the ship and its particle system before it get hit... then just let the waves of asteroids come down the screen and monitor frame rate).

Because i am getting a VERY GOOD fps in just the mobile browser (have not checked out in WKWebView yet)... I mean like 56-60 fps (once initial FOS drown when starting scene...down to about 45ps at FIRST FRAME scene show) with all that stuff mentioned above going... How can that be... A few months ago i could get a simple static game to yield good FPS... But now with my toolkit produced game (which ALOT more stuff and apis packed in there) is getting so good fps... or am i tripping

Has there been some kind of update (either with IOS WEBGL support or the new BabylonJS 2.6 updates like webgl 2.0 and vertex array object) that explains this...

or is my one scene just a fluke and every body get much lower fps...

PLEASE... Help a brotha out yo and check out the link on your mobile 

 

[JohnK]

On an old Samsung Galaxy GT-I9195 running Android 4.4.2 getting 16 - 18 fps.

[davrous]

Babylon.js has always been optimized with mobile in mind. We've done a lot of performance optimizations for iOS/Windows Mobile & Android prior to any integration of webgl 2.0. For instance, when we shipped the Sponza demo available on our site: http://www.babylonjs.com/demos/sponza for 2.3, it was already running @ 60fps on iPhone 6s for instance and 25/30 fps on most mobile.

The GPU on high end mobiles are as powerful, if not more powerful, than most laptops. For instance, my iPhone 6s often offers better pure GPU performance than my Lenovo laptop. Still, the CPUs are far less powerful than a desktop PC, the mobile has less memory + the ARM architecture is limiting the performance compared to PC (shared memory, bus and so on).

So on mobile, you need to pay a lot of attention to draw calls. Use our debug layer to check that. You need to use instancing / mesh grouping as much as possible and avoid having too much independent objects. 

As WebGL is relying on JavaScript, we're very mono-threaded by nature compared to native engine. So again, draw calls will often be our bottleneck. 

My tutorial: https://www.davrous.com/2014/02/19/coding4fun-tutorial-creating-a-3d-webgl-procedural-qrcode-maze-with-babylon-js/ is still valid on those points and completely target mobile performance. 

I've done a playground to illustrate that:

- without merging the meshes: http://www.babylonjs-playground.com/#27AW9C : 30 fps on my iPhone 6s Plus, 11 fps on my Lenovo T450s (Intel GPU) -> 760+ draw calls
- with optimizations: http://www.babylonjs-playground.com/#27AW9C#1 : 60 fps on my iPhone 6s Plus, 60 fps on my Lenovo T450 -> 4 draw calls!

In conclusion, we're providing you a complete optimized engine with Babylon.js, trying to optimize the rendering for you as much as we can. But still, you need to have a good understanding of the platform you're targeting and the consequences of the way you're coding against Babylon.js. That's why, the debug layer is a very helpful friend to help you understanding that. 

To answer your initial question, your little fun game is running at 60 fps on my iPhone 6s.

[JCPalmer]

On an A8, iPad Air 2 (Model MHOW2LL/A), I get 60 fps for your scene.

[Pryme8]

3 hours ago, davrous said:

In conclusion, we're providing you a complete optimized engine with Babylon.js, trying to optimize the rendering for you as much as we can. But still, you need to have a good understanding of the platform you're targeting and the consequences of the way you're coding against Babylon.js. That's why, the debug layer is a very helpful friend to help you understanding that. 

To answer your initial question, your little fun game is running at 60 fps on my iPhone 6s.

I second this statement.

[Sebavan]

We change a month ago the default ddpi settings which makes the rendering size way way way smaller on those kind of phones. We did it for exactly this reason and can still be force as before in the options.

So yes, no magic ;-)

[JCPalmer]

I see CocoonJS can use WKWebView in one of the variants they have, Webview+.  The version of cordovia on iOS they are currently using is 4.3.  This adds iOS 10 support.

[Raggar]

9-18 FPS using Chrome on my Samsung (Core Prime) running Android 5.1.

[MackeyK24]

HOLY SHIT BATMAN... On all my IOS (iPad air 2 and iPhone 6s and iPhone 7) devices I am rocking excellent FPS. Man this opens up a whole new world for mobile that i completely ignored before because i thought was not supported in IOS/ANDROID browsers (with decent FPS anyways).

I been playing with mobile optimizations i put in the toolkit ... And I LOVE IT...

Now i wanna see what i can make the toolkit do for VR Mobile (VR 1 plus and samsung Gear VR)... Can someone PLEASE point me to some GOOD VR samples... Not just 'use this type of camera' solutions, but some actual useful info i would need to setup a VR scene... I assume i need some special camera for that... Can that camera be serialized as  Babylon.Camera.customType = "BABYLON.SomeCameraType"

This is the KOOLEST SHIT EVER .. I wanna put VR support in my toolkit as well... So the more code examples the better support i can put into the toolkit

 

[MrVR]

2 hours ago, MackeyK24 said:

HOLY SHIT BATMAN... On all my IOS (iPad air 2 and iPhone 6s and iPhone 7) devices I am rocking excellent FPS. Man this opens up a whole new world for mobile that i completely ignored before because i thought was not supported in IOS/ANDROID browsers (with decent FPS anyways).

I been playing with mobile optimizations i put in the toolkit ... And I LOVE IT...

Now i wanna see what i can make the toolkit do for VR Mobile (VR 1 plus and samsung Gear VR)... Can someone PLEASE point me to some GOOD VR samples... Not just 'use this type of camera' solutions, but some actual useful info i would need to setup a VR scene... I assume i need some special camera for that... Can that camera be serialized as  Babylon.Camera.customType = "BABYLON.SomeCameraType"

This is the KOOLEST SHIT EVER .. I wanna put VR support in my toolkit as well... So the more code examples the better support i can put into the toolkit

 

Hey @MackeyK24 the game is coming up nice je je I get 60 FPS as well on the game,

On my scene I  put more particles emission plus a volumetric light scattering and I still get 60 FPS but I thinkthis depends on the computer I'm not sure

here is my working in progress scene http://brandsocialguru.com/sky/ here is the same scene with out the particles and light http://brandsocialguru.com/sky2/ but on my Samsung galaxy S7 take forever to load  

 

VR CAMERA SET UP

To test the VR camera you can use this code snipped inside your SceneBuilder component and to test on your phone you just connect to the app using the computer IP address:PORT number you must be in the same network on your phone as the computer in my case

my localhost:8888/ in my phone is 192.168.1.23:8888 and then you can move the vr camera on your phone

/* Babylon Scene Controller Template */
/* <reference path="{*path*}/Assets/Babylon/Library/babylon.d.ts" /> */

module PROJECT {
    export class SceneController extends BABYLON.SceneController {

        public ready() :void {
            // Scene execute when ready
             this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas());
        }

        public start() :void {
            // Start component function
             var myCamera :BABYLON.FreeCamera =   new BABYLON.VRDeviceOrientationFreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 0), this.scene);
                    
                            myCamera.speed = 3;
                            // myCamera.wheelPrecision = 250;
                            myCamera.fov = .8;
                            // myCamera.position = this.scene.activeCamera.position;
                            myCamera.position.z = this.scene.activeCamera.position.z - 0;
                            this.scene.activeCamera = myCamera;
                            this.scene.activeCamera.attachControl(this.engine.getRenderingCanvas());
        }

        public update() :void {
            // Update render loop function
        }

      
    }
}

 

[MrVR]

8 hours ago, davrous said:

Babylon.js has always been optimized with mobile in mind. We've done a lot of performance optimizations for iOS/Windows Mobile & Android prior to any integration of webgl 2.0. For instance, when we shipped the Sponza demo available on our site: http://www.babylonjs.com/demos/sponza for 2.3, it was already running @ 60fps on iPhone 6s for instance and 25/30 fps on most mobile.

The GPU on high end mobiles are as powerful, if not more powerful, than most laptops. For instance, my iPhone 6s often offers better pure GPU performance than my Lenovo laptop. Still, the CPUs are far less powerful than a desktop PC, the mobile has less memory + the ARM architecture is limiting the performance compared to PC (shared memory, bus and so on).

So on mobile, you need to pay a lot of attention to draw calls. Use our debug layer to check that. You need to use instancing / mesh grouping as much as possible and avoid having too much independent objects. 

As WebGL is relying on JavaScript, we're very mono-threaded by nature compared to native engine. So again, draw calls will often be our bottleneck. 

My tutorial: https://www.davrous.com/2014/02/19/coding4fun-tutorial-creating-a-3d-webgl-procedural-qrcode-maze-with-babylon-js/ is still valid on those points and completely target mobile performance. 

I've done a playground to illustrate that:

- without merging the meshes: http://www.babylonjs-playground.com/#27AW9C : 30 fps on my iPhone 6s Plus, 11 fps on my Lenovo T450s (Intel GPU) -> 760+ draw calls
- with optimizations: http://www.babylonjs-playground.com/#27AW9C#1 : 60 fps on my iPhone 6s Plus, 60 fps on my Lenovo T450 -> 4 draw calls!

In conclusion, we're providing you a complete optimized engine with Babylon.js, trying to optimize the rendering for you as much as we can. But still, you need to have a good understanding of the platform you're targeting and the consequences of the way you're coding against Babylon.js. That's why, the debug layer is a very helpful friend to help you understanding that. 

To answer your initial question, your little fun game is running at 60 fps on my iPhone 6s.

@davrous I was reading the tutorial for the optimization but I can not find the  How to merge meshes. function,  the link takes me to the Babylon GitHub not o the function, can you please provide the link thanks.

 

---UPDATE

I dowload the project and I found the function please correct me if I'm wrong but I think is this one 

 

var mergeMeshes = function (meshName, arrayObj, scene) {
    var arrayPos = [];
    var arrayNormal = [];
    var arrayUv = [];
    var arrayUv2 = [];
    var arrayColor = [];
    var arrayMatricesIndices = [];
    var arrayMatricesWeights = [];
    var arrayIndice = [];
    var savedPosition = [];
    var savedNormal = [];
    var newMesh = new BABYLON.Mesh(meshName, scene);
    var UVKind = true;
    var UV2Kind = true;
    var ColorKind = true;
    var MatricesIndicesKind = true;
    var MatricesWeightsKind = true;
    var i;
    var it;
    var ite;
    var iter;

    for (i = 0; i != arrayObj.length ; i++) {
        if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.UVKind]))
            UVKind = false;
        if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.UV2Kind]))
            UV2Kind = false;
        if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.ColorKind]))
            ColorKind = false;
        if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.MatricesIndicesKind]))
            MatricesIndicesKind = false;
        if (!arrayObj[i].isVerticesDataPresent([BABYLON.VertexBuffer.MatricesWeightsKind]))
            MatricesWeightsKind = false;
    }

    for (i = 0; i != arrayObj.length ; i++) {
        var ite = 0;
        var iter = 0;
        arrayPos[i] = arrayObj[i].getVerticesData(BABYLON.VertexBuffer.PositionKind);
        arrayNormal[i] = arrayObj[i].getVerticesData(BABYLON.VertexBuffer.NormalKind);
        if (UVKind)
            arrayUv = arrayUv.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.UVKind));
        if (UV2Kind)
            arrayUv2 = arrayUv2.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.UV2Kind));
        if (ColorKind)
            arrayColor = arrayColor.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.ColorKind));
        if (MatricesIndicesKind)
            arrayMatricesIndices = arrayMatricesIndices.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind));
        if (MatricesWeightsKind)
            arrayMatricesWeights = arrayMatricesWeights.concat(arrayObj[i].getVerticesData(BABYLON.VertexBuffer.MatricesWeightsKind));

        var maxValue = savedPosition.length / 3;

        arrayObj[i].computeWorldMatrix(true);
        var worldMatrix = arrayObj[i].getWorldMatrix();

        while (ite < arrayPos[i].length) {
            var vertex = new BABYLON.Vector3.TransformCoordinates(new BABYLON.Vector3(arrayPos[i][ite], arrayPos[i][ite + 1], arrayPos[i][ite + 2]), worldMatrix);
            savedPosition.push(vertex.x);
            savedPosition.push(vertex.y);
            savedPosition.push(vertex.z);
            ite = ite + 3;
        }
        while (iter < arrayNormal[i].length) {
            var vertex = new BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(arrayNormal[i][iter], arrayNormal[i][iter + 1], arrayNormal[i][iter + 2]), worldMatrix);
            savedNormal.push(vertex.x);
            savedNormal.push(vertex.y);
            savedNormal.push(vertex.z);
            iter = iter + 3;
        }
        if (i > 0) {
            var tmp = arrayObj[i].getIndices();
            for (it = 0 ; it != tmp.length; it++) {
                tmp[it] = tmp[it] + maxValue;
            }
            arrayIndice = arrayIndice.concat(tmp);
        }
        else {
            arrayIndice = arrayObj[i].getIndices();
        }

        arrayObj[i].dispose(false);
    }

    newMesh.setVerticesData(savedPosition, BABYLON.VertexBuffer.PositionKind, false);
    newMesh.setVerticesData(savedNormal, BABYLON.VertexBuffer.NormalKind, false);
    if (arrayUv.length > 0)
        newMesh.setVerticesData(arrayUv, BABYLON.VertexBuffer.UVKind, false);
    if (arrayUv2.length > 0)
        newMesh.setVerticesData(arrayUv, BABYLON.VertexBuffer.UV2Kind, false);
    if (arrayColor.length > 0)
        newMesh.setVerticesData(arrayUv, BABYLON.VertexBuffer.ColorKind, false);
    if (arrayMatricesIndices.length > 0)
        newMesh.setVerticesData(arrayUv, BABYLON.VertexBuffer.MatricesIndicesKind, false);
    if (arrayMatricesWeights.length > 0)
        newMesh.setVerticesData(arrayUv, BABYLON.VertexBuffer.MatricesWeightsKind, false);

    newMesh.setIndices(arrayIndice);
    return newMesh;
};

 

[MackeyK24]

This is amazing... I made several MOBILE enhancements to the toolkit try scene again (http://mackey.cloud/games/space/) screen sizing should be better across devices... Still can't move ship ... @davrous BTW... How is the Virtual Joystick Fixes coming along... I am levin this mobile platform... but i can't move my ship... i need a way to get horizontal and vertical movement (Vritual Left Stick) and a Right Button For Firing... Just checking on Pogress

 

[Raggar]

47 - 60 FPS.

Mostly around the 55-50, depending on the number of asteroids in the view.

[MrVR]

Nice I get 60 FPS and some time is like looping a 47 FPS  freeze for a millisecond,  I try with my Xbox one control and its not working but if you use the camera that is already attached I think it should move with your fingers and the game pad I'm not sure

[bruno_]

50 fps on ASUS ZenFone 3

[davrous]

@MrVR yes, this is the right function, but it's now integrated into the framework. Check my second playground link to see how to use the framework natively.

@MackeyK24 I've started fixing the Virtual Joystick. Can you check on BabylonJS.com that it works well for you on your mobile? Using for instance of the Retail demo and switching to the VJ camera in the options panel

[MrVR]

Thanks Senor @davrous that function will come in handy for my procedural city scene.

In the mean time I made this tutorial in how to import a character into unity 5 , I hope one day we can export animated characters from unity to Babylon  @MackeyK24 

[MackeyK24]

5 hours ago, davrous said:

@MackeyK24 I've started fixing the Virtual Joystick. Can you check on BabylonJS.com that it works well for you on your mobile? Using for instance of the Retail demo and switching to the VJ camera in the options panel

Thanks @davrous the virtual joystick is awesome... great work as usual

I was wondering if there is a way to make the joystick rings/circle a little smaller on phones vs tablets (some API to set joystick circle size) and is there a way to disable the actual movement ... JUST CIRCLES to use as a button only type deal ?

 

[MackeyK24]

Things just keep getting better and better. The U3D - BabylonJS Toolkit now supports mobile games out-the-box. Take a look at this sample space shooter scene. 

Note:

1... Is NOT optimized for mobile yet (Each object contains multiple meshes, including shots and asteroids)

2... Includes Virtual Joystick (Built in the scene manager.getUserInput) User Input, Separate From Camera System

3... Sports a new Z-Index Layer system that allows for:

     A... Root container: 0

     B... Game Canvas: 1

     C... Virtual Joystick Canvas: 5

     D... All other GUI Elements: 10

     Note: Can use the Pause and Control Panels GUI elements along with VJ Canvas

4... Various scene manager apis to help mobile development and runtime usage.

Really the DESKTOP version with Virtual Joysticks (I will work on Mesh Merging Optimization Soon)

But anyways... The Full desktop version running on my iPhone 7 with Virtual Joystick usage for Movement and Shot firing... I AM STILL ROCKING 60 FPS

Please try Test Shooter Scene again and report your FPS (We now know you need HIGHER class mobiles like iPhone 6 and higher or iPad 2 air or higher). I don't have and android to test on so i don't know what the minimum class of android phones will get good FPS... So please try out

BTW... I am luvin this shit

Hey @davrous can you pleas check again with your iPhone 6 not that we got game movement and shot firing... Please.

 

@MrVR Ill text you the link... BTW ... Text me and let me know how that worked for your wife

 

[MrVR]

I get full 60 FPS but the controls are too hard to use is not responsive in my Samsung galaxy S7

[hunts]

i saw this maze effect on PG and it's great, but how can i change the number of maze, it only limits to 23 

http://www.babylonjs-playground.com/#27AW9C%231