Force landscape rotation when Mobile WebGL is detected.

Hi,

I have a way to detect when the webgl is opened by touch device successfully. I tried to search around but have not found out a good way to force the WebGL player to rotate to landscape when played by mobile device.

Can anyone help?

Thanks,

 

There are a few ways to solve it, and it depends on the browser and your preferences.

Info regarding JS/HTML:
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation

In Unity:
If you don't want to count on the HTML to solve it, in Unity you can rotate the camera on the Z axis, when the height of the screen is larger than the width.
You'll need to rotate both the camera, and the UI canvas if you have one.

 

Browsers really don't want you to do that, so whatever mitigation you do on a mobile device, it will eventually be banned.

If you use the BetterMinimal responsive template and just fill the whole screen, you can check if the width is larger than the height. If it is, don't rotate your camera or whatever. Just show a message in your game that says "Rotate to landscape!" and show a little animation of a phone being rotated.

 

hmmmm... when I think about it, he can also rotate the html canvas object

 

I can't answer your question but i'm really curious to know how you detect that you're on a touch device on WebGL... I'm trying to do this for ages!

 

The solution we found is to use a canvas rect to find out the screen orientation(by comparing x and y), and rotate everything accordingly. we make no distinction if its touch/mobile, we just look at screen size.

 

Application.isMobilePlatform works in webgl. i'm checking both that and screen size.

what are you actually rotating?, i've tried rotating the camera and canvas transforms 90° on the z axis but nothing happens.

 

actual question, does anyone know a solution? (webgl on andoid/ios)

 

Yes, we found a solutions ill ask my dev coworker that found the solution tô share with you

 

Hi @MatheusCohen , would like to know your solution of handling this issue is it rotating world canvas UI?

 

Hi how did u solve this problem

 

Solution using .jslib
https://github.com/gtk2k/UnityWebGLOrientationDetectSample
(I'm only testing Chrome)

 

thanks, is it working with safari ?

 

Sorry, I have not Safari device now.

 

Forcing a specific orientation can be achieved by using the ScreenOrientation.lock api. It's supported by all major browsers, except, as usual, by Safari. What you can do, instead, is keep track of the current orientation and update the view accordingly. This approach is supported by all browsers, because you don't lock the orientation, you instead work with it. Try out this asset of mine, maybe it's what you're looking for.

 

thank you i'll try it today

 

It is not available anymore. how do i get it?

 

Here is a new page by author related to changing orientation.

I also created a separate thread with Unity Assets that support all sensors and modules for WebGL:
gyroscope, accelerometer, GPS, camera, vibration...

Current list of Assets:

• Gyroscope Accelerometer WebGL — enables you to read the gyroscope and accelerometer information provided by the browser.
• Geolocation WebGL — allows you to access GPS on the web.
• Device Camera WebGL - allows you to access the camera feed and stream its contents into a render texture (or Texture2D). It works on Chrome, Safari, Firefox, Opera, Edge.
• Vibration WebGL - enables you to vibrate your mobile phone. You can control how long you want to keep the mobile vibrating, as well as define a vibration sequence.