COMPILATIONS

PROJECTS

GLSL Projects (Shadertoy)

EXTRA: PERSONAL ART (2D)

About me:
I'm a new grad from Stanford University where I studied computer graphics. I love all kinds of art!! When I'm not in school, I'm an illustrator and I love participating in artist allies, and embarking on many strange art journeys.[email protected]
reel
resume
new website (carrd)
old website (melissaran.github.io)

Projects in Unity Engine

Ranked by how much I personally enjoy them!

#6

VR Projects

For these projects I was instructed by Karen Liu. Made with Python, PyBullet.

FRAME-BY-FRAME MOTION MATCHING USING MOCAP ANIMATIONS

WHAT IS MOTION MATCHING?
Your character in a video game may stroll, stumble, sprint, or run their hand against a wall depending on factors such as...* The player's desired speed
* A sudden change in the player's desired velocity or direction
* The character's proximity to obstacles.
* The character's pervious state (sitting to standing, running to jogging, etc.)Motion Matching maps a set of parameters characters (say, high forward velocity) to a pre-defined animation (running), creating richer and more context-aware movements for controllable characters.In this project, I leverage a database of mo-capped animations to build a library of animations, each indexed by characteristics such as joint angles and COM velocity. (To be specific, I use a KD tree. It's so powerful!) To challenge my understanding, I extended baseline deliverables by adding jumping functionality and also implemented pose interpolation. The final result is above.

RL SWIMMER:
Super dry summary: Used reinforcement learning to teach a skeleton to float, and then, to swim. Designed and implemented reward and observation space for human body, in order to achieve swimming motion. Implement feasible action space, enforcing skeletal hierarchy and joint angle limitations.

So what is Reinforcement Learning anyway? At this time, April 22nd 2025, I cannot answer this fully and accurately because it's been a while since I took this class. However, I'm sure of this much:I want a skeleton to swim: she's a hierarchy of transforms, one for each of 14 body parts. She's also an array of joint angles -- and each joint has varying degrees of freedom (DOFs) depending on which axis it can or cannot rotate around. So, her pose is represented by an array of scalars = joint angles = DOFs.Using this information, I need to teach her to swim by:1. Defining a scalar reward for her. For example, if I want to teach her to float, I may choose the Y value of her COM as a reward.
2. Defining an action space for her. I need to specify how she can respond to her reward using her joints, which can get complicated when enforcing realistic human joint limits.
3. Defining observation space. As she is learning, extra information may help her, such as the water level, or a sinusoidal time scalar, to give her a sense of rhythm (helpful for swimming perhaps?).I feed all this information into a black box that is Reinforcement Learning. There are perhaps gnarly things like Hessian matrices involved. The outcome can be seen above.

Please enjoy some fun projects :)

JUNE + SECRET ATLELIER

Realtime environment piece I made in Blender (Eevee). Breakdown is embedded below, and also in my reel! All models and textures belong to me, as well as concept art. (In my personal art, I do not use AI.)I created this environment as a part of my art book project, where my goal was to fill 40 pages with original illustration and 3d art within one month, June 2024. I sell this book at vendor events, which I post about on my instagram!This year I have really fallen in love with books. Isn't it crazy that drawings, photos, 3d renders, texts, and even stuff like QR codes can come together to create something new? Please enjoy...

MOON STORY

READ THE PAPER HERE (ACM)“Third author isn’t a big deal,” you say. But here’s the thing: the first two authors are the masters and PHD student who initiated this project. The third is me because I’m responsible for maybe 70 percent of the application (an educational game) upon which the whole paper hinged!This project sat on the back burner for a few years until 2023, when Alan Cheng (my very cool PHD boss), said, “it’s time to bring out the big guns,” and re-hired me for the summer. With the “big guns” (me) in his arsenal, the paper was competed in one summer.Moonstory is an outdoors AR learning journey that I worked very hard on, made in Unity. My contributions include a wide range of things such as... implementing the narrative/ progress system, implementing AR learning activities, creating sprites and artworks, 3d modeling, shaders, wrangling UI, fighting Niantic Lightship, placating child study participants, etc. I definitely pulled late nights for this project, so I'm happy it was accepted to CHI 2024. Thanks to my mentor Alan for introducing me to HCI research, I had a great time!

A word about AI:
There are many many, reasons why I can't feel okay about it, and will never use it as an artist or in my personal life. I don't believe in immediacy, greed, dishonesty, and exploitation, only to name a few things. One of the really unfortunate flaws of Stanford is that its essentially a koolaid factory.

GLSL PROJECTS (Shadertoy)

Raymarched cloth bells

SEE REVISED CODE (V2)
SEE OLD CODE (V0)

V0: looks good but has a lot of implementation mistakes. I made this freshman year.

V1: corrected normal and light functions, reduce redundant operations. Without DOF and with different color effects.

V2: add DOF

MORE SHADERS of dubious quality

Below: a spicy noodle simulation and a vine grower :)
Password: pup2022

Moon Festival is a short CG animation I created with a team of 10, in two weeks during my internship at Pixar. Below the video, I go into more detail about my experience with this project.Thanks so much to my amazing and kind peers and mentors. I hope you enjoy it!Password: pup2022

My contributions were concept art, tackling numerous shading challenges (including food and the moon monster), helping to create storyboards, and making graphics for our signage-heavy set. I've included these artworks below.Early during the ideation phase I made concept art of this gross egg monster in the sky, thinking about Junji Ito drawings, and the team decided to go with it. This monster had little basis in physical reality: optically, it didn't behave exactly like a moon or an egg, so it was a challenge for me to shade it. I've included a few photos I took of my screen during the shading process, as well as some scallion pancakes I am really proud of.When making illustrations for, and shading the electric signage in the scene, I wanted to convey a retro, familiar, and neon feeling, drawing from my memories of Asian snack packaging and Chinese TV ads I watched as a kid, but with a subtly cursed twist.Please enjoy this gallery of artwork I managed to salvage from the depths of our team Discord channel.

A word about AI:
There are many many, reasons why I can't feel okay about it, and will never use it as an artist or in my personal life.
It was rough working here for that reason. I declined a full-time offer after my first week in September 2025, and wrapped up in December 2025.without further ado...

WHAT I DID AT SPATIO AI

The product the day I joined:

The product after my contributions:

The company:An early stage startup that is building a web-based generative video game authoring tool using BabylonJS as a 3d engine, with 8 employees at the time I joined.When I opened the application for the first time, there were:
Missing textures. No lighting but a hemisphere light. Default shaders only. No shadows. Models were mysteriously dark, only when textured. Opening the Babylon JS inspector, you could even see that models had been imported with no normals. Later I would discover that all the triangles from all the meshes were disjoint. All the meshes were diffusion generated, even the terrain was a generated mesh with a single untiling texture whose resolution would inevitably not hold up.The company was founded by ex Ron Fedkiw PHD's, whose research focused on AI. So, my skillset as a game developer / casual graphics nerd / artist was new to the company. For example, when I introduced the idea of a heightmap, there was quite a stir.It was time to do what I do best -- make things beautiful! Whether through hand-painting some acceptable textures, or plunging my grubby hands right into the render pipeline.

PROBLEMS I saw, and set out to fix:* The creation of the terrain system was one major task I saw over from start to finish, including the grass system.* Water shaders provided by BabylonJS did not fit our use case, and the existing fire VFX desperately needed the touch of an artist!* No custom shaders existed, and BabylonJS's implementations of some popular shaders (such as the cell shader) weren't very appealing. At the start of my time at this company, I tested each of Babylon's premade shaders / features to see whether I should implement it from scratch for visual or product-specific reasons.* No post processing was utilized. No custom post processing existed.* No cohesive lighting, no shadows.And beside all that, I went on productive little detours such as:* Saving the player animation state machine from becoming increasingly nonsense from iterations upon iterations of unsuccessful Claude debugging, amongst other things that don't make pretty videos, so I'll spare you those details!

THE GRASS
Because this is a browser application, it was important for me to create a grass solution with multiple fidelity-reducing options.To use Babylon's ThinInstance feature, a buffer of transformation matrices must be supplied to the shader of the original mesh, a blade of grass. That's when it can be fun to apply some statistical gimmicks:For full coverage, grass position is sampled from a uniform distribution to create a dense field. As an optimization option, a gaussian distribution is used to create a "mound" effect, saving triangles in a natural-ish way.For high end devices, a 4-triangle blade is used, and its wind deformation is quadratic. For low end devices, a single triangle is used. Another optimization consideration: bigger, more singular grass meshes = less batches, but less culling too.Length is modulated by a shared splat map. The height of each grass blade samples the height map in the transformation buffer stage, not inside the vertex shader.

BELOW: low fidelity grass option (triangle blades, gaussian distribution.)

WATER SHADERS
Babylon's built in water shader wasn't up to par: it had a "wave" vertex animation that offset height in a linear way (think corrugated metal instead of waves), did not interact with the depth buffer, and implemented refraction in a way that didn't fit a use-case involving a large terrain mesh. So a custom one was needed. The custom shader subtracts it's own depth from the depth in the dbuffer to modulate color and opacity.
I made my own refractive shader (bottom right) for fun!

WIP SECTION:
Post processing and customized shaders + Renderstyle feature. I'm still in the process of writing about these!

Here's another fun before and after:

CONCLUSION
Every feature I worked on made it into the product, and was shown to investors. It's not sitting in a box unfinished! There's still a lot for me to learn in regards to realtime rendering, but I'm the most happy that I finally tried my hand at GPU instancing. Of course there are much more advanced terrain systems than what I had time to implement, but I met my goal to make truly functional things. I didn't consider "truly functional" a merit before working here, but after redoing so much code made by interns, my views have changed.Hope you enjoyed reading about my small startup experience!