Build a VR web application in 15 minutes

419 readers like this.
Build a VR app in 15 minutes with Linux

Craig Oda. CC BY-SA 4.0.

In 15 minutes, you can develop a virtual reality application and run it in a web browser, on a VR headset, or with Google Daydream. The key is A-Frame, an open source toolkit built by the Mozilla VR Team.

Test it

Open this link using Chrome or Firefox on your mobile phone.

Put your phone into Google Cardboard and stare at a menu square to switch the 360-degree scene.

Fork it

Fork the sample repository from GitHub. Change directory into the repo.

If you have 360-degree images, you can drop them into the img/ sub-directory. If you don't have 360-degree images, you can get started with the open source Hugin panorama photo stitcher. The boilerplate app includes RICOH THETA media I took at a meetup in San Francisco.

Create thumbnails

The menus in the headset are standard images that are 240x240 pixels. You can use GIMP to create the images. A-Frame handles the perspective shifts for you automatically.

Edit code

If you use the same image file names and overwrite 1.jpg in /img, you do not need to edit the code at all. If you want to extend the program or modify it with your own filenames, change the id and the src in index.html to match your files.

<body>
  <a-scene>
    <a-assets>
      <img id="kieran" src="https://opensource.com/img/1.jpg">
      <img id="kieran-thumb" crossorigin="anonymous" src="https://opensource.com/img/kieran-thumb.png">
      <img id="christian-thumb" crossorigin="anonymous" src="https://opensource.com/img/christian-thumb.png">
      <img id="eddie-thumb" crossorigin="anonymous" src="https://opensource.com/img/eddie-thumb.png">
      <audio id="click-sound" crossorigin="anonymous" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"></audio>
      <img id="christian" crossorigin="anonymous" src="https://opensource.com/img/2.jpg">
      <img id="eddie" crossorigin="anonymous" src="https://opensource.com/img/4.jpg">

Scroll down and edit the section for the menu links.

<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#kieran"></a-sky>

<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
  <a-entity template="src: #link" data-src="#christian" data-thumb="#christian-thumb"></a-entity>
  <a-entity template="src: #link" data-src="#kieran" data-thumb="#kieran-thumb"></a-entity>
  <a-entity template="src: #link" data-src="#eddie" data-thumb="#eddie-thumb"></a-entity>
</a-entity>

Upload to GitHub pages

Add and commit your changes:

git add *
git commit -a -m ‘changed images'
git push

Open your app on a mobile phone at http://username.github.io/360gallery.

Next steps

This is a brief taste of A-Frame to illustrate that WebVR is easy and accessible to web developers. Go to aframe.io to see more demos. Although the display of 360 images is not true VR, it is easy, fun, and accessible today. Using 360 images is also a great way to start to understand the basics of augmented reality.

Take your own pictures with a standard camera and stitch them together or buy or borrow a 360-degree camera. The camera I used supports 360-degree video files and live streaming.

Troubleshooting

The application won't run from a local file that you open in your browser. You must either run a local webserver like Apache2 or upload it to an external site like GitHub Pages for testing.

If you're using an Oculus Rift or HTC Vive, you may need to install Firefox Nightly or experimental Chromium builds. See the current status of your browser at Is WebVR Ready?

360-degree video works on desktop browsers. I've experienced some glitches on mobile devices. The technology is improving quickly.

Tags
User profile image.
First elected president and co-founder of Tokyo Linux Users Group. Co-author of "Linux Japanese Environment" book published by O'Reilly Japan. Part of core team that established first ISP in Asia. Former VP of product management and product marketing for major Linux company. Partner at Oppkey, developer relations consulting firm in Silicon Valley.

2 Comments

I will try it thanks

i need some help.
i would like that every time i click a thumbnail it will open a new page with different thumbnails and a new VR pic.
how can i add that to the code?
thanks?

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.