Skip to main content
New Participant
April 30, 2013

vr.js -- a plugin/library to access the Rift and Hydra in JS

Hey all!
I whipped up a plugin that lets Firefox and Chrome access the Oculus Rift and Razer Hydra. It's fast and (I think) pretty easy to make existing WebGL content compatible. It provides both the raw sensor data and helpers for doing all of the math and even drawing WebGL scenes with the distortion/chromatic aberration correction shaders.

Currently it requires downloading the repo zip and running a batch file, but in the future if I get good feedback I'll create Chrome Web Store and Mozilla Addons versions that are easier for non-developers to get.

Please tell me what you think/file issues/etc!

Source/binaries: https://github.com/benvanik/vr.js

    28 replies

    Up and Coming
    February 13, 2014
    This is pretty awesome. My app is pretty intensive with other things, so I'm wondering if it's possible, or even a good idea, to call the VR stuff via a web-worker? vr.js does access the DOM directly, so that would have to be separated out, but can it call to the plugin from a worker? And would it matter (is the plugin on a different thread, for example?)
    Up and Coming
    February 13, 2014
    Which "VR stuff" would you want to call via web worker?

    The rendering code you want ASAP, unlikely you'd want to wait for web workers to return for that or you'll feel laggy. Adjusting to new data from the rift is pretty important to do ASAP as well, so nothing should be moved to web workers there...

    Unless you're lazy-loading stuff (textures?) that can fault in to the rendering loop after it's been loaded/processed on a web worker, I don't see how web workers would contribute to the rendering/vr loop. One of the tradeoffs we have to deal with when working in javascript - it's significantly easier to get up and running in js as opposed to C++ but you don't have as much compute power to play with.

    FYI, I've been using the oculus bridge (websockets) instead of vr.js recently. NpAPI is going away in chrome soon, you don't want to depend on it.
    Up and Coming
    February 14, 2014
    The 'vr stuff' would be reading the rotation (and soon position). What I was thinking was instead of this:

    wait to get rotation
    render rotation
    wait to get rotation
    render rotation

    It would get rotation (in worker) into some variables that the render loop would simple access as fast as it can.

    worker 1 | UI thread
    get rotation | render
    get rotation | render

    So it's async.

    But then, like I said, I don't know that it's a good idea or even necessary. And FWIW I'm doing this with the Unity webplayer, so it's already in a different thread (I assume!) But I'm also hitting other sensors and services, so I'm looking to farm-out things to workers as much as possible.

    Have you looked at InstantIO for reading Oculus into websockets? http://doc.instantreality.org/tutorial/connecting-devices/
    New Participant
    April 7, 2014
    A few people had mentioned wanting to use THREE.js CSS3DRenderer to render DOM on the Oculus.

    I created a little library and example that does that. It has an integration to vr.js for the head tracking.
    Hope you can use it.
    Dont want to hijack the thread (i'll create a new one) just figured it could help some of you.
    https://github.com/topherzee/vrhtml

    Cheers, Topher
    Up and Coming
    April 7, 2014
    "topherzee" wrote:
    A few people had mentioned wanting to use THREE.js CSS3DRenderer to render DOM on the Oculus.

    I created a little library and example that does that. It has an integration to vr.js for the head tracking.
    Hope you can use it.
    Dont want to hijack the thread (i'll create a new one) just figured it could help some of you.
    https://github.com/topherzee/vrhtml

    Cheers, Topher

    Wonderful! Thank you!

    FWIW if you want your webGL with a scene graph already for you, X3DOM does this, and InstantIO provides Oculus/Hydra/other device support. http://www.x3dom.org/?p=3447
    Up and Coming
    April 8, 2014
    Awesome! I like what I see so far :) Keep up the Good Work!

    I was thinking of doing something similar to this but as a full blown hacked version of chrome or firefox (whichever one is easier to hack).

    my goal is to make it so a user could instantly immerse themselves into virtual reality. so they could browse the web and easily discover/launch web apps designed specifically for VR all while wearing the hmd.

    I would love to help you guys design this; I am an aspiring UX/UI designer

    i can definitely see a lot of potential for casual web based virtual experiences; requiring no additional downloads. But I want to bring the best of both worlds together. 1) being able to display web pages in VR and 2) being able to fully immerse (full screen yourself) in a web app designed specifically for VR all while wearing the hmd

    my thoughts so far;
    -first off I would think of this as opening a "virtual tab"
    -not sure if the domain/brand-name "virtual tab" is taken or not....
    -place a button to open virtual tab near where the new tab button is
    -when you open the virtual tab while looking at it on host machine it looks very much how your normal new browser tab looks, albeit with some additional settings menus and graphical icons
    -the graphical icons would be cool looking visual icons representing the hmd and HID, with dot color dot indicators; green for good, yellow for some lag, and red as in completely not seeing the device at all....
    -that way users can easily see how well the virtual tab is communicating with the hmd and whatever input device the user has connected; hyrda, gamepad, mouse keyboard et all
    -the plug in should come packed with all the drivers for the most popular VR input devices
    -on this virtual tab you can launch a webpage and browse the web like you normally would
    -when the page is fully rendered or the web app is fully loaded you can push it to the hmd by clicking "dive in"
    -that way users can use the keyboard find a web app or webpage they want to experience in vr launch it on the host machine then go directly into that experience when they put on the hmd

    however.....

    i want users to be able to go directly into virtual reality and browse webpages and change experiences from within the hmd. which is why i think a hacked browser might be necessary. to accomplish this you could add a "launch VR button" on the virtual tab page (not on the actual browser). in essence to dive into vr you would have to open a new virtual tab then click "launch VR" then put on the hmd

    launch VR on the host machine;
    -when you click on 'launch vr' the top sites, most recently visited, the search bar all fade away and all that's left is a blank virtual tab page
    -preferably a blank virtual tab with a cool looking backdrop ideally the logo icon that represents the plug in and a cool color-scheme (not just white)
    -there would still be the icons representing communication with the hmd, input device and an additional icon indicating how good of a connection the tab has to the internet
    -i would rather display a "spectator screen" on the host machine by default rather then just display whatever the user is looking at in barrel distortion on the host screen
    -on this spectator screen there would be some additional options/views like an option to open a developer console to communicate with the rift or the input device, or open up a jsconsole, or activate barrel distortion display on whatever is displayed on the hmd
    -when vr is launched you will not be able to search, or load a specific webpage from this tab at all. it becomes locked to the hmd.

    launch vr on the hmd;



    -when you launch vr you can immediately put on the hmd and be immersed into a vr optimized web browser
    -this is the GUI i have been busy designing
    -for now im committed to safaris "top sites" as shown in the image above
    -i want to wrap this around the user 360 degrees then slice into three distinct sections
    -you rotate the panaroma via positional tracking and/or input device
    -rotation is not a free look 1:1 kind of movement though...
    -the rotation would be more similar to swiping through virtual screens on a mobile device (albeit in a cool 3D like fashion)
    -what happens when you open the page is something i am having trouble designing; right now i am going with it opening to fill the panaroma screen rather then opening a window like looking glass but either option is still on the table....
    -if the application or web page is optimized for full VR immersion you can click "dive in" and watch the screen zoom out to fill the entire hmd.
    -this animation would look like you just walked through a "portal"

    V1
    -the only way to open a new window or experience that is not already a thumbnail displayed on the rotating panaroma would be via opening a blank tile/thumbnail with a plus sign on it
    -open this and you will be prompted to type in web address or search query


    V2;
    -focus specifically on implementing voice recognition
    -wit.ai to be exact...

    i would love to help out in any way i can. My main areas of expertise is simplifying/enhancing the user experience, conceptualizing and designing front end GUI, and quality assurance testing. I even have a connection with an audio engineer who would be glad to help add audio-feedback to what would be primarily a visual driven GUI.
    New Participant
    April 8, 2014
    Arg! It's times like these that make me wish I had the DK1. Just looking at the code, this looks really cool. Look forward to how you push this further. Good job!
    New Participant
    June 23, 2015
    I've tried a couple of times to get this to run, but every time I get an error reading "NPVR plugin not found/error polling." I've followed the windows installation for chrome and cannot seem to get it running. Thoughts?