• Design

Front-end Framework for VR Prototyping

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

For basic prototyping you just need to document yourself for every tag you need. And then just add it in your HTML file and tinker with its properties/attributes. For more complex prototyping you apply Javascript interaction to offer a more interactive experience.

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:
  1. You can configure the sky (the scene background) using <a-sky>
  2. You can add camera movement using <a-camera>
  3. 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).
  4. 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)
  5. Add new entities using the geometry attribute (cones, cylinders, cubes etc.). Even better—add an extra layer of interactivity using animations.
  6. Forget pixels, think in meters now.
  7. 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:

Office Panorama

Wanna take a look at Marius’ Grapefruit office? Take a look at this panorama.

How:

  • 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).

Pros:

  • The simplest way to make an interactive panorama—just add an image to the <a-sky> tag’s resource attribute.

Cons:

  • 360 images. I made a panorama using my iPhone. It’s ok, but for more high fidelity use some proper gear.

 

Marius
Marius’s Office Tour
Marius

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:

How:

  • 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.

Pros:

  • Impressive use of 3D navigation.

Cons:

  • Too much content can be tricky to manage over time.
3D Noriel case study gallery
3D Noriel case study gallery
3D Noriel case study gallery

3D Job Announcement

What if you can apply to a job using VR? Take a look at this job announcement:

How:

  • 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.

Pros:

  • A unique approach to the Career page of any agency with or without a VR headset.

Cons:

  • Playing with 3D modules and texture requires a new set of skills and more time to invest
Front-End Developer Wanted (Iasi)
Front-End Developer Wanted (Iasi)
Front-End Developer Wanted (Iasi)

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.

User testing
Peek-a-boo!

 

 

  • Tags: a-frame, cardboard, front-end, front-end developer, google, programming, vr
  • (OPEN) Content Editor Iasi

    You will be working alongside a complex team of content specialists, consultants, UX designers, developers and project managers. Our clients are some of the biggest brands in Romania, such as Dacia, Renault and Nestlé.

  • How is Grapefruit seen through the eyes of an intern?

    Have you ever thought about getting an internship at Grapefruit, but didn’t know how? In this article, I am going to tell you what method I used to get this internship and how I feel about the whole experience.

  • Our Photoshop study group

    A designer’s skills can come in handy in other departments, right? I developed a Photoshop Learning Beginners’ Course for three months, in which a Tester, a Front-end Developer and two Content people participated.

  • What is persona and why you have to do it?

    In the following article I will tell you what the persona is, why it is so important, how you do it, what problems you can encounter even when you already have a persona.

  • (CLOSED) We Are Looking for an Experienced Social Media Professional in Bucharest

    We are searching for a “holistic” Social Media Specialist. Leaving the fancy word aside, this means that you know and worked with both the organic and paid areas of Facebook.