1/ Have been asked about the Pinni distortion effect quite a few times, so thought I'd explain how it works.
One of my fave effects, displacement maps 🧵:
#gamedev #tutorial #shader #hlsl
2/ Going to start with a basic texture from Pinni to demonstrate each step.
The shader can work in any game engine; in Pinni we use Unity's awful shaders language, but for readability I'll be using HLSL.
3/ Distorting an image from a fragment shader basically means taking each UV coordinate and moving it.
We want to move in the opposite direction of the origin, which we can get from the normalized (direction-only) result of our UV coordinate minus the center.
4/ Let's try making our texture distort like the graph above.
I've added an `amount` uniform to control the strength of the distortion.
5/ Here's the code for the above video (v_tex are UV coords). With just a couple added lines of code, we've already applied a distortion. Good job!!
...But the effect isn't quite done yet.
6/ We want to limit the effect of the distortion so the whole screen doesn't go crazy at once.
The strength of an effect is between 0 and 1, so if we make 0 black and 1 white, we can MAP out where the effect SHOULD be applied.
This is the "map" we base our displacement on.
7/ Almost there, but we want a donut for the "ripple".
To make the first circle, we found values based on each UV's distance from the center. We then do it again, but smaller!
Multiply them together and you've got a donut.
8/ Don't worry, I'll show code now.
The interpolation was performed using `smoothstep`. We added `spread` for the outer circle's size and then subtract a `width` to find the inner circle.
Spread controls how big the total area is, and width how thick the ring is.
9/ You can play with the values to see how each one changes the effects.
10/ With a little tweaking you can get the subtle ripple effect as seen when Pinni barks.
BONUS 1/ as for the rainbow effect that we've posted, that's just as simple to add.
We've already got the donut map of 0 to 1, so let's use that to control the intensity of a tint added to our texture.
BONUS 2/ Here's the code for that.
For the full Pinni effect, we randomly cycle through HSV colors (which are easier to see than RGB).
BONUS 3/ That's the whole shader-- about 6 lines of logic and only 4 uniforms. Not bad!
You can take the effect much further with little to no effort. E.g. we pass in a position rather than center screen, and support multiple ripples, among a few other things.
Go wild with it!!
END ???/ Follow me and go wishlist Pinni on Steam if you find any of this interesting and think the game looks cool lol
I'll be posting more code stuff as we get further along and hopefully open source as much of it as I can!
store.steampowered.com/app/1822590/Pi…
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.