Ushna Khalid – DIGF-3011-501 (Winter 2023) Shader Art

Ushna Khalid – Final Project

For my final project, I wanted to make a few shaders for an installation demo. I used both shader graph and substance designer

Here is the image of the hallway the player starts off in. The player starts off on the left and makes their way down.

The first shader I made was the crystal shader

with this shader I was able to make many variations of materials for different crystal types

capture

Here are all of the crystal materials I made

Along with this, I wrote a script that added perlin noise that affected the crystals bottom color.

capture

I then made a game obj for each crystal material and added the script onto each object and gave them differing random numbers so there would all have different flickering values and would be more out of sync.

capture

The dissolve shader was also made in unity shaders graph

at first I tried giving it a node to insert textures onto the matieal to make it look more interesting, but that didn’t work out. so then I got the idea to simply copy paste my crystal shader and added it to the dissolve pattern and into the emission. With that I was able to make several disolve materials. I also made a script fro when the player object enters the disolve objects trigger, it will dissolve. The script allowed me to give each object its own dissolve speed.

capture

I followed a substance designer tutorial for the pond texture I used

capture

I then tried to make a shader graph to animate the pond but it didn’t work out very well.

I used my low poly crystal models for the crystals. The dissolve orbs were simply unitys 3d speheres. And I used a low poly nature pack for the forest area.

My idea for my projects definitely changed a lot. I didn’t even plan on origialy using shader graphs at all.

My first idea was to have a large dark room where the walls will show scenes of nature where the viewer is looking. However, directly behind them would be scenes of destroyed environments. And it would just be the area the player is looking at on the wall, the entire wall won’t play a clip. This way the viewer will have to move around to see what they could find. Later this idea evolved to having the viewer in a large room with 3d objects scattered around and the player could only see them once they get close. I changed the idea from a huge room to a narrow hallway since I found the large room disorienting.

I planned to make those “clips” in substance designer. I found a way to make animated textures in substance designer and just do all the trigger effects with c++. Before I got the textures ready, I first tested it out with plain materials made in unity. It didn’t work quite as well as I wanted it to so while exploring other ways, I found a tutorial on making fog in shader graph. Unfortunelt that fog only work for orthographic scenes. Since I wanted my demo to be like a game in first person, it didn’t work.

However, after that discovery, I found out that was a lot I could do with shader graphs. So I remade my idea and just went off from there.

I made a bunch of shader graphs from tutorials and got comfortable with it.

Honestly I was scared to use substance designer and shader graph because of the horrible experience I have with touch designer. But it was really easy.

In the end I’m satisfied with what I’ve got. I could definitely add on to it by giving the shaders some more effects. As for the demo itself, I need to fine tune the sounds.

Sources

Crystal shader tutorial

Dissolve tutorial

Leaf pond tutorial

Links to project

Github

Installation demo vid

Ushna Khalid – Week 09 HW

I chose to follow a tutorial from the Adobe substance 3d channel here.

This isn’t the first tutorial I watched for substance designer though. I watched a substance designer tutorial for burnt wood that I hopeto use for my final here. It helped me understand Substance designer a lot.

I haven’t finished it yet cause I wanted to try something else.

This tutorial however was pretty daunting. There were a lot more nodes and it was harder to organize. Though I found out that you can add pins on the strings to organize it better, but I think it got too chaotic for me.

The tutorial first scared me when he showed the graph in the start. But it was a 30 min video which is 20 mins shorter than the burnt wood one so I went through with it.

I did have to pause a lot during the burnt wood video, but here i already knew what i was doing so it was faster for me.

Substace designer isn’t as hard as I expected. And since I followed a few tutorials I think i got a handle on it.

111

Ushna Khalid – Week 08 HW

Ok so.

what I did was try to see what I could so with these textures. First obviously I needed to find a good skybox. I wanted one that was in a night sky setting. Like ina field with a sky full of stars but all i could jund where areas with houses around them, so i picked the best one.

After I got that set up, I started testing rock materials on a cube

ok wordpress is making this look blurry… ok look at the images in my google drive here

I started messing around with the height maps and base colors. I wanted to make them look shiny and reflect off of the surrounding area.

capture

Heres an example of one. I messed around with the metalics and speculation. I think it looks pretty cool. This is the sliced limestone texture

I then found a few other rock texture to do the same to. I then put them on lome low poly assets that I have and checked which material looks best on what. I also added a sandstone platform with its own texture and the.. platform for the rocks display

111

i don’t know why wordpress is nuking these. Again, just look at the clearer images here

I also added a video showing the materials I modified

Sources

skybox – https://polyhaven.com/a/satara_night

Materials –

Rough Reddish Rock PBR Material

Sliced Limestone PBR Material

Cavern Walls PBR Materials

Slate Rock #2 PBR Material

Sandstone Platform PBR Model

Ushna Khalid – Week 05 HW

For week 5s hw. I tried messing around with the shader, just as how I usually try to start. But there wasn’t to work with in the .frag file, so I looked through the js file.

I went through the file trying understand how it all works. From there I changed the rotation of the image, I then made the canvas bigger to see the rotation properly. The rotation looks as though someone is rotating the image themselves with how jerky it seems. it even rotates all the way around.

I tried experimenting with noise, trying to add noise functions that I used on my midterm but I didn’t know how to add it in. I tried adding them into the .vert file somehow but that didn’t work. So i decided to make another slider to change something.

the color sliderr is used to control the overall brightness of the texture, and a gradient of color is created based on the brightness of the image. The color gradient goes from red to yellow for the lower half of the brightness range, and from yellow to blue for the upper half of the brightness range. Then, the color gradient is mixed with white based on the value of the slider.

https://editor.p5js.org/CosmicNyx/full/-L1btLpdB

Ushna Khalid – Midterm

For my midterm, I chose to make a music video type thing with P5.

Before I started anything, I tried looking for inspiration by looking through examples that were given to us. I really liked Lillian Shwartz work, So i decided to focus on that as inpo. I really liked the fluidity that was in her video so I decided to make my video with that as its main theme, but i would be going or a calmer vibe.

I made most of the shaders in the book of shaders editor since I didnt wan to spend too much time trying to set up a P5 file to work in and thought that putting gin an already made shader into P5 would work better. Wheni finished making shaders, or a base of each shader, I put them into their own P5 file and then made a copy of the scene changer P5 file that we were given to try to put it all together. That didnt work for some reason so I made the whole midterm in one of the shaders files by making my own if statement and that worked.

For the first shader, I just wanted to see how to make a liquid flow type of shader. I ended up with a really simple shader that was in only black and white but I decided to include it. I went through the book of shaders a lot to help me out with certain thing. For this shader I wen through chapter 5 and found an explanation of abs that I used

for(float i = 1.0; i < 7.0; i++){
uv.x += 0.6 / i * sin(i * 3.5* uv.y + uTime);
uv.y += 0.6 / i * cos(i * 1.5 * uv.x + uTime);
}

vec3 color = vec3(0.1)/abs(sin(uTime-uv.y-uv.x));

For the second shader I found some cool examples of color maps. I wanted to try to make each shader more colorful that the next since the first shader is just black and white. So I experimented with them.

Color Maps

and for both the second and third shader I experimented with Fractial Brownian Motion that I found in the book of shaders here and found an example of on shader toy here

I also used and messed around with noise and hash functions found here

For the last two shaders I just used my week 4 shader and changed them up a bit and found images to that would look fluid when in movement.

these are images used for the third shader

these are the images used in the forth shader

Ushna Khalid – Week 04 HW

For the week 4 hw, I had to spend some time experimenting with p5 to try to understand how everything worked. I messed around with the examples we were given and then tried to come up with something from scratch.

I planned to just get some random image and then plug in some snippets of code from the examples. Whil messing around, I realized I could insert multiple images and use them both to form some type of displaceemnt texture.

I decided to to to make an image kind of… form into the other. I didn’t use a lot of code for this which was kind of unexpected.

I used these to center where the displacement will start.

color.rg = color.rb * 2.0 – 1.0;

And this is what displaces the image using time

vec2 displacement = color.rb * uTime;
uv = uv – displacement;

For the images, i found a nice space image to use as the imagethat gets displaced, and and abstract design was the image it kinda gets formed into. The result kinda looks as thoughthe space is dripping down and i really like it.

I wanted to make it when you click on the texture, then it starts getting displaced. but when i added that and you press and then press again. the displacement doesn’t start again. its still going on even when you just see the plain image. So if you wait a while, and the pres the image, it was already be dripped all the way down.

I realized this was because the millisec() function as soon as you press run an dit doesn’t stop or restart, so i tried making my own timer function but it didn’t work. when you press the texture it just showed a flat colo rand I’m not too sure why. I a just commented ou the if (mousepress) statement.

I still think it look really cool because of the images I chose.

Here is a link to it.

here are the images i used

r805157_7132271 abstract

Ushna Khalid – Week 03 HW

For this weeks homework, I wanted to try to experiment with different functions since I still didn’t know how they all worked.

I started off my recreating some of the example we were given. Just by looking at the image of the shader and not the code to try to see if I can do it myself. So then I can experiment along the way and end up with something that I could hand in. I wanted to recreate somthing like the grids example for the patterns gradeint.

capture

I was able to make this with 3 lines of code. I used fract and multiplied 15. with st an made it == st. I then messed around with cos and changed up the colours.

I also added a u_time in there to see it animated

I read through some more functions to see what else i could try and i saw floor, so i decided to exhnage fract with floor and got this

capture1

here is another variation i got

capture3

I also tried it out with both fract and floor enabled

capture2

and animated it

Ushna Khalid – Week 02 HW

For the week 2 hw. I first spent some time messing around with the HSB colour space. I made a few weird animation shaders, one that I saved was this Circle HSB. But I didn’t really know what I wanted to work on so I tried getting ideas from looking at other hsb shaders but I didn’t find anything good. So I continued to mess around with the hsb space until I got this. capture

This looked a lot like screen lines to me and I decided to work with that. Since I was just messing around and didn’t really know how I got here. I had to make it again from scratch so I would know how I got there. In the end, i realized it wasn’t that big of a change. I had just messed with the st.x var.

I then change the hsb.r t make it move. sb.r = -u_time*0.2+d made it look like this

I didn’t use any shaping functions at all in any of the HSB channels. Like what you see above, all the channels have 1. in them. I started experimenting with different shaping functions like cos and sin but it didn’t really do anything I liked with the hue. I then made a var that used the pow shaping function for the hue that made it look like this.

capture

I thought this looked interesting and decides to work with this. I didn’t have anything going on with the saturation and brightness because I thought that there really wouldn’t be any difference if I added in a shaping function or a simple number. However, the prof gave me the idea to just use the random function to spread different brightness and saturation across the canvas the same way it’s doing with the hues. Honestly, I should’ve thought of that myself but alas.

So I got made a random statement that looks like this

rand(c+vec2(0.920,-0.870))

the c var is where I’m holding the pow shaping function. And I put these both the brightness and hue, though the variable is sligher different but the statement for both is the same.

I made the background a flat red to see how it worked.

Here is the random function on saturation

capture

here is the random function on brightness

capture

here is with both saturation and brightness enabled

capture

and here it is all together

capture

After I got a proper static shader image, I could start working on animating the values. While trying to make a proper static shader, I was working on animating it at the same time. I used multiple functions to make different kinds of animations.

This animation uses fract

This one uses sin

These other two look more interesting and I had to change the HSB channels. H had the pow function while the other two have a distance function on them.

here it is with fract

and here it is with sin

I organized all these tests in if statements to make them easy to go through. I do think that a spent a little too long messing around with these to see what I can do.

Ushna Khalid – Week 01 HW

For the week 1 hw, I set aside some time to mess around with the .frag files we were given. I read the homework questions and tried to experiment around before I set an idea on what I wanted to do. I messed around with the RGB gradients and I really liked how it changed the color when you moved the mouse across it. However when you moved the mouse in the y-axis the color didn’t change. So I decided to make one that changed no matter where you moved the mouse, so it would be a gradient in all axis. I had to make 4 color variables for this to work properly though. The thing that made this all work was what I had to write in the gl_FragColor function. I had to make two vec 3 variables that mixed two colors and the mouse movement, then just added both of them in the gl_FragColor function. The thing that I spent the most time on was choosing the colors and which colors to pair with which. After I made it work, I realized that this test would be good for gradient #2.

Since I seem to be unable to add a video to this, here are screenshots of the few different colors they show up and where the mouse is for it. The 4 color variables I used was a shade of red, blue, purple, and green.

———————————-

For the first gradient, I had to choose between between a horizontal gradient or a vertical gradient. So I chose a diagonal gradient.

I had to make a var for gl_FragCoord.xy, and two other vars for the x and y position and the added them both into a var and divided by a number to choose where the gradient line would be. After I did that I made a color vec 3 var and made it change its color by calling it “col.r, col.g, col.b”. Im not sure what the exact term is. I then called the gradient and the color var in gl_FragColor. In order to manipulate the colors, I made each RGB var be affected by the mouse location, so the gradient color changes when the mouse moves