Pokémon Stadium with SDFs

Procedural Graphics Independent Study Completed Under Professor Adam Mally — Spring 2021

WebGL, TypeScript

Overview

In my final semester of senior year, I undertook an Independent Study centered around the topic of procedural graphics. For this course, I completed multiple assignments in WebGL and Typescript, along with creating shaders in ShaderToy.

For this project, the goal is to create and animate a scene using signed distance functions (SDFs). The use of SDF combination operations such as intersection, subtraction, and smooth blend are required. Additionally, shading using surface normal computation and raymarching by way of bounding volumes is required.

Process

For this project, my inspiration came from the Pokemon Stadium stage from the video game Super Smash Bros. The reference image can be found here.

Inspiration picture for Pokémon Stadium render

I created the Pokémon Pikachu and Pichu on this stage. I did this through using SDFs and operations such as union and smooth blend. I was able to create the PokéBall on the stage by using operations like subtraction.

There are some features that can be changed through interaction with the GUI. For example, one can change the timeOfDay drop down menu to StarrySky or DayCycle. The StarrySky option produces a background uses random probability and a sin function to create the animation of the starts in the background as they "sparkle". This creates an infinite starry sky that one can see when they pan around the world. For the DayCycle, I referenced code from CIS460 to create a day-night cycle, and modified it so that the user can change the dayCycleSpeed. The speed affects how fast the sun rises and falls and can be changed in the GUI.

The user can also change the stadium color. The default color is the green color that can be found in the reference image. Also, they can choose whether the platforms should animate or not. This causes the two support platforms on either side of the Pokemon to levitate and fall down again. This was accomplished through using toolbox functions such as trig functions as well as the triangle wave function.

I included links to all the code that I referenced throughout comments in the code. For instance, I used a lot of IQ's formulas for SDFs, and was inspired by some shaders on ShaderToy for other effects such as the StarrySky.

Final Results

Here is the link to view the project online: https://saranyacodes.github.io/CIS599_HW02/

Here is a link to the Git repository for the project.

Interactive Pokémon Stadium Scene