Creating a functional fridge-magnet based login form in VR

Logging in via fridge magnet

In early June 2018, the r/programmerhumor subreddit had a series of humorous, intentionally bad login pages posted. The idea is to make a login page (or more generally any UI experience) that's so bad it's funny. This trend may have started with a (hilarious) version based around "non-traditional" volume controls.


An example of the "bad UI" login meme

Through our work on Lightsale, we've gotten very familiar with VR design, so naturally, we wanted to make one using VR. We decided to use the concept of fridge magnets, because c'mon, that's funny.

At a high level, there were a few key things involved:

  • The 3D assets which would be displayed
  • The code which would handle the VR interactions
  • The idea and script which would be turned into a gif

The 3D assets

The first thing we needed was a model of a fridge. We went with this model by Krasotkin on Turbosquid, because a) it had a pivot point for the door to open, and b) is free.


Krasotkin's fridge model

Turbosquid is a great resource generally for finding 3D models, although sometimes it can take some effort to filter out the wheat from the chaff.

Next, we would need models of letters for the magnets. For this, we used Fusion 360 to extrude profiles representing each letter.


The extruded letter profiles in Fusion 360. Yes, that's comic sans.

People mostly think of Fusion as a CAD tool for designing physical products, but it can create models for use in game engines, too! It also doesn't hurt that it has a free tier for hobbyists and start-ups.

By default Fusion 360 only allows mesh export to .stl from within the application, for use with 3D printers. .stl files aren't very suitable for game engines as they are purely a list of triangles and vertices, and do not preserve eg the object hierarchy or material definitions. Because of this, many game engines do not natively support importing them.

Luckily, the Autodesk A360 web interface has a much richer suite of export options, including .fbx, a de-facto standard within the 3D content authoring ecosystem.


The A360 web interface with the .fbx download option

With our models in hand, we could move on to...

The code

This project was done using the Unity engine. We already had a lot of VR interaction code written for Lightsale, so we were able to reuse it for this project.

At a high level, the letter objects and the hand objects both have a stock Collider component, and when we detect them colliding, we note it within our own Usable component. Then, if the user pulls the trigger on their controller, we attach the letter to the hand with our Draggable component, and if they release it within the Collider representing the fridge door area, we attach it there.

This is all achieved through composition of MonoBehaviour-derived components which implement elements of the functionality.

[RequireComponent(typeof(Usable))]
[RequireComponent(typeof(Draggable))]
public class FridgeMagnetLetter : MonoBehaviour {
...
}

The class declaration for our fridge magnet letters which specifies the required components and inheritance

When the "Submit!" button is clicked (ie, the trigger on the controller is depressed while the colliders are intersecting), we find all the letter objects within the BoxColliders representing the password field, and then order them based on their position from left to right.

var letters = Resources.FindObjectsOfTypeAll().Where(letter => passwordVolume.bounds.Contains(letter.transform.position));
var pw = letters.OrderBy(letter => letter.transform.position.x).Select(x => x.gameObject.name[0]);

A pair of LINQ queries which transform the in-game fridge magnet objects into a string

If the password matches the stored value (unhashed - forgive us), then the field outline is Lerp'd to green, and the door opening code is called to reveal the surprise inside.

The final product

With all this in place, we could finally create a funny gif that people might like.1

Because reddit loves memes and references, we threw in a few perennial favorites. Interestingly, people ended up reading things that weren't actually intended, such as the username/password combination of "jeff/hunter2" being a reference to Jeff Hunter, the founder of TotSE.

We also tried to include some elements of physicality that could only work in VR, such as flipping the 'u' and 'n' characters, or grabbing the 'r' character out of the 'password' field label.

After a brief rehearsal, we used NVIDIA Shadowplay to capture video of myself running the script, uploaded it to gfycat, and submitted it to r/programmerhumor.

For those readers who happen to have compatible hardware, we've made the experience available via WebVR on our site. If you successfully login, inside the fridge there's now a code that you can use for a discount on our products!

Tune in next time for an exploration of the community response, and what going to the #1 spot on all of reddit looks like.


1: As it turned out, people liked it quite a bit, upvoting it over 28,000 times, causing it to occupy the #1 spot on all of reddit for several hours with 1.5M views of the gif. That's a story for another blog post, though.