A-Frame – 3D Websites for the Masses

March 4, 2016

Most web designers know how to create 2D layouts using HTML and CSS. However, until recently, 3D was the undiscovered country. 3D effects were sometimes created using 2D images and CSS, but real 3D exploration of a virtual environment belonged the the game world alone.

Enter A-Frame, an initiative to create 3D markup comparabel to HTML-based web pages. It is in some ways a “back to the future” – a retrofit of the old VRML standard.

https://aframe.io/

a-frame

Source: A-Frame home page

In A-Frame, getting up a basic 3D scene is pretty simple. Go to the docs

https://aframe.io/docs/guide/

Getting your first shape into the web browser is just a matter of using A-Frame markup:

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-cube></a-cube>
    </a-scene>
  </body>
</html>

A-Frame is a form of 3D, but it is distinct from WebVR and the WebGL standard popular in browsers. The actual code is on GitHub at: https://github.com/aframevr/aframe/

What Can I Do With A-Frame?

Possibly the better question is what you won’t do. A-Frame can’t be used to build console-level 3D games. It is, if anything even slower than the relatively slow WebGL standard found in Firefox, Chrome, Edge, and other popular browsers.

Let’s compare:

WebGL – enables general 3D modeling and animation on the web.

WebGL icon next to HTML5 icon

WebVR – allows 3D worlds created in WebGL to power a VR headset like Oculus or Google Cardboard.

Mozilla WebVR logo

A-Frame – lets you put “fast 3d” onto your current web page.

AFrame.io home page logo

What A-Frame lets you do is jump in and explore. Today, the VR and AR worlds are moving so fast that it is more important to jump into the space. Waiting for “something faster” isn’t an option. And A-Frame allows ultra-fast development of simple 3D right in a standard browser.

What’s more, any web designer who is good at HTML and CSS will be able to master A-Frame in a couple of days, and begin turning out 3D worlds. Contrast that to the years that might be needed for native coding the same thing in C++. It’s ideal for a lean VR or AR startup seeking to make their website match their 3D apps.

A-Frame Enables 360 Video

The other thing that A-Frame lets you do right away is explore 360 video. Instead of building a custom app, you can immediately load video into the framework. Using the Google Cardboard Camera app, you can collect 360 video, then load it into A-Frame. The following tutorial by Ben Foster at Purple Squirrels shows how simple it is to mix 360 video and WebVR into any modern web browser:

http://www.purplesquirrels.com.au/2016/02/using-cardboard-camera-frame-create-webvr-scene/

More Examples of the Easy Beauty of A-Frame

The best way to decide is to look. And, despite the newness of the standard, there are lots of A-Frame examples already out there. What they show is the potential of A-Frame, but also how easy it is to create an A-Frame world. Here’s an example of a Reddit exchange:

I have an art website and would like to import the images from each persons profile in their own VR gallery room. Wheres the best place to start I’m very new to coding.

[–]dustingetz 3 points

[–]hyperboutique[S]

Thanks heaps I’ve created this so far http://vr.jaysalton.com/

Pizza, anyone?

A pretty basic example, but it shows what a lone developer with a few weeks of work might do.

http://carpedmt.github.io

Kitten Code

Kitten in 360 Video

3D Website Gallery

Some websites already using WebVR. The following links goes to an interesting example of 3D navigation replacing conventional web menus, with lots of individual projects:

http://infiverse.com

Experiment at Low Cost

A-Frame Plus WebVR lets you experiment with Virtual Reality at a tiny fraction of the cost $$ of a native VR or AR app. Even if you ultimately “go native,” you can do fast prototyping of concepts in this medium, and share them anywhere that a modern web browser can be found.