3

How to get started with WebVR?

ow-to-become-a-WebVR-pro

by Bilyana Vacheva

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

A-frame

A-frame - WebVR Framework

A-frame is the easiest way to get started with WebVR. It is an independent open-source project, initiated by Mozilla. I recommend it to those of you who have limited experience with JavaScript. On A-frame’s website, you can find many examples and tutorials that will help you build your first VR experience without the need to write JavaScript. A big plus is that the A-frame community is very active Рmore experienced developers are frequently adding new components to the library. The best channels to engage with the community are slack and twitter (I follow some amazing developers there: @utopiah, @donrmccurdy).

React VR

React VR - WebVR Framework

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.

AFrame vs ReactVR Adoption

Three.js

Threejs - JS Framework

Three.js is the basis on which both mentioned frameworks were built. If you are an experienced JavaScript developer, I recommend that you start right away with three.js. It will let you dive deeper into 3D, which will give you a better understanding of WebGL, WebVR, and WebAudio. It will also empower you to create more complex WebVR experiences such as a new A-frame component for your peers. The cool thing about three.js is that it has an extensive documentation and a vibrant community of talented developers.

Babylon.js

Babylonjs WebVR support

Babylon.js is a JavaScript-based WebGL library similar to three.js. In v3.0 the developers added support for the WebVR 1.1 specification. The main difference is that Babylon.js was specifically created for game development with features like collision detection and antialiasing. Still, it is fully capable of general web graphics and animations. Find out more on how to use babylon.js for VR .

How about using directly WebGL?

I would not recommend diving into WebGL if you do not have any game development or strong JavaScript experience. WebGL could take years to perfect. If you want to get a VR prototype up and running in the next few weeks, it’s better to go with some of the already mentioned options. In another blog post, we share what was our approach in training a web developer to become a WebVR developer.

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:
 

<br /> <html></p> <p><head></p> <style> .button { display: inline-block; padding: 10px 20px; border-radius: 3px; background-color: rgb(0, 200, 50); text-decoration: none; color: #fff; } </style> <p></head></p> <p><body><br /> <a class="button" href="lensvr:https://vr.with.in/">Launch LensVR</a><br /> </body><br /> </html><br />

 

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

 

  • WebVR.info
  • WebVR.rocks
  • 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

Did you like the post? Share with your friends:

Comments 3

  1. Pingback: What is the best framework to get started with WebVR? : WebVR – FBNews

  2. Pingback: LensVR: How to find a WebVR developer for your team?

  3. Pingback: The WebVR UI of the future

Leave a Reply

Your email address will not be published. Required fields are marked *