Hi! I'm Wizard - an interactive engineer (C++, Python, Unity)
focusing on location-based entertainment, computer graphic, and applied games.

I believe life is a playground, and applied games allow people to maintain a playful spirit while encouraging them to keep exploring the relationships between people and their surroundings as well as inspiring them to change their behaviors for a better society.


An Augmented Reality Rube Goldberg Experience

Feb 2021  - May 2021
Role: Interaction Designer, Software engineer, Hardware engineer
: Raspberry Pi, Python, Augmented Reality

Jubo AI Vital Sign Model

An artificial intelligence model for personal vital signs warning

Aug 2019  - Dec 2019
Role: UI Designer, Data Analyzer, AI Developer
: Tableau, Python, Scikit-learn, JS, React, Reduct

Water Environmental Game

A virtual reality game for teenagers to learn water conservation

Aug 2016 – Jul 2017
Role: UIX Designer, Game Developer, 3D Render Engineer
: Unity 3D, C#, SketchUp

This project is based on the course CMU 15-662 Computer Graphics
including four main tasks implemented by C++ :
SVG Rasterizer, Mesh Edit, Photorealistic Renderer, Animation
SVG Rasterizer
C++, DrawSVG, OpenGL
Implemented a software rasterizer using supersampling to overcome anti-aliasing that draws points, lines, triangles, and bitmap images; and completed a viewer that supports the basic features of the Scalable Vector Graphics (SVG) format.
Line Rasterization

Started with an implementation of Bresenham's algorithm that ensures that the computation can be made effective by reducing the computation to bit manipulation using integers. And then continuing on Xiaolin Wu's line algorithm to increase the quality of the output.

Triangle Rasterization x Super Sampling

Sampled triangle coverage by splitting each triangle into two triangles with a common horizontal base. In this algorithm, the navigation occurs along the lines contained in the triangles which increases the efficiency of the algorithm.

Furthermore, extended the rasterizer to anti-alias triangle edges via supersampling and averaging the sample values to smooth out the pixels shown in the images. In response to the user changing the screen sampling rate, the triangle edges become noticeably smoother with larger sample rates. The implementation is using a sample buffer vector to store each pixel's color components and then resample the supersampled results buffer (average their colors together) to obtain sample values for each pixel.

Alpha Compositing

Implemented Simple Alpha Blending which is a method of displaying transparent elements in the SVG specification. This tasks focuses on pre-computed alpha that the formula for computation are based on the current value on the screen and the incoming value, creating a blend between the two using the alpha value(weight) specified.

Texture Mapping x Trilinear Filtering

Mapped a texture on a surface. Given location (x,y), the texel(texture coordinate) is obtained by normalizing the given coordinates first and then mapping in the texture dimensions. For each covered sample, the color of the image at the specified sample location would be computed using Bilinear Filtering of the input texture which would cause anti-aliasing.

Next, adding Trilinear Filtering to improve the anti-aliasing. My implementation first is generating mipmaps (Minification and Magnification) of desired resolution which are stored in a data structure. Based on the dimension of the texture, we computed the appropriate level at which to sample from the mip-hierarchy. As image elements shrink on screen, to avoid aliasing the rasterizer should sample from increasingly high (increasing pre-filtered) levels of the hierarchy. Finally, the values at any given pixel are interpolated by trilinear interpolation. That means we sampled more than one pixel at any given location and then average the value of all the locations to create smoother images,

Mesh Edit
C++, Halfedge Mesh, Scotty3D
Implemented MeshEdit components of the Scotty3D, which performs 3D modeling, subdivision, and mesh processing. This tool enable the user to transform a simple cube model into beautiful, organic 3D surfaces described by high-quality polygon meshes. Most actions in MeshEdit use a topological data structure called a halfedge mesh (doubly-connected edge list), which provides a good tradeoff between simplicity and sophistication.

Implemented three types of bevels: Vertex Bevel, Edge Bevel, and Face Bevel. The bevel action creates a new copy of the selected element that is inset and offset from the original element. Clicking and dragging on an element will perform a bevel; the horizontal motion of the cursor controls the amount by which the new element shrinks or expands relative to the original element, and the vertical motion of the cursor controls the amount by which the new element is offset from the original element.

Local Connectivity Editing - Flip, Split, Erase, & Collapse

Implemented a variety of commands used to alter the connectivity of the mesh (for instance, splitting or collapsing edges). These commands are applied by selecting a mesh element (in any mode) and pressing the appropriate key, as listed below. Local mesh editing operations include:
- Edge Flip: Rotates the edge in the anti-clockwise direction by one vertex.
- Edge Split: Split edge at its midpoint, and the new vertex is connected to the two opposite vertices.
- Erase Vertex: Replace a vertex together with all incident edges and faces with a single face.
- Erase Edge: Replace edge with the union of the faces containing it, producing a new face.
- Edge Collapse: Replace edge with a single vertex. This vertex is connected by edges to all vertices previously connected to either endpoint of e. Moreover, if either of the polygons containing e was a triangle, it will be replaced by an edge.
- Face Collapse: Replace face with a single vertex. All edges previously connected to vertices of face are now connected directly to the vertex.
All the operations consider the edge case of selecting the boundary vertex, edge, of face.

Triangulation and Subdivision - Linear, Catmull-Clark, & Loop

Implemented three schemes of geometry subdivision which upsample the low-resolution polygon mesh for display and simulation:
- Linear Subdivision: Each polygon in the selected mesh is split into quadrilaterals by inserting a vertex at the midpoint and connecting it to the midpoint of all edges. New vertices are placed at the average of old vertices and old vertices remain where they were. However, it will  results in a mesh that is purely quad.
- Catmull Clark Subdivision: Just as with linear subdivision, each polygon is split into quadrilaterals, but this time the vertex positions are updated according to the Catmull-Clark subdivision rules, ultimately generating a nice rounded surface.
- Loop Subdivision: Need to operate Triangulation first and then each triangle is split into four by connecting the edge midpoints. Vertex positions are updated according to the Loop subdivision rules.

Isotropic Remeshing

The mesh is resampled so that triangles all have roughly the same size and shape, and vertex valence is close to regular (i.e., about six edges incident on every vertex). The algorithm to be implemented is based on the paper Botsch and Kobbelt, “A Remeshing Approach to Multiresolution Modeling” (Section 4), and can be summarized in just a few simple steps:
1. If an edge is too long, split it.
2. If an edge is too short, collapse it.
3. If flipping an edge improves the degree of neighboring vertices, flip it.
4. Move vertices toward the average of their neighbors.

Repeating this simple process several times typically produces a mesh with fairly uniform triangle areas, angles, and vertex degrees. However, each of the steps deserves slightly more explanation.


The number of triangles in the mesh is reduced by a factor of about four, aiming to preserve the appearance of the original mesh as closely as possible. The simplification method simplifies a given triangle mesh by applying quadric error simplification, was originally developed by Michael Garland and Paul Heckbert, in their paper Surface Simplification Using Quadric Error Metrics.

Photorealistic Renderer
C++, Ray Tracing, BSDF, Scotty3D
Implemented a physically-based renderer using a pathtracing algorithm. A pipeline that involved: generation of camera rays, ray-scene intersection, acceleration structures with ray-scene geometry queries, and physically based lighting bouncing according to direct and indirect light and materials BSDF, which which will allow renderer to synthesize much higher-quality images..
Generating Rays and Intersection

Randomly generates uniformly distributed rays from the camera. Each ray can be expressed in the form: P = o + t * d, where o is the origin, t is a parameter to reach point P, and d is the direction. The program transforms the ray from a point in the image plane into the world space through a matrix multiplication. For each ray, detects the first intersection with a primitive object including triangles (using Möller-Trumbore algorithm) and spheres in the scene.

Bounding Volume Hierarchy (BVH)

In order to accelerate rendering, implemented the bounding volume hierarchy (BVH) by spatially partitioning primitive objects into bounding boxes. Instead of ray tracing each individual primitive, this acceleration structure allows us to test for ray intersection against groups of primitives (axis-aligned planes).

The BVH algorithm is defined recursively, and takes in a vector of primitives and a max leaf size. When the node is a leaf, we simply return that bounding box and its list of primitives; otherwise, we split along the axis of the lowest Surface Area Heuristic, which is found by comparing x, y, and z axis values. Then, we partition the primitives into two vectors based on which axis the primitive centroids are on. With these left and right vectors, we can recursively call the construction algorithm, setting nodes accordingly.

Shadow Rays

Implemented accurate shadows according to light(hemisphere light, direction light, spot light, and point light) in the scene. The algorithm is checking whether a ray originating from the hit point, and traveling towards the light source (direction to light) hits any scene geometry before reaching the light.

Path Tracing x Materials (BSDF)

Implemented Monte Carlo Rendering that considering materials BSDF and the complicated light paths, bouncing off many surfaces before eventually reaching the camera. Simulating this multi-bounce light is referred to as indirect illumination, and it is critical to producing realistic images, especially when specular surfaces are present.

For the BSDF, implemented Lambertian for diffuse reflections, Mirror for perfect specular reflection, and Glass for both reflecting light and transmit light. We use Snell’s Law and Schlick’s approximation to compute a transmittance BSDF in the Glass.

For the Ray Tracing, simulated multiple bounces using the Russian Roulette algorithm in order to avoid spending time evaluating function for samples that make a small contribution to the final results. The structure is:
(1) Randomly select a new ray direction
(2) Potentially terminate the path (using Russian Roulette)
(3) Recursively trace the ray to evaluate weighted reflectance contribution due to light from this direction.

Defous Blur and Bokeh

Simulated the effects of de-focus blur and bokeh found in real cameras by modifying the generated rays from the camera according to member parameters - aperture and focal distance. Focal distance represents the distance between the camera aperture and the plane that is perfectly in focus. Setting aperture could randomly choose the ray origin from an square centered at the origin and facing the camera direction. Now it’s as if the same image was taken from slightly off origin. This simulates real cameras with non-pinhole apertures: the final photo is equivalent to averaging images taken by pinhole cameras placed at every point in the aperture.

Environment Lighting

Implemented an infinite environment light, a light that supplies incident radiance (really, the light intensity dPhi/dOmega) from all directions on the sphere. Rather than using a predefined collection of explicit lights, an environment light is a capture of the actual incoming light from some real-world scene; rendering using environment lighting can be quite striking.

Furthermore, implemented an importance sampling scheme for environment lights to sampling directions towards the directions for which incoming radiance is the greatest. In the real world, most of the energy provided by an environment light source is concentrated in the directions toward bright light sources. For environment lights with large variation in incoming light intensities, good importance sampling will significantly improve the quality of renderings.

C++, Splines, Rig, Skinning, Particles, Scotty3D
Implemented four primary components that must be implemented to support Animation functionally:
Spline Interpolation, Skeleton Kinematics, Linear Blend Skinning, and Particle Simulation
Splines Interpolation

Implemented the function allow users to make simple animations by translating, rotating, or scaling the mesh in the scene. I implemented Cubic Hermite Curve over the unit interval first, which evaluates a spline defined over the time interval  given a pair of endpoints and tangents at endpoints. And then use this method to evaluates a general Catmull-Romspline at the specified time in a sequence of points (called “knots”).

Forward Kinematics x Skinning

Implemented these basic kinematics to allow user to define skeletons, set their positions at a collection of keyframes, and watch the skeleton smoothly interpolate the motion. A skeleton can be posed by selecting a joint and changing its pose i.e., rotating the joint.

In this project, I implemented a Capsule-Radius Linear Blend Skin method, which only moves vertices with a joint if they lie in the joint’s radius. This method could link the skeleton to the mesh in order to get the mesh to follow the movements of the skeleton

Inverse Kinematics

Implemented Inverse Kinematics, which will move the joints around in order to reach a target point. In this task, I implemented an iterative method called gradient descent in order to find the minimum of a function, more specifically, using a technique called Jacobian Transpose to update the angles along a single axis. And then extended it to 3 dimensions and support multi-target IK, which allows users to create a series of joints and get a particular joint to move to the desired final position users have selected.

Particles Simulation

Implemented a collection of non-interacting, physics-simulated, spherical particles that interact with the rest of the scene.I n this task, I use the simple forward Euler which not concerning with stability or energy conservation for our particle system. Forward Euler simply steps our position forward by our velocity, and then velocity by our acceleration.

Next, I used ray-tracing capabilities to find collisions along particles’ paths. If the ray intersects with the scene, computing when the particle would experience a collision. When finding a collision, assume all particles collide elastically - that is, the magnitude of their velocity should be the same before and after the collision, and its direction should be reflected about the normal of the collision surface. Repeated the ray-casting procedure(if the particle collided with the scene again?) in a loop until have used up the entire time-step.

Gnomes in a Robe
Assigned Theme : Festival - Novelty x Social x Accessibility
Project Duration :
3 weeks (Nov 4 2020 - Nov 24 2020)
Platform :
PC, Mobile Phones - 3 players Co-op game | Tools : Unity3D, AirConsole, Zoom
Teammates :
Jeesub Lee, Lauren Zhang, Qin Zhang, Yuji Sato

Welcome to Gnomes in a Robe, where guests will be playing as three gnome brothers working together to obtain a wizard license at the Bureau of Viable Wizards. The license exam is mainly designed for humans, so the gnomes can’t even reach the top of the desks! Work together with your brothers to somehow pass this exam and become a professional viable wizard!

This is a three players cooperation game. Three players play as three parts respectively and should work together to use spell to solve the puzzles:
Top Gnome: The one only can read tasks instruction: the dialogue with NPC, signs, and maps. Read them for other two players and then teach the middle gnome how to cast spell.
Middle Gnome: Cast spell by drawing correct shape to solve puzzles.
Bottom Gnome: Control walking around and the direction of casting spells to go through obstacles.

Notable Contributions
1. Design the gameplay, game-flow, and puzzle design with the other programmer and two artists
2. Implement physics mechanism: flying and collide detection, boat floating and moving by wind
3. Connect Unity with mobile controllers to set up different UI and data transition for each part.
4. Create visual effect with particle system, shader, and VFX for the magic spells.
5. Set the game scene, background music, game UI, objects animation, and scene transition.

Assigned Theme : Tell an Interactive Story
Project Duration :
2 weeks (Oct 20 2020 - Nov 3 2020)
Platform :
PC, Networking - 2 players Co-op game | Tools : Unity3D, Photon, Zoom
Teammates :
Lewis Koh, Noah Kankanala, Shanshan Yuan, Zijun Li

A gloomy girl, Alice, disguised herself in the reality due to the peer pressure. One day in the dream, the inner true Alice begin to guide "herself" to destroy the mirror reflecting the false self. Alice start the journey of finding the most important thing for her....

This is a two players game with networking. The Player1 as gloomy Alice who got lost in the reality and can smash objects, but cannot see mirrors which reflecting false self. The Player2 as the inner true who can see the mirrors and is guiding the Player1. In the game, two players should collaborate with each others to destroy all the mirrors. The Player1 can keep talking with the Player2. On the other hand, the second play only can write messages on the blackboard to send message to tell the Player1 where the mirrors are.

Notable Contributions
1. Design storyboard, cut scenes, and the gameplay for two players storytelling game
2. Implement networking with Photon and message writing
3. Set visual effect, lighting and the transition of post-processing in each stage
4. The intense collaboration with artists to import the models for surrounding settings.

Let Them Eat Cake
Assigned Theme : A Fun-Focus Virtual World in a Week
Project Duration :
1 week (Oct 6 2020 - Oct 13 2020)
Platform :
PC, Mobile phone - 2 players Co-op game | Tools : Unity3D, AirConsole, HTML/CSS/JS
Teammates :
Ebrahim Karam, Haiyun Wu, Haoran Liang, Yuting Jing

Two players control the cake ragdoll's left leg and the right leg respectively by mobile phones. They need communicate with each others to go through the different Food Challenge to reach the goal as soon as possible. We set the ridiculous, funny, and adorable food theme to meet the "Fun-Focus" virtual world.

Notable Contributions
1. Design the gameplay, game-flow, and level content with the other programmer and two artists
2. Implement ragdoll funny appearance, physical movement, and jump
3. Connect Unity with AirConsole and optimize data transition between them
4. Create the mobile phone user interface and design the experience with HTML/CSS/JS
5. Set the scene, skybox, food models with the intense collaboration with artists.
6. Create start animation, smooth camera transition, and implement sound effect to enhance appeal.

Under the Bloody Moon
Assigned Theme : Naïve guest x Feel of freedom
Project Duration :
2 weeks (Sep 22 2020 - Oct 6 2020)
Platform :
PC, Webcam, Microphone | Tools : Unity3D, OpenCV
Teammates :
Arianna Gong, Katherine Wheeler, Martin Ke, Qin Zang

Theme Details  
Create a consistent, highly interactive, and engaging experience that lets naïve guests feel like they have a lot of freedom in the choices they make. Player only can control the guest in the game by face image and voice. The game cannot use direct introduction to guide players; should only use story, visual design, and sound design to let players know how to play and complete the game.

The player is as a vampire and then follows the monologue and the conversation of the human to attack them to get the power. The player would use the head direction detected by the Webcam to control the vampire moving direction, stop, and run. When webcam detects the player open their mouth wide, it would trigger the "Attack" mode to drink human blood. After attack one person, player can speak spell "Bat" to transform into the bats and fly providing various gameplay and increase interest curve during the game.

Notable Contributions
1. Design the monologue indirect control and the time to play it in the game with the sound designer
2. Implement the voice recognition, visual effect, and physical mechanism for the bat transformation
3. Create the appealing start animation and the drink blood animation with Cinemachine and Post-Process
4. Create particle system and simple Shader for setting atmosphere of the game

Take You to the Light
Assigned Theme : The guest helps character A who is afraid of character B
Project Duration :
2 weeks (Sep 8 2020 - Sep 22 2020)  
Platform :
PC, Keyboard, Mouse | Tools : Unity3D
Teammates :
Rui Xi, Jacob Lin, Sheenu You

In this game, we use visual model, sound effect, maze design, dark & light to create a world true to the "helping" theme. Player use mouse click to trigger the Holding Hand and Moving Box to solve the maze and guide the Character A (Blue Character) to escape from negative emotion.

Notable Contributions
1. Implement the physical mechanism of the pushing box, smooth guest moving, and CharacterB following
2. Implement the trick connection like press the button then the slope show up with scripts and animations
3. Set the tone and atmosphere of each stage with light position, intensity, and post-process
4. Refine the model and camera moving speed to follow the pace of sound effect

Wizard PlayGround
Assigned Theme : Use the limited Assets to create an interactive experience in a week by yourself.
Project Duration
: 1 week (Sep 1 2020 - Sep 8 2020)
: PC, Keyboard, Mouse | Tools : Unity3D
Teammates : Solo

This game is made for round 0 of Building Virtual World class at Entertainment Technology Center. Round 0 aims at familiarizing students with Unity. I aimed to develop the sandbox game let allow players can explore the unity and make use of their creative to create their own world. I create two sandbox world, in the first one players can control the time like pause, rewind, and slow down time. The second space one, players are allowed to control gravity to experience different gameplay.

Notable Contributions
1. Individually completed a game in under 7 days, while attending class and doing other assignments
2. Combine 3D physical mechanism, gravity control, time control, and camera smooth moving, and my gameplay design knowledge to create an high level of interaction world allow player to have freedom to explore the sandbox
3. Polish visual effect by light rendering, particle system, and post-process in the Unity


A doll with an application for parent-child communication

Oct 2015 – Jul 2017
Role: UI Designer, iOS app Developer
: Interaction Design, Swift


Interactive music boxes for motivation on climbing stairs

Sep 2016  - Jan 2017
Role: Interaction Designer, Device Developer
: Arduino, C++, Mechanic Design

P+ Platform

A crowd Intelligence platform for disaster reduction

Jul 2015 – Oct 2016
Role: UX Designer, Developer, Project Manager

Interstellar X Magical Melody

Knowledge-based and creativity-based role-playing games

Jan 2016  - Aug 2016
Role: Tasks Designer, Game Developer
: Unity3D

Scotty 3D Tools Development

Following model, render image, and animation are all created by Scotty 3D in which I implemented all the related tools first and then use these tools to create 3D models and animation. More details about implementing these tools are in the COMPUTER GRAPHICS

ML-Agents: Hummingbirds
Project Duration : 3 days | Platform : PC & Keyboard | Tools : Unity3D, Python, TensorFlow

Introduction : Create intelligent flying hummingbirds that can navigate to flowers, dip their beaks in, and drink nectar by Reinforcement Learning.
Features : Craft a training environment, train neural networks, and set related machine learning parameters to stimulate the hummingbirds' behavior.
Reference: https://learn.unity.com/course/ml-agents-hummingbirds

Crystal Cavern
Project Duration : 4 days | Platform : PC & Keyboard | Tools : Unreal, Blueprint

Introduction : The game that player control the rolling ball to collect all crystals in the dark cave.
Features : Implement 3D physical mechanism and gameplay controller with Blueprint. Develop own levels by editing geometry and using lighting system to refine the atmosphere.
Reference: https://www.udemy.com/course/unrealblueprint/

Tempo Shoot
Project Duration : 1 day | Platform : PC & Keyboard | Tools : Unity2D

Introduction : Reproduce the game that player has to avoid the bullet which is produced with the music tempo.
Features : Implement 2D physical mechanism and audio source control.
Reference: https://gamejolt.com/games/bullet-waltz/22372