Hardware scaling issues when using multi canvases rendering

Questions
1

Hi there,

I followed the following documentation to implement multi canvases rendering with one engine, one scene, and two cameras.

But I face a scaling problem when the engine is rendering the scene, I am unable to set a proper hardware scaling without strange behaviour.

For instance :

const canvas = document.createElement('canvas')
this.engine = new BABYLON.Engine(canvas, true, {}, false)
this.engine.inputElement = document.getElementById('renderCanvas1')

When creating scene :

this.engine.registerView(document.getElementById('renderCanvas1'), camera1)
this.engine.registerView(document.getElementById('renderCanvas2'), camera2)

And when I set the engine hardware scaling level to improve rendering quality :

this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio)

The engine render size increased by 3 (because the devicePixelRatio of my device is 3), and it is unable to display the scene properly in the targeted canvas.

Do you have any idea to improve the rendering quality in multi canvases scene ?

Thank’s a lot for your help

2

I think for this to work you will need to multiply the width/height of the view canvas by window.devicePixelRatio so that they end up being the same size than the rendering canvas (the one passed to the engine, which is rescaled when you call setHardwareScalingLevel).

3

Thank’s for your quick reply.

I tried your tip by increasing the size of each rendered canvas, but I observe the same issue as described.

Maybe, there is a better timing to apply

this.engine.setHardwareScalingLevel(1 / window.devicePixelRatio)

?

I observe the same issue in a blank playground.

Maybe I have to resize the parent node width and height of each rendering canvas to fit the screen size ?

4

Can you setup a repro in the Playground? It will be easier to help.

5

Yes of course,

I pick up an another playground from community to illustrate my problem. In the multicanvas function, if you update the scaling level of the engine, you’ll see the difference of display in the second canvas.

I notice that the problem occured only when using registered view on a specific canvas.

https://playground.babylonjs.com/#IDV1K2#31

6

This PR should correct the problem:

This PG should work once the PR is merged:

https://playground.babylonjs.com/#IDV1K2#51

1 Like