Detect WebVR Support with JavaScript
It's been two years since I was heavily involved with WebVR at Mozilla but, despite not contributing every day, I can see VR making leaps and bounds, from Firefox making an increased effort to Chrome pushing VR and Oculus and HTC (Vive) improving their offerings. Native games are getting better but, more importantly, browsers are getting faster and three.js and aframe are empowering incredible VR experiences with JavaScript.
Before you can serve up VR experiences, however, you need to ensure the browser supports VR experiences. To do so, you need to ensure navigator.getVRDisplays
is available:
const supportsVR = 'getVRDisplays' in navigator;
if (supportsVR) {
navigator.getVRDisplays().then(function(displays) {
// ... Load VR experience
});
}
else {
// ... Show "you need {x} browser" message
}
If navigator.getVRDisplays
is present, it's likely that the browser supports VR and AR experiences.
Virtual reality and augmented reality have the potential to change the world and enrich lives. Learning how to code VR experiences will get you ahead of the curve, and as always, coding those experiences for the browser will break down the barrier of entry!
One of the web components I've always loved has been Facebook's modal dialog. This "lightbox" isn't like others: no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much." With Facebook's dialog in mind, I've created LightFace: a Facebook lightbox...
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once.
...OK I'm rubbish when it comes to Photoshop.
If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention...
Looks like
is deprecated and should not be used any more. Oculus Quest 2 does not implement it, so it can’t really be relied on: https://discourse.threejs.org/t/navigator-getvrdisplays-not-working-on-oculus-quest-browser/23273