Either we like it or not VR is upon us and it’s here to stay. Although its best uses can be currently found in gaming with potential towards education and health (of course not to forget the porn industry), we cannot overlook the fact that we should start to prototype in VR. It’s a new medium where we can deliver new experiences for users and solve problems in a more immersive fashion.
But where should we start?
It may be trendy but VR is still expensive. Just look at HTC Vive and Oculus Rift. Not to mention the upcoming PlaystationVR. But do we need all that expensive gear to craft within VR? Certainly not. Introducing the dynamic duo—Mozilla A-Frame and Google Cardboard.
Those who work(ed) with me, know how open I am to new tech and how I like to play with ideas beyond just a simple doodle. And A-Frame is no exception. As soon as I’ve heard there’s a new VR Framework open sourced by Mozilla I went and brushed the dust out of my Google Cardboard and hopped on the VR express train.
For those who aren’t familiar A-frame is an open-source framework for creating VR experiences with HTML. It’s built on top of Three.js and integrates its entity-component-system within the DOM with the use of HTML elements.
Google Cardboard on the other hand is a piece of … well… cardboard with two lenses and a magnetic switch where you put your phone and look through to experience the most affordable VR. It’s not HD but it’s very useful when prototyping for VR. You get a sense of scope right from the early stages.
So you might of guessed by now how we’re going to prototype for VR: just develop the HTML files in A-Frame and then test out the pages using Cardboard. It’s cheap and open-sourced.
How A-Frame works
To get started with A-frame here are some pointers:
- First things first you setup the scene using the <a-scene> tag. This is where all the VR magic is going to happen.
- Then you organize your assets using <a-assets>.
- From this point you start adding components:
- You can configure the sky (the scene background) using <a-sky>
- You can add camera movement using <a-camera>
- Moreover you can then add your own cursor using <a-cursor>. You can configure the reticle to be either classic (actionable at click/tap) or fuse (using a timer while hovering).
- You add images and even curve them (works with video too, but you have to be very patient while tweaking the height, radius and tetha-lenght of each curved item)
- Add new entities using the geometry attribute (cones, cylinders, cubes etc.). Even better—add an extra layer of interactivity using animations.
- Forget pixels, think in meters now.
- And many many more. Just take a sneak peak at the full documentation.
Using the examples
To test out the new framework, I took three of their examples highlighted on the site and adapted/modified them to fit different scenarios from the digital agency life. Here’s what I had in mind:
Wanna take a look at Marius’ Grapefruit office? Take a look at this panorama.
- I added an image and placed in the background as the scene’s sky.
- I added three cursors outside the camera tag and made them as hotspots.
- Text was added using an external library (bmfont).
- The simplest way to make an interactive panorama—just add an image to the <a-sky> tag’s resource attribute.
- 360 images. I made a panorama using my iPhone. It’s ok, but for more high fidelity use some proper gear.
3D Case study
What if you can explore an agency case study in a 3D environment using VR? Here’s our Noriel Pad case study in VR:
- I added all the assets first.
- I configured the curved images for each case study screenshot.
- I added a cursor inside the camera so it moves around with it.
- clicking/tapping the Grapefruit logo redirects you to the contact page, because marketing.
- Impressive use of 3D navigation.
- Too much content can be tricky to manage over time.
3D Job Announcement
What if you can apply to a job using VR? Take a look at this job announcement:
- I used the A-Frame shopping example as basic structure.
- I added and align the new assets to the project’s scope (recruiting).
- I modified the .dae 3D model (made it pink and mysterious).
- Clicking/tapping the CV circle will open your e-mail client, ready to be sent to Ancuta.
- A unique approach to the Career page of any agency with or without a VR headset.
- Playing with 3D modules and texture requires a new set of skills and more time to invest
Experience it yourself!
Enough with the screenshots. Access and experience the announcement yourself. Use a mobile phone and Google Cardboard for the optimal thrill. We had fun and we invite you to have fun too.
Although still in an experimental phase, the team is really excited so we can’t wait to cook up new VR experiences for our and client future projects.
Front-end Developer position available
Interested in joining us? We have new job openings including Front-End Developer. Go beyond regular Front-End. Join the Grapefruit team! Apply now.
If you like our work and have an interesting digital project send us a message and let’s get in touch.