Merge pull request #2 from BIVROST/webxr

Webxr

Author: chanibal

DEVELOPMENT.md

@@ -29,17 +29,28 @@ rm compiler-latest.zip
 popd
 ```
 
-Note: on some systems, `gem` commands might require administrator privileges:
+Note: on some systems, `gem` and `npm install -g` commands might require administrator privileges:
 ```bash
 sudo gem install sass
 sudo gem install compass
+sudo npm install -g grunt-cli
 ```
 
 On recent MacOS, you might need to install `compass` to a different directory if using pre-installed ruby:
 ```
 sudo gem install -n /usr/local/bin compass
 ```
 
+On WSL/ubuntu, `ruby-dev` is required for sass installation.
+```
+sudo apt-get install ruby-dev
+```
+
+Java JRE is required for Google Closure Compiler:
+```
+sudo apt install openjdk-8-jre-headless
+```
+
 
 Build the project
 -----------------

README.md

@@ -67,31 +67,33 @@ If you're interested in older releases, checkout [the Tags tab][download-link-ta
 Supported browsers
 ------------------
 
-
-| OS      | Browser                     | Panorama viewing | Video playback | Video streaming (HLS) | Legacy VR⁵ | WebVR | Headsets supported                         |
-| ------- | --------------------------- |:----------------:|:--------------:|:---------------------:|:----------:|:-----:| ------------------------------------------ |
-| Windows | Google Chrome               | ✔                | ✔              | ✔                     |            | ✔¹    | Oculus, Vive, Windows Mixed Reality⁶       |
-| Windows | Mozilla Firefox             | ✔                | ✔              | ✔                     |            | ✔²    | Oculus, OSVR, Vive, Windows Mixed Reality⁶ |
-| Windows | Microsoft Edge              | ✔                | ✔              | ✔                     |            | ✔     | Windows Mixed Reality, Hololens⁷           |
-| Windows | Internet Explorer (11+)     | ✔                | ✔              | ✔                     |            |       |                                            |
-| Mac OS  | Safari                      | ✔                | ✔⁴             | ✔                     |            |       |                                            |
-| Mac OS  | Google Chrome               | ✔                | ✔              | ✔                     |            |       |                                            |
-| Mac OS  | Mozilla Firefox             | ✔                | ✔              | ✔                     |            |       |                                            |
-| Android | Mozilla Firefox             | ✔                | ✔              | ✔                     |            |       |                                            |
-| Android | Google Chrome               | ✔                | ✔              | ✔                     | ✔          | ✔³    | Cardboard                                  |
-| Android | Samsung Internet            | ✔                | ✔              |                       | ✔          |       | Cardboard                                  |
-| Android | Samsung Internet for GearVR | ✔                | ✔              | ✔                     |            | ✔     | GearVR                                     |
-| iOS     | Safari                      | ✔                | ✔              |                       | ✔          |       | Cardboard                                  |
-| iOS     | Google Chrome               | ✔                | ✔              |                       | ✔          |       | Cardboard                                  |
-| iOS     | Mozilla Firefox             | ✔                | ✔              |                       |            |       |                                            |
+| OS      | Browser                     | Panorama viewing | Video playback | Video streaming (HLS) | WebXR | Legacy VR⁵ | legacy WebVR | Headsets supported                         |
+| ------- | --------------------------- |:----------------:|:--------------:|:---------------------:|:-----:|:----------:|:------------:| ------------------------------------------ |
+| Windows | Google Chrome               | ✔                | ✔              | ✔                     |  ✔    |            |      ✔¹      | Oculus, Vive, Windows Mixed Reality⁶       |
+| Windows | Mozilla Firefox             | ✔                | ✔              | ✔                     |   ✔⁸  |            |      ✔²      | Oculus, OSVR, Vive, Windows Mixed Reality⁶ |
+| Windows | Microsoft Edge              | ✔                | ✔              | ✔                     |   ✔   |            |      ✔       | Windows Mixed Reality, Hololens⁷           |
+| Windows | Internet Explorer (11+)     | ✔                | ✔              | ✔                     |       |            |              |                                            |
+| Mac OS  | Safari                      | ✔                | ✔⁴             | ✔                     |       |            |              |                                            |
+| Mac OS  | Google Chrome               | ✔                | ✔              | ✔                     |       |            |              |                                            |
+| Mac OS  | Mozilla Firefox             | ✔                | ✔              | ✔                     |       |            |              |                                            |
+| Android | Google Chrome               | ✔                | ✔              | ✔                     |   ✔   |  ✔         |      ✔³      | Cardboard                                  |
+| Android | Mozilla Firefox             | ✔                | ✔              | ✔                     |       |            |              |                                            |
+| Android | Samsung Internet            | ✔                | ✔              |                       |       | ✔          |              | Cardboard                                  |
+| Android | Samsung Internet for GearVR | ✔                | ✔              | ✔                     |   ✔   |            |      ✔       | GearVR                                     |
+| iOS     | Safari                      | ✔                | ✔              |                       |       | ✔          |              | Cardboard                                  |
+| iOS     | Google Chrome               | ✔                | ✔              |                       |       | ✔          |              | Cardboard                                  |
+| iOS     | Mozilla Firefox             | ✔                | ✔              |                       |       |            |              |                                            |
 
 ¹ - With a [dedicated WebVR Chromium build][webvr-chromium] or [Chrome Canary][webvr-chrome-canary]  
 ² - With [Firefox Nightly][webvr-firefox]  
 ³ - Requires enabling VR in `chrome://flags/#enable-webvr`  
 ⁴ - Movies must be on the same domain ([broken CORS implementation][video-does-not-work])  
 ⁵ - Split screen with orientation sensor support (basic Cardboard)  
 ⁶ - Windows Mixed Reality support via Microsoft's Windows Mixed Reality for SteamVR  
-⁷ - Requires enabling WebVR in `about:flags`
+⁷ - Requires enabling WebVR in `about:flags`  
+⁸ - Requires enabling WebXR in `about:flags` or using Firefox Reality
+
+Note: some of these test results might be out of date.
 
 [video-does-not-work]: #video-does-not-work
 
@@ -136,6 +138,7 @@ Installation
    Don't forget to set the correct paths.
 3. [Configure the video player][configuration]
 4. [Encode media][media-preparation-guide]
+5. Make sure you serve the player and the page you're hosting it from on HTTPS. WebXR and gyroscope (orientation) features are disabled on non secure origins. Host media from the same server or enable [CORS][cors].
 
 [configuration]: #configuration
 [media-preparation-guide]: #media-preparation-guide
@@ -530,7 +533,7 @@ BIVROST Analytics for VR integration
 ------------------------------------
 
 The 360WebPlayer has a built-in support for gathering user analytics, just like the other BIVROST players.  
-For more information about BIVROST Analytics for VR, please contact us at [contact@bivrost360.com][email-sales].
+For more information about BIVROST Analytics for VR, please contact us at [contact@bivrost.pro][email-sales].
 
 Analytics works only with videos. 
 It does not work with static images (panoramas) or with infinite live streams. 
@@ -654,6 +657,7 @@ You can distinguish between the sessions with the `lookprovider` field of the se
 Look providers generated by the player:
 *	`bivrost:360WebPlayer:main-display` - gathered by the mono renderer - the classical desktop or mobile mode.
 *	`bivrost:360WebPlayer:webvr` - gathered by the WebVR view.
+*	`bivrost:360WebPlayer:webxr` - gathered by the WebXR view.
 *	`bivrost:360WebPlayer:legacy-stereo` - gathered by the legacy Stereo view (Cardboard support).
 
 
@@ -671,10 +675,24 @@ User Guide
 * ` [ `, ` ] ` - scroll movie by 5 seconds, forwards or backwards.
 * ` + `, ` - ` - zoom in/out (not available in VR mode).
 
+### Virtual Reality on desktop and mobile with WebXR
 
-### Virtual Reality on desktop and mobile with WebVR 
+WebXR is the new browser Virtual Reality standard. It has built in support on major platforms including:
 
-At the time of writing, WebVR is supported by Microsoft Edge, [Firefox Nightly][webvr-firefox], special [Windows builds of Chromium][webvr-chromium] and [Chrome Canary][webvr-chrome-canary], Google Chrome on Android with Cardboard (after enabling WebVR in `chrome://flags/#enable-webvr`) and [Samsung Internet Browser for Gear VR][webvr-samsung].
+- Chrome for Windows
+- Chrome for Android
+- Microsoft Edge (Chromium) for Windows 10
+- Firefox Reality
+
+When you have a supported platform, an headset button will be visible in 360WebPlayer - press it to enter VR.
+
+
+### Virtual Reality on desktop and mobile with legacy WebVR support
+
+WebXR is currently disabled in all new browsers and is superseded by WebXR.
+It has been left as a legacy fallback for devices that still might support it.
+
+WebVR was supported by Microsoft Edge, [Firefox Nightly][webvr-firefox], special [Windows builds of Chromium][webvr-chromium] and [Chrome Canary][webvr-chrome-canary], Google Chrome on Android with Cardboard (after enabling WebVR in `chrome://flags/#enable-webvr`) and [Samsung Internet Browser for Gear VR][webvr-samsung]. 
 
 When you have a supported platform, an headset button will be visible in 360WebPlayer - press it to enter VR.
 
@@ -690,6 +708,9 @@ For more platform specific instructions look at the [WebVR][webvr] website.
 
 ### Virtual Reality on mobile with legacy Google Cardboard support
 
+Most current Android devices are able to use WebXR which has better overall user experience. 
+This is a legacy fallback for mobile devices that have orientation sensors but do not support WebXR.
+
 You can use the Bivrost 360WebPlayer with Google Cardboard and its many clones with a simple split screen. Just press the "headset" button to go to VR mode.
 
 Contrary to most players, you don't have to enable screen rotation for 360WebPlayer to work properly in cardboard mode. The phone can be in both landscape or portrait mode.
@@ -726,6 +747,10 @@ Either your webserver doesn't support [Content-Range][content-range] or there ar
 
 [content-range]: http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.16
 
+### WebXR or legacy cardboard VR does not work on my page, but does work on other pages
+
+Force HTTPS on all pages embedding the player. Orientation events, WebXR and other features do not work on non-secure origins.
+This is a standards-backed security requirement implemented by current browsers.
 
 ### Where can I submit feature requests or bug reports? Where can I find the unminified version?
 
@@ -753,12 +778,14 @@ Please [contact sales at contact@bivrost360.com][email-sales] for more details.
 License
 -------
 
-Terms and conditions are [available in a separate document (english)](LICENSE.md) [(polish)](LICENSE-polish.md).
+This software is free and can be used only for noncommercial purposes. To purchase the commercial license read the terms and contact us: [contact@bivrost.pro][email-sales]
+
+Terms and conditions are [available in a separate document [English]](LICENSE.md) [[Polish]](LICENSE-polish.md).
 
 If you want to remove or replace our branding, are unsure about which license applies to you, please [contact us for help and additional licensing options][email-sales].
 
 [section-license]: #License
-[email-sales]: mailto:contact@bivrost360.com
+[email-sales]: mailto:contact@bivrost.pro
 
 
 ### Third party libraries
@@ -778,13 +805,13 @@ The BIVROST 360WebPlayer can be optionaly made to use third party libraries:
 Changelog
 ---------
 
-* 2016-03-14: initial public release
+* 2016-03-14: initial public release (version 1.0)
 * 2016-09-21: WebVR 1.1 support
 * 2016-12-21: GearVR support, stereo UI
 * 2016-12-30: Documentation update
 * 2016-12-31: GitHub release
 * 2018-01-26: Move to GitLab, updated documentation
 * 2018-08-08: Moved back to GitHub, updated logo
 * 2019-04-05: Updated logo
-* 2020-07-16: Fixed issues with iOS 13 fullscreen and gyroscope
-* 2020-08-06: License updated
+* 2020-07-16: Fixed issues with iOS 13 fullscreen and gyroscope (version 1.1)
+* 2020-08-06: WebXR support, license updated (version 1.2)

scripts.json

@@ -24,6 +24,7 @@
 	"src/bivrost-renderer-mono.js",
 	"src/bivrost-renderer-stereo.js",
 	"src/bivrost-renderer-webvr.js",
+	"src/bivrost-renderer-webxr.js",
 	"src/IEVideoTexture.js",
 	"src/bivrost-analytics.js"
 ]

src/bivrost-input.js

@@ -273,7 +273,8 @@
 		this.__initGyroscope(player);
 
 
-		// WebVR support
+		// WebXR and legacy WebVR support
+		this.__initWebXR(player);
 		this.__initWebVR(player);
 	}; 
 
@@ -674,6 +675,50 @@
 
 
 
+	/// REGION: WebXR
+	{
+		Bivrost.Input.prototype.xrAvailable = false;
+		// Bivrost.Input.prototype.vrDisplaySize = { x:undefined, y:undefined };
+
+		/**
+		 * Initiates WebXR support
+		 * @param {Bivrost.Input} input
+		 * @param {Bivrost.Player} player
+		 */
+		Bivrost.Input.prototype.__initWebXR=function(input, player) {
+			if(!navigator.xr) {
+				log("WebVR: WebVR not supported");
+				return;
+			}
+
+			var input=this;
+
+			navigator.xr.isSessionSupported('immersive-vr').then(function(supported) {
+				if (supported) {
+					// input.vrDisplay = displays[0];
+
+					// var eyeLeft = input.vrDisplay.getEyeParameters("left");
+					// var eyeRight = input.vrDisplay.getEyeParameters("right");
+
+					// var width = eyeLeft.renderWidth + eyeRight.renderWidth;
+					// var height = Math.max(eyeLeft.renderWidth, eyeRight.renderWidth);
+
+					// input.vrDisplaySize.x=width;
+					// input.vrDisplaySize.y=height;
+
+					// log("WebVR: Found VR Display with size: "+width+"x"+height);
+					// input.onInputMethodAdded.publish(input);
+					input.xrAvailable = true;
+					log("WebXR: supported")
+				}
+				else {
+					log("WebXR: No VR Displays found");
+				}
+			});
+		};
+	}
+
+
 	/// REGION: Gyroscope
 	{
 		/**

src/bivrost-player.js

@@ -68,6 +68,9 @@
 
 		// renderer
 		this.webglRenderer=new THREE.WebGLRenderer({ antialias: true });
+		this.webglRenderer.xr.enabled = true;
+		this.webglRenderer.xr.setReferenceSpaceType( 'local' );
+
 		this.webglRenderer.setClearColor(0x000000, 1);	// iOS doesn't have this set up as proper default
 		container.appendChild(this.webglRenderer.domElement);		
 
@@ -100,9 +103,9 @@
 		function mainloopBound() {
 			var dt=clock.getDelta();
 			thisRef.mainLoop(dt);
-			requestAnimationFrame(mainloopBound);
 		};
-		requestAnimationFrame(mainloopBound);
+		this.webglRenderer.setAnimationLoop(mainloopBound);
+
 	};
 
 
@@ -297,6 +300,7 @@
 	Bivrost.Player.prototype.vrModeEnterOrCycle=function() {
 		var player=this;
 		var vrModes=[
+			Bivrost.Renderer.WebXR,
 			Bivrost.Renderer.WebVR,
 			Bivrost.Renderer.Stereo
 		].filter(function(r) { return r.shouldWork(player); });
@@ -310,12 +314,19 @@
 			vrMode=vrModes[0];
 			log("selecting default VR mode");
 		}
-		// already in vr mode - toggle next available mode
+		// already in vr mode - reset to mono
 		else {
-			var index=(vrModes.indexOf(this.renderer.__proto__) + 1) % vrModes.length;
-			vrMode=vrModes[index];
-			log("selecting next VR mode");
+			log("back to mono");
+			this.vrExit();
+			return;
 		}
+
+		// // already in vr mode - toggle next available mode
+		// else {
+		// 	var index=(vrModes.indexOf(this.renderer.__proto__) + 1) % vrModes.length;
+		// 	vrMode=vrModes[index];
+		// 	log("selecting next VR mode");
+		// }
 
 		this.renderer=new vrMode(this);
 	};