A lot of people seem to enjoy this transition I posted recently, so let's do a breakdown thread, shader 101 style! This is a real "technical art secrets your doctor doesn't want you to know"-type beat so let's get into it #madewithgodot #gamedev #godot 1/13 - ThreadSky

turbohermit.bsky.social • 136 days ago

A lot of people seem to enjoy this transition I posted recently, so let's do a breakdown thread, shader 101 style! This is a real "technical art secrets your doctor doesn't want you to know"-type beat so let's get into it

#madewithgodot #gamedev #godot
1/13

Comments

bergberggames.bsky.social•135 days ago

This is genius! So cool 🤯 great explanation too!

turbohermit.bsky.social•135 days ago

Thanks! Together we can demistify shaders haha

tired-babysitter.bsky.social•135 days ago

Fantastic thread, thank you for this! This is definitely one of those things that feels obvious, but only after someone explains it to you

turbohermit.bsky.social•135 days ago

Glad its helpful!

turbohermit.bsky.social•136 days ago

We'll be taking a look at home a greyscale image like this, can be converted to an animation like the one I show above. It's an easy trick that I use a whole lot in VFX and technical art, and even in graphics optimization from time to time.

2/13

turbohermit.bsky.social•136 days ago

The most important part of understanding how this kind of stuff works is realizing that color... is just data. Let's create an example from scratch!
3/13

turbohermit.bsky.social•136 days ago

Look at this black-to-white gradient texture. I want you to think of the top, the most white part, as 1.0

The bottom, the most black part, is 0.0

The center thus would be 0.5
4/13

turbohermit.bsky.social•136 days ago

Now imagine you have another variable, a shader property. Let's call it Cutoff. It's a number between 0.0 and 1.0 that you can manipulate. Let's say in our shader, we want to hide (discard) any pixel from the texture that is higher than Cutoff.
5/13

turbohermit.bsky.social•136 days ago

Now if you change the Cutoff, you'll see anything lighter than that value disappear. This means, that if Cutoff is 0.0 nothing is shown, at 0.5 half of the texture is shown and at 1.0 the whole texture is shown.
6/13

turbohermit.bsky.social•136 days ago

Now I want you to think of Cutoff as the percentage of an "animation". Where 0.0 is the start of the animation, and 1.0 is the end.

If you play the animation, it will just reveal the texture from bottom to top. Honestly, we're halfway there already!
7/13

Comments

Posting Rules

Reply