Jump to content

Mode fullscreen in babylon


Recommended Posts

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?


Link to comment
Share on other sites

  • 3 months later...



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 ?

Link to comment
Share on other sites

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();});
Link to comment
Share on other sites

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...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...