3

When I try out the example: https://threejs.org/examples/webvr_cubes.html on my Android 7.0 Samsung Galaxy 7 phone using the Chrome browser and the Utopia360 headset, everything works and I can enter VR mode. When I try the exact same thing with exactly the same code, only on my local server, I get "Your browser does not support WebVR. See webvr.info for assistance."

The code is exactly the same and the three.js and WebVR.js files are exactly the same except for where the three.js and WebVR.js files are located in the directory structure (i.e. <script src="js/threejs/three.js" type="text/javascript"></script> instead of <script src="../build/three.js"></script>)

SomeoneElse
  • 486
  • 1
  • 6
  • 22
  • Just to clarify, are you running it using a localhost server, or are you pointing your browser directly to the .html file in your hard drive? Chrome sometimes limits functionality when pointing direcly to files in the hard drive as a security measure. – M - Jul 07 '17 at 18:20
  • I guess you are trying to run the project on emulator. Try on a real device, emulators don't support WebGL. – None Jul 07 '17 at 21:10
  • I am running it on a local server using an actual Samsung Galaxy 7 but I have opened port 80 (i.e. http://96.33.173.114/othereye/othereye/www/ ) – SomeoneElse Jul 08 '17 at 16:46
  • Using the polyfill for now, but I'm still baffled by why it works on threejs.org and not on my server – SomeoneElse Jul 08 '17 at 20:46
  • You can enable WebVR here : `chrome://flags/#enable-webvr`, check [this answer](https://stackoverflow.com/a/45261207/1746515) – neeh Jul 23 '17 at 03:56

3 Answers3

1

The reason is that the threejs page has an embedded origin token to allow webvr to work without setting the chrome flag enable-webvr, but that only works when the page is served from "threejs.org".

You can see this at the top of the demo pages:

<!-- Origin Trial Token, feature = WebXR Device API (For Chrome M69+), origin = https://threejs.org, expires = 2019-01-07 -->
<meta http-equiv="origin-trial" data-feature="WebXR Device API (For Chrome M69+)" data-expires="2019-01-07" content="ArPzyYNrUDiXsGOh647Ya7MtVUA1nM+WFMnPWu7eoF2nQHOP6mTATIbiv0w+k2kFaPofZG/04ZEQdsACq4IA0wQAAABTeyJvcmlnaW4iOiJodHRwczovL3RocmVlanMub3JnOjQ0MyIsImZlYXR1cmUiOiJXZWJYUkRldmljZU02OSIsImV4cGlyeSI6MTU0Njg4MzAxOH0=">

So you have two choices:

  1. Enable the webvr flag (chrome://flags#enable-webvr) in your phones browser,
  2. Request an origin token that matches the domain of your website here: https://webvr.rocks/chrome_for_android.

Setting the flag worked for me even when page was served via http.

Dale Thatcher
  • 83
  • 1
  • 5
0

The issue is that you must "serve your WebVR content via HTTPS", according to the Google WebVR status documentation.

Threejs.org is a site that uses HTTPS, but your localhost is almost certainly not delivering the content via a secure connection. That's why you're seeing that misleading warning that "Your browser does not support WebVR", when in fact, it does.

Unfortunately, the available methods to deliver HTTPS via Apache make it sound like the three options to get an SSL certificate for localhosts won't work on Chrome for Android (or are pricey), so using the WebVR polyfill is the best solution for the time being.

M -
  • 26,908
  • 11
  • 49
  • 81
0

It should work even with an untrusted certificate if you proceed. The important thing is that you should have a certificate, of course we are speaking about a development environment 1. However the crucial part: you must use Chrome Canary for Android, see later.

Get Certificate

The easiest way

Use glitch, which is an online full-stack IDE (yep, with node and sqlite, made by the stackoverflow people) which will provide you a trusted subdomain.

Still easy and locally working way.

Creating certificate and corresponding certificate authority (CA)

you should use minica CA tool:

Install minica (You must install and setup a GO and gotools first)

go get github.com/jsha/minica

Run this simple command, you should use you LAN IP instead of localhost, though.

minica --domains localhost

which creates the following files in your working directory

  • minica-key.pem The private key of your new CA
  • minica.pem The root certificate of your CA
  • localhost/cert.pem The certificate of your website
  • localhost/key.pem The private key to sign of your website certificate.

If you do not know what are these concepts, I recommend this friendly introduction.

Serve your site with your certificate.

You can use the http-server npm package, which is easy to use and can serve certificates

http-server -a 0.0.0.0 -p 8080 -S -C localhost/cert.pem -K localhost/key.pem

then access your site like https://192.168.1.42 or whatever is your LAN IP address.

Install Chrome Canary to your Android

Google play has it.

Setup Chrome Canary flags

Type chrome://flags in your Chrome Canary's URL bar and enable the following flags: #enable-webvr and #enable-gamepad-extensions called WebVR and Gamepad extensions respectively.

Now your are good to go. 2

Notes:

  1. If you plan to deploy your app in production you should acquire a globally trusted certificate from a CA. Let's Encrypt is free and easy automate and backed by the Linux Foundation, and sponsored by many big players.

  2. WebVR on Android Chrome is still unstable and will be changed, so what I wrote will be deprecated soon.

atevm
  • 801
  • 1
  • 14
  • 27