Role: Lead Engineer
Team Size: 6
Duration: May 2020 - Present
Tools: Unity (C#)

Designing interfaces for VR is painfully two-dimensional.

Current tools are insufficient for VR design because they can't represent depth, interaction, haptics, and other spatial design patterns. We're building Playbook, a design tool and library with high-fidelity components that reflect best practices unique to spatial design.

Playbook has been accepted into ZFellows and Oculus Launchpad. It was also the 2020 winner of the Iovine and Young Prize and received $10,000 in funding.

https://www.playbookvr.app/

During the summer of 2020 I was on Facebook's AR/VR team as a product design intern. I got to work on Horizon, a multiplayer VR world that acts as a social platform, complete with an editing system for users to create their own VR worlds within Horizon.

I was responsible for making improvements to how users grab objects, and designing and adding new features to the world editing system to make it more customizable and user-friendly.

As a fun fact, I was the only design intern that summer who had made contributions to the code base!

Takeaways

I found that I liked having a mix of design and technical work. This was my first internship as a product designer, and my previous ones have been in software engineering. I enjoyed being able to contribute to the design before implementing it.

Role: Game Director
Team Size: 29
Duration: 1 year

As my senior year thesis project, I directed a game about an underwater parasite's journey to the surface. I provided creative leadership for students working in several teams such as engineering, game design, art, production and more.

The full project can be found on our website http://leechbug.com/.

As a student game developer I've often filled the role as a technical artist. With my background in digital art and software engineering, I felt right at home combining both skills to create shaders and particle effects. This post is about the process behind my VFX and tech art work created in Unity.

1. Area-of-Effect Electric Attack (Leechbug, 2020)

I'm directing the student game Leechbug, an RTS about fish swarms battling underwater. This is one of the fish's special attacks, an electric shock. I first brainstormed some ideas for the animation and picked the first sequence.

I experimented a bit with the particle system to make the fish look like it's building up energy, and added a noise shader to the expanding orb at the center. It ended up looking different from my initial sketches (and a lot cooler!)

2. Healing Aura (Leechbug, 2020)

We needed a way to clearly show which fish are affected by the healing aura, while obstructing the player's view as little as possible. It is important for the player to know what fish they are healing.

The translucent bubble doesn't show depth well – you can't tell which fish is within it. I added some floating "+" particles but it didn't help much.

I started to look for a way to put a screen space overlay on objects inside the sphere. I tried different approaches from scene depth to mesh boolean, before I found a hint online to use double render passes. The first pass is invisible, and writes only back-facing pixels that is behind another object to a stencil buffer. The second pass is the green overlay, and it renders only front-facing pixels that are in the same stencil buffer as the first pass.

This lets the green overlay render behind objects outside the orb, while still rendering in front of objects inside the orb:

Then I simply added the "+" pattern to the green overlay, and used a scene depth node to highlight the edge where the orb meets the object. This took a whole day to figure out and I was delighted when it finally worked!

Extra: For this project I also made a simple sine wave fish shader that saved our art department a lot of time, since they won't have animate each fish. It also mimics how a fish's head moves much less than its tail.

3. Memory Tree Shader (Momento, 2019)

Referencing this piece of concept art from our artist, I made the shaders for this memory tree and pond. We ended up changing the colors to make it more dreamlike.

The cloud shader combines a moving noise texture with a fresnel node to create a shimmering effect. The trunk and orbs use a gradient + fresnel shader, and the water uses a twirling noise texture.

4. Water Hose (2020)

This is a rework of a water hose effect I made in an old game jam years ago. I wanted to redo it as a portfolio piece after having learnt a lot more about VFX. I made a sketch of the elements that would go into the water stream.

I ended up not using the swirl effect since it didn't make sense for a water hose to "spin" the water (and it didn't look that great).

The stream of water is a cylinder with a shader that displaces its vertices with a moving noise texture. The stripes comes from another noise texture combined with a seamless water texture I painted:

The water splash is from a particle system that spawns squares with a moving noise texture. It works surprisingly well as as a stylized smoke or cloud effect.

5. Horror Glitch Effect (Berklee Game Jam, 2020)

This is a 3d glitch effect I made for a game jam project about living in quarantine, where household objects appear and disappear with a glitch. It's a shader applied to a cube that scrambles whatever is rendering behind its surface.

As a bonus, here is my talk about Unity Shader Graph that I recently gave to fellow students. Enjoy!

Role: Game Design Lead, Tech Artist
Team Size: 4
Duration: 4 weeks

A 3D action game set in an alien sea, where you are a mind-controlling parasite trying to climb to the top of the food chain by possessing sea creatures using swarms of parasites.

My Contribution

• Main game loop design
• Enemy AI design and development
• Material and VFX design and development
• Player character design and creation

Design Process

One of the first steps was to design a strong game loop and sketch out a frame of game elements. This frame includes the environment, enemies, the boss, and the player.

I wrote the game design document (GDD) to explain these mechanics in detail.

Level Select

Character Design

First Iteration

Second Iteration

The fish didn't fit very well in the game, so I redesigned it and changed its material. The gradient shader was created using Unity's Shader Graph.

Download

Role: Technical Artist, UI Designer
Team Size: 16
Duration: September 2019 - May 2020

Momento is a platform for creating VR memory palaces. It provides curated templates of spaces in VR where users can replace with their own photos and videos, allowing users to generate a personal VR experience as easy as creating a slideshow.

My Contribution

• Created materials and shaders of memory tree
• Developed memory tree interactions
• Designed companion mobile app

Referencing concept art from my teammate, I created appropriate shaders such as the cloud-like leaves and rippled pond. However, we decided to go with a static shader for better performance in VR.

Concept art created by Kevin Ke, tree model created by Nick Pudjarminta.

Using Figma, I prototyped the companion mobile app for users to drop in their media.

I was also part of the demo team and have showcased Momento at IndieCade where we won the award for Best Location-Based Experience, Infinity Festival, and Stevens Innovator Showcase where we were selected as a finalist.

You can find my digital art portfolio here. It includes 3D art, 2D graphic design, and concept art.

https://steph.netlify.app/

Role: Game Design Lead, Game Developer
Team Size: 4
Duration: 48 hours

The journey of a barren planet to become habitable by collecting resources. This game was created in 48 hours during the MEGA game jam at USC. The theme was "Boundless". Our team won the prize for Best Audio.

Contributions

• Designed orbit mechanic, game map, and overall gameplay
• Developed inventory system, planet randomizer, and black holes

Design Process

We started by collectively brainstorming game ideas. I came up with the mechanic idea of orbital slingshot, where the player flings itself through space by attaching and detaching from the gravitational field of other objects.

Design Choices

• The start screen, "Press <space> to launch", instantly teaches the player the only mechanic (pressing space) from the very start by making it part of the game.

• There is only one mechanic, but the player must get the timing right to launch to the correct planet. The same mechanic is also used to escape black holes by mashing the button.
• The game sometimes calls for a quick reaction to detach from the orbit to avoid green toxic planets.
• The goal of the game is to collect the resources by exploring the boundless space. The player cannot see very far, and is encouraged to throw themselves into space to see what happens.

Download

Solo Project
Duration: 3 days
Credits: Animated Slime by Calciumtrice (CC Attribution 3.0)

Blob Battle is a two-player fighting game where two water blobs face off in a rainy battle. Collect raindrops of the same color and shoot at your opponent! This is a solo project for an impromptu weekend game jam with friends.

Design Choices

• Relative to its size, raindrops of the player's color will refill their health bar, while drops of the opponent's color will drain it.
• Shooting a bullet will also drain the player's health, to make each shot count.
• The bullets travel horizontally while the raindrops fall vertically. It is designed to be challenging to focus on objects moving on two different axis.
• The bigger a raindrop is, the faster it falls. This is to balance the larger hitbox it has that makes it easier to collide with.

• The start screen allows players to experiment with controls without consequences, while a countdown timer signals when the game will start.

Playtest Feedback

After some rigorous playtesting where several gamers tried to break the game, I received feedback and observed some ways to improve.

• The falling drops being completely random made players feel they were not in control of the outcome
• Find ways to reduce button-mashing when two players are in close range
• Add "invincibility frames" so that a player cannot be hurt for a duration after being hit

Download

This summer I worked at VT Pro Design, a production studio for creative technology. One of their specialties is utilizing industrial robot arms for all kinds of entertainment projects by attaching cameras or LED screens to it.

I worked in a team that is preparing the robots for MTV's annual Video Music Awards. The client wanted two screens that would separate as performers walked through the gap. This called for the utmost precision since the robots would be in close proximity to celebrities.

The studio already has software to control individual robots, but it was the first time we had synchronize multiple robots and calibrate their position relative to each other. My project was to design and develop a tab in the software to easily calibrate the robots.

We shipped the robots just as my internship ended. Two weeks later, they went live at the VMA's.

Takeaways

I learnt to see the bigger picture.
At the beginning, I was given a collection of subtasks . As the project became more and more clear for me, I was able to "own" a section of the project, taking initiative to generate my own tasks to make that part better.

I became curious of other departments.
At the end of the day I would often walk past the creative content team and chat about what they are working on. They always had something cool rendering on the screen. By being interested in their work, I established good relationships with people from all over the office and learnt from them in addition to my own department.

Summer of 2018, I worked at Sony Pictures as a game development intern. This was the internship that defined my next career steps. While I've always strived to be in the tech industry, I did not have a clear idea of which specific area of technology I would focus in. Now, I have narrowed it down to the immersive technology space because of all the exciting opportunities it brings.

Takeaways

I experienced all kinds of mixed reality
There were a lot of headsets lying around the office, and it was my first time having free access to all this tech. While my team didn't require a headset, I would borrow one from another table and had a great time playing with it after work.

I learnt about the mobile game development pipeline.
Because of the resource limitations on mobile phones, there is a lot we have to do to optimize a mobile game, especially when running it along with machine learning and augmented reality modules.

In an effort to organize my shoes instead of leaving them in a pile, I decided to build a shoe rack for my room. It needs to be easily disassembled and use minimal materials. Because I study far from home, I move between my dorm and a summer home every year. Any extra furniture I own needs to be compact and lightweight. With these ideas, I began to sketch up some designs.

I started with the standard design of four supports and some slanted racks. Then, I reduced it to use only two supports. The bottom rack forms a triangle with the supports to act as a stand. Since shoes are lightweight, I could trade some structural stability for using fewer materials. As I sketched, I came up with the idea to include a mesh bag to hold all my socks for easy access.

I gathered the supplies and took them to a woodworking shop on campus. After cutting the wood, I did a quick test assemble with some of my shoes.

It worked and was able to carry the weight of the shoes, so the next step was to polish it.

There is a number of improvements I would make.

• Instead of using sticky tack to hold the racks to the supports, I could simply cut out notches on the sides of each rack. [Update: this was completed!]
• The racks themselves are a little flimsy, so I would use a thicker board. The slanted supports is a good idea, but it's a bit too unstable and tends to wobble. Using a thicker board should also fix it.

I had decided early on to take a gap year after high school, and one of my goals was to complete a software internship. In December, I sent out a few hopeful resumes with no experience other than some demo projects on Github. I was surprised when a response came back, requesting an interview. Then another. A week later, I had landed my very first job at a web/app development agency.

My first task was to create an alert modal for a mobile app, and I had no idea where to start. I knew the basics of Javascript but have not used a framework such as Angular or Ionic. The only way I was able to write new code was to find a similar function somewhere, copy it, and modify it.

All of the web projects used an API endpoint library that the senior developers had created. It was the most difficult to understand. To make sense of what it was doing, I global-searched functions and followed them deep into the codebase.

Frontend web development was only the beginning. It was not long before I was given some backend tasks to do, and I had never written a line of Ruby code. Though I was given a tutorial book to read about database operations, it became apparent that the fastest and most engaging way to learn was by trying to understand existing code.

As things gradually fell into routine, five months passed by before I knew it. I was now able to complete tasks that I used to find impossibly challenging. At the start, I would choose tasks based on how easy they seemed, but now I picked them based on how interesting they were.

Takeaways

I learnt how to maintain focus.
This was my first job, and I was not used to this kind of intense programming for eight hours a day. During this internship, I had built up stamina and could now maintain focus for long periods of time. This helped tremendously in the next internships and during college.

I optimized my coding workflow.
Since I was spending so much time in the code editor and terminal, I put in the effort to customize every part and memorize as many shortcuts as I could. It was worth it. I became much faster at navigating code and getting to whichever file I needed. After three years, I'm still using the same code editor (vim) and its plugins.

It's ok to ask more questions.
I was concerned that I would come across as a total beginner if I asked too many questions. In the end, I learned that it was perfectly fine to do so, being an intern.