Canvas scaling & picking

[binyan]

Hey guys,

To boost a performance on mobile devices with Full HD screen resolution I'm doing the following thing:

1. Set canvas size like half of full screen

2. Scale the canvas with CSS

As a result, the GPU has to do less work, and the scene runs smoothly. Here is the example css:

#canvas {    position: absolute;    width: 40%;    height: 40%;    -webkit-transform: scale3d(2.5, 2.5, 1.0);    transform: scale3d(2.5, 2.5, 1.0);    -webkit-transform-origin: 0 0 0;    transform-origin: 0 0 0;    top: 0;    margin-bottom: 70px;    touch-action: none;    -ms-touch-action: none;    z-index: 0;}

Well, this approach worked until I started dealing with picking collisions. The picking mechanism doesn't take in account the scaling. Therefore the pick result is completely wrong.

If you run this code without scaling it would work as expected (if you pick sphere, it would write in the console "sphere1"):

var createScene = function () {    // This creates a basic Babylon Scene object (non-mesh)    var scene = new BABYLON.Scene(engine);    // Our built-in 'sphere' shape. Params: name, subdivs, size, scene    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 3, scene, false);	sphere.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 2, -Math.PI/2, 0);    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 50, -10), scene);    var light = new BABYLON.DirectionalLight("dir1", new BABYLON.Vector3(0, -1, 0), scene); 	light.position = new BABYLON.Vector3(0, 30, 0);	sphere.position = new BABYLON.Vector3(0,1.5,0);    camera.target = sphere.position;	camera.setTarget(sphere.position);    camera.attachControl(canvas, true);	   scene.onPointerDown = function (evt, pickResult) {        console.log("Picked " + pickResult.pickedMesh.name +            " in x:" + pickResult.pickedPoint.x +            " y:" + pickResult.pickedPoint.y +            " z:" + pickResult.pickedPoint.z);    }    return scene;};

But if you run it with the above css, it wouldn't work, i.e. picking sphere would give you a null result.

 

Anyone has any idea how to deal with this?

[GameMonetize]

Hello,

 

You can try to set engine.setHardwareScaling(2):

https://github.com/BabylonJS/Babylon.js/blob/master/Babylon/babylon.engine.ts#L719

[binyan]

You mean instead of scaling with CSS? 

[dbawel]

I have been working on multiple canvas' for a pick and draw function.  My last android Galaxy tab 4 could not keep up with the refresh on the dynamic texture to make the scene usable.  So I enabled developer options and was able to increase the speed a bit.  Hardware scaling won't really allow you to save resources in your scene, as this is not directly related to scene elements and a 0.5 scaling of elements will cause practically all events passed through your canvas to be incorrect in your script.  My solution was to buy a new tablet, as most all tablets sold today are really responsive.  I went a little farther and bought the Sony Experia V2 (expensive), but it has replaced my laptop and is just as fast.  But a $300 tablet today will not have the dealys of a tablet a year ago.

[binyan]

Interesting thing... If I use a pure 100% x 100% canvas on my LG G2, I get like 7-8 fps. But if along with 100% x 100% canvas I use engine.setHardwareScaling(1), I get a significant boost up to 34-35 fps.

Anyone has an idea why? 

[dbawel]

The value is a scaling number for pixels displayed on the screen.  So a value of 2 renders 2x the pixels, and a value of 1 is native GPU resolution.  This might be different from the screen resolution - just so you know.  If I want to speed up my device, I use a value of 0.5.

[binyan]

How do I know my phone GPU resolution?

[dbawel]

Simply google the make and model number.  But this is universal setting, so the result will improve performance to some degree the lower the scaling value.

[binyan]

Not sure I understood you well... You say the lower the scaling value the better performance. I'm quite sure of opposite... The higher scaling value the better performance. Say the scaling value is 5, so the image looks like crap, but the performance is awesome. Checked it by myself.

[dbawel]

Hi, I'm not quite sure what you might be seeing, as the lower the value will certainly speed up your device.  I found a few Youtube videos for you to see to confirm.  Here's one of them (the shortest one):

 

[binyan]

Well, thanks for putting an effort 

I'm not sure if it's the same scaling as in BABYLON, but if I set a hardware scaling (through BABYLON) to 0.5 it slows my scene down and if I set it to 2 it speeds the scene up.

It actually does make sense... When you set hardware scaling to 2 you reduce the internal canvas buffer size (and due to this the picture quality becomes worse). So high value of scaling should speed up the rendering.

Am I missing something?

[dbawel]

I thought you were speaking of scaling in the android GPU rendering to speed up your android device.  I now understand you are speaking of the scaling the rendering engine in BJS - I should have paid more attention.  It is a matter of display quality in BJS, but I would certainly also take a look at turning on your developer options on any older model android device.  You can get a 30 -40% boost this way without compromisig your scene.  Just be very careful in changing the developer options, as if you're not familiar with these, you can really cause your system to have serious issues.  If this occurs, it's best to go back to factory reset.