Master WebVR With a Week of Experiments
With WebVR you can create immersive, interactive 3D worlds right in your browser. In , we combined how-to videos with remixable, working code examples so you could start learning how to build your own WebVR experiences using A-Frame.
Now, in partnership with Mozilla, we're kicking off a week of WebVR experiments that build on that starter kit and showcase what's possible with WebVR. Each of this week's 7 examples, created by VR expert and Glitch creator Andrés Cuervo, is a unique experience that will teach and inspire you to go further with building VR experiences.
Join us every weekday this week to see another incredible VR example.
We started the week on Monday with 3 VR experiments:
Motion Capture Dancing in VR #
Motion capture is used in films all the time. But getting motion capture data into VR scenes has historically been pretty difficult. Thankfully Three.js — the framework that A-Frame is built on — has an example to support BVH, a common motion capture data format. This means we can take free motion capture data — like from the CMU Graphics Lab Motion Capture Database — and all of a sudden we can add a character pirouetting, running, or cartwheeling across the floor! Try clicking around in this scene to switch between a few different motion capture files represented as dancing blue sphere mapped onto the data.
Adding Models and Shaders #
This scene combines an example by Don McCurdy from the A-Frame documentation on shaders with loading 3D models and textures — basically, this project is a tour of a few types of files you'll want to load into your VR scenes! If you haven't encountered shaders before they're programs that tell your computer what color to display on the screen, making them the core of how we create graphics like the deforming sphere in the scene. Using shaders we can create custom programmatic visuals like fire, water, sand, or other complex materials where just a picture of the texture would be insufficient. If we have assets we'd like to use instead of dynamic shaders though we can place those into our VR world as well! A-Frame makes it easy to add 3D models (like the walls of the scene) and 360 images for the sky using only a couple lines of code, like
Using 3D Shapes like Winding Knots #
There are some basic 3D shapes I expected A-Frame to come with: boxes, spheres, cones, etc. But I wasn't expecting the intriguing torus knot. These shapes are essentially toruses (the mathematical name for a "doughnut" shape) that have twists in them (making them knots) determined by two parameters we call p and q. You don't need to know any of the math that goes into these shapes in order to start playing around with the shapes in A-Frame though — they're built-in! We use another built-in — the animation component — to animate the winding shapes, creating a corkscrew effect & a swirling/overlapping knot effect.
That said, check out this link from Wolfram MathWorld about torus knots if you're curious about the math going into these shapes!
Animated Torus Knot Rings #
On Tuesday, we built on the Winding Knots example above. We're going to use torus knots but we'll also introduce the template and layout components. While we're not animating the p and q parameters this time, we're animating the scale of our torus knots. The layout component is useful because it can generate rings of torus knots rather than us having to specify the positions of each knot in the ring individually. We use the template component to repeat this in a for-loop, creating concentric circles of torus knots!
Finally, we add an animation delay to our scale animation that's determined by what number ring we're on. This means ring 1 will start animating slightly after ring 0, ring 2 slightly after ring 1, and so on — this ends up with an effect that looks like waves of pulsing torus knots. It's amazing seeing how a little bit of code can generate a whole scene around the viewer!
Generated Patterns #
On Wednesday we took a closer look at generating patterns. This one starts by picking a random number from 0 to 1, if it's less than 0.5 it writes down a ****, otherwise it writes down a /. Now do this 100's more times — or get a computer to do it for you! That's what the original 10PRINT BASIC program did, and out of that simple process you can get some really beautiful patterns that look like mazes, walls, or tapestries. This project recreates the effect using some flat geometry in A-Frame with clever tilting. See the README and the code in the project for more details!
Creating Optical Illusions #
Thursday had us creating optical illusions, like those sidewalk chalk optical illusion paintings. You have to view them from a certain angle in order to get the stretched images to create the illusion of depth. The painting shown in the VR scene below is similar to those, only it was painted in the 1500's! You can watch a video of the real life painting that helped me figure out how to animate the painting in the A-Frame scene. Open up the scene and move around the scene to see it for yourself and then take a look at the code — it's a small amount of code for such a cool effect!
Including Dynamic Content #
The images and assets we've worked with in rest of these projects have all been static, so for this final project I want to show how easy it is to include dynamic content. What does that mean? Well let's say we want to add a random image of a dog onto a bunch of objects we have in A-Frame. We can use an API that serves random images of dogs, like the random image search functionality from Unsplash, to load a new image of a dog and then use that as a texture in our scene. This project demonstrates how to do that by extending our previous torus knot project, and adds some extra animation flair.
So there you have it! 7 projects, each demonstrating an in-depth use of A-Frame. From using motion capture data, to adding in animations and dynamic content, you can use these building blocks to build and extend your own VR experiences.