The Simple Yet Powerful Math We Don't Talk About - Freya Holmer I Neat Corp

all right so there's gonna be a lot of things in this talk where the slides are very relevant so we're like all of you are sitting there to the left might have a hard time following along but yeah so in case you want to move feel free to do that feel free to sit on the floor if you want to you I don't care all right so this talk is the simple yet powerful math we don't talk about I think it's it's one of those things to where we do talk about them but not enough since this in this weird middle ground of like a very simple mathematical function that's like ubiquitous in game development and shader coding but we don't talk about enough so I figured in I would do like a little overview a few functions all right so so who is this whom I so that's uh my name is Franco Murray I generally do a lot of like indie development I'm kind of a generalist sort of focused on programming shader coding hmm I released a thing called shader forge for unity like a long time ago I don't even remember how long time ago was at this point but it was a node-based trader a shader editor we could you know create your own shaders in unity without having to code so it was very similar to you know what unreal had at the time with our material editor and so forth then I started a studio called neat corporation in in Sweden so we are where we released the game called budget cuts so budget cut to say like first-person stealth VR game we throw knives robots in offices and right now we're working on Garden on the sea and the sequel but it cuts - which is coming up very soon which is very scary and we're all stressed but yeah so that's what we're doing at knee-jerk the other half of my time I do tweets quite a lot this is probably what I'm most known for it on the Internet probably this is gonna be on my gravestone this is just how it is I guess but otherwise I do live screaming I do live in develop on Twitch so I do like live tutorials I do like talk about how you know what are the tools you need in mathematics and game development how do you make shaders in unity like all sorts of stuff and generally their focus on unity focused on like tech art yeah so that's that's what I do so math many people look at math like this is one of those like oh jeez what a I hate math it's boring you're doing a lot of numbers like who cares of a number is right it's kind of like this frustrating subject in school and it's often very early it's presented in a such a boring way where do you see you bunch of numbers and you're like okay well what's the purpose of this why are we doing this how what is it used for right and I think that's really it's such a shame because mathematics is so fundamental to what we deal in game development and even within art so when you go to school and you see this are like how many of you understand this raise your hand that's way more than I expected awesome okay how many of you know what this is not maths is sort of correct but I mean like more of a narrow category than that but okay it's symbols on a slide but yeah so like I think presenting math of this way is bad because like it's really difficult to understand this like there was like three hands here who like knew what that was right so you can print percent things that are much better way so part of what I do is that I also visualize math so I posted this to Twitter and after I posted this one it kind of exploded and there was like thousands of people going like white and my teacher not show me that at school now I get it right because like so often they're like showing this graph and it's like okay here's a cosine over time it's like okay but what is the cosine what do we use it for what's the purpose why are we here why am i writing numbers on a paper right yeah okay but you can make beautiful things with math like this isn't art piece that I made so this is like I think there are so many nice things you can do in math that's like completely unrelated to numbers where you can just take take a concept and visualize it and turn it into something nice right so this is another piece that I made I was very bored an afternoon and so I wanted to make some sort of art piece using a shader so this this whole thing is a single mathematical equation where the only inputs is the coordinate of the pixel and time all the rest makes an animated like this and it's literally a single quad in unity like that's that's the whole thing there are no other object sorry yeah and all of these are using like so many of the things that we're going to talk about today and here's another thing that I did in budget cuts the stealth gamer I talked about where we have this bow and I wanted to you know when you charge the lower attends the bowstring and one of the like site this sort sort of shrink and I don't want to be like indicator to also like show these light dots as all that it's also you know very much do you think the things we're gonna talk about today there's a game that I work on on when I live stream called flow storm so this is another really good example of if it loads please load please load yeah so this is a this is a little rocket ship on a game that I'm working on and if look at the flame that flame is using a lot of math in order to you know figure out how it should move what it should look like how it should Bend as you can see there's sort of bends when the rocket turns it also squishes and stretches depending on if you're going you know forwards or if you're like breaking against you know the flow of the flame and that's a lot of like compositing things together right that's what we do when we code shaders so in this case we had this scrolling noise texture the shape of the flame and then you can see like in the in the bottom left it doesn't really follow the shape but in the bottom right to sort of added a distortion to it so it sort of has this little effect of following the shape rather than just you straight through right and then of course having colors to it I don't know how many of you can see that but yeah and I'm adding colors of course makes it pop a lot more and it looks the way you want to t afraid the bending is a lot of stuff about you know knowing how to use trigonometry how you've been coordinates what does it mean to change coordinates for something and then you sort of get this bending effect right and the stretching is squishing it's also something bad you know I blend between different values I change the intensity of the flame based on how much it's squishing as well so it kind of looks like it's fighting against you know the force of the rocket there's a lot of neat tricks you can do like this so like you can use the concept of colour ramps you can like combine things in two dimensions and have a 2-dimensional color ramp for coloring your flame where you know the y axis is time and the x axis is the brightness value of the mask you give this one so that there's so much you can do if you have some you know a good understanding of mathematics and how to apply it to you shaders here's another one there's a little there's a pickup pad I wanted it to look super rtd so the little wave pattern at the bottom is also like completely mathematically defined like that's not a texture it's just math initiator right and the advantage of that is that there's no texture memory spent these shaders like and more expensive but depending on what you do it could even be cheaper and if he it's like infinite resolution if you go really close to it this is in VR so you can like literally bend down and like push your face into the geometry like there's no like pixels anywhere okay so that was like a short brief overview of like what you can do with shaders in general using these concepts so the very first thing we're going to talk about is a very very common function that probably most of you know about I hope actually how many of you are programmers in here quite a lot how many of you are make shaders gotcha how many of you are artists who never touch code gotcha okay there's gonna be some code here so a little bit of warning I hope it's okay even a little bit of gameplay code so this is probably the techies talk on the art track and I'm sorry okay so there's a function called lurk this is an extremely ubiquitous function within game development it's just absolutely everywhere it's a way to blend between two values essentially sometimes we call blend or something we say we call it interpolation they're kind of like interchangeable okay so what is alert it's a functions so it has three inputs we have an input of a and we have an input of B and an input of T and then that gives us a value in return right the a value is a start value B is the end value T is a fraction from 0 to 1 or value between 0 and 1 and the output the green one the value that's a blend between a and B based on T so if T is 0 we get a if T is 1 we get B so it's sort of like a percentage you know how much of one do you want versus the other right and if you have you know if T is 0.5 that's 50% that's halfway between a and B so it's sort of like a way to blend between two different end points right so we look at this before the T value now the third one that goes from 0 to 1 we have this animating value now this one is going you know all the way up to 1 goes back down to 0 and sort of like oscillating in a wavy pattern right let's say a and B is 10 to 20 so what's the output of that well we're gonna get a value that goes from 10 and then animates up to 20 so this is sort of a nice way to you know animate something within any range you want right so you can replace 10 to 20 with anything you want but numbers are boring let's not do numbers we can do positions as well let's say a and B are coordinates then we can blend between coordinates 2 that's that's something you do with interpolation so so amb is a position and then again it's the same rule if T is 0 we get the position of a if T is 1 we get the position of B and any values in between are blended right what about colors well we can do that with colors too we can blend between two different colors so when T is 1 we get magenta when T goes back down to zero we get cyan right so this is a very powerful tool you can use this for so many things you can use it for angles if you want to you blend between two angles sure why not right okay so let's look at the let's look at how to use this over over space rather than time so now we've looked at the T value changing as time moves on right changing over different points in time but what about changing over different points in space so let's look at the colors again so we have cyan we have magenta and then a sort of T animating now over time it's gonna change over space so now we have this little gradient it's going from zero to one so you can sort of think of black as zero middle gray as 0.5 and white as one let's sort of have you visualize values like that and shaders generally the result of that is again it's the same rule wherever T is 0 we get cyan wherever T is 1 if we get magenta so what we get is a gradient map and a lot of people are probably familiar with gradient maps like you've probably used them in Photoshop or you know any any other art program right but this time is like just defined using a simple mathematical function okay so what about replacing T we can like have some sort of fog or like some smoke particle or something it's still gonna work it's still the same results again we're T 0 we get a forties one with B and if I listen between our blended alright another example so let's look at the beautiful Monument isn't that neat and we that's our a value that's like an entire background a texture right and then B what it was a B to this mysterious texture and then T is this so you might be able to see that B and T in this case looks like a texture so this is actually a sprites so we have the RGB channel is going to be the B inputs to the lerp function the T values can be the Alpha Channel from that texture so the result of that is that we get Hyderabad with a sparkling heart on top so that is how alpha blending works that's what a GPU literally does when you have alpha blending when you have sprites when you have all of that stuff so it's using alert that's what it does right and I think that's pretty nice like it's using this very simple mathematical function for something that's so ubiquitous winning games right next up this one is a lesser-known one most people know about alert and what not a whole lot of people know of what inverse lurk so inverse LARP is sort of the opposite of alert which might be hard to follow but I hope you'll follow along so if we look at lurk we'll look at that again we're two input two values of a and B and then a percentage or a fraction called T and that that gives us a value and that value is between a and B right so what is inversely inverse lerp we have a and B as usual but we give it a value and we get the T value out of it instead so it's sort of we flip the value and the T value what does it mean well that means that the green value in inverse loop is a point or a value between a and B so one of our inputs is already between a and B our output is going to be the percentage at which it is between those two values right so so this is what it looks like if you animate it right so we have larp and then we have the T value animating from zero to one get a value from ten to twenty an inverse loop is the exact opposite if we animate ten to twenty we get a value from zero to one but these are numbers again we don't like numbers let's look at a practical example so a very practical example this is game play code not super relevant to art but you could use this in shaders you so let's say you want to control audio volume by distance right so when a player is ten meters away you want a audio volume of one when the player is further away like twenty meters you want a volume of zero so if you're you're really close ten meters or closer you want maximum volume if you're 20 meters or further you want zero in volume right this is a perfect use case for inverse loop so you have an audio source you have a player that can be you know at any distance to this audio source rate and rate so how do we do this well we can use inverse lerp again the twenty and ten is going to be our thresholds for where we want it to be you know one to be zero at twenty we wanted to be one at ten and then we give it the distance in that inverse lerp function so the result of that is going to be that we get a value from zero to one exactly within that range that we want to have the audio like a ramp up right so that that's a super neat little trick to like not have to do that math on your own like there are so many cases where you just like oh do I divide or multiply do I offset before I multiply or after I multiply and it's like hisses a mastery so quite often it's super useful to have these functions when you're like remapping ranges like this I will get to that so in this case it's clamping the values like you mentioned so when it goes you know lower than 10 or higher than 20 we clamp it so if you don't do that you get this so it kind of depends on what ending you're using I don't know much about unreal unity is a bit weird because in in unities math functions in unities inverse slurp it clamps the unities inverse lever look like this in you know their math library but in shaders they look like this because it's sure why not same thing with like lerp is clamped in unities math function but not in shader code so it's something you need to like watch out for but yeah in this case I want to clamp rain because we know on audio volume that's like above one and not like negative audio as well whatever that means right okay another use case this is more like related to shaders this is very very very common at least I use this all the time in shaders so let's say you have two values for a and B just like some numbers right the value is going to be this gradient again so we have something changing over space this could be like UV coordinates it could be whatever you want to like remap right so again the these are color values we have you know range from 0 to 1 and so forth the result of this is going to look like this so now we have moved the zero and the one to a different range right and those values came from a and B so what this means is that wherever value was 0.3 it's going to be zero wherever value was 0.6 it's gonna be 1 so this is like a super useful way to like you know say you want to make a mask and you want to offset it and you want to put it at a specific place you can use inverse syrup to get that ramp wherever you want it and then you can blend based on this or you know whatever you want to do with it or if you want to use it to like remap you know get some you have UV coordinates and you want to get a tile within that UV coordinate for like some sort of sprite sheet you can also use this for that and then again you could just replace the D value with whatever you want right so if is this smoke thing again we'll get more contrast and this is also very common in image processing so if you have an image if you take a selfie and you're like this selfic is good I like it but the colors are a bit washed out so maybe you can do something like this to add some more contrast to it that's also done very commonly with the inverse larp though we don't call it inverse lerp we call it levels so the top two sliders you have that's literally inverse lerp in photoshop the bottom to you is lerp in photoshop so you are doing these two functions in Photoshop you might just not have realized it so it's kind of like you have an input range that you modify then have an output range that you also modify after the input range all right so let's do another example this one is very esoteric and weird so I don't expect people to like fully get this and I think I fully understand how to control it it's a beast but so let's say you have a value like this where the smoke flat again but this time we're gonna have three values for a and B so what's gonna happen now is that we have separates inverse loops per color channel so the red color channel is going to have 1 inverse left the green color channel is going to have another inverse alert but using different values same thing with the blue Channel so what's the result of this well what's gonna happen is that we're gonna get hue shifting and we're gonna get some that looks completely different and now you see that this one this is something you just cannot do with a normal lip well unless it's on clamps and you fiddle with HDR values but that's an entirely different topic so it's kind of this little neat hack that you can do to do some sort of you know hue shifting effect for whatever you have as your gradient or value strain but it's very difficult to control so quite often you can see that a and B are color triplets you have our D and B right so we can take these values and you know define them as colors but they look like this so it's kind of like a.m. B is blue why is my result like fiery red I'm confused is this weird it's uncontrollable and difficult but it's a neat little hack and it's very cheap to you to run on your computer okay so let's let's see if this video works oh the this one so like the vertically if you take the RGB values you can combine those into a color right because colors are three values for red green and blue so we can represent all the values in a with a single color right yeah all right so this is some water that I made for our game I have neat corporation called garden of the scene come on internet gods there we go I don't know what it looks like okay it looks okay so this is very very is a cartoony VR game and it's very cheerful but I want to have these very like colorful tropical water but still wanted to have some sort of nice depth effect to it right so I want it to be sort of looks cyan tropical it's top and then go deeper blue at the bottom right and then eventually fading to do stick very dark so yeah so how do you do that well this is something that inverse lerp is very good at so there's a concept called color elimination and specifically by depths of this time so if you have water in reality light doesn't go very far into it it keeps being absorbed by the water so if you have sunlight pointing down into the water then the red wavelengths as you can see here hopefully this one they get absorbed very quickly you can see that it drops down so x-axis is percentage of light so the red light drops off very quickly and what that means is that you get a color shift there that looks something like this where the as soon as the red light drops out things start turning more cyan right because we still have green and blue so we have a bit of a sigh intent to it but then you can see that the green light also tapers off right and then we're left with this deeper blue so that's why you know deeper waters tend to be more deep blue shallow water goes more cyan and then turquoise and then at the very top use all light passes through so then it's kind of white at the very very top right Murray and then as soon as you go deeper red just disappears right so we can we can emulate this with inverse alert and that's what I did for the water so again we have our values we have a we have B and now I'm just representing them as colors the the third value the the one I just called value that's gonna be the depth of the water just as a grayscale value so wherever it's shallow it's gonna be zero wherever it's very deep it's gonna go you know one or even beyond so the result of that is that we get this very like colorful gradient where we get the exact same thing we have you know white at the very top then that fades out the red is gone then we get the cyan turquoise colors and then we go to the deeper blues and then eventually just pitch black because all the colors have been absorbed at a certain depth right so yeah and then on top of that I add a bunch of other things to make it look prettier obviously because this one looks very unrealistic it's just like very harsh colors so on top of that one I add some fog so that you know the very darkest depths shouldn't be black because they're still you know sunlight hits the water and then there's scattering in the water then that counts back up again so you need some sort of light that hits your eyes even when you're looking at the very very deepest part strain so fog is useful for that there's also refraction which I'm not sure this visible on this one but there's some like refraction to this store tonight little depth effect rain and then edge foam to make it give this a bit of a shoreline effect you can see like waves are sort of like hitting the edge of the the cliffs and then on top of it there's specular highlights to make it look pretty and sparkly and also to give the the player censored X as well because this is VR and it's important to you have some references for depth so that you can see you know okay here's the surface and then you sort of get a 3d perception all right now let's combine these two functions to the to the big one that is super useful and that one is called remap I call it remap I think other people might call it something else Erina it's usually not built into things like unity doesn't have a remap function we can very easily write around so remap is a combination of both this is kind of like Photoshop levels right where you had four sliders so in this case remap has four inputs of values and then a fifth value that is your input value as well so I'm in IMAX is your input range oh man Oh max is your output range and then value is going to be a value between ayman and IMAX so so value is within the input range then the output of this one is going to be a value between inside of the output range so a value between omen and Oh max okay so what I say that they're a combination of the two you can literally write it as a combination of the team so first you do inverse lerp on the the input values using the v parameter of value then you get a T value out of that remember that's the value between 0 1 then we use that as the input to alert which is then using the output value and then you get the final value out of that so that is that's what levels does in Photoshop rain you have these four values that you can tweak so yeah there's some nuance there because Photoshop has gamma and you need to build that into this but that's for another time all right so here's a use case for remap so you have a health bar and you're like wouldn't it be neat if the health bar changed colors depending on how much health you have rain so maybe you're like at about the halfway point of all of our health bars we wanted to start going towards red right and then under certain threshold you wanted to be complete red so what we can do is define those thresholds right so at 20 hit points you want red at 50 hit points you want green and then anybody's in between you want interpolated right blending between green and red okay so he's remap for this so our input range again things change with your health so your health is going to be the value that we give this one the input range is going to be related to health so that's why we do the 20 and the 50 as the input range and then the output range in this case is a color so we have the input range and then we have a color as our output range so we give it a value of health min max for health and then we blend between these two colors based on that value mean so that's kind of a very very simple way to set this up because sometimes again you tend to like write code for this quite often where he just like you spend a lot of time again dividing and being like oh do I do the size of this one or do I multiply there subtract there divide or multiply it's it's all mess so using remap rookies like this is super useful some some more examples in case you do game Blake code so stats based on level like if you have an RPG or something then if you have you know RPG where you go from level 5 to 30 you want you know some strings the value of your character to go from 80 to 120 that's a perfect case for remap and in this case extrapolation you know where you don't clamp might be useful here because now if you have levels above 30 you're still gonna get increasing strength from that because you have the same you know increment per per level another one could be like explosion damage radio so you have like some sort of explosive barrel and you want you know given some distance you want the character to say take some amount of damage right so from 4 to 10 meters the character should take 300 and 320 to 0 damage so the 10 meters that's like right on the border of no damage as soon as you get closer you take more and more damage at 4 meters you take full damage or closer train in this case make sure you clamp unless you want your explosive barrels to heal you when you're further away than 10 meters which is weird but if you make that game that's awesome and I approve it and I wish you good luck okay so for those of you right code these are the functions they're very very simple mathematically in case you want to use them again lerp inverse slurp is built into unity probably unreal as well they have to remap I don't know how many things have remap but yeah all right is there anyone who's still wants to take a picture of this or are we good begin you're good okay cool okay so remember this equation that we looked at and we were all like wow what a shitty equation we don't get it so if we look at if you look at the very top of this equation there's a tiny little N the little N at the top so what if we visualize this with different end values so first off N equals 1 now you're like wait I think I've seen that before right that's literally alert we just blend between two values based on some value T which again is part of the formula at the top there ok so what happens if we set N to 2 now more interesting things are starting to happen right now like oh okay so we have three points and then we sort of blend between those points and then we'll get a curve out of that so what this equation is it's it's an equation for Bezier curves of any degree you want so that's it it's a Bezier curve so if you've used like illustrator or use the pen tool in Photoshop N equals three is pretty much what you use at all things in those tools you when you have your handles and you read you know have splines and change your shape of those or views Maya they also have Bezier curves in there so so I really do believe that there are like better ways to visualize math I think that like the graphic down there I think a lot of you like totally on get them you're like oh me that's cool but with the top line you're just like wow I want to leave the room great so yeah and I think math can be very beautiful you have this like very very simple start of a set of points and then all you do is that you take each point and then you blend it to the next point using LARP it's just a lope on all of these right and then you say okay what if we draw a line between all of these points then okay and now we have three lines inside of these four lines right so what can we do with this one well we can add more points to this one so now we have three points running along the inner lines we can draw lines between those two then we're going to another line that or two more points on that one and then finally we can take those two points draw a line between those now we have a single line that is moving across this whole shape free and then we draw a point that blends from 0 to 1 on that line so what we end up with is that this one is going to draw a path and that's exactly how busy a curves work and I think that's something that's very beautiful and I love them and that is my talk thank you very much I do not have a business card this is my business card so if you want to talk or connect this is the thing the QR code is if you want to provide feedback I did is he asked to put it there so I put it there in case you want to provide feedback tell me how how shady this talk was or if it was good nobody need to all right so my twitch is where i'd stream my game development so i generally focus on unity usually programming but i do a lot of like tech art and shader use sometimes modeling like whatever is needed in the project that I'm working on so yeah you could go to my twitch in case you want to follow live with the involvement and my youtube I upload tutorials there I have a like five hour long video on intro to shaders in unity if you want like a you know a full introduction for how to code shaders in unity by hand write my Twitter if you want like shader breakdowns heartaches stuff like that and a discard if you want to join my community which is sort of a community that has spawned around my game development stuff

Channel: IndiaGDC

Views: 125,878

Keywords:

Id: NzjF1pdlK7Y

Length: 33min 26sec (2006 seconds)

Published: Tue Jan 21 2020