What is WebVR?
WebVR is an experimental JS API that empowers web developers to create VR experiences. If you are already using WebGL to render interactive 3D graphics in a browser, the switch to WebVR will be a natural continuation of your work. All other web developers can start by using a higher level of abstraction than WebGL.
In the last months, a lot of people asked me what is a good starting point with WebVR, so I decided to share a list of resources I find helpful.
How to get started with WebVR?
So, which is the best framework to get started? There is no right answer to this question because it depends on your experience and what you want to achieve. Each WebVR framework offers a different level of abstraction – find the one that matches your experience and feels most comfortable to work with. Do not hesitate to start experimenting if you have a limited or no experience with 3D or VR because the WebVR community is positive and welcoming. You can join the slack channel, ask questions and share your work with others.
Frameworks & Libraries
If you are a React developer, you will be glad to learn that you can use the same design to build VR project with React VR. React VR was announced just last April and it is already starting to catch up to A-frame regarding adoption levels. The story of the Airbnb team, and how they used React VR to create their first VR experiments, is a great example of how easy it is for React developers to get started with VR. I also want to mention Centroida, one of the teams in the WebVR incubator we wrote a blog post about, who are building a WebVR UI framework based on React VR. You can use the framework to create fast prototypes of UI and test interactions with the different controllers.
How about using directly WebGL?
Which are the web browsers supporting WebVR?
There are several implementations of the WebVR 1.1 API which you could use to view and test your WebVR experience. (WebVR 2.0 is on the way)
Chrome 56+ for Android (support for Cardboard and Daydream)
Chromium Experimental Version for PC (Vive, Oculus, Daydream, Cardboard)
Firefox 55 on Windows (Vive, Oculus on Windows)
LensVR Technical Preview (GearVR) – a browser designed specifically for VR and AR
Microsoft Edge Windows 10 Creators Update
Samsung Internet Browser (GearVR and Cardboard)
Oculus Browser (Oculus)
Servo (Vive)- an experimental web browser layout engine being developed by Mozilla
JansuVR – an independent WebVR browser
What is the easiest way to test a WebVR experience?
Launch your WebVR experience by using an ovrweb protocol and an Android 2D browser such as Chrome. For example, if you are using LensVR Technical Preview, you can just tap a link and launch the URL that follows the protocol. Here is an example of how to use the ovrweb protocol:
After you launch the VR experience, use standard web navigation methods to navigate to other experiences.
Here is a list of additional resources you could find helpful
- UX of VR is a website listing helpful resources about UX of VR. If you are a UX designer and you are looking how to get started with WebVR, this is the best place for you.
- Google Blocks – a tool for HTC Vive and Oculus Rift, allowing you to create 3D objects in Virtual Reality. You can also download already created 3D models for free.
- Blender is a free 3D modeling tool. You can use it to design 3D models and experiment with them in WebVR.
- SketchUp is also a free and easy to use 3D modeling tool
- Rodin – a new JS library, packaged with an editor and several VR templates that you can edit.
I hope that the blog was useful for you. I am excited to see what you will build, so please do share your projects at @billy.vacheva.
Author: Billy Vacheva