As a growing agency, Ueno has a constant need to find amazing new people to join our teams. But we wanted to create something special, a game-like experience that showcased what it’s like to work at Ueno–in all its playful, chaotic, and weird glory. And we wanted to have fun doing it.

So, the idea of a Ueno 3D game was born from a brainstorm with Steffen, Creative Director, Romain, Designer, in New York and myself, a Creative Technologist based in SF. At first we weren’t sure what the experience should be. We floated ideas of the user visiting a Ueno holiday party or stopping by on a normal day at the office. We landed on creating a Ueno world inspired by our real offices and employees, plus some items on our wish list (office pool and multi-story slide, anyone?).

Here’s some background on how we brought some of these elements to life.

The Hot Dog

Every game has a player, and in our case we decided that a hot dog avatar would be perfect. It doesn’t assume anything about the player’s physical features, it’s colorful and lighthearted, and it’s simple yet recognizable. The objects in our game all had to be fairly simple, because there’s only so much rendering a browser can efficiently handle.

Plus, the hot dog has a special place in our culture at Ueno. It’s a character that appears on our 404 page. And, and we give hot dog pins to all our Nuenos to welcome them to the company.

We exported a static model from C4D and started working on the materials. Once we got it right inside the site, our focus was the hot dog’s movements.

In the code, we make the hot dog jump, and we apply a slight distortion that helps the character look a bit less rigid.

The House

Most of the modeling work went into the house itself. The Ueno house is inspired by the decor from our offices. We modeled it in Cinema 4D, then skin and light it in browser, and kept iterating.

To make the WebGL experience look as realistic as possible, we paid special attention to the materials and lighting in the house. The way I like to work is getting a rendering with very advanced effects and lighting, and then rebuild it as closely as possible in code. This helps produce the best results because rendering on a dedicated machine versus real-time rendering inside the browser is very different.

Here are some of the iterations for the house and the final image when we finally got the skinning just right. This phase included a lot of back and forth, experimenting, adjusting, and trusting your eyes to make something that looks as close as possible like our original idea.

Here you get a sense of how the lighting effects are created, and the different layers of lighting that compose the final scene.

Apart from creating the look and feel, we also wanted the house to be interactive so the gamer could move around and talk to employees.

Behind the 3D model we built a grid system where we placed the furniture and employees. The employees are really just boxes that you can click on. (Just like in real life.)

Here is a version of the house without anything in it except those boxes.

If you remove all the fancy lighting, materials, models and visual effects, the experience is only a grid at its core, with walls, collision boxes and hotspots that you can click on to move around.

A big challenge on this project was creating an algorithm that would detect walls and furniture to help the hot dog find its way through the obstacles.

The Employees

Our next task was to bring Ueno employees to life. Our initial plan was to model every employee, but we soon realized that would have been way too much content and work to maintain.

So, how did we pick which employees to include? We chose the coolest ones, of course! Well, ok, that’s not true.

The final six employee characters were chosen from each Ueno office (NY, SF, Iceland and LA). We also picked people from different areas within the company (ops, design, development, content etc). This created a good mix of people that give the user the chance to get a real (or, you know, sort of real) behind the scenes look into our culture.

Same as for the house. After exporting the models from C4D, the first step was getting the materials and lighting right.

As we iterated inside the WebGL, we found out that the employees looked too rigid. To make them look more alive, by code, we came up with a breathing animation where the body and hands move at a different speeds, mimicking the movement of real humans.

We also added animations that trigger randomly during the experience when the main player is not moving.

Our process was very collaborative and organic. We allowed ourselves time to try new things and continuously iterate. But we didn’t have unlimited time and resources, so we gave ourselves a deadline to provide enough pressure to launch something — even if that “something” was continuously changing as we went along.

Hopefully I’ve covered some of the techniques that were curious about. We’re grateful that we had the opportunity to explore and play.

We hope you liked it. Above all, we hope it made you smile. And of course, if you haven’t seen it, go take a look. And if you are ready to make the leap we are looking for a bunch of new people.

The Ueno 3D Interview: Behind the Scenes was originally published in Ueno. on Medium, where people are continuing the conversation by highlighting and responding to this story.