SDF Landscape

In this project I made a cute little stylized scene using SDFs in WebGL. The entire scene is created in a fragment shader that raymarches and shades sdfs. 

Final scene animation

Scene breakdown

How I created each feature

Lighthouse: The lighthouse is made by hand using sdfs primitives (specifically capsule, capped cone, and torus). The main fun was toon shading it, which I did by taking abs dot coefficient and using whether it passed certain thresholds to determine what color to use, which gave it a stepped look.


Water: The water was created by warping a plane with fbm and offsetting it twice (in time and space) very slightly to get differet surfaces to shade different colors. I also added a goofy little cartoon wave shape in the back (combination of different math functions) to add a little playfulness to the water. Over time, the water has a small up and down wave motion as well as high and low tides that come more gradually. I shaded "sea foam" near the shore that syncs with the small waves by creating an offset sdf function for the hill (slightly bigger and to the right, up, and forward) and shading water that would be inside this proxy hill with a light colored overlay. The intensity of this overlay syncs with the small wave motion to make it seem like sea foam being created by the waves.


Hill: The hill is a sphere thats been sculpted using fbm, toolbox functions, and some transformations of input positions. I use two different fbm functions to preturb the y coordinate of the position used to differentiate between grass, dirt, and sand, which give the wavy lines between the transitions. Then, I use a combination of how much the points are facing camera and how much they're facing the light (found with dot products) to shade the different features. I tried to shade them similarly enough that they're cohesive, but differently enough that the color changes don't always line up for the different types of material on the hill.


Clouds: Each cloud is the same set of spheres preturbed with fbm which is based on position. I animate them by changing their center position over time, which also makes their shape morph over time. To shade the clouds I used dot products to find how much points were facing the camera and facing the light, and combined these values (along with a stepped effect) to get cartoon shading that emphasized their shape.


Background sky: For the background I used fbm to mix between two different shades of blue. To get the stepped cartoon look, I multiplied my mix amount by the number of colors I wanted, floored it, and then divided it by number of colors again.


Day/Night: The lighting for the scene moves over time to simulate a day/night cycle. The colors of the various scene features also change in sync with this change.