We’re excited to release the developer preview of Carmel, our first product designed to bring web content and technologies to mainstream VR devices.
Before diving into the details about Carmel, let’s first touch on our philosophy for the VR Web.
What Is the VR Web?
The VR Web is a platform comprised of APIs and technologies that enable the creation of VR experiences for the web. VR Web content can include both immersive 3D scenes built with the WebGL and WebVR APIs and enhanced 2D web experiences running in VR. Everything that’s possible today on a desktop or mobile browser should also be possible in VR.
Although VR Web experiences may look best within a headset, they can also gracefully downgrade to run well on any WebGL-enabled device, like a desktop browser or mobile phone. On these devices, web apps can use a variety of input methods to deliver the best possible experience—which gets even better within a full VR headset. In the web world, this is known as progressive enhancement.
The exciting thing about progressive enhancement for VR developers is that you can reach an incredibly vast numbers of users who don’t yet own VR headsets. Starting today, you can build experiences for all of these users and also test them in VR using Carmel. As new devices are released over time, our frameworks will automatically upgrade your content to work well across all browsers and devices, both in and out of VR.
How Do I Get Started?
The Carmel Developer Preview is now available as a Gallery app for Gear VR on the
Oculus Store. While you can develop for the VR Web today without access to a WebVR-capable browser, we’re happy to provide access to the latest WebVR APIs so you can build and test your content in VR on the most widely available VR platform, Gear VR.
Launching Carmel will immediately drop you into our WebVR-based built-in Online Gallery. Explore a few of the experiences we’ve made available, and check back often for updates.
Remember that the Carmel Developer Preview is just that—a preview. You’ll notice the lack of an address bar and that existing 2D web content doesn’t currently display. By focusing on delivering a WebVR-only experience at first, we’re able to give you direct access to the latest WebVR API early on, so you can build and test your content in VR today.
With a WebVR-capable device in hand, the easiest way to begin developing for the VR Web today is to start with samples included with Carmel or building on top of your WebGL framework of choice, such as Three.js, Babylon, and A-Frame. We expect these experiences to run on most existing devices and be easy to adapt for Carmel using the WebVR API. We’re working hard to make sure that future SDKs from Oculus work smoothly in combination with these other popular WebGL frameworks.
If you just can’t wait and want to make your WebGL experience VR-enabled immediately, jump ahead to our
Carmel Starter Kit Samples where we walk you through the basics of detecting devices, requesting presentation, and rendering in stereo.
What Is the WebVR API, and How Do I Use it?WebVR is an evolving API, with early implementations in browsers with different versions and capabilities. Recently, a configuration of the API has crystallized that most major browser vendors believe can reach general availability in mid-2017. The Carmel Developer Preview targets this configuration. All of our samples and documentation explain how to use this version of the API and also where we diverge from it and why.
At the high level, WebVR is a browser API used to interface with VR headsets. This is typically done in two phases:
- Setup: The application detects the headset, described by the VRDevice object, and targets it for presentation.
- Per-Frame Rendering: Once setup is complete, a requestAnimationFrame handler is used to query pose data, render the WebGL scene for each eye, and submit it to the headset. Working with WebVR directly requires knowledge of JavaScript and WebGL.
- HelloWebVR Sample: Introduces the WebVR API by describing how to access devices, request presentation, and handle any related errors. Illustrates how to enter VR presentation without user interaction. This is a non-standard Carmel Developer Preview feature implemented to support VR-to-VR links. Documentation — Live Sample.
- Gamepad Sample: Illustrates how to access Gear VR touchpad, exposed in Carmel as a custom web platform Gamepad device. Learn how to handle taps and perform swipe detection. We expose the device in a raw form so you can create more complicated experiences, like directional pad-based movement. Documentation — Live Sample.
- HTML5 Navigation Sample: While in Carmel, the Gear VR’s back button behaves just like the back button within the browser, taking you to the previous URL. Use the HTML5 Navigation model to hook this button for menus and navigation of your own VR experience. Documentation — Live Sample.
- Pano Sample: Learn how to implement the most prominent use case for WebVR—display of 360 photo panoramas. Without relying on outside frameworks, this sample illustrates how to render equirectangular and cube map formats, including both mono and stereo images. Documentation — Live Sample.
Debugging Your Experiences
One of the most important features of the Carmel Developer Preview is the ease of debugging. Being based on the Chromium source code base means you can use the existing power of Chrome Remote Debugging for Android. This gives you access to familiar tools including the console, timeline, profiler, and DOM viewer, as well as the address bar and refresh features.
If you’re already debugging on Android, you’ll probably find that you can skip our instructions and go straight to using ADB over Wifi. However, if you haven’t yet set up your device or have never connected your Android device to your development machine, don’t worry—we’ve got you covered. You can find our full instructions for setting up debugging on our
Developer Center.
Debugging doesn’t have to be done on the device though! By falling back to single-eye rendering on the desktop, most of your experience—written in WebGL—can be debugged before you ever launch Carmel. Here are some quick tips for debugging locally before you dive into VR:
- Know how to set up your camera to match that of your device. This means figuring out a common eye buffer size and field of view. We tend to use a 90 degree field of view and a buffer size of 1024 x 1024 (a single eye).
- You only need to render one eye, but have an adjustment so you can pick which eye to render. This lets you swap between the left and right eye and look for bugs. Alternatively, you can render both eyes.
- Mouse and device orientation can be used to mimic head orientation so you can change your view dynamically as well. Expect that first-generation frameworks with WebVR support will bake these interaction features in.
What Are the Next Steps for Carmel?
Carmel is a suite of technologies aimed at enabling web content in VR. We have a lot of exciting projects in the works to make more content available to you while in VR:
- React VR: At OC3, we announced our work on React VR, which will let you use a React-based model with a powerful set of pre-defined UI components to build the next generation of VR and 360 experiences that look great in both VR and existing browsers.
- Carmel Browser: Our next major milestone for Carmel is a browser capable of navigating not just VR content but also existing 2D content. This is a step we’re taking alongside our partners at Google, Microsoft, and Mozilla, who are working hard on delivering this key milestone for the web.
- Partner Collaborations: As part of a community engaged in developing the web standards for this new computing platform, our actions also help our partners deliver on their goals. In the coming months, we hope to celebrate major browser releases from Google, Microsoft, Mozilla, and Samsung that deliver support for the WebVR API across most major platforms.
Have Fun and Let Us Know What You Think!
We hope you have as much fun creating experiences in the Carmel Developer Preview as we did setting up our samples and galleries. We learned a lot while going through this process, and we hope you'll share in our learning curve as well. Please send us your thoughts using
our feedback form.
We also look forward to seeing what you build—please share using the hashtags #WebVR and #Carmel or tag
@JustRogDigiTec so we don’t miss it!