Tara B – Week 1 – Gradients

Prior to this week I had only touched shader graphs in Unity, I had seen shader code while importing other’s shaders into my projects but it wasn’t anything that I really understood.

The syntax for GLSL is pretty similar to C# for me and the fundamentals are similar so I didn’t struggle to much with understanding what each variable was doing in my code. I did enjoy messing with the math functions which isn’t something I do in my c# scripts too often.

I did a lot of experimenting with changing components of a variable and tweaking combinations to make the shader output different things. After getting to the point I have with my RGB shader, I wanted my mix shader to interpolate between two different gradients.

shader134b2979053eca5736946e5a272f71711

This is the final RGB shader that I made.

shader2 shader3

These are the two shaders that I had before I made my last adjustments, I thought they looked pretty neat.

At first I just set up the first gradient mix with just two colours. After I got that working I tried to set up another gradient mix with two different colours but I couldn’t figure out how to get them to mix in and out of each other. I then gave up on the idea for a bit and tried to get a gradient that was diagonal, I looked up online how to do it and in the end it proved a bit too much to try so I also abanonded that idea.

In the end, I decided to see what would happen if i used the 1.0-st.x code that I used in my RGB shader and I accidentally managed to get my initial idea to work. It wasn’t exactly what I was intending (the gradient was altogether supposed to be 4 individual colours in 2 gradients) but I did get a similar effect that fakes that kind of look that I wanted.

4bf24eef331150c9960cafa8968d488a254404db667e9ac109c098d8ebe7205331a03c490f645aa34c3dac788e78cdea

https://gyazo.com/9b8924a2673af1d89b95e0b9b4c09e68 <- A gif of the shader

I had a lot of fun once I understood what I was doing which helped me experiment and play with the shaders to do some fun stuff.

These are some of the other shaders I had before I settled on the final one.

https://gyazo.com/8fde3e8fa912a6a5e06b839f85976dc1

https://gyazo.com/54972ac2928426f33d23aa17f317aa09

Leave a Reply

Your email address will not be published. Required fields are marked *