I am fond of Node-based programming and have dipped my toes into blenders shader nodes previously and have been eager to teach myself unity shader graph because of its potential interactivity and having seen its capabilities being used in VR chat.
I started to follow this tutorial on using the shader graph to create rain ripples but dropped it after my lecturer provided me material showing how to use unity particle system using a PNG and fading out a billboard with its lifetime. However, I wanting to use shader graph I figured that I would be able to use the particles lifetime as a control for the width of the ring and have it so as the ring grows in size, it thins until disappearing. But to get myself familiar with unity shader graph I decided to first use it to create an animated toon texture using this Wind Waker Water Tutorial as a guide.
I then realised that the Shader Graph doesn’t work without the Universal render package. but thankfully unlit shaders are very quick and easy to convert to URP shaders and can all be selected and changed at once.
After watching a tutorial on Custome Vertex Streams I figured out I could set a channel in the UV node to do just that by splitting the “B” channel of “RGB” also know as “Z” channel “XYZ”. That channel would carry the time value going from 0 to 1 as a decimal percentage of the particles lifetime. However, this ended up with the ring getting thicker as the decimal counts up leaving the ring with a thickness of 1 at the end. By using “(1-y=x)” this would flip the decimal percentage and give the intended outcome. I couldn’t figure out how to use shader colour however in tandem with partial colour so I couldn’t get the shader to fade as its lifetime ended, however, I know this to be possible however I moved on before figuring it out.
I wanted there to be a visual trigger for the ripples to create anticipation as It plays in time with the music. I first created a sphere that I scaled along the Y and gave it a version of the water shader with increased strength and decreased size. I liked the look of this droplet but due to its detail and busy nature in one hand, it felt out of place not fitting with my flat aesthetic and in the other using the same shader left if hard to read next to the water plane. Luckily I found a solution while watching rain tutorials and found this 2D Rain tutorial. I used this animated sprite billboard locked on an axis as my rain particle.
Mesh emitter
All that was left was to parent the Ripple to the Drop and set the Ripple as a collision emitter. For a while I had it set to the world so any collider including the player would trigger the ripple but the sprite’s hitbox is slightly larger than the image so the ripple would spawn about a foot above the water so I used a plane collider instead that’s slightly below the surface to align the ripple nicely with the water plane (this should also improve performance and eliminated variables in their behaviour).
I used two techniques to control where the particle would emit I had a single emitter trigger to the beat of the music I then created position keyframes that would move the emitter to where I wanted them. I had to set the particles relative to the world so the particles wouldn’t follow the emitter as it moved around. I then created a mesh with 7 vertexes in the locations where I wanted them to spawn and then triggered a burst with the timeline that spawns 7 drops 1 on each vertex at once. I created a second mesh emitter lower on the Water Plane as well, to trigger Ripples in the same spot just without the Rain Drop.
I showed a Flatmate my project and without missing a beat the 1st thing they said: “Could you make it prettier?”. I didn’t quite understand what she meant by that. I had set myself limits by using unlit shaders and I was very fond of the simple paper cut-out look it gave. So I started thinking about adding gradients to the materials or how I might create a “fake light”, a cone that would apply a hue over materials render behind it or perhaps use a stencil like I had used with the magic door. After asking her what she meant by suggesting it wasn’t pretty. she used Walkabout Mini Golf as a reference, as we had played it the night before. The awe she felt standing on the course looking up at the towering cliffs and down into the deepest depths.
I realised, for the most part, everything in my game felt flat and that from a design stance defeated one of the key joys of VR. So I simply duplicated the water plane and lowered it creating a sea bed I then created a copy of the material adding a vector to the alpha channel. the Top-Plane was made translucent and the Lower-Plane was made greyscale as to take on the top planes hue. Finishing it off by lowering the shaders scale vector to create the look of light refracting on the sand. This gave the added benefit of being able to simply lower the tadpoles below the water and having a variety of depths for them to occupy.
I now noticed that the water ripple particles where sometimes being drawn bellow the water and even more egregiously on top of the lily pads. By changing the LillyPad shader to Transparent with a 100% opacity fixing its Render Queue to 3000 and then shader graph allowed me to set the ripple and waters queue to 2999 and 2998 meaning that the LillyPad would always be on top of those materials no matter their transform.