Using VR in Browser - sahajss/knowledge_base GitHub Wiki

My project relies on integrating the Oculus Rift with the three.js library. One of the main drawbacks to using three.js instead of building in Unity is that you have to build in browser. This has presented a number of problems related to creating a VR environment in multiple browsers, while maintaining the interaction with the stereoscopic camera of the Oculus Rift. To add another layer of problems, my project also deals with using the LeapMotion in conjunction with the Oculus. The following is a few solutions I have been exploring in order to build an Oculus/Leap environment with three.js in browser.

Firefox Nightly

The first browser I looked into was Firefox Nightly . ####Advantages

• Firefox Nightly is very simple to set up beyond actually downloading the browser
• It is an active build, meaning bugs are continuously fixed by Mozilla
• Most people are familiar with Firefox enough to be comfortable

####Drawbacks

• You have to download a VR plugin and activate upon using
• Nightly is separate from Firefox, meaning it loses some browser functionality
• Tricky to implement actual three.js code for your Oculus program.

###Implementation The biggest key beyond the plugin is the "Enter VR" button. While I haven't completely figured out how to make it function within the Oculus headset, this button should bring up the stereoscopic view and activate the Oculus camera to track movement. The key was in about:config, add the following code: * dom.vr.enabled: true * gfx.vr.mirror-texture: true * layout.frame_rate: 75

##Chromium

The next browser I looked into was Google Chromium. ####Advantages

• The download of Chromium is laid out in the websites wiki
• Google Chrome is the most recognizable browser
• Chromium does not require any plugins to work

####Drawbacks

• The build is no longer supported and updates have virtually stopped
• Chromium is separate from Chrome, meaning it loses some browser functionality
• Requires significantly more code in place of a VR plugin

###Implementation Again, like in Firefox, the issue had been appearing the screen in the Oculus. From what I can tell, the agreed upon fix has been this:

if (canvas.webkitRequestFullscreen) { canvas.webkitRequestFullscreen({ vrDisplay: hmdDevice }); } else if (canvas.mozRequestFullScreen) { canvas.mozRequestFullScreen({ vrDisplay: hmdDevice }); }