House on the Water
Procedural Graphics Independent Study Completed Under Professor Adam Mally — Spring 2021
GLSL, ShaderToy
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 render a 3D scene by using ray marched SDFs and creating a set piece. The render should include animation, uses of color, environmental lighting with directional lights, and SDF based soft shadows.
Process
I was inspired by these pictures to create this scene. One inspired creating a beautiful sky and the other inspired the purple house on the water. I wanted to render a house standing on water with a pretty starry sky.
Inspiration pictures for environment set piece
I was inspired by various shadertoys to create this as well. I was inspired by this shadertoy to create the sky. I was inspired by this and this shadertoy to create the reflective water:
For this environment set piece homework, I made use of various techniques to create the scene. I used signed distance functions referenced from IQ's website.
The camera can move based on the user's mouse position, so they can pan it left and right. I also used noise for the stars in the sky as well as the clouds, as well as the rippling of the water. For the sky, I sample from a texture in iChannel0 which creates noise. The color of the purple house also uses noise to create the shadowy look. I also use specular when returning the material colors. I use ray-based specular reflection in the water, SDF blending and operations like subtraction/union while creating the house.
User interaction: at the top of the shader, the user can decide whether or not they want STARS or CLOUDS by commenting in #define statements. They can also change the color of the sky by changing what #define statement for the sky color is uncommented. Color schemes include: BLUE, INDIGO, PINK, PURPLE, GREEN, ORANGE, RED
They can also change the type of noise that is applied to create the clouds by changing iChannel0 to whichever noise texture they desire.
Final Results
Here is the link to view the project online: https://www.shadertoy.com/view/3tGfzw
Here is a link to the Git repository for the project.
Final render of the house on the water