GitHub GitHub Universe 2020: Play - Creative Coding, 12 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with Shaders - GitHub Universe 2020

Description

Presented by Harry Alisavakis, Technical Artist, Jumpship

Here you’ll get a short introduction to shaders by going through some of their most basic concepts and by creating a simple visual loop in GLSL and Shadertoy.

For more from GitHub Universe 2020, visit https://githubuniverse.com

As always, feel free to leave us a comment below and don't forget to subscribe: http://bit.ly/subgithub

Thanks!

Connect with us.
Facebook: http://fb.com/github
Twitter: http://twitter.com/github
LinkedIn: http://linkedin.com/company/github

About GitHub
GitHub is the best place to share code with friends, co-workers, classmates, and complete strangers. Millions of people use GitHub to build amazing things together. For more info, go to http://github.com

A

Hi there I'm jaral savaitis a game developer and technical artist from athens, greece. I am here to give you a gentle introduction into the magical world of cedar coding, and I hope that in the next 10 minutes I will be able to demystify some of the black magic that surrounds the concept of sailors.

A

I would like to thank github universe for this wonderful opportunity and I guess let's get you started with shaders.

A

Let's start with the very basics. What are shaders shaders are small programs that define how objects are shaded and rendered on the screen. They run directly on the gpu, because it's way faster for them to do so. There are different type of shaders like vertex, shaders fragment or pixel shaders and geometry shaders.

A

How can one create shaders, well, game development environments like unity and unreal engine, provide node based tools for seder authoring like unity, shader graph and unreal's material editor shaders can otherwise be made using code specifically using cdl code languages like cg, hlsl and glsl.

A

What will we be creating today we'll be making a simple pixel shader using glsl? We won't be dealing with any geometry lights or any other cd elements. Our scene will be completely two-dimensional. This demo will introduce some very basic shader concepts and functions and we'll be using shader toy for it, which is an online platform for creating and sharing glsen shaders. Before we get into it. Here's a glimpse of what we'll be making.

A

Let's now jump into cedar toy. This is what you see when you first make a new center insider toy. The color of your output is determined by watching the frog color vector. We can see that better by setting our color to a fixed value.

A

And now we have our color. Similarly, we can set the red and green channel of our output to match the uv coordinates in order to visualize them. We can do this like so.

A

This way we can see how the uvs behave for each axis on the bottom left corner. Both components are 0 and on the top right, they are both 1..

A

We can also see that the red channel, which corresponds to the x-axis grows from left to right, while the green channel, which corresponds to the y-axis grows from the bottom up.

A

Something to note is that shaders have a neat feature called swizzling, which allows us to arbitrarily use components of other vectors to compose new ones, so this line could also be written like this or like this.

A

Let's now see how we can use our coordinates to make the simplest shape. We can a circle. A circle in shaders can be drawn by measuring the distance of any point from the center of the circle. Using our uv coordinates. We can express that as the length of the vector which goes from the center to our current uv, coordinate, assuming the center of the circle is also the center of rubs. We can write that, like so.

A

Using only one value in a multi-dimensional vector, constructor, like that applies that value to each of the vector's components. Let's see what this distance looks like.

A

We're kind of successful as the color gets darker closer to the center, because the distance is closer to zero, but the shape is stretched and that's because our aspect ratio isn't really square.

A

We can fix this by multiplying the x component of our uvs by the screen's aspect ratio. Before we do that, though, we need to bring our setting to zero by subtracting 0.5 from uv.x. After we multiply by the aspect ratio, we then add 0.5 again to bring our sender.

A

Back it's looking better already, however, this is technically not really a circle right. It's just the distance function that can produce a circle in order to get an actual circle, we have to specify which pixels are within a specified radius and which ones are outside.

A

Here's where a super useful function comes in the step, function, step will take two parameters and if the second one is smaller than the first, it will return zero. Otherwise it will return one. So if we have a radius of 0.3, we can create our circle like so.

A

Now this is a circle, but this has the opposite effect, because pixels closer to the center are darker right, so to invert it we can just invert the order of the parameters.

A

This is what we want. Let's now see how else we can use math to get some interesting, shapes and forms we'll come back to the cycle later, we'll be using a very well known, math concept, the sine wave. We can pass the uv dot x, the sine wave and multiply it by some number say: 5 to increase the waves frequency.

A

Now this doesn't look like a sine wave per se, but try thinking of it as if you're looking down on a surface of which the height follows a sine wave pattern to get a more familiar shape. We can use the step method again, but instead of using a constant number, we can use uv.y.

A

This will result in the threshold increasing as the pixels get higher.

A

We can bring this up a bit by subtracting the number from uv dot y.

A

We should reduce the amplitude to b2.

A

Most cedar environments, including seditory, provide a way to add motion to your elements by providing a time variable that increases over time to get some movement. We can just add that to the sideway.

A

Phase make it a bit faster.

A

It looks good, but it's a bit too repetitive. So, let's add another wave to get a more interesting shape.

A

Looks better already it's more fun to have more of this, though, so, let's make a function I'll just pass the wave generation code to the function and set the frequencies speed and offset as parameters to that.

A

A

Now we can just call this function, so we don't need all this code anymore.

A

Let's add some more and layer them in a way to fake some parallax motion to do that I'll, add two more layers that are offset higher move slower with different frequencies and have smaller.

A

Values I found that these values work the best.

A

We can combine the weights by getting the maximum of all the values.

A

There's also a way to fake some blurriness on the further back layers and that's by replacing the step function with smooth step. Smooth step works like step, but takes three parameters.

A

If the third parameter is smaller than the first smooth step returns zero if the third parameter is greater than the second one, it returns one if it's between the first and second parameters, smooth steps smoothly interpolate between zero and one based on where the third parameter is placed between the other two. Let's see it in action.

A

And we can now see that the edges have gotten blurrier.

A

That looks good already, but let's add some color. We can set two colors and interpolate between them using the values of our waves.

A

To interpolate between the two colors, we can use the mix function.

A

Mix or lerp on other environments takes three parameters and returns the value of the first. If the third parameter is zero, the value of the second, because the parameter is one and it linearly interpolates between the values of the first and second parameters based on where the third parameter is between zero and one mix can also be written. Like so.

A

Let's also use our circle from before to invert the color of the pixels that are inside.

A

It and that's about it. I hope you got a useful first glimpse at how sailors work thanks for watching.