Teaching WebVR: Using A-Frame and Glitch for intro to 3D programming summer course
This blog post is a summary of our experience teaching a WebVR lesson at a summer enrichment program for middle school students using A-Frame, Glitch, a standard computer lab, and the students’ mobile phones.
In July I was kindly invited to help lead a half-day session as part of a virtual reality course taught by Azine Davoudzadeh. This course was part of the “Imagineering” program — a STEAM enrichment program supported by the San Ramon Valley Education Foundation. Azine is an experienced media teacher who runs the San Francisco Ed Tech Connect meetup and helps other educators explore using VR in the classroom.
Class Format and Equipment
Approximately 20 students attended this VR course ranging in grades from 6th to 9th. We had 5 stellar mentors who were older students with some programming experience.
The classroom had 20 desktop Mac computers, a projector for the teacher’s display and a white board. We asked the students to bring in their smart phone, but I’m pretty sure they would have brought them anyway. Azine made available Google Cardboard headsets and a few Ricoh Theta-S 360° cameras to borrow.
The course went from 9 am to 12 noon with a break about halfway in the middle.
Detailed Lesson Plan
This is a detailed lesson plan for a 2–4 hour session. It is intended for beginners to HTML and web programming. It assumes each student has a computer with Internet access with a modern browser like Chrome, Firefox or Edge and also a smartphone with Internet access.
1) What are we making? Today’s goal is to create a “3D Postcard” — a 360° photo with 3D objects or text in the scene that you can share with family and friends. You can share this project with a simple link and view it on any computer with a browser, on a smart phone (with optional Cardboard VR mode), or even an HTC Vive or Oculus Rift in VR mode using a WebVR compatible browser!
Here are a few actual 3D Postcards that the students made in this class:
2) A-Frame — what is it? Basically, it’s 3D on the web.
- Let’s see some examples: Open up your web browser and type in “aframe.io”. Click on the different names shown under the
Examplesheading in the left-hand nav to load different demo scenes. - Now try the same examples on your phone. What is going on? What is your phone doing differently than the desktop? On your phone, try pressing the button in the lower-right hand corner and put it in your Google Cardboard.
- How do you usually download games or apps on your phone? Why is this experience different than downloading an app?
3) How does it work? (A Super Fast Primer on HTML)
- These are just regular HTML websites with “special 3D powers”! First, let’s make sure we’re all familiar with what an HTML website is.
- A website is made up of elements or “tags”. These tags are like instructions for your computer to draw the web page. (Do your parents or teachers help you with making a “to-do” list for chores or assignments? This is a similar idea — you’re making a to-do list for the computer to follow instructions to draw the webpage.)
- A tag must (usually) be opened and closed:
<something></something>. Tags can “nest” or include other child tags inside them. - There’s a simple pattern for HTML websites. It’s easy to remember — what’s above your neck? (Your
<head>) What’s below?(Your<body>). Enclose those in an<html>tag and BOOM you’re a web developer!
<html>
<head>
( boring stuff goes inside here )
</head>
<body>
( the good stuff goes inside here )
<body>
</html>4) Now, let’s try cloning an example to make our own 3D scene! Here’s where the magic of Glitch as a teaching tool comes in. Instead of starting from scratch we will simply “remix” an existing basic demo from the A-Frame website.
- Go to aframe.io, click the “Hello World” scene.
- Click on “View Source”. (This should link you to the Glitch project https://glitch.com/~aframe.)
- Click the green “Remix” button.
- Click on “Show (Live)” to see the output of your project. (This usually opens in a separate tab. You can keep this open and tab back-and-forth as you make changes, or create a split screen view that shows both code and live output by manually resizing your browser windows.)
- Now let’s go through the code and see how this works. Go back to the tab with the code that you “remixed” from the A-Frame Hello World scene. Click
index.htmlon the left hand side. This shows the entire code that makes up the page. Now your screen should look something like this:
- Let’s review the code. Can someone remind us what are the 2 parts of the HTML page? (The
headandbody.) - Can you guess what each line in the
headdoes by looking at lines4–6? (Thetitletag displays at the top of the browser window and tab. Themetatag is used by search engines to describe your page. Thescripttag loads A-Frame to do all this cool 3D stuff.) - What’s going on in the
body? (It’s where the real action is going on. You’ll notice ana-sceneelement that has 5 “primitives” below. A “primitive” is a special element that A-Frame provides as a basic building block of a 3D scene. Thanks to these built-in primitives, this 3D scene is defined in just 5 lines of code.) - Each primitive element also has “attributes” inside of its opening tag. For example,
<a-box>hasposition,rotation, andcolorattributes.
5) Let’s start changing things! (Note, if you are not able to edit code in your Glitch project, repeat the instructions in the step #4 above and make sure you click “Remix”.)
- Try changing the
positionattribute of thea-boxto1 0.5 -3(by simply removing the negative symbol in front of the number one). Switch back to your output by clicking “Show (Live)”. What happened? Try changing the second value from0.5to1.5. What happens now? - What do you think the first number in the
positiontriplet represents? What about the second and third? (These representx,y, andzcoordinates on a 3D graph.) - What happens when you change
scaleorrotationvalues of some of the other primitives? What do the triplets of numbers represent forrotationandscale? - What happens when you try rotating the
sphereorboxby 90°? Why don’t you see anything change?
Sometimes switching back and forth between the Glitch code editor and the live view can get tedious. An easier way to quickly modify your A-Frame scene is using the “A-Frame Inspector”. While looking at your scene in the live view, press ctrl ,alt and i at the same time to load the A-Frame Inspector.
Once the inspector loads, click on an element on the left-hand side such as the <a-box>element in the screenshot above. This will open a pane on the right-hand side of the screen that allows you to modify attributes like position and rotation by simply clicking and dragging the mouse or typing in new values.
The inspector is a powerful tool and you can read more about its features here. However using Glitch together with the A-Frame inspector is a little tricky. Changes to your scene made in the inspector will not be saved in Glitch. You must edit your Glitch project manually to save the new values. Also, by default Glitch will refresh your live view immediately when you make a change, closing your A-Frame inspector and the values of the changes you made.
The simplest solution to this problem is simply jotting down the new values you’ve created from the inspector down on paper or Notepad (PC) or TextEdit (Mac). The inspector has a copy to clipboard feature but that is not always reliable and sometimes confuses students with all the extra attributes it copies. You can disable auto refresh on a Glitch project but that requires creating an account.
6) Now let’s try adding some new shapes! A-Frame comes with a variety of built-in primitives or shapes that we can place in our scene. Here are a few examples of shapes that you can add to your A-Frame scene:
<a-ring color="teal" radius-inner="1" radius-outer="2"></a-ring><a-cone color="tomato" radius-bottom="2" radius-top="0.5"></a-cone><a-tetrahedron color="#FF926B" radius="5"></a-tetrahedron><a-torus color="#43A367" arc="270" radius="5" radius-tubular="0.1"></a-torus>
- A-Frame has a bunch more primitives to play with, check out the Documentation for much more info. You must scroll nearly to the bottom of the left-hand side nav in order to see the full list of primitives.
7) Let’s add a 360° image from our Ricoh Theta camera! Azine had made available a few 360° cameras and the students had already taken pictures the previous day.
It was easiest for her to download the pictures from the Ricoh Theta and then provide them to the students through a shared Google Doc that had links to the photos for the students to easily access, instead of having each student pair the Ricoh Theta with their own phones. Using the shared Google Doc had an added bonus that those pictures were made available for other students — this also helps provide images for students who weren’t able to take their own pictures or who simply wanted to try making projects with others’ pictures.
Regardless of the 360° camera you use and the process to get them off the camera to the students, these images should be saved from the camera as equirectangular jpeg files. The student should then download them to the local computer. (When the photo is open in its own tab right click and then click “Save image as…”).
Next we had each student upload at least one of the images into Glitch so they could use it in their A-Frame project. In the left-hand side of the Glitch code editor, click assets to show the assets.
The Glitch asset manager is really handy for quickly uploading static files like these 360° photos to your project. It handles annoying web developer things like CORS permissions silently in the background so you can focus on learning instead of debugging silly dev environment problems. We instructed the students to drag and drop the files in from their download folder to the browser as the interface suggests, but we found it was sometimes easier for students to click the “Add asset” button which provides a dialog box for selecting a file to upload.
Once the image is added to your assets view in Glitch, you should see it appear with a preview thumbnail. Next we want to use this file in our project. Click the thumbnail and you should see a dialog box that pops up with a button to Copy Url.
Click the Copy Url button, then move back to your index.html file with your A-Frame project. Find the existing line with the a-sky element and remove the color attribute and replace it with asrc attribute with a link to the URL of the file that you just copied. So it should go from a line like this:
<a-sky color="#ECECEC"></a-sky>to a line like this:
<a-sky src="https://cdn.glitch.com/2f8a2fe2-d41c-4c52-a97c-e50622b7d4b7%2FR0010050-2.jpg?1501176296084"></a-sky>Now go see your project. You should see your 360° photo as the sky of your scene. For maximum effect, this is a good time to try looking at your project from your mobile phone in Cardboard mode.
8) Finally, let’s add some animations! To add that last bit of flair we can use a few lines of code that change an attribute of an element over a given time period, resulting in the object moving or rotating. Although each individual animation command is simple, by offsetting animations across multiple objects you can create complicated scenes that appear to be a work of art!
One of my favorite examples of chaining animations together is another student created A-Frame project from a different class. The “3D Postcard” concept was inspired by a more complicated “Kinetic Sculptures” project by jd pirtle where students combined many simple individual animated shapes to create a complicated looking whole.
We’re going to start with something more simple on our “Hello World” scene. Let’s start by finding this line:
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>Let’s add an animation to rotate this cube by 90°. You need to add the animation code in between the opening and closing tags of the element which you wish to animate.
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">
<a-animation
attribute="rotation"
from="0 45 0"
to="0 135 0"
direction="alternate"
dur="1000"
repeat="infinite"></a-animation>
</a-box>We have added some line-breaks so that the text fits on the projector in front of the classroom. This new syntax can be a bit confusing but the space and line breaks don’t affect how the scene is rendered. You can format all attributes on one line instead which can be helpful when you add more animations to your scene.
If you’ve done this correctly you should see the box in the Hello World scene rotating 90° every second in an alternating direction.
9) Going beyond. With these basic building blocks you can now create a wide range of animated 3D scenes that work on any device from a PC to smartphone or even VR headset. But don’t stop there! Here are some ideas of projects and other things you can add to your 3D scene:
- Try adding textures to your other objects! Use the same method for adding a 360° image to the sky element but applied to other objects to quickly add an image as a texture.
- Create “augmented reality” by annotating your 360° photo. Use the
ringprimitive, adjust its position to move it 10 units away from the center of the scene and the adjust its scale, radius or other attributes to highlight a certain part of the panorama scene. You can add also text using the A-Frame text component, documentation here. - You can make more complicated scenes with models from the primitive shapes and the ability to add textures and animations. Can you make a robot with waving arms? Or create a a solar system with rotating planets? Or maybe create a space ship or an airplane that flies through the air? Or annotate outdoor 360° pictures with names of the plants, people or animals in the scene?
- Look at the rest of the A-Frame documentation for other features that we didn’t have time to learn in this first class. Look up “laser controls” for info on adding interaction to your scene or “shadows” to add realism.
How did they like it? WOW and AHA Reactions!
Here are some of things they liked:
- WOW! Seeing their own 3D scene from their computer show up on their phone moving with the smartphone’s accelerometer, and then putting the phone inside the Cardboard headset
- AHA! Changing attributes of objects and seeing how it affected the 3D scene, sometimes as they expected but often not, which presented a learning experience
- WOW! Adding animations and seeing them work
- AHA! Getting a piece of code to work after getting an error or not seeing what they expected
- WOW! Seeing the effect of adding a 360° image to their scene’s sky element
- AHA! Realizing the same attribute that adds a 360° image to the sky can also be applied to other objects
- WOW! Seeing the work that other students created
What worked well?
- Mentors — Without the student mentors this event would not have been nearly as successful. Throughout the course they provided 1-on-1 assistance on everything from typos to missing brackets in html tags and more complicated problems like debugging multiple errors on a page. Their help made a big difference!
- Glitch — This platform is an amazing educational tool for teaching web development. Alternatives such as codepen are viable options, however Glitch’s prominent “remix” cloning feature and its simple UI to handle uploading and hosting of large binary files such as 360° images make it the best I’ve seen.
- A-Frame Website — The A-Frame core contributors have done a great job of clearly documenting the platform and providing copious examples. This is a great resource.
- HTML Basics Lesson — The short HTML basics lesson proved to be valuable, especially as the exercises became more complicated. It felt rudimentary to me when writing the notes and I was worried the students would not pay attention, but it was critical to make sure they had the basic vocabulary of an HTML document to understand the code changes they needed to make and later to explain errors they encountered.
- Self Discovery — The more latitude they had to accomplish a task, the more engaged they seemed to be. For example, the early tasks of explicitly changing a value from one to another did teach some basic lessons but was not nearly as much fun as “change the code to make the box spin” and letting them experiment with the right attributes to change with the animation component to accomplish this.
- Photography / 360º — The integration of 360º images using the Ricoh Theta-S camera was a key part of the fun of this approach to learning A-Frame. The 360º offered a rush of creativity with a relatively simple process by sharing the downloaded photos and using Glitch to host them. I think 360 photography could be a bigger part of this course.
- Sharing and Teamwork — The students learned a great deal from each other. I was impressed by how the helped answer each other’s questions and get inspiration from their friends and neighbors using trial and error to make new things. The Glitch short URL names helped us feature projects on the teacher’s projector and allow the students to type them into their browser to see the scene or copy code.
What was difficult? What to improve for next time?
Syntax errors were the most difficult part of the course. It can be frustrating for a page not to load as expected because of a misplaced quotation mark or missing bracket. This is a the reality of programming and part of the lesson the students are here to learn.
The volunteer student mentors were critical in making the class a smooth success by providing constant help to the students to debug and correct syntax errors. I highly recommend recruiting a few volunteers to help with this if you teach a similar class and age group.
More 360° photography and VR examples using the HTC Vive or Oculus Rift could be part of this course. You could also include other creation tools like MagicaVoxel (Mac and PC) and Google Blocks (PC HTC Vive VR Headset) that make 3D modeling much more accessible to all age groups and create objects that can be imported into A-Frame scenes.
Perhaps an ideal course would interleave these different concepts and activities in a way to breakup the intense programming screen time and also offer structure to brainstorm project ideas and provide time after instruction for creating and then sharing projects with each other. Depending on age group and maturity, the project phase could also be suitable for working together in groups.
Would you do it again?
Yes! This was such a fun day and I was so impressed to see the creations that students made. I’d love to help teach another course like this, if you’re organizing one in the Bay Area (or beyond) feel free to reach out to me @kfarr on twitter or you can find me on LinkedIn.
Here are links to view a few of the projects, used the W A S and D keys to move around the scene:
