Journey Through a Nebula

Description: I wanted to create the illusion of moving through a stellar nursery. For the main star in the center, I deformed the vertices using low frequency Worley noise with a layer of high frequency FBM on the top. I used a rotation matrix and several offsets based on sin and cos to continuously move the vertices over time. I colored the icosphere by mapping the FBM value to a fiery color gradient.

For the background, I wanted to create the effect of moving through a field of stars. This was achieved by scattering stars uniformly across a grid and then jittering their positions to create a random, but well-distributed placement. This grid was then drawn at different scales and depths and looped over time to make the moving field. I added cloud layers made of FBM multiplied by 1.0 - Perlin to mimic the look of real nebulas. I also used a sawtooth wave and ease/in out functions to creating the fading and looping effect of the field.

Try the live demo!

Languages: TypeScript, GLSL, JavaScript

Crystalsong Forest L-System

Description: I loosely based my L-System tree here on the trees from World of Warcraft’s Crystalsong Forest. I really liked the purple color palette and magical feel of the artwork from the game. In the original artwork, there are many interesting features to take note of, such as the rocky terrain, crystals suspended in mid-air, bloom effect on the trees, and color gradient moving up the tree trunks. I tried to capture some of these in my scene using color palettes, SDFs, and noise. In addition to the visual aspects of the scene, a large portion of this project was spent building the L-system parsing and rendering engine. Implementing the L-system from scratch was a really good learning experience, especially for understanding which rules lead to specific visual results.

Try the live demo!

Languages: TypeScript, GLSL