#s3e10 ALL YOUR HTML, Basic fragment shader distortions

hey good morning everybody - dears let me know if you can hear me well see me well and let's get started anybody in the chat hi I'm a russian-speaking friends everybody in here all right I just need one more high to get started everything is again okay let's go so today I wanted to make a basic kind of stream to explain some fragment shader effects because recently I've been doing some complicated stuff and this one might be a bit more basic but still quite interesting to me and it looks amazing since this is going to be the first effect I'm gonna explain to you you can check out this site ricardo p can check it yourself it has a bunch of different share kind of effects but the one I really like is this one this is the one I'm going to focus first you like this kind of effects yeah bad jail by the simple one hello for color it's gonna be not real meth packed stream but I like it I like it because shows different kind of possibilities that you can use in graphics okay so let's go I'm gonna start with just creating a plane with an image in a 3d space in a WebGL kind of space context and I'm gonna call it this place I'm gonna copy my basic setup for the PJs I will use parcel to compile it just basic kind of stuff I think I will be streaming more effects from this particular website because it has a lot of real different effect okay yes yes and if I run my persona I think I should see just a red square let's see where's my coffee by the way I'm lying to you this is just the water okay surrender templates and what I will see here is just a red square mutton Mart hey I need some image I need some some texture to put on there on this plane by the way all these images that you see on the website they are actually in the kind of 3d space in the WebGL space they just synced to the HTML kind of content in on the website so you don't get the difference between two contexts but this is actually just the cameras so if you go here and just find the canvas element should be somewhere like the screen size and if I just remove this canvas all these special effects will disappear you know it would be only left with the generic HTML kind of stuff okay can I explain how to import jail cell into j/s I can't find information that I can understand I don't think you need anything to do that if you use partially just do the import and parcel installs everything that you need to do those kind of imports so I just can import GLSL file and parcel will install something like jellified bundle that's the only thing that you need you don't even need this jealous if chalice how do you read this jealously file depths I think so I think you don't need it he only needs this part and parcel install it by default so like what this is exactly the question if you using parcel just to parcel HTML whatever and it installs all the dependencies okay so we got the Red Square and I need to put an image there I like foxes recently I started to like foxes so I choose an image of the folks create an image folder here foxed back and to use this image as a texture I need to import it and parcel first because parcel compiles everything image is not where it used to be gonna have a different Europe Fox from image Fox back you can lock Fox so you see that parcel actually changes the URL so this is where it's gonna be in the end alright now I can lower this fox into my scene so back to this scene I only have the plane the square and I have the square the shaded material it means that I can use vertex shader and fragment shader on this particular plane I've been using it a lot on half of my streams recently so you can get an idea of how it works okay we've got some more questions here well I haven't been using this application create the terms of its Alfred but I don't have a snippet anymore I used to use it but I don't I don't need it anymore but it was it was Alfred Red Square yes hi max friends in the stream no okay I need to add a texture here so let's call it an image and the type gonna be t means texture and so add texture and a lot the texture and I have to add the URL right here and URL is actually just Fox so now I have a texture named image now I can use in my shader so and get this shader uniform can have a uniform texture one can name it image have some movies but I chose the square image to simplify the stuff here so then we will need aspect ratio calculations now I'll focus on the other scenes and back for color may in the image the output colorful image shader is gonna be texture 2d image and vub which is the UVs where I can put my texture now I have to set actual output color to my color remove this one and I should see Fox up fully I'm not seeing it because I backed free it should before still not seeing it alright what's wrong here texture 2d Indies the capital here yeah so now we have the square with an image this is just the basic kind of stuff you can make with the shader just use image with the UVs now we have the Fox here I think I'll maybe the camera a bit closer so the Fox is speaker you know everybody likes big it's a bit better so how do you go about this this displacement effects with the guys on the web okay I remove the canvas you need to restart it it's okay so you can do this without any special images you can do it with just math calculations but usually it's a bit better and more performant to just use an existing pre-calculated image for these ones and that's what the guys are doing here if I go into the network tab I can just look and see what kind of images they're using here on the website what is actually loading this one's look kind of similar but not quite because it looks like the distortion is too small on this one I don't think they use this one for that effect this one looks much better I think that's what they used and usually usually the image is just black and white or red and black which is kind of the same thing and let's call it the displacement PNG add it to my image folder I'm going to do the same kind of stuff at it to the Fox displacement which is just PNG I think I will need to add this kind of image to the shader displacement displacement and in the fragment shader set the uniform displacement and now I can do with this place color out of the displacement image and I can see hopefully this image in my scene but will I know yeah so see this displacement image now yeah I think you can draw anything with math on a side note I think there was a wolf from fall from function role winds I think they have some something like this here like when they really draw the Einstein with some parameters with some long long function hopeful hope they have a URL here yeah at the point yeah but you can get the idea they have something like this kind of function which just draws this this is crazy I have no idea how they did that probably some Fourier transforms but anyway it exists it actually exists you have these kind of functions where you can draw people all right back to their shader stuff so now I have this displacement image and I can use these values to displace pixels on my image because everything every every kind of every color in the WebGL is just a number so this is zero here and this is one in terms of reading list it's it's one so I can now just use a displacement on my movies so let's create another UV back to displaced UV equals v UV for now this is the same kind of UV I think I need displacement kind of image first so I have a displaced image I have the displaced TV which is not yet displaced is just a default TV if I use it here everything stays the same and cache it output color now yeah so the Fox is still normal so to displace the Fox I need to change these displays to you there are a bunch of ways where you can change it with just met functions and I'll show you real fast will be X DV Y it's gonna be just the same yeah it works still the same so if I add P Y here for example I will make my image bits cool what I what I can do here I can do show that a bunch times already I can add something different than just a static number I can make things can also add the time here so I have my distortion right here but it's not the kind of distortion we are looking for because we need something like these big thick slices kind of stuff where's it again think I need it like like Vixia like each pixel goes it's its own direction okay so to do that we need to use this image which is displaced image not just the map function like the sign that I'm using right now which still looks kinda nice and you can see it in a lot of websites but still also I think I will need the progress I have it already here it's just some some value between 0 and 1 which you can use to change the power and then density of this my shader effects do these settings progress for progress value that I should add my settings here progress can run from 0 to 1 what will I need to add the uniform to my shadow progress so now I can change the intensity of the effect so I can multiply it by progress this is the displacement well we are made in here base to make it obvious so this is a default value this is the default value also and then I made in something with the sign so now we can manage this effect with the progress feeling alright let's know exactly where I need I need to displace this image with displace values so to do that I need to use this displays image so I think I could just add the displays right because this is the color this is the image it has LGB a stop and the the red as we see here it goes from 0 to 1 when it goes from left to right left to right and each vertical kind of effect that goes from left to right let's see in a minute how it works so if we just set this kind of thing it goes like this is this is also cool but first of all should multiply this by the progress value you can see how it changes not really what I need and by the way if I do this for the why shouldn't be working the same way still cost horizontal how we can change the orientation turns out it's pretty easy to do so by default all the coordinates go from XY order and if I just add XY flapping real changes but if I change the order of those coordinates it actually changes the order in which it's you know gets those coordinates from the area this is what we have if we just change the well it's almost they may affect we need we get this attacked because has different kind of values for each pixel here on the image I hope pixel is it and we get the different kind of shifts for each of the pixels to make this a bit better this not be everything about this effect but we are almost there I think I need to do something like this shouldn't be a speak isn't the intensity of the effect should be a bit smaller than that maybe class now this is a bit straightforward and simple way of organizing your shifts and displacement to make it a bit more comfortable to use all this variables a bit more readable usually we use mix function in the in the gel and sell mix function just called just does the lightener interpolation for you between two values so in this particular case I have to displace two DS let's just leave the map that space t v--'s equal the same kind of stuff so the image can be basic now nothing changes when the progress changes and then I need to mix my y-coordinate displaced y equals mix something so I'm gonna mix not displaced by maybe the default y coordinate which is will be Y with something and depends on the progress and this something is gonna be clean so it's a bit more readable that's almost the same kind of stuff but you see now that we have this image correct in places and it looks a bit better so now if I subtract something from this value like peace for example it's it it will go the other direction we will have a nice displacement on his ears but I think it's getting closer to the effect of the website it's been not yet there to make it even better if you look closer here you can actually see that there is a color displacement - it's not just about the pixels it's also about the color displacement so let's make the color displace to make it I should displace each color differently with a different value so I have this displace you ease alright that's cool now instead of just setting the color I can set it like let's call reset it but I'm gonna set each heart in different way so I'm gonna again use two texture 2d I'm gonna use my image and for the texture I'm gonna use these displaced UV plus zero I only want it to just be displaced on the y coordinate I mean something I don't know something really small multiply it by progress so we just displace the art the thread color of the image let's see if we can really see this effect here where is it again we don't because why there's some our own dimension mismatch okay this is the four dimensional array and I need to just take the red color out of it now we can see it's getting a bit of the color displacement - that hasn't been any displacement here in the colors but now we have it we can do this kind of displacement for each color and cheapy just changing the values B and we'll make it a bit bigger here this is twice bigger than that and twice bigger nothing should be be cool so now when I'm going to change the progress you can see this color patterns in the image they will get even better if I make a black and white image here let's make these folks black and white you know how do you make image black and white just remove the hue/saturation yes it's going to Fox black and white into this place now change the URL in my application box black and white what have the image there where's my folks black and white I need to restart the parcel for it to see the image hey guys everybody yes now we have the black and white folks and now if I just sort the image with this part you will see this it's gonna get some colors even though it's just a black-and-white image it doesn't have any colors but it's gonna get some I think I can even make these values a bit bigger like the shifts here you can multiply them all by ten so we see more of the color stuff and I see the folks getting these kind of cars so just the ngpa values getting shifts in a different speed and it's kind of a nice effect by itself so yeah I think that let's see what this effect kind of simple but the idea was to introduce you to simple kind of effects so we used two images like this one and the Fox and then we just add them together and used on one of the images as a displacement for the other ones hello Mario when's dears all right that's it now I'm gonna show you another effect a bit more complicated on the other website also using shaders let's try it that's it about the Fox if you have any questions feel free to ask I'm gonna get my coffee okay let's go this website by the way using this kind of displacement in different places and see it right here used it the waves you can also see it somewhere at the bottom I think yeah also at the background so it's nice effect and it's so simple to make okay the next effect I'd like to make is this one it's also a displacement of the image but now it's a different one it's interactive one it's displaced on the position of the mouse and it kind of zooms so I don't know it feels like it bumps the play in a bit but it but it's not really bound or anything so for this one I will need an image that looks kind of like this because it looks better on those kind of images I'm going to create another one not a square image I'll make it black and white I'd like to use some kind of formed here yeah the outline font I've been recently listening to this song like Jacob yeah I see immediately you are right why do you even have this nickname Chris immediately what's what's this reason it's nice but I just have no idea why would you so I'm gonna just create some text I can beak make it feel like it's filling the whole screen and want to save it as a JPEG call it a text text so I'm gonna introduce another uniform called text here I'm gonna leave this part that was it's not real complicated one right I don't think I even need to share it as a code if you get the idea you can replicate it easily yourself you can play with it numerous time and you can get all kind of effects with different displacement images and by the way while we are still edits what if we use a different kind of displacement image I just look at the Google for the displacement map you will see a lot of a seed kind of stuff there so let's let's use this one I have no idea what's gonna happen oh let's call it noise gee Peck and I'm gonna replace my noise my displacement noise with the other one so noise chipping instead of this PNG yeah you see it's something different and it's cool you can make an effect of fading images on your website and nobody will have an idea how they should make it will accept us watching this dream but it's nice effect right I like it and you can get all kind of different effects just changing this image like if I use this one this is even even more weird than the other ones nice back let's see what we're gonna yeah with this kind of issue it's something different you can change the values you can play with it it's gonna be nice all right let's go for the next one so I have this need to have this text text text JPEG I'd like to show it in my screen let's make a huge comment so we see where the second animation start now I'm gonna use text text text color and texts have a yet it is already look at it not and the uniform tiny tent for the uniforms too so now we see this image the new one it's just the image that just made in Photoshop looks nice looks cool but we need to add the mass interaction take the most interaction to any kind of 3GS scene you need a 3GS ray Kassar and the simplest way to do this is just go into the examples where Custer is just just casts ray from the camera and checks if the Ray interacts intersects some objects and you see oh this red caster equals right Custer where is it again I lost it what I also need to add the mouse event event here go ahead please set the default mass coordinate vector let's call it this mouse I have a function which handles the event let's make it the old-school way it's going to do that now inside this Mouse event I also need to attach the event handler which is happening somewhere here so touch the event handler and then I can check if the ready really interacts intersects with something this is the part you change suja's has really nice examples you can use them right away you can see just copy/paste in the parts okay but I have the request Reza that also that that's in children that Ray Kassar and I think I don't even need this loop I can just cancel log intersects there's my animation kits right here let's knock off in the console it outputs just an empty array so far but if I go closer to my plane you see it outputs the actual intersecting values for my plane let's see what it really outputs he has an array because I can intersect the number of objects in my scene and it has a point the point is actually the exact coordinates where intersect plane so I can now get this coordinate and its back in 3d space Z is always zero because my plane lies in a zero plane and these values have between minus 1 and 1 something like that I can get this position this log intersects zero point let's see so now you see it's a point in 3d space let's convert this point into my shader coordinates so I need to set the not a uniform just kind of called Mouse and it's going to be vector free by default the type of the coordinate is gonna be V 3 because it's means vectors free so now I can set this inside inside of this function if I have the intersect intersects more than zero I can set that material Tyrael uniforms Mouse value equals intersects point and I will get this point inside my trainer let's see so we don't have any arrows at least but to see this mouse inside my shader on it made some calculations which can be visible so let's try that I'll go into a vertex shader I have a free position here which is I'm going to just set it as a position by default it's going to be a variety that means that I can get this value inside my fragment shader as well right because position and that's it that's the end of the vertex shader here I'm not gonna use anything else I don't need just need the UVs I need the B position that's it in a fragment shader I also need to set correct type for the V position and what is exactly this V position it's just the coordinates of each pixel on the screen so I can even see it if I convert it to the color so instead of showing the image I'm going to show the coordinate of each pixel it looks something like that because the zero zero coordinates is in the centre and then something like I don't know point five zero zero is on the bottom right corner of the square so we get alright so I can now I can calculate the distance between my position and the mouse so flux this equals between two values position addition of the carbon pixel and the mouse and now I'd like to see this disk value I'm going to use a black and white kind of image for it something is not right Mouse undeclared identifier yeah because I didn't declare the uniform back to us still not right because Easton's not much neurologic function I think I can just use lamp you by the way Mouse is back free because its position and vector 3 & 4 3 dimensional space yeah now I don't have any errors now if I move the mouse you can see the distance from the mouse to each of the pixels on my treasured material so from the point where the mouse intersects the mouse ray or the array caster which can cast from camera to the mouse position it's black in the center because the distance is minimal and then goes white at the edges because the distance goes above one starting I should remove this value to something smaller because this is too big of a steel to me and I can get back my my image here I need to displace this image in this kind of way like let's get back to the example and see how it was displaced where was it I have too many windows stuff open my screen yeah there it is so I want to make this kind of displacement hmm so it's quite small compared to the size of the whole image and for me it's kind of big right now so I think I will use gel cell map function to map something the different values I need to declare my function so the map function is the generic kind of function which you I think you would like to know how to use in a Java Script anywhere it just Maps some value which run from minimum to maximum to some other range from minimum to maximum to so I'd like to map my values for the mouse from one range to it too to the other range and to make this what I will do is introduce another variable let's call it I don't know proximity or something like that let's make it map the dist from and what Oh first of all I don't think I need the actual test anytime - like one - dist because I need my values to be smaller if they are far from my mouth and this is the opposite of the dist so I will make my t'east from something like zero zero point five two zero one range so if it first changed from so this value was from between 0 and 1 this value is again between 0 and 1 then it Maps this range into this range so it means that my circle is going to be smaller twice smaller this time let's just show this box and see if it really works oh it's kind of smaller imagine it's this I think also I need to clamp this failure so it doesn't get too big doesn't get too much above zero [Music] almost there but I think I messed up very well summer maybe vice versa to make it smaller no it's not the way mm-hmm something is wrong I need to figure out help me - yellow think it I want to remap in smaller position with a mouse what I get is a distance between mass and V position well that might work also but we will not have a like we will be managing the actual distance it will get smaller of course yet might we might use this one but we will not I wanted to make the distance range controllable that the size of the of the mouse I don't know mouse power range or something like that mouse intensity range I wanted to be controllable with some value and I wanted to have the controllable radius so I can change it later on that's why I wanted to remove it to exact values so we have this deist I'm mapping it's some other range maybe should subtract it after I methods first and methods and then I subtracted yeah that was they were I messed up the order of the operations okay so now if I can control even the range so now it's zero point one we can make it zero point four it's gonna get bigger yeah this is the power of my of my cursor so now I have this proximity power and now I can use it to displace my image in some way but how to make it displaced in this kind of area which looks like zoom in actually this I can also use the the mix function for this one to happen think I could just well sometimes you need to calculate the actual lecture and to calculate this vector it's going to be something like this back to Direction equals normalize because it should XY minus XY and then I can visualize this direction like this it looks nice sometimes yeah and I see it just shows the direction of the vector from the pointing outwards from the mouse coordinate and with this direction I can then displays each pixel in in the correct direction and sometimes you can have a nice effect with just that I will get the text color after all this stuff and then I can make the back to zoomed you B equals will be plus Direction multiplied by proximity like if it's far there are gonna be no displacement at all well let's see and I'd like to see the T to default image again not the debug stuff you see displays it but it's too much of a displacement and can't multiply for something small then and then you can get its x progress so we can change the intensity now I can get like a different kind of funny effects with this like these for example is quite nice I think I think I saw this one on some of the websites but now you can get the idea how it's done it's quite simple in its the same kind of effect that you see where right here but the opposite one so to make it the exact kind of effect I think I should just mix my default vuv so it's called another back to zoom to be one for example which is going to be mixed the UB and when I mix it by the approximately like the amount of the second value is going to be the power of the second value inside with a mixed function is going to be set by the proximity of its function so the close is a pixel the more it's going to be displaced towards the mouse position and I think I can just use here Mouse X Y coordinates so all the pixels it's these these both values up to two dimensional values that have X and white so we'll have mix those two values and this one is just the static it's the same value for every pixel on my screen so if I mix my UV values with the some static image it means that every coordinate inside UV will go closer to this mouse position so it's actually the same way if if you use the direction vector it's just mixing these two values with approximately yes I think it's even more readable and makes more sense to me so let's see how it works the only thing I think those two values on a different different space different spaces I have me you be have this proximity value in the mouse XY I think the mouse XY goes in between minus 0.5 plus 0.5 and the BV goes from zero to one so to make it's the same I just need to it I can make make a remap oh yeah and I have my progress set to zero so now it gets me something it's tonal it's still the same because I'm still using the zoom TV without any number now let's see what we get this is actually the effect so they have this image we have this let's zoom it with the power now approximately x progress so we can control this zone so with a small progress it just zooms a bit it gets bigger it also change the radius you remember it was your point for let's make it a bit smaller no it looks like a bowl looks like it looks like the the devotees displacement of the human actually is still playing is she it's just the displacement inside of the pixels that gets you this kind of 3d effect and it's quite simple to make it actually but these two three lines between you need is this direction you just needed to calculate the distance and then mix the default TVs with something towards the mouse pointing towards the mouse exactly thank you pal now get this effect it's just I think I use direction somewhere here yeah that's why it's getting me a ronin this is how you make this simple displacement for there inside the fragment shader I think I still need to sleep more didn't do right now because it was kinda hard yet I hope it was interesting to you so I just wanted to show you these two basic attacks from the websites because a couple guys complain that I usually do a lot more complicated stuff and this stuff I think is like as basic as WebGL on GLSL stuff can get we can start with these kind of effects to get into the GLSL and to experiment with those values and to get the idea that every color is a number and there's also some vectors which you can use to displace the image remember we just use the direction vector we displace each pixel in in my in my image towards the vector okay let's just use it again and with the big values you can get some interesting kind of effects I think it's nice you you yes so hope you guys like this one and if you do we can support me on patreon like just one dollar maybe you know some guys support me I earn twenty seven bucks per month do you imagine that it's a lot of money buy a car a small one but I can do that alrighty I hope you like that I'll share the code for these particular examples under my stream I still haven't figured out how to use the nation others I have a tough week in Italy coming but I will I'm almost there I hope you like the stream you can support me on patreon you can ask me any kind of questions you write me on Twitter Facebook I'm glad you cut up with me and spend some time with me have a nice day we had live your life do something stupid and then something wise see this

Channel: Yuri Artiukh

Views: 7,819

Rating: 4.9606557 out of 5

Keywords: three.js, fragment, glsl

Id: DH1KqXQvICQ

Length: 51min 55sec (3115 seconds)

Published: Sun Jan 12 2020