Virtual Reality and the Web

WebVR is, as it sounds, Virtual Reality on the web! That means you can visit a website in a browser and “enter into it” like any other VR experience. There are lots of differnt ways to experience VR these days. You might have experienced VR on your phone using a “Cardboard” viewer, or maybe you’ve experienced VR before in an installation in a museum or gallery. Or perhaps you’ve used something like an Oculus Rift or HTC Vive attached to a PC, or maybe you’ve used one of the new “standalone” (as in all-in-one, no PC required) headsets like the Oculus Go or Lenovo Mirage (Google Daydream).

There are plenty of ways to experience VR, but if you want to create a VR experience and share it with others you need to get your work into various “app stores.” These are software silos, walled gardens controlled by various different gate keeps. If you want to create a VR experience for iPhones you have to get Apple’s permission, if you want to make one for Android (Google Daydream or otherwise) you need to get into the Google Play store. The same goes for Oculus and HTC Vive (Steam store). Beyond the obstacles this ads to sharing your work, you also limit your audience to whichever device/store you submit to (unless of course you go through the effort to submit to them all).

The best way around that is to use the Web, the largest, open and decentralized platform on the planet. All the various VR devices mentioned above have access to a browser, which means they have access to the Web. So if you put your work on the Web not only do you get to skip the “middle man” but your work is immediately accessible by anyone with a VR headset (or mobile phone) and access to the Internet. We won’t be discussing how to publish on the web in this workshop, but A-Frame has a helpful page on various ways to get your work online (and if you need help with that you can always send me an email)

For examples of projects you can try right now made with WebVR check out the https://webvr.directory/

Virtual Reality has been around a long time, years even decades depending on when you start the clock, but VR has never been more accessible than it is today. This is due in part to cheaper consumer hardware from the Oculus Go ($200) to the HTC Vive ($499). Today it’s being used in everything from education, to surgical training, as evidence in court cases and for physical therapy and mental health. So it’s no surprise that artist’s have been experimenting with VR as well. New Media artist Evan Meaney’s piece ++ We Will Love You For Ever was recently picked up for distribution by the Video Data Bank at the School of the Art Institute of Chicago (their first VR piece in the collection) and pieces like “Real Violence” by Jordan Wolfson have been exhibited in major shows like the Whitney Biennial. Artists Alfredo Salazar-Caro and William Robertson have even started a digital museum for digital art (DiMoDA) exclusivly focused on VR art works. For more inspiration check out Creative Applications’ list of VR art projects.

As exciting as it all is, I would be remiss if I didn’t mention some of the dangers. Like so many other gadgets of our day, there are companies who see VR as yet another way to gather and monetize our data (check out this article on “eye tracking” in vr). As with all tech, it’s important to keep a critical eye on the way VR effects society as it evolves.

the Workshop

The sections linked below are high-level recaps of all the things we’re going to cover in this workshop. I’ve tried to summarize all of the main points here for reference, but you should not consider this a substitute for your own notes. I recommend taking lots of notes! We’ll be using the A-Frame library to create WebVR experiences, so after completing this workshop visiting the A-Frame Docs is a great way to continue learning. We’ll also be using a few community developed components (additional libraries), to explore other community developed components check out A-Frame Registry

Keep in mind, the idea behind this workshop is to learn to code our own VR experience from scratch but there are plenty of other creative uses for VR, for example lots of artists are starting to create VR “drawings” using VR apps like Google Tilt Brush or Mozilla’s A-Painter (itself built with A-Frame). You can also use VR apps to create 3D models using apps like Google Blocks, Supercraft or Gravity Sketch, which might be a more natural way to model 3D objects than doing it with a mouse on a screen. There are even VR apps for creating frame by frame animations like Norman and Quil. So while we’ll be approaching VR as a medium itself in this workshop, you might also consider VR as a tool for making other kinds of work.

HTML Code

We’re are going to be writing HTML code or “Hypertext Markup Language.” If you’re familiar with HTML great! If not, then this workshop will also serve as an introduction to the basic syntax/style of HTML (albeit an unconventional one, as most “intros to HTML” start with basic examples like text and not VR). If it’s been a while since you’ve written HTML here’s a quick recap.

HTML is a kind of markup language. we use html elements in order to give our html page structure and organize our content. An element usually consists of a pair of tags, an opening tag has a < followed by characters that specify which tag it is, and then a >. the closing tag is the same except with / before the characters. Between the opening <tag> and the closing </tag> is where we place our content.

html element

(a list of HTML elements can be found here if you’re curious, but we’ll be using an entirely different set of elements provided by the A-Frame library)

Inside the opening tag (between the <tag and the >) you can include attributes. Attributes are used to add extra information about that particular element. The first part of an attribute is the attribute name. It indicates what kind of extra information your going to add to that element. These names are specific, always lower case and followed by a = the second part of an attribute is the attribute value, this is the info or setting for this attribute, different elements can have different values, but they should always follow the = and be surrounded in " "

html attribute

Project Setup

You’ll need the following software

Code Editor: Atom (or whichever you prefer)
Desktop Browser: Firefox (or whichever you prefer, though keep in mind, if you have a VR headset attached to your computer, you’ll need a WebVR capable browser)
Mobile Browser: whichever you have on your phone is probably fine.
VR Headset Browser: on standalone VR headsets we’ll be using either Firefox Reality or Supermedium

Setting up a project

setup

Every/any code-based project should always be contained in a folder, so the first thing you always need to do is create a folder (aka a “directory”), I called mine “webvr”. Open that folder in Atom by either dragging the folder onto the Atom icon, or open Atom and then in the menu click File > Add Project Folder…

Once the folder is open in Atom, right mouse click the folder icon and choose New File, then name it index.html this will be our main file and our starting point. A couple of important rules when naming files and folders are:

avoid spaces! While technically you can have spaces in folder/filenames, you want to avoid this because it can cause confusion when writing code. If you really need a space use a - or _ instead
keep it all lowercase! Similarly to avoid confusion when coding and writing filepaths it’s best to keep things consistently lowercase (avoid capital letters).

While in Atom, write something like Hello There! in your index page. Now open your index.html page in Firefox to see the result in the browser. From here on out you’ll be making changes to your file in Atom, then saving those changes, then refreshing your browser to see the results.

Running a local server

server

While many of the examples we’ll cover can be viewed simply by opening your index.html page in a browser directly. Some of the examples reference media assets like images and videos which (because of browser security reasons) can only be requested through a “web server.” To run a web server on your computer:

open a terminal (search for “Terminal” in spotlight)
then type cd (with a space after it) and then drag and drop the folder you just created for your project into the terminal.
you should see the “path” to your folder appear in the terminal (ex: cd /path/to/folder), click enter.
now that you’re in the folder it’s time to run a local server using python, enter: python -m SimpleHTTPServer that should work if you have python 2 installed on ur computer (Mac and Linux usually do by default). If that doesn’t work, you might have python 3 installed, if that’s the case try python -m http.server. NOTE: neither version of python come pre-installed on Windows, so if you are on a Windows machine you’ll need to install python yourself first.
once the server is running open a browser and visit http://localhost:8000 and you should see your index page.