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

Hello world!

Welcome to OCAD University Blogs. This is your first post. Edit or delete it, then start blogging! There are tons of great themes available for you to choose from. Please explore all of the options available to you by exploring the Admin Toolbar (when logged in) at the top of the page, which will take you to the powerful blog administration interface (Dashboard), which only you have access to.

Have fun blogging!