Getting Started with WebVR Getting Started with WebVR Jul. 6th, 2017 Patrick Coffey
VR Hero Image

Getting Started with WebVR

July 6th, 2017

Four Kitchens is diving into web-based VR application development. We whipped up a demo VR experience for DrupalCon Baltimore in April of this year, and we have a few more projects we’re putting together. In the spirit of sharing knowledge, I’m going to walk you through the basics of setting up a browser-based WebVR project using A-Frame, React, and aframe-react in this post. Let’s get started!

The Toolchain

Setting up tooling and a build system is probably the hardest part in getting started with WebVR. Thankfully, since building WebVR applications is a lot like building standard web applications, we can re-purpose well documented, industry standard tools. I’ve put together a boilerplate with a simple Node.js application, which contains Webpack build/dev config, linting, Babel config, etc. It’s a great place to get started:

  1. Clone the boilerplate repository onto your local machine.
  2. Make sure Node.js, NPM, and Yarn are installed.
    1. recommend using NVM to install Node.js
    2. to install Yarn, run: npm install -g yarn
  3. In the root of the boilerplate repository, run yarn. This will install all project dependencies.
  4. In the root of the boilerplate repository, run yarn start.
  5. Yarn will output Project is running at https://ip:port. Navigate to that ip/port in your browser, and allow the project to load despite the SSL certs being nonexistent.
  6. You should see a simple scene with a sphere, cube, cylinder, and plane.

WebVR Local Development Server?

When you’re writing an standard web application, you typically end up running a local development server, which serves your application on a port on localhost. This works fine for standard applications, but when you’re creating a WebVR application, you need to be able to develop and test everything in a VR headset. If you’re developing using a Google Cardboard or Daydream, this means you’ll need to access your development server on your mobile phone. This can easily be accomplished, and if you’ll take a look at the Webpack Dev server config in our boilerplate, you’ll see that your machine’s local IP is fetched and the development server is set to run on that IP. Once you have the server running, you should be able to load it up on a mobile device connected the same network as your computer.

Make a WebVR Application

In your favourite code editor or IDE, open up src/index.jsx from your cloned boilerplate repo, and let’s get to work! In the boilerplate and in this article, we’re going to be using A-Frame, React, and aframe-react, which allows us to create A-Frame components as React components.

You might ask… why use React? That’s a great question. React is a great tool for building WebVR applications for the same reason it’s a great tool for building standard web applications. React components are declarative, extend-able objects that provide simple tools around state and property management. These things make React very useful, especially in a 3D space. So let’s import a few things and create a basic React component.

In src/index.jsx:

In src/index.html:

Scenes and Skies

When building a WebVR application, you need to define a “scene”, which is a global object that defines the 3D space in which entities will be placed. Let’s define a scene in our AwesomeVR component:

The next thing we need to do is add what’s called a “sky”. A sky is a background color or 360° image that will become the background sphere that surrounds users in our VR app. To add a sky, we need to add an entity of the “sky” primitive, and give it either a color, or a 360° equirectangular image:

At this point, if you run npm run start or yarn start in the root of this repository, you should be able to load the page served by your dev server, and see a 360° environment with the sky you defined. Cool!

Entities

Now that we have a scene and a sky, let’s create some geometric components, or entities. We’re going to be creating this simple application. I’ll walk you through it in the code comments below:

Create your entities, save the file, and then re-visit your app in the browser. You should see something like this:

Testing in Daydream or Cardboard

Yes, you can see your WebVR application on your desktop browser, but seeing your app in a VR headset is very different, and as you’re developing, you’ll need to frequently test your changes in your actual headset. So pull out your mobile phone!

  1. Connect your phone to the same network that your computer is connected to (WiFi router).
  2. Open up a WebVR-compatible browser (Google Chrome or Safari).
  3. Type in the IP address and port number that points to your dev server running on your computer, and then load up the application.
  4. Click the VR mode toggle button in the lower right hand corner of the app.
  5. Slide your phone into your Cardboard or Daydream.
  6. If you’re using a Daydream, initialize your controller, after the initialization has been completed you’ll be taken to your app.

And violà! You’ve made a very simple WebVR application with A-Frame, React, and aframe-react. From here, you’ll want to take a look at the A-Frame documentation and read about all the different primitives and components at your fingertips.

This is the first of many posts about WebVR. In our next installation, we’ll be covering ReactVR, another WebVR framework. Until then, have fun playing with A-Frame!

 

Comments