How to Create a Compelling VR Demo, From an Artist's Perspective

At Game Developers Conference (GDC) 2018one of the main themes for this year’s show was the important role Arm played in shaping the last25 years of the mobile gaming and handheld entertainment industryOne of the ideas our team came up with during our initial brainstorming was to create something visual. GDC is of course a very colourful, stimulating event and we wanted to create something in line with GDC’s values. Our brainstorming led us to a Virtual Reality (VR) demo called the ‘Arm Museum of Gaming” which would be a central feature of our booth. Alongside the VR demo, there would be a display full of the original devices featured in the demo, from the original GSM Nokia 6110, some iconic Nintendo devices, to the latest Samsung Galaxy devices. 

The demo needed to showcase the devices, and enable the user to select and check the components inside these various devices. This demo is made in Unreal Engine with the target device of a Galaxy S8 using a GearVR. 

Firstlywe needed to establish requirements so we wouldn’t lose focus of what we’re trying to achieve, sometimes easily done when creating a demo. The demo tries to succinctly meet these and I will expand on them in this blog. 

We then established the major requirements for this demo; 

  • It needs to be performant and be of a high visual fidelity. 
  • It needs to showcase more than 10 Arm-powered gaming devices from the past two and a half decades. 
  • Device selection has to highlight the exponential growth of mobile capabilities. 
  • It’s has to be a mobile VR demo that runs on GearVR with a Samsung Galaxy S8 at 60FPS+. 
  • It needs to be easy and straightforward to use. 

We then identified potential problems and pitfalls with creating this demo; 

  • In a complicated demo such as this, there will be many 3D devices inside the demo, which potentially take lot of time to create between modelling, unwrapping, textures, and creating material. We had to make sure that all these elements were accounted and budgeted for. 
  • We need to create a compelling visual demo and have it run smoothly on an S8 in mobile VR. 
  • As GDC is a large conference for the team, we are working on multiple other projects at the same time, hence the number of people working on this demo can be limited at times. 

Interaction mechanic

Device Carousel

Figure 1: Device carousel

Given that at the time GDC was right around the corner for us, time was a valuable commodity. We had to be efficient with our experimentation in this demo and stick with what we knew was already proven to work. The decision to reuse elements from a previous demo was key to us meeting the timescale needed for this demo. The demo that was repurposed was one that our team previously created around mid-2017 using similar gameplay mechanics, albeit slightly more complex with a lot more handheld mobile models from well known companies like Nintendo, Nokia and Samsung.  

So did we just copy the demo over? Not quite. We took the core of the demo and stripped everything away. Any unnecessary features were removed and the demo was now at a minimal viable product. This enabled us to have a functional prototype within days, which allowed us to have the simple demo tested in VR very early in the build process. When developing for VR it is incredibly important to test the very early stages of development, as sometimes what works well in an editor view might not actually render very well when viewed in the VR headset. 

Demo with device teardown

Figure 2: Demo with device teardown

One of the most important aspect of any VR demo/game is the gameplay mechanic. If this is intuitive it can result in a very enjoyable experience for the user. In the demo, the gameplay mechanic is very simple. The user stands in one place and all gameplay interaction is done with the Gear VR controller in a point-and-click interface. Due to the space restrictions that come with an event booth, a decision was made early on to make the interactivity of the demo stationary for the user, which means the user stands in one spot and doesn’t have to move too much. For people who may have never used a VR demo before, which at events is usually a high percentage, it reduces the anxiety of having to put the headset on 

The Gear VR controller is another challenging aspect for us in terms of the game mechanic. You have to make the assumption that this may be the first experience the user has ever had with a Gear VR controller. The Gear VR controller is pretty simple and easy to get used to, but initially handling a device with four buttons can be pretty challenging, especially for the person guiding the user of the demo. To avoid any awkward instructions being needed we designed the interaction to be as simple as possible, with the touch pad of the controller to swipe left and right through the carousel of devices and a back trigger button to confirm selection of the device the user wishes to view. The only other button that can be used in the demo is the home button to do the specific function of resetting controller calibration if the point and click arrow has become uncalibrated.   

Even with this basic setup, when someone is using the demo it is still necessary to explain to each user how to control the demo, as not everybody has used a Gear VR controller, or even the headset before!  

Visual Breakdown

Background Environment (Museum and Technology Props)  

The overall idea for the demo was to showcase the iconic devices containing Arm IP that shaped mobile gaming over the past few decades. What sort of environment should the demo be placed in was straightforward. The idea was to combine the museum environment with technological props such as a projector, computer, and the stage in the center of the room. 

Find References 

When the decision was made that it will be a museum environment, the first step was researching the various references of the museumI collected many images of great looking museums from around the worldWe ended up being hugely inspired by London’s Natural History Museum, the Romanesque interior is so iconic and creates a fantastic contrast with all technological props that surround the user of the demo. 

Start Blocking Out (white boxing) 

Once we had decided on the styling and direction of the environment, we started building the environment by placing placeholder objects (most of the time this will be just simple boxes). This process is called whiteboxing and its main purpose is to achieve the right scale. We don’t really care about detail at this stage, but it is very important to place the user location spawn, and test the look in the headset as soon as possible. This ensures the user position and all placeholder props are as expected. 

The users view with find reference

Figure 3: The users view with find reference

Once we were happy with proportions, scale and user position in the virtual world, we began building the proper meshes to replace these placeholder boxes from the previous step. We’re utilizing the Unreal Marketplace to quickly build the museum environment, by repurposing a dungeon environment and turning it into a museum. It’s not as straightforward a process as we would like, but it’s a good starting point as we only needed to build meshes that are not in the dungeon package. 

An important step at this point is cleaning up the textures and creating a new simpler material to make them run well in mobile VR. We must always look back to the who, what and how of demos as a sanity check. If we put in items that make the demo unstable on mobile VR then we have failed to follow the demo requirements. 

For objects near the user we created them entirely from scratch and took inspiration from some old school technologies, such as tube monitor, projector and scanner. We tried to keep the silhouette simple and have coherent textures with the environment. The placement of these objects is also important, as in mobile VR mipmapping is very harsh, and you’ll want objects to be close to the user to get the best quality of the textures. As we have massive virtual environment, this placement is also crucial to make the room not feel empty. If you place the objects close to the user in the demo, you need less props to fill the room. 

Lighting

Lighting example

Figure 4: Lighting example

With the whole environment built up, the next step is to tackle lighting. We decided to go with night setting as it enables us to play more with lighting, and combining natural light (moonlight) with artificial lighting (lamp/light bulb). All of the lighting in the environment is baked, no dynamic light is used due to performance constraints. 

Finished lighting setup

Figure 5: Finished lighting setup

Device Meshes

Devices compartment

Figure 6: Devices compartment

These are the stars of the show; the whole objective of the demo is to showcase these iconic gaming devices containing Arm IPWe came up with a long list of devices that could be used, but narrowed it down to a handful due to time constraints and rights usage. 

To showcase the technology inside, we let the user open these devices and have the deconstructed view of them. It’s not a 1 to 1 representation of the real device as we limit the number of inner parts to be 6-7 components, due to number of triangles restriction as well as time. Due to the extremely detailed nature of the devices we had an external company create the models of the them. 

After we created the device modelsthe next step was to import them into the engine and create the opening/closing animation in 3DS Max for each of these devices.  

Here are few of the renders of the 3D devices.

N-Gage device model

Figure 7: N-Gage device model

Nintendo Game Boy Advance Model

Figure 8: Nintendo Game Boy Advance Model

We then hooked these devices and animation in-game using the Unreal Blueprint to our projector meshes and Gear VR controller to enable the user to select them. We used the GearVR controller touch pad to swipe and the button to control the projector tile rotation, and then used the trigger to select the device that they’re interested in. Viewing more information about the device and seeing it in an exploded view was done via another trigger press. 

This is how the final scene looked after we combined the environment, animated device meshes  and UI elements. 

Conclusion

This demo was a collaboration between artists, engineers, project managers, marketing and an external vendor. It is always great to see an idea come to life, and being an essential part of that process is always enjoyable. Of course, this demo will be used a lot to showcase our influence on the gaming industry, but it was for a specific event, GDC 2018. I manned the booth at GDC for three hectic days and I can say it was a great experience. The demo was well received and I found others in the team were constantly chatting with attendees about the influence that the companies we all work/worked for had on the industry. History is a common subject for us all and makes conversation with attendees at events easy. I guess that is what a good demo should do; promote and influence conversations around technology.  

Anonymous