Mode fullscreen in babylon

[Dad72]

In babylonJS when I use the fullscreen mode, any html (div, button...) element that I put in the position absolute on the canvas, disappears.

 

However if I create my own function fullscreen, it works well.

 

Here is what I use: (compatible all browser)

 

function launchFullscreen(){	var element = document.documentElement;        if(element.requestFullscreen) {		element.requestFullscreen();	}	else if(element.mozRequestFullScreen) {		element.mozRequestFullScreen();	}	else if(element.webkitRequestFullscreen) {		element.webkitRequestFullscreen();	}	else if(element.msRequestFullscreen) {		element.msRequestFullscreen();	}	}	function quitFullscreen(){	var element = document.documentElement;        if (element.exitFullscreen) {		element.exitFullscreen();	}	else if (element.mozCancelFullScreen) {		element.mozCancelFullScreen();	}	else if (element.webkitCancelFullScreen) {		element.webkitCancelFullScreen();	}	else if (element.msExitFullscreen) {		element.msExitFullscreen();	}	}		

Why with the Babylon fullscreen mode, my html elements disappear?

Thanks

[davrous]

Hi,

This is intended behavior. If you look at our code, we're putting the rendering canvas in full screen, that's why everything else disappears. Your solution is the way to go if you'd like to keep other HTML elements.

Bye,

David

[Dad72]

OK, thanks for the explanations davrous

[Vousk-prod.]

Hi,

 

When I switch to fullscreen, if my canvas ratio is not the same as the screen ratio, my scene become distorded (for instance my canvas is 16/9 inside my HTML page, but my screen is 4/3, while inside my "windowed" canvas everything is ok, when I go fullscreen, objetcs are stretched on vertical axis (the resolution is ok, it's not upscaled nor pixelised, just the viewport is streched to fit 16/9 in 4/3).

 

How can I prevent that ?

[GameMonetize]

just call engine.resize()

[Vousk-prod.]

Yep, that makes sense...

but unfortunatly it's streched the same after the engine.resize()...

[Dad72]

To bind an event like this:

window.addEventListener("resize", function () {    engine.resize();    //If you need the values width and height of the scene    widthGame = engine.getRenderWidth();     heightGame = engine.getRenderHeight();});

[Vousk-prod.]

In fact I'm already using that in my window.addEventListener("resize"...) function. In this case engine.resize() works perfectly well, I can play with CSS values, make responsive designs etc without any problem.

But in that particular case of fullscreen switching, the resize() has not the effect we could expect. It seems that it recalculates its new resolution to rescale the canvas ratio according to the new fullscreen width, and then it stretches its height to actually fill the screen (black lines we would have on a 16/9 video played on a 4/3 screen are here replaced by the vertically stretched version of our "non deforming rescaled" canvas).

Maybe I'm not really clear, a picture would be easier to understand but I can't do any picture for now...