Skip to Content

Blog

The sdg Blog is designed to show you who we are and what we're all about. Whether you're looking to read up on the latest technologies, trying to improve your soft skills, or wondering what we've been up to, our blog offers something for everybody.

Back

WebGL and A-Frame

Introduction

In the past, I’ve written several tutorials on using Three.js for creating 3D scenes. Three.js is a fantastic library that abstracts out all of the messiness of WebGL and allows the developer to focus on creating 3D scenes. So what is A-Frame and why use it?

A-Frame

A-Frame is an open source framework built by the Mozilla VR team that allows for the rapid creation of 3D and Virtual Reality scenes on the web. A-Frame simplifies the development of WebGL so much, that virtually any web developer or designer can begin creating scenes in minutes. It does this by wrapping the Three.js library and packaging it into neat little HTML elements. These elements allow you to build your 3D scene just the same way you build any other web page. You can create entire 3D scenes complete with animations and user interactions without having to write a single line of javascript, yet it is completely extensible so that you can create your own custom elements if you need to. Click here to see the results of this tutorial.

Be sure to visit the A-Frame website for lots of good information including documentation, examples, and general design principles.

Simplicity

So how simple can it really be? The answer is really, really simple, but in order to truly appreciate that, we need to go back and look at the progression from native WebGL to Three.js to A-Frame. To do this, we are going to compare the simplest of scenes, an animated cube, written in each of the three frameworks.

Native WebGL

Take a look at this tutorial written by the incredibly smart people at Mozilla called Creating 3D objects using WebGL. Does your head hurt? If you follow the link at the bottom of the page you can view the complete code on GitHub. The webgl-demo.js file is over 400 lines long! That doesn’t even include the accompanying html code that references 2 other javascript files that are needed to run that scene. 

Three.js

Let’s take a look at a comparable scene that was written using Three.js. Here is a short tutorial I wrote called Getting Started with WebGL and Three.js. Again, not a very exciting scene, but if you take a look at the source code, we have reduced the amount of javascript from 400+ lines of code to just over 50. That is a huge improvement in the simplicity and readability of the code. Not only did we cut down on the amount of code we needed, but you can see that Three.js has hidden all of the stuff that we don’t really care about like Shaders, Buffers, Samplers, and Uniforms. What are those and why should you care about them if all we want to do is display an animated cube?  You shouldn’t, and that’s the point of Three.js. It allows you to focus on the things that actually belong in your scene, like lights, cameras, cubes, etc.

A-Frame

Now let’s walk through the steps need to create the same spinning blue cube using A-Frame. To get started, go ahead and create a new html file. Open that file in any text editor and paste in the following code:

<!DOCTYPE HTML>
<html>
	<head>
		<title>Introduction to A-Frame</title>
		<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
	</head>
	<body>
		<a-scene> 
		 	<a-light type="directional" color="#ffffff" position="0 1 1"></a-light>
			<a-box color="#0033ff" width="10" height="10" depth="10" position="0 0 -40">
				<a-animation attribute="rotation" repeat="indefinite" to="360 360 0" dur="3000" easing="linear"></a-animation>
			</a-box> 
		</a-scene>	
	</body>
</html>

And we’re done.

There is no step 2. That’s it. 15 lines of HTML and we’ve created the same thing that took 400+ lines of code written in native WebGL, and 50+ lines of code using Three.js. Not only that, but 9 of those 15 lines of code are boilerplate HTML stuff that’s needed just so the browser recognizes it as a web page. Let’s take a look at those other 6 lines to see what’s going on.

A-Frame Elements

As I stated before, under the hood, A-Frame is using Three.js to build and run our scene, but A-Frame has taken the abstraction to another level by building all of that functionality into handy little HTML elements. To create this scene, I used four different elements: a-scene, a-light, a-box, and a-animation.

a-scene

The first element used is the a-scene element. Every element you add must be contained within this element. Adding the a-scene element does more than just add a container for you to define the rest of your scene. In fact, when going from Three.js to A-Frame, this simple element is what allowed us to eliminate so much of the code from our Three.js example. You may have noticed that we didn’t need to define a canvas or a renderer, we didn’t have to attach our renderer to any HTML elements, we don’t need to worry about the requestAnimationFrame, and we didn’t even need to define a camera. This is because that simple element does all of that for us. We could also remove the a-light element from our scene. That’s because the default setting for the a-scene element is to include a camera, ambient light, and one directional light unless one is explicitly defined.

a-light

I didn’t like the default lighting so I added the a-light element. Once a light element is defined, A-Frame will remove the default lighting setup and only use what you have defined. The a-light element has many properties that can be set to tweak the lighting to get the desired effect. A few of the more important ones to be aware of are: type, color, and intensity. Type allows you to define which type of light you want to use: ambient, directional, hemisphere, point, and spot. Color obviously allows you to set the color of the light, and intensity allows you to define the overall brightness of the light. For more information on the different types of lighting, check out my post on WebGL and Three.js Lighting.

a-box

The a-box element does exactly what you would think it does.  It adds a box to the scene allowing us to set its initial width, height, depth, and location.  We could also set its initial rotation by adding the rotation property to the element.

a-animation

The a-animation element, like the a-scene element, is deceptively simple. The animation element can be added to any entity within the scene, and can be used to animate virtually any property of that entity. Not only that, but you can add as many a-animation elements as you want to create complex animations.

To demonstrate, add the following line as a child of the a-box element:

<a-animation attribute="position" repeat="indefinite" direction="alternate" from="-20 0 -40" to="20 0 -40" dur="3000" easing="linear"></a-animation>

What you should see when you refresh your browser is our cube spinning and bouncing from side to side.

Taking a look at the a-animation element you can see that we set the attribute property to be ‘position’.  This tells the animation what property of the parent is to be animated.  We set repeat to be ‘indefinite’ so this animation will go on forever.  We set the ‘from’ and ‘to’ properties to the start and end positions of the animation.  The direction property is set to ‘alternate’, telling A-Frame to alternate between the ‘from’ and ‘to’ positions every other animation.  We’ve set the dur property to ‘3000’ which tells A-Frame this animation should take 3 seconds, and A-Frame allows us to define a wide range of easing functions to be used for the animation.

Conclusion

A-Frame is a new framework by the people from Mozilla that manages to take Three.js and simplify it even more.  In this tutorial, I tried to cover the very basics of what is going on under the covers with A-Frame, but it does so much that it can’t possibly be covered in one single blog post. Stay tuned for more…