Graphigs Engine

Description

GUIs

import texture modal

rusted-metal effect

chromatic aberration

blur effect

Create an engine for rendering objects to implement PBR techniques. Keep the hierarchical structure of the model while loading fbx files using FBXSDK. Create GUI tools to adjust the object and each mesh’s material data. Change the texture of the material by dropping image files into the program or dragging and dropping the texture to the material window from the asset window. Add new uniform variables in runtime without rebuilding the project. Edit shader pipeline in runtime. Apply shader effects to objects or a scene, such as the rusted metal effect using Perlin noise, chromatic aberration, and blur effect.

Graphics Project

Description

deferred shading and multiple lights

BVH construction

collision detection

Develop custom obj file loader to render model and apply Blinn-Phong lighting, multiple lighting with point light, directional light, spotlight, deferred shading. Detect collision between AABB, sphere, ray, triangle, plane, and point and generate BVH when loading models. Save and load scene data including lighting information.

Animation Project

[Scene 1] Hierarchical Modeling and Animation

skinning

bone for skeletal animation

This scene demonstrates skinned mesh animation using OpenGL. The animated 3d characters for the project are from Mixamo. The object and animation key frame use quaternion and VQS to store their transform data. The character is animated by key frames uses incremental VQS interpolation (iVQS) method to interpolation between two key frames. VQS has quaternion with translation and uniform scaling factor. VQS is used for the project because it has no Gimbal lock problem, is efficient for concatenations, and allows separate interpolation algorithms. The iVQS approach improves the flaws that VQS are more expensive than matrix transformation.

[Scene 2] Motion along a Path

In this scene, the character moves along the path at different speeds and uses Center of Interest approach for orientation control. The distance-time function S(t) can be derived from the user-defined velocity function V(t) where t is the time between 0 and 1. The current distance is the value obtained by substituting the current time into S(t). Then, the interpolant parameter u can be found using the inverse arc length function; u=Inverse-G(S(t)). The arc length table is generated using an adaptive approach. The current position can be obtained by putting u to the interpolated Bezier curve function generated by given control points’ positions. The program supports animation blending so that the character’s animation varies with its speed. And the user can change the speed range at which to blend animation (Idle <-> Walk <-> Run).

[Scene 3] Inverse Kinematics

If the user sets the destination to go, the stick character moves to the target. Once the character arrives at the destination, it will grab a ball item using Cyclic Coordinate Descent, one of the inverse kinematic algorithms. It calculates how much each link should be rotated in order for the end-effector to be located at the target position.

[Scene 4] Physically-based Simulation

This is a scene for the cloth simulation to express cloth behavior by following the fundamental concept of physics. The project uses 50x50 particles for 2x2 sized cloth. The cloth is affected by wind and gravity and avoid the ball in the middle.

Shader Project

Scene Management

Load *.obj file with custom obj file loader and find triangle adjacencies to generate silhouette. The user can not only add objects to the scene but also save or load the saved data. The saved data is generated using RapidJSON.

Wireframe and Silhouette

wireframe of cube

wireframe of pokeball

silhouette of cube

silhouette of torus

silhouette of book

Wireframe and silhouette are generated by the geometry shader. The user can adjust the width and color of them.

Tessellation

base quad mesh

only increase inner level

only increase outer level

tessellated quad

The user can determine how much to tessellate.

faraway elephant

nearby elephant

Or, the level of tessellation can be automatically calculated depending on the distance from the camera.

Grass

generate grass blades on each face

wider grass blade

more bended grass blade

apply grass on torus

tessellate and add grass

grass on pokeball

grass on book

Grass blades are generated with the geometry shader and tessellation shader. In geometry shader, the program calculates the position where to locate the blade, how much it should bend, and which direction it should face according to the constraints given to the user. The program subdivides meshes using a tessellation shader for applying grass on the object. Tessellation shader is used to generate grass blades on the object. Because one face only has one blade, the tessellation can help to make richer grass on the object.

Environment Mapping Project

The project demonstrates environment mapping. There is a main object in the middle of the scene and a light object rotating along it.

The user can set the blend factor for how to blend the two colors from the Phong shading and environment mapping. 0 means show results from Phong shading and 1 means shows result from environment mapping.

There are three modes for environment mapping: reflection, refraction, Fresnel. If both ‘Reflection’ and ‘Refraction’ checkbox are marked, it means using combination of both using the Fresnel approximation.

There are preset materials for the refraction. If the user chooses the user define material in the material dropdown, the slider bar appears so that the index value can be changed.

Also, there are draggers to adjust ratio of the chromatic aberration effect.

Royal Straight Flush

Gameplay

forest map

elite monster in forest map

desert map

elite monster in desert map

snow map

elite monster in snow map

boss

clear scene

I developed a health system, animation system, and UI components for the 3d first-person shooting game named Royal Straight Flush and created animators to animate characters in Unity and 3d character models and their animation using Blender.

Nintendo Switch Game

Description

throwing darts - strong

throwing darts - weak

This game is a dart throwing game using Joycon. The map is generated by procedural generation and the targets gradually approach the player. The player have to throw darts to hit the targets. The direction and strength of the dart’s flight are determined by the direction and intensity of the player’s swing of the Joycon.

Way Back Home

2D Top-Down puzzle game with custom engine

main menu

stages

game play

clear scene

Develop a custom engine for Way Back Home, a 2d top-down puzzle game, and create a core graphics pipeline and map editor. Implement player controller, object interaction, camera effects, and dialogue system and draw all the graphics of the game.

3D Modeling

Maya

These were created using Maya 2022

barrel

medieval weapon

books

candle

mirror scene

robotic arm

Blender

These were created using Blender 3.3.0

panel

coins

bowling pin

card soliders

AI Project

Pathfinding

A star algorithm

smoothing the path

merge the path

Find a smooth path with A star search algorithm and analysis the terrain to detect and seek the player. There are four types of heuristic function. The user can change the map or heuristic function or apply smoothing or rubberbanding to the path.

Steering Behavior

seeking

obstacle avoidance

Implement steering behavior; seeking and obstacle avoidance. An autonomous character that avoids obstacles and moves towards the item.

Math Project

Curve

This project uses JUCE

polynomial functions

bezier curve

interpolating polynomials

K-Means Clustering

This project uses Python

original image of mario

k=3

k=4

k=5

k=6

k=7

k=8

k=9

k=10

original image of vinus

k=3

k=4

k=5

k=6

k=7

k=8

k=9

k=10