Forum Discussion
benvanik
12 years agoHonored Guest
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
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
- craigotronHonored GuestI know how I'm going to be spending tomorrow. Can't wait to check this out!
- FDPExplorerThank you! This is exactly what I was looking for. On the three.js example in Chrome (the only one I've played with so far) I have a few comments:
First, this is awesome. Looking at the box demo I see so much potential. This could have taken six months to happen, you made it happen almost immediately, so thank you! Now onto the small issues I encountered.
Fullscreen isn't quite working in Chrome. I think it is assuming that the screen resolution is fixed at 1280 x 800, but for web stuff I would assume most users will keep their screens at the default res. I ended up having to zoom in on the page manually, which worked OK. I would just scale fullscreen fluidly along these lines: http://stemkoski.github.io/Three.js/HelloWorld.html
The WASD/arrow keys are not mapped relative to look direction. This is pretty confusing.
-FDP - troffmo5Honored GuestGreat!! I will test it as soon as i can.
Can use it for my streetview application? - benvanikHonored GuestFDP: yeah, I couldn't get the math right with the controls so it goes in the wrong direction. If you know the magic please submit a pull request so it can be better!
As for fullscreen, since it's only meant to work with the rift display it just fixes the canvas to that size. If you move your browser to the rift screen it will be 1:1 with display resolution and look right. Making it fit at any size doesn't make sense when trying to do the distorted eye rendering, as the aspect ratio must be the same as the HMD for it to mean anything.
triffmo5: use it for whatever you'd like! :) - lazydodoHonored GuestVirtually all native windows apps/demo's out there require/support people to have the rift mirror their main display (have no stats but i have a feeling 1920x1080 is somewhat of the standard resolution now days), and even support running it any any resolution you want while maintaining the correct warp. Limiting your code to support only 1280x800, seems not that user friendly, I for one don't want to mess with my display settings every time i visit a site with rift support, troffmo5's streetview viewer supports it and the warp looks fine. I really hope you'll reconsider your stance on this.
- FDPExplorerI think you can just squeeze the viewport by the difference between the rift aspect ratio and the screen aspect ratio and then map to full screen and it should come out correctly on the rift regardless of the screen resolution. Perhaps I am mistaken (don't have the rift on me at the moment), but I think the Rift just scales incoming HDMI signals to 1280 x 800 unless they are lower res. In any case, something along these lines would definitely be the most elegant solution.
I won't have time to look at the code for a week or so (and I'm not anywhere near as competent with WebGL as you are), but I will try to have a look at the navigation when I get a chance. I'm guessing you just need to marry the look matrix from the Oculus Rift to FlyControls* in Three.js, so that arrow key movement is always relative and not fixed.
*https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_fly.html
Regards,
FDP - svenProtegeGreat stuff!
Now, getting this functionality into the Turbulenz engine would be awesome! - ambriashirHonored Guestreally good work. I just got my rift today and this is going to save me so much time. consider yourself forked!
- fenetikmHonored GuestThis is so hot. I was looking for a way to do this for doing some visualisation and this works a charm.
- spyroExpert ProtegeLooks great! But I've this fullscreen issue, too. Even if I set my screen to 1280x800 and go to fullscreen, there are still scrollbars visible in the 'rift cube' demo. Just changed the attributes "width" and "height" of the <embed/>-Element from 4 to 0 and it worked like a charm.
'Threejs_boxes_demo' worked instantly and looks nothing less than fantastic. Unfortunately, the control axis (WASD) doesn't change with your view.
Really looking forward to this, could become really _huge_ IHMO.
spyro
Quick Links
- Horizon Developer Support
- Quest User Forums
- Troubleshooting Forum for problems with a game or app
- Quest Support for problems with your device
Other Meta Support
Related Content
- 6 months ago
- 1 month ago
- 10 months ago
- 3 months ago