An experimental NPAPI plugin for Chrome and Firefox that exposes fun VR devices.

vr.js, in conjunction with a required native browser plugin, exposes the Oculus Rift and Razer Hydra to Javascript in a performant, easy-to-use way. The library makes it simple to query the device values in just a few lines of code but also handles more advanced things like computing all the math required for rendering lens distorted scenes. If you want, it even has a slick API for easily rendering the distored scene that should be easy to drop into any WebGL application. There's also an example three.js wrapper under examples/js/effects/ that works pretty well.

Oh, and though it's possible to use node and WebSockets to get the sensor data I don't recommend it - the latency is simply too high (~10ms). This plugin allows for a latency similar to if you were developing a native application against the Oculus SDK and, when running on a correctly configured computer, will be pretty darn good.

NOTE: the Oculus SDK doesn't like sharing devices - you must close other Oculus apps before using this in your browser and must close your browser if you want to run another Oculus app. Lame :(

• Razer Hydra
• Oculus Rift Development Kit

• Windows
  • Chrome 26+ (surprisingly good performance)
  • Firefox 20

OSX support coming soon!

• Download the repository ZIP
• Extract to some path
• Chrome:
  • Open Chrome to chrome://extensions
  • Check 'Developer mode' and click 'Load unpacked extension'
  • Select the bin\ folder in the path you extracted the ZIP into
• Firefox:
  • Open an administrator command prompt
  • cd to bin\ in the path you extracted the ZIP into
  • Run install.bat
  • You should see a successful message box

You must have the plugin installed before they will run:

• Raw Data
  • Source: examples/raw_data.html
• Sixense Sensor Data Visualization
  • Source: examples/sixense_sensor_viz.html
• Rift Sensor Data Visualization
  • Source: examples/rift_sensor_viz.html
• Simple WebGL Demo
  • Source: examples/rift_cube_demo.js
• Three.js Floating Boxes Demo
  • Source: examples/threejs_boxes_demo.html

Code is heavily commented - it's best to read that. Everything is in the vr.js file right now.

If you want fancy HTML docs, see the Online Documentation.

In the future there will likely be a simple calibration tool added to the JS library, but for now the best way to get your IPD is to run Team Fortress 2's calibration tool and copy the value out.

If you place any other DOM element on top of the Canvas rendering your content you may cause extra browser compositing that can slow down your rendering. Since you have to draw your entire HUD/etc distored anyway, avoid placing any UI on top of the Canvas or adding any CSS effects to it (rounded corners, etc).

This removes a frame of latency.

• Right click on desktop
• Personalize
• Choose Windows 7 Basic or Windows Classic

Use requestAnimationFrame for your rendering and always render as fast as possible.

Using CSS transform and matrix3d it'd be possible to position any DOM content correctly. Then, once CSS Shaders are available in browsers, the DOM content could be distorted/color corrected.

Chrome apps have the chrome.usb API allowing direct access to devices. Implementing the sensor communication and sensor fusion code in Javascript would allow apps to work on any OS Chrome runs on (ChromeOS too!) without the need for plugins. Unfortunately it's restricted to packaged apps only, not the general web.

Mozilla is also considering a USB API, WebUSB, however it seems to have stalled.

Visual Studio 2010 or 2012 is required for building on Windows. The Express editions should work, just make sure to get the VC++ 2012 for Desktop variant. Other dependencies are included in the repo.

Uninstall any previous installation of the npvr DLL before continuing.

Check out the git repo and generate the Visual Studio projects:

git clone https://github.com/benvanik/vr.js.git
cd vr.js
git submodule init
git submodule update
make-gyp.bat

Open build\npvr\vs2010\npvr.sln and build. The outputs will be placed into build\npvr\Debug\.

Run the following to prepare the debug version and register it with Firefox:

make-debug.bat

To use in Chrome:

• Open Chrome to chrome://extensions
• Check 'Developer mode' and click 'Load unpacked extension'
• Select the build\npvr\debug\ folder

Make sure to uninstall the pre-built binary and instead install the plugin from the Debug build directory. When trying to rebuild the plugin always ensure the browsers that have loaded it are closed.

Install the Chrome Canary. Running it on its own (instead of your main Chrome instance) makes it much easier to debug/restart/etc.

Exit all previous instances and launch from a command prompt:

"%LOCALAPPDATA%\Local\Google\Chrome SxS\Application\chrome.exe" --debug-plugin-loading --enable-logging --v=1 --plugin-startup-dialog

Open a page with the plugin and wait for the popup telling you the process ID. Switch to Visual Studio, go Debug -> Attach to Process, select the Google plugin process with the matching process ID, and attach.

Try to run Firefox with no other pages loaded.

Disable the out-of-process plugins to make things easier: open about:config, find dom.ipc.plugins.enabled, and set it to false. Restart Firefox.

Launch, open the page, and attach to firefox.exe in Visual Studio.

BSD, except the np_* code.

Some portions of the code are from the official Oculus SDK and fall under their license. I hope that's cool :)

A lot of the code comes from the official Oculus SDK. Some math snippets from Brandon Jones's gl-matrix.