Curl tubes with three.js from lusion.co #9

hey good morning everyone i'm yuri again and we're going to code something with the 3.js and jlsl today let me know if the sound is good everything is cool i'll open up my prosecco meanwhile and we're gonna start coding something oh morning to brazil too and france that's some prosecco pretty cold all right so i hope everything is good so today i'm gonna try to replicate um this effect from the illusion co i think it's one of the coolest creative agencies like out there in in the wild because of the like eden one is the main person behind this agency i believe and he's well he's really cool and he has so much experience with that thing from flash era so it's more experience than i have with html and css okay sounding video is good so we're gonna try to do this one not hundred percent i think because it's pretty complicated involves a couple of complicated parts but let's let's try to do something maybe we will achieve something similar or cool let's try to do that all right so i'm gonna get started and close some windows don't really need all right i'm gonna create a folder i'm gonna call this one illusion okay i'm gonna i'm gonna switch the screen first right so you could see my screen and pop a proof i'm going to copy paste my boilerplate the usual stuff so the thing is they're using gp gpu calculation for the animation of the movement of those objects which is kind of complicated to implement in one stream so maybe like in one of the future streams i will do that meanwhile we're gonna try to do that without gp gpu oh hello to doubling too all right gotta get started how you doing guys hope you have a good morning everyone it's pretty cool here in ukraine now i mean the spring is everywhere everything is blooming solution open it up let's do a simple window layout all right poland two all right i don't think i need a lot of space for the visuals yet right so where do we start well first of all if you look at those shapes and the paths that those lines are traveling well if you have some experience already with creative coding this is called the curl noise and usually the way that you implement this kind of movement is by using the curl nuts and the cruel noise is actually based on the like usual purlin or simplex noise or any kind of noise i found a nice demo which is not kind of which is not working at the moment but believe me it's cool so i can just curl noise demo there are a lot of code pens as well i believe it's just that doesn't really matter like the particles are moving with the coral noise i believe and then cool noise let's say lines and this is by the way i think by eaton classic one and there's a cool noise a lot of coral noise techniques and well they look similar like they implement this kind of vector field so some particles could move smoothly to the 3d version of the noise function like because usually noise function return you just the float value but the cool noise returns you three values so like three dimensional vector which you can use to simulate movement in 3d space and let's do that so this demo actually has a javascript implementation of the cool noise and let's i wonder how it's pronounced right coral look cu or llc url all right and so let's implement this noise well the first thing we're gonna notice here is that it's it's depending on the three-dimensional simplex noise and for that let's get the simplex noise npm module so i might have copied the the actual simplex implementation they used but i think because we already have it on on the npm i wasn't able to find a nice scroll noise on the npm so that's why i'm using this one probably there are some but just nice to use and credit someone for this he's like a force to re-implement this so simplex noise is going to be a simplex noise simplex is going to be this and then we will have this simplex noise 2d noise i'm going to replace every single one of them should have used search and replace i just like to put multiple cursors okay so now we have the simplex noise 3d we have the simplex from the simplex noise module we kind of have the compute curl function so i could just do something just to test this one and let's see i have to open my demo as well yeah it's working and then if i compute curly i got some values like four zero minus eight well that's something that's some numbers and i probably need to drink a little bit of prosecco yeah hey everyone hmm feels so good to get drunk in the morning all right so we get we have the coral noise okay let's leave it for a moment the next step that i want to achieve is actually to have some tube right because obviously what we're seeing here are some like thick solid tubes traveling in the space so let's try to implement this oh yeah this is because it's curly right because i thought that's what this was some acronym or something like all right yeah that makes sense we need to implement some tubes so it's going to be three tube geometry youtube geometry so for the three tube geometry we actually need some curve some path and then we also need some uh like thickness like the detailization and all sorts of that stuff so i'm gonna try to create this geometry and because we will be using some really curly tubes uh in 3d space i'm going to implement the function like the get please just get earth and where we start with that one so i could just do these like let points so this curve is going to be just just an array of the points so then i'm going to have the loop let's say 100 points 10 all right let's let's be 10 and then points push zero zero and then like something i divided by ten so it's gonna be just a straight line for now so we have an array of the dots on a z-axis actually i think it's better to have them on the x-axis yeah digital spaghetti like pasta all right so now we have this curve function it just gets us the straight line in 3d space should be from left to right or right to left and now i kind of i kind of want to implement the the actual object here so instead of geometry which is plane geometry i'm going to create the tube geometry and also to to get the the actual path shouldn't be an area of the point like this one should be type curve so i should actually run the curve and this isn't actually already kepnel rom curve 3 which accepts an array of points and gets me the curve object so so what i would do i'm going to do the let curve equals and then this get curve so this one should be should be some curve now and instead of this geometry i'm gonna just overwrite this one it's gonna be u3 tube that would be buffer geometry and then this curve i should should i call it path probably path makes more sense hey yo uh path right what else then the next value is the number of points that i'm using on my curve uh so far i've been using just 10 points but just for the future purposes i'm going to use hundred points then there's a thickness of curve they should be pretty small i think because my viewport is around 1 so the thickness of the curve should be real real small and the next value is the number of edges or what like the radius segments which means utilization of the like circle or part of the tube and then else is whether it's open or closed okay let's be fast now we have the geometry we have the um plane which is not the plane that'll be just this curve and then let's see what's going to happen we have some error what the heck is happening here so we have some mistake inside at object because something went wrong with the catmull rom curve probably okay let's first output this one uh what not too many undefined uh please get curve because i'm not returning anything obviously come on so now it has all the points and they are like on the z i mean on the on the x axis i'm not sure that they removed completely geometry i mean the geometry object is definitely removed but i'm not sure whether like plane geometry object is removed maybe it's still there because it it's actually working right now and i have the latest 3gs here so i believe only the actual geometry object has been removed so far but probably eventually it's going to be all buffer geometries which is for good all right so now we have the curve we should see oh yeah okay we finally see this line and i could do something like real dump like the math sign five multiply these don't ask me y5 and and it doesn't do anything because because it shouldn't so let's uh like switch the coordinates i'm going to see some sine curve kind of assigned curve maybe yeah should multiply this 50 we're going to see more curvy version of this one so yeah so we have some some tube in the 3d space yeah it's a tube so we learned how to create this tube now we should get back to the curl function team compression issue oh yes i'm sorry maybe i should just switch the theme how do you switch the theme just the theme maybe white one will be better maybe this one better just let me know why am i drinking in the morning because why not this is exactly the answer okay maybe maybe black one is better right okay i'm gonna switch to black one for a moment just let me know how it looks like just too many things to remember i keep forgetting about those noise issues compression issues all right so we have the curl noise we have the tubes in the 3d space now i have to use coronoids somehow to create this tube not the boring cyan function but something really curly so the way that the curl noise is usually used is not for actual coordinates but usually to get the velocity of the to get the velocity of the some simulation thing of some physics and then move the points according to that velocity oh yeah thank you our code whoa it's nice to have you here guys been using you for years all right so next thing rule noise yeah let's use the coroner so we need to use the velocity of the chronos and for this one i'm gonna uh i'm gonna need the starting point so let's start equals so i'm gonna leave this but i mean i'm going to leave this part of the object creation the same for now but i'm going to change the way i create the curve so let's actually i'm going to move this start to the variable right there so i'm going to use this as a starting point of my curve so later on i can create a lot of curves and they will start like in different places so this will get me the curve starting at the zero zero zero point and then here right what are the next first i'm gonna push the start right to the my curve some points push start i'm not going to change the starting point so it's going to be the first one then i will still have the loop and i probably need some dynamic points like some another kind of point that i will change and that current point equals start i need to clone because if i just set it to the start it's not gonna work okay then i have the loop so 10 now doesn't look enough to me so i will need more like 100 and then inside this i will on each um iteration i will calculate the speed for my point and i will calculate the speed of velocity for my point according to the place where this point is right now meaning according to the current point so this means that i'm going to calculate some kind of v which is velocity which is going to be the the noise gonna be compute curl from the current point and this one has to have like see this is going to be the velocity you can just output it maybe clone of undefined get curve which one is undefined oh yeah because here i'm running it's without parameters three vector is not a constructor right so these are the speeds because i'm calculating them on the same point zero zero zero they are obviously the same like this is just the function same input same output so i need to change something i need to change this actual current point so i'm going to change this current point i'm going to add why do i don't i have any other complete here i think it's add scaled vector let's just google that one yeah it's at scaled vector so i could add another vector which is this v and then i could scale because this number is pretty big if you already notice it's like eight four and my whole screen is like one so i need to multiply it with something real small i think this was the value that worked for me and then this current point is being changed now so i could maybe also output this point just to see just to see how it works for me and then the speed all right i'll put something it's is it different now uh it's the same but because that's because that's because i'm not putting the current point i'm changing it so in the end what i see in the console log is the same variable so if i just maybe add the clone here i would see the different ones so what i would do also would do point push and then current like the current state of my point i'm gonna clone it and this should actually show me something already right there's also one issue i already know is gonna happen like the scale of these values is pretty big and i probably should divide with some big value here maybe maybe not let's see oh thank you that's like it's funny that i've been buying other code for so long you know now you want to buy something from me it's like should have known that and exchanged something between each other all right so points push current point clone and now well i want to see what's inside those points actually actually i already see that some kind of curve that's something it's not like line but that's something so we could maybe experiment a little bit like let's put 600 points here so we get some some actual random 3d space curviness and i could also increase the number of let me move this function below my add object function kind of easier for me to navigate then so probably the scale is all right i thought the scale would be an issue like because i'm computing curl under the actual current point coordinates and those might be changing a lot but it's actually kind of nice looking good so now what i could do next i could create a lot of those curves actually arrived at this point a bit faster than i thought oh my god this prosecco tastes so good should buy this one again all right so um actually the code we did is pretty simple right we're calculating the velocity and then we move in the current point according to that velocity just like a tiny bit in a 3d space and then in the end we just get some kind of 3d curve space and then what if i create like a hundred of those curves let's just throw some values in here like this should be also 600 because i have 600 points in my actual path so i think i should have roughly the same amount of utilization on the curve yeah oh yeah i forgot to mention i actually have another awards course so if you want to buy something and support me you can go to the awards and buy my course there are now two courses for me on the wars i i'll probably tell something about that in the end all right now have tube let's create a lot of tubes to do that i'm gonna go here and [Music] here create another loop oh no not for reach uh let's say i want to have 100 of those curves and then on each step i'm going to create like instead of just geometry and probably it should i'm gonna be using the same material which is something i want so we have the geometry geometry and then like probably just the curve and then we add in this curve and then right now they will be starting in the same point and they will be the same because the function is like deterministic it's going to return the same values but what if i do something like this and we are starting to get something that looks actually like curl noise i mean it's already beautiful well there is no i think there are no creative devs who haven't experimented with the cool noise at some point because i mean look at that it's beautiful we could create a thousand of those by the way that'll take some time but it'll look pretty cool i mean this is some randomness but this is some beautiful randomness out there and the beautiful thing about that one is whoa it's actually bigger than i expected oh this is looking like some curly thing and then i could probably become a billionaire if i sell this as an nft but somehow i picked up the hard way and the nice thing about that one is that they all started on the same line in 3d space and then like they slowly get in random and then we could we could actually make them like a bit less random and to do that or a bit more random let's just experiment a little bit i just like those so what i could do here is have some kind of scale which is equal to let's say 10 and then divide everything by 10. should probably remove this thousand from here and then we have something like steel random some moire here it's also beautiful it's like it's almost like a 3d surface now and you could actually generate 3d surfaces with the coral noise and especially i think if you use coral noise in the in the ray marching it so it would be like the real 3d surface yeah it's a beautiful spaghetti indeed it's night that i had my breakfast so i'm not really that excited about spaghetti yet that would get in the way all right now we have this spaghetti this scale maybe like three it's gonna be something in the middle and of course it takes some time to generate those but once we are done with that it's in 60 fps all right so let's remove thousands it's going to be 100 so then we what we might also do instead of just generating them on the one line i'm doing right now it doesn't look good now i'm gonna just do them in the random place so now i have the uh very random values here right it should be something pretty random we're getting some spaghetti now i mean i actually like this the way it looks like because if we like change the scale it's gonna become more and more random i think why have i like introduced the scale variable but still divided something by 10. what i wanted to do is actually to divide this by scale yeah so this is the values and then if we let's get something like three gonna get more and more curly there oh i'm glad you liked the first course i hope you will like the second one yeah there's going to be a cms but it's going to be the serverless cms it's going to be the jumpstack i think it's going to be 110 i'm still thinking maybe i should no it's going to be 11. because i like 110 like the creator of the 110 and like like the community it's a good thing okay so we have some curls all right let's move to the next now we need to do some color in there how do we do some coloring we need some coloring first and also we need the light source somewhere on the 3d space thing so first of all where do we start i think we start at the making the background black and a lot of things to do which are not related to each other directly first of all i'm gonna do this then i'm gonna go to fragment shader and let's do it this way so the kind of gradient it's already looking good you could see the dark part it is where all the lines are starting actually it's pretty cool it's like a wind or something like that which is actually the cruel meaning yeah and if you add some more i need some more prosecco if you add some more like say bloombus effect it's gonna look like a hundred dollars nft trust me all right what's next i need to put the light source somewhere in my scene which i'm going to be using later on for the lighting so i need to put the light source to put the light sources best way is to do the ray casting i'm going to create the raycast function this ratecast and then let's get let's get everything [Music] from the 3.js directly all right we have the raycaster then i will need some object in 3d space which i'm going to be raycasting onto and let's play some dubious stuff that i need to write and what was the first it's geometry and it's got to be plain and by 10 and then okay well we spent the half an hour we got the coral noise we're on the shader part i think we're on the right pace should be good glowing spaghetti mmm yummy scene at these three casts just to see that it's actually there it's working and it's very much red yeah it's there slowly get in there so the next step i also want to create some green object green object this one's going to be green and it's going to be sphere but for geometry it's going to be a small sphere let's say 2020 let's say maybe light i'll call this one light and yeah obviously i need to add this one all right so we have the green sphere in the center green so we can see this one i'm i'm really good at picking the nice colors here well actually like i'm gonna probably at the screen and with it's thread and it's going to be like one minute of the efforts it's going to look much better maybe yeah i think it's it's not as aggressive as it used to be all right so we have kind of a green thing and the light source now i need to move this light source with my mouse that's why i open about the raycaster part so now i need to do the document you know this container i already have the dom element add event listener and then some event here and then inside this event i'm going to calculate my mouse coordinates this mouse it's an event um you know width okay and then i'm gonna rate cast and it's gonna be this mouse this camera and then this raycaster should have some intersection uh it's gonna be uh these three cars and this this gotta be an airway but i don't wanna all seen children i just want my raycast plane break us playing i'm gonna move here and then probably like if intersect add in zero like if we have some intersection i'm gonna output let's say p equals intersects zero first intersection point and then let's output this p let's see what's going to happen now all right [Music] what is wrong now oh yeah i put all the calculation outside of the advent listener maybe i shouldn't drink prosecco during my streams after all but then again i was sober and made a lot of mistakes too so now we have the point in the 3d space and i could actually do like simply do this so i could do this light position copy p right so now we have this thing moving in my on my plane following my mouse point next and what we could do next let's continue and we have a lot to do so maybe next thing while we didn't dive into the shader haven't dived into the shader yet i could actually implement this jumpy behavior i really like this one like oh it's so awesome i mean it's even better than like it's even cooler than the actual shader part so let's implement this nice thing for this one i will need a couple of other variables so the thing is it's quite easy to implement the point that is following the the mouse cursor that's usually called in inertia or like lerpin values or winning values so when i move my mouse i always like clean my actual position to my mouse position and it's gonna come to my mouse position but a bit late it's like i move this one this one comes i move this one this one comes like this but that's not what's happening here and with that approach i can't actually create like this thing here to do this one the guys actually used a pretty nice approach i usually use like the separate values but i keep forgetting that 3.js already has a lot of functionality implemented like the vectors so they're like three two dimensional vectors are already in 3.js and this means there's like a lot of ways where you could cut the corner and like make something cool with just a couple of lines of code and that's exactly what we're gonna do right now so to move it step by step i'm going to create another mouse position i'm going to call this one like e-mouse then i'm going to create another one i'm going to call this one a elastic mouse i think that's the way they called it too and then i need the velocity so to implement this kind of functionality you actually need additional uh like vector which is going to be implementing the velocity and by default deck i'm not sure if 3g is setting zeros for me i'm going to set them so i have the elastic mouse and for now let's also let's do it this way oh blue just some stuff to visualize uh where is my blue okay i haven't created the dom element so i have this blue point and i want it to i want this point to follow my mouse cursor with the like bouncy way and to do this i can create this so i can create e mouse x equals event clown and x i could have probably moved right to for the for the 3d first but that's just going to try to create it with the dom element first so i have the emails position this is gonna be like at all times the actual mouse position on my screen and what what next i will do i will uh do some calculations on the on my render loop so right here first of all i'm going to set the coordinates of my object so let this i'm going to query something in the red loop don't do that i'm just making something fast style and then what's gonna be this e mouse x and the same for the y okay it's almost like it should be it's just it's a bit inverted in some way okay it's not the blue thing is following my mouse pointer which is not quite what i need i need it in jump away so this way i'm going to set the elastic mouse elastic mouse instead of e mouse i'm going to set elastic mouse and i'm going to calculate this elastic mouse in some special way so first of all um i need to calculate the velocity like uh with what speed this paint should move somewhere and to calculate this velocity i need to get the difference between the current position and the current position of the elastic mouse like the current mouse position and the current elastic mouse position it should be a little bit behind at all times and i think i'm going to need another temporary variable here or maybe i should i could i could have got away with the cloning so i'm going to temp copy and the this mouse position so now we have in this vector we have the actual mouse position i'm going to subtract the elastic mouse position i'm going to multiply this one with something small i think this was the value that would like it shouldn't be like the real length of the vector connecting those two points should be a bit smaller so this one is always a little bit behind so the next thing uh at each step i'm gonna add this velocity like this is the velocity that i just calculated so it at each step i need to add this velocity to um to actual velocity right so i should change the elastic mouse velocity and i will do it this way i'm going to add this temporary variable so this way i just added something to my velocity and then to make it stop because this way it's gonna grow like infinitely to make it uh stop i'm gonna multiply this one which is also known as a friction or something like that usually like 0.9.8 i think it was 0.8 which were good for this one and the value that they used so now we have this elastic velocity calculated and then i just need to add this one to my actual elastic mouse position so i'm gonna just add this elastic mouse velocity and probably the magic should happen now yeah it did so you could of course change the values with these numbers like let's say 65 it's going to be real stiff or maybe like even less than that like please it's a different it's more like it's not bouncy anymore it's not cool it's easy to create without velocity even but with some values in between you get it like pretty nice right and in the same way we could calculate the position of this uh 3d object let's do that let's do that i believe the stream is going to be a little bit over the hour i'm sorry guys it's just too cool of an animation too many cool stuff cool things about this one all right so we have the elastic mouse boom what else what else what else 3d 3d object 3d object so i need somehow to use this elastic thing for calculating my 3d object so i think instead of using the the e-mouse i would just switch back to the where is my recasting part probably collapse this all i'm gonna still use this mouse because it's now i'm going to here i'm going to overwrite that this e mouse x equals b x and this e mouse y equals p y this way the values that i'm going to get inside my elastic mouse is going to be in this 3d space coordinates already and instead of doing this here only in the advanced listener for the mouse i'm going to do it here so this light position x equals this elastic mouse x yep so now we have this 3d object which is bouncy in the same way that we just had this blue square so now we have kind of a light source all right let's move next let's move next i should drink something i should drink some just a minute of brain rest yeah hope you're following my steps i mean mentally not really writing the code as chaotically they do all right next step i need to put this um light source as a uniform inside my shader so for that one i don't need the scat curve function anymore and this light source let's call it all right i i need some dark red like maybe this one is good dark red should i use the same shader for my lane actually all right let's see the most interesting part is a hat actually it's actually a hat which one is red raycast plane is red yeah it's kind of better need something darker all right and i think the sphere should be like real tiny okay pretty cool next next let me think so yeah i need to update uh my light uniform with the actual value so it's going to be this material uniforms you like value equals u3 i shouldn't probably create the this point right here but i should probably update it in my render loop actually and actually this might simplify because i could just set it to the light position right so now we have this view light uniform value as a light position well the next thing i want to do i want to actually switch this one to this material yes now i have this uv gradient on my plane and what i want to do now like i have this light here i'm going to put the distance between light and the current point i'm rendering and it's going to be local length and then view light speed position and then kind of want to put this one here but also need v position we position the three dimensional thing and v position couldn't be v position because v position should be um like in the world space coordinates right or not let me let's try to do this one something is wrong like [Music] you light your light it's not very in it's its uniform right so now we have this thing following my mouse perfecto next thing i want to calculate like two three five five five oh things of course actually and this actually makes darker my like my lines too my tubes too you could see the dark when the the slide source getting closer to them you could actually invert this one something like this which is kind of like a volumetric lighting i think something like this right which is already pretty cool but that's not what we want to do but but it's actually kind of close right okay let's proceed let's proceed too much talking yuri hey everyone um next next i'm gonna calculate diffusion lighting like the simple lighting from my source of the light because i have the normal here which i'm not yet using by the way normal and then here normal let's just output it briefly yeah normal stop there let's calculate diffusion lighting now that's going to be the complicated part it's going to take like 10 minutes but still it's going to be the max 0 dot product between normal and then uh we should calculate the dot product between normal and then the light direction and then we have the we don't we don't have light direction yet we only have the light position your light is a light position and calculate the light direction i would actually need to get the like the global space coordinate i think i had it somewhere in the previous streams too i think i had my desktop too i'm gonna just go it's a pretty common thing that we usually do it's like this i'm gonna calculate the world coordinates position i'll be varying varying and then like the three light direction is going to be normalized and these values subtracted like the u light minus position this is going to be the direction of the light pointing to the point in space where i'm calculating the diffusion light and this is what i need i'm not sure about the sign though probably right let's just see and then we'll have this diffusion output the diffusion everything is broken now because 103. oh yeah calculating the dot product between normal and the light direction is going to be diffusion right should be right yeah we're kind of getting it like when the light source is from this side you could see that it's it's actually lighted when it's on the other it's getting darker and it's light in some other parts of my surface i think it's sometimes it's just too jumpy yeah so diffusion lighting is actually working actually i think we could even multiply diffusion lighting with this distance variable and get some decent result but that's not what developers of the illusion website did actually used a pretty nice physics concept light scattering and on the pretty nice article explaining this concept it's called a simple shader for point lights and fog well it it in some way it's a simple one and there's a nice real nice explanation which i advise you to go and look for and which end up ends up with some kind of integral which you need to calculate to get the actual lighting on at some point and this light scattering is actually taking into account the light fall off and then also the light like the angle because it it actually takes a couple of variables in here like the light position the camera position the object position and then the distance from the eye to the object and like all the distances and then it gets you then the value i'm gonna fast forward and use the function that the illusion developers used which is called get scatter to calculate this scattering lighting thing and let's try to use this one so this one is taking the camera position the direction which is the camera to the point direction in space the light position which you already have and then the distance from the light to the uh point we are uh in space like from the no it's actually distance from the camera to the point yeah it's it's decent from the camera to the point and you could see a couple of dot products and then the subtraction of 2 8 tens and this is exactly what you have here so this is just an implementation maybe simplified for the like a faster calculation but this is just an implementation of this integral calculation of this formula i'm not gonna dig deep into that but i'm really curious to do that but i'm not sure everybody's curious is me so i'm gonna just use this function to calculate the light scattering and i'm going to fast forward and write the end formula like the gonna be the float value scatter is going to be equal please get scatter then the camera position which we already have at the uniform in 3gs which is real nice and we need the camera to world normalize this direction should be normalized one and camera to world and for this one i need to do some calculations so first of all i'm going to calculate camera 2 world which is going to be equal the same role position minus camera position and then from this we could derive both distance and the direction so the camera to world direction is going to be just normalized value of this vector and then the distance is going to be the length of this vector all right so far so good now we also need the uh light direction which is light let's call this one light to world to preserve the same name structure this is light to world and what else we are missing here i think we also need the normalized light to world like we already have light let's work with already normal lives right perfect so now we could use in this formula we could use camera to world direction camera to world direction as a second parameter and the next one is light position which is just the ulight uniform that i already have and then the last one is the distance to camera camera to world distance which is and this should be it i should i could now output my scatter [Music] header value i have some glseller dimensional mismatch 120 oh yeah it's not obviously it's not the three-dimensional thing anymore and you get this like you could also get this probably with a smooth step or something but the thing is when we turn like this at the angle and we are looking at the angle you could see that the this light is not symmetric it's not it's not right like mean it actually looks like a light more nature like it's more pointing um what's that from us then towards us right and this is exactly what we need to achieve this kind of shady foggy look which looks nice you could also experiment with these values i believe like maybe 15 it's gonna be like some brighter kind of light but depending on the look that we want to achieve we might change that all right so now we have this what's next next is prosecco and i'm i'm running out of my prosecco yay nice to see you live link to the post okay hope you like integrals as much as i do next now we have this pretty cool light sketching thing now i should probably combine both light and diffusion lighting and then i will get some kind of in between lighting and remember that i'm not actually using the exact colors that used on on this website that's why it looks a bit different we're getting there i think i'm going to leave with the red shades of red because we're just using shades of red here all right what else what else what else what's the next step combining scheduling and the diffusion so i'm going to create the like plot the final final something it's gonna be scatter plus but i want uh like when i'm using diffusion it's actually lighting everything like it's every single distance it doesn't take distance into account just the direction of the light the scattering on the other hand has the light fall off so the light is not going infinitely into the distance and i want to kind of multiply the diffusion with the scattering because this way i will get i think something something good should be getting there maybe it should be more complicated formula but let's try this one first uh i should use this final now what final key fusion it's not diffused it's diffusion okay i can understand you okay where is my where is everything oh it's there it's actually there it's just it's it's hard it can hardly be seen okay so let's maybe just the diffusion pretty cool and then maybe like this maybe yeah maybe it was that coefficient it just light doesn't get through okay we are getting there still pretty dark but what i could do here what i could do here i was small steps left to implement this whole thing it's already like looking cool but not cool enough for me okay let's just briefly show the scattering i believe we should use a different coefficient for the planing for those things and we should render them in a couple of render loops okay let's do it shader cubes and create two shaders one for the background plane and one for the tubes same same but different i'm gonna use this material for my tubes and then i will need to update the uniform anyway okay light position has been updated i also need to include those shaders tubes called cubes right working again and then i could probably use different numbers in both of those so in the um in my uh where's that this is going to be the shader this one probably on the tubes it should be brighter on the tubes it should be brighter brighter is i think 15 so this means on the other one it should be 150 150 here yeah we're kind of getting closer to that amazing look from delusion then we have this issue with the depth rendering and then i'm gonna briefly fix that one to collapse this one and then i'm going to add my plane to another scene so this raycast plane is going to be in the system one which i'm gonna render first and then i'm gonna render all the rest uh i'm just gonna go and i forgot how to write this code i'm sorry after an hour and prosecco i forgot that but let me remember how it's usually done some other project you have to clear the stuff first you have to clear this stuff first there's a rendering happening here and then i just rendering clear in depth and rendering again i already did it in some of the past streams so just it's going to be scene 1 camera clear depths and then this scene and camera yeah this way i'm kind of still getting that plane and my scene but it's it's rendered first and now i have this light being like real close to those lines why the zooming is not working actually actually getting pretty beautiful and we have kind of like a foggy lighting like volumetric lighting but this is an illusion because we have this plane behind all those shapes and it's also lighted like this plane is lighted with my light source and we get this nice illusion i'm not sure if the if this is done exactly the way on delusion but probably similar they're probably not another coefficient for those lines and then what we could also do you could also do to the shader cubes and then plot like um cube dash equals what sine function from the puvx multiplied with pipe last time and if dash below zero just discard we get this now which is already pretty cool just like a wind which we could light so when i move the light source it's it's dark like because the light source is behind the the shapes and now it's lighted this is actually the only thing left here is actually why this somehow this uh i'm still moving something which i shouldn't move probably on the upgrades i shouldn't uh do this i think i'll be better yeah it was in the way me zooming yeah this and then maybe a lot more random and a lot more those lines how many of them i have anyway like it's just a hundred that is not nearly enough for me they want to have a lot more and i think i want to have them more random and this means like this step thing should be different because these moranda means one probably maybe that's too too random but now we get this feel i mean of course of course the time should be divided i mean you could see it's pretty complicated it's a lot of tiny details that add up to this whole beautiful look and this is like a huge respect and to those developers that achieve this look i'm just merely i'm just a mere mortal trying to replicate the stuff that they did probably slower than that and then we have those lines probably also [Music] like this so we have the actual kind of tubes given something of this sort should be now we have flying tubes which are lighted and now it's about finding the the spot to like maybe i should i should do something like this and then i think it's better a lot of tubes flying around and this bouncy light yeah i think that's it we gotta stop somewhere i think it looks pretty cool it would play a lot of course with the uh or all sorts of liking like the diffusion lighting i think kind of getting lost here at some point because i multiply it with scattering and we don't really see a lot of diffusion light in here maybe we should at some point we should just somehow change the formula like right now it's more of a diffusion than there are no scattering but it's still still kind of nice right ew it's been some journey this time right i think it's pretty cool so the only thing left like the only thing left of course a lot of things left but i mean in general is to implement the simulation of those of moving of those pins with the gp gpu like the with the shader sim and it's gonna be like kind of it i think we got pretty close and it's pretty cool like when this light source is traveling there and we haven't even used any post processing but it looks like it has some bloom thing there because because of this background plane that i used render first pretty cool right i think it is i think it's pretty close i'm always too critical of myself like it's it's not close it's it's completely different it's too simple but i think it's in general this is the direction and then ah no i don't think i'm cool enough to to work for them but yeah it's it's again a big honor just to decompile their stuff and every detail is amazing they are really cool creative developers especially eden one just check out his work alrighty yeah i think this is it i'm gonna finish with this animation but i probably should mention that because i i just launched the new courses and you want to support me you can support me on my patreon and thank you everybody for supporting me on patreon i have the biggest support ever on patreon at the moment i also have some courses on on the academy awards and this one is actually pretty cool i bought this one myself by luis enrique bizarro i advise you really much of that because it's like kind of the same we are working on the same field and this is one of the developers i'm looking up to is really cool i will create this one it's going to be a simple webgl portfolio website with one specific effect that i really like for the full screen image animation and then there's another there's yeah there's another workshop by me about kind of the same thing about merging the html and webgl but a different way just just the different what it's a different thing about webgl and html so i'm going to try to maybe create more i'm gonna keep on streaming i hope you like that let me know that in the comments it's always really important to me like whether it's just a smiley face or something else yeah it's definitely time to update chrome and it's time to update my prosecco because i actually finished this bottle there's no prosecco for me anymore in this stream so i guess i gotta finish my stream because i can't continue without prosecco so cheers guys say something good to someone you love hope you have loved ones call them call your parents do something good this is a nice world spread some love be a good person and hopefully see you in a week just read my twitter i always announce streams sometimes i can't sometimes i can when i can i stream have a good day guys see you i'm gonna stick in the chat for a couple of minutes and

Channel: Yuri Artiukh

Views: 5,371

Rating: 4.9807692 out of 5

Keywords: webgl, triangle, canvas, animation, three.js

Id: 8PG4RrNwby0

Length: 74min 10sec (4450 seconds)

Published: Sun May 16 2021