Raymarching simple scene #48

good morning everyone my name is yuri and we're gonna live code tonight on this sunday let me know if everything is all right with the sound because i've been playing a lot with my settings recently and i'm not sure it's still in place morning everyone uh let's check let's share the geography if you don't mind where are you from and first of all i wanted to thank everybody who supported me on patreon that's been a good support i mean that's been a great support never have been better bigger hey everyone all right so it's everything good and we can actually start oh again and tremendous geography so one of the patreons asked me about a hibernate one of the patreons asked me about this demo done by rookie and luigi de rosa and he's actually i think author of the barber js if i if i remember that right uh i hope i do and in general pretty awesome guy and he did a lot of really cool demos and really cool websites and one of the patreons supporter linked me to this one i think i've seen this one on some of the production radio website because this one is linked from the github but i think there was one in the production website i don't remember one if you remember the link you can just get it into the chat you can play with it yourself so today we're not gonna replicate it like exactly but we're gonna do something like this and i'll show you how you do these sort of things because i think i already had a re-marching stream this was just one stream i think and i think it'd be good to code something some infinite gift today with the array marching why not i'm going to try to explain your marching as as much as i understand it myself yeah the way these the is shared with the patreons i thought this could be a nice idea and you could be patreon just for one box or you can just live code it yourself because i already literally spent 10 minutes coding it on one of the previous streams like four streams ago so yeah let's start i'm going to call this one march uh yeah i'm gonna use the boilerplate but it actually you don't need 3gs for this honestly you can just be nice with the shader toy and you can just use literally any webgl framework even just the native webgl and just because i know this team played already it's just easier for me to use it so i'm gonna go and start everything and you don't see anything ouch i forgot to switch my screen i forgot to switch i've been oh you you didn't see my screen oh ouch so uh well i'll actually send you the demo already but again yeah yeah i'm sorry guys i'm sorry guys i forgot to switch my screen all right so i literally just copy pasted my 3gs boilerplate which is shared with my patreons and then or i coded live a couple of streams ago and then we just run it and let's see what's going to happen well no surprise we should see the uvs in my browser just the plane with the uvs when all the depths gonna be installed all right it's good that you see something finally and let's open it up in a visual studio code i'm going to do a simple pretty simple windows setup just so i could see the latest chat message when i'm creating only funds i don't know if i have this kind of content uh yeah so first of all i'm gonna do the full screen quad and again you don't really need three jets for that like once you get into the point having a full screen quad and i also had the pixie jazz and then i'm sharing exactly the same kind of full screen shader quad it doesn't really matter what framework you're using we're going to be just using jlsl so to do this i'm going to switch the camera to orthographic camera and then just remove the aspect ratio i think i did it in in my last stream right and then immediately i have the full screen quad because it's one one and well the camera sees only one by one and yeah you only see this square with the uvs well that's perfect what else i have this weird calculation of the aspect ratio for my image i'm going to switch it to square oh yeah i used to use sublime then i'm kind of everybody is using visual studio code and i tried it and i got used to it and i'm using visual studio code i still use sublime editor for editing like small files making small changes because it's just much faster than the visual studio code otherwise i think the code highlighting in some minor things are better in visual studio code now even though it's slower like much slower than sublime okay um so we we got it running uh what else let's start the raid marching probably right so i'm going to open up the this is the run window fragment gel cell i don't need this probably needs all the other stuff though i need some uvs which are just the nothing's gonna change really because they are both square right uh uh you can just literally see in chat the the link that i'm gonna be building well sort of that thing so to do the rim marching we need two things first we need some objects in our scene and then we need the ray marching part like where the ray would march into the space and usually it's well representation of this concept looks like this so we have some camera we have some kind of image that we will see and this is going to be uvs so this grid is going to be just the uv system coordinate that i use here now and this camera is going to be just some three-dimensional point i mean point in three-dimensional space and then i need some objects and objects it's gonna it's gonna be just the function that returns the distance to the object and i'll start with the well there is a reference link by enig where he shares and well you need to know in nicolas if you don't know him yet because he's like pretty much like i don't know like who like the most famous guy in this community like the father of this community i think could be considered so there are some already defined functions for those objects and it's pretty well it's it's nothing magical here so you could just guess why this function is actually sphere because this is literally the distance from one point like when the distance from point to [Music] any other point is the same flawed value well that's a sphere because by definition the sphere is just the set of the points with the same distance towards the center of the sphere so yeah let's just copy paste this really complicated function i really like this concept of brain margin and it's kind of from the outer space compared to the usual like 3gs and all this stuff so this float s is actually radius let's let's switch it to radius and it looks better to me and this p is just the current system of coordinates yeah and let's create the scene so it's going to be flood map and then 3p which is going to be just the system of coordinates and then just going to return these sphere from p and then like the radius it's going to be 0.5 so for now we we kind of have a we kind of have an object well it's in our imagination so far right so it's just some function that returns distance towards the surface of the sphere all right and the radius of the sphere is 0.5 so now we have to introduce some concepts like the camera position and like all this stuff and i need to have all those things i need to have this view ray i need to have the camera position and all this stuff so first of all camera position i'm gonna set the camera just like i do in 3gs scenes so i'm going to just do count pause equals 3 so i'm going to just move camera on z coordinate axis just let's be two units then then i will i will like imagine a ray coming from this camera position towards this like playing grid of uvs and this ray is actually gonna to be something like let's call it ray it's going to be three dimensional clean and i need to normalize it because i just need the direction here let's make it bigger so i need the normalized vector and here i'm going to use the oh i think i just uh [Music] okay let's copy paste this i just deleted kind of important theme to me oh i didn't delete it actually i didn't delete it all right all right everything's all right i just needed those uvs and i thought i deleted them but they didn't all right so i have this new uv thin and then well i'm gonna just use this as a direction of my vector and then i think i need to use -1 because my camera position is at a positive point so i want my camera to point towards zero point and this means this should be negative like the z coordinate of the vector should be negative and then the x y coordinates it's just these i'm just taking the u v coordinate because uv is just two-dimensional system of coordinates so far so good well i wouldn't be able to see anything yet because now i need to get the the array marker actually right and i think i would also need to change those uvs because i'm not good with on the positive numbers because new uv is actually between zero and one and i don't really like that let's switch it to uv so far at the moment so right now at least we have the valid shader so now i i can i can actually mark something so i can introduce the current trade position so if you not familiar with the array marching okay if you are familiar with the ray marching congratulations but if you are here just to enjoy the show i'm gonna explain to you real fast what ray martian is so we're gonna make a loop like start at the camera position image and this is the camera position and we're going to measure the distance towards the object and this is literally what the function from the scene returns the distance from any point towards the scene so we're going to get this distance and then i'm going to march towards ray direction which is blue here to this point then at this point we're going to measure distance again and if it's still kind of big we're going to measure it again again again until it's going to be real small until we hit some object so we're only hitting some object when the distance becomes real small after a number of iterations so i need to make a loop and on each iteration i'm going to measure distance towards the scene then add it to the array and then march march ahead and this is why it's called ray martian because i'm marching my array with the distances i measure towards the scene so it might look complicated to you and you can actually get those kind of situations like the way getting real close to the surface and then getting out so we need this small epsilon to measure when it's really hitting the object oh and this is pretty nice image to show what we are actually doing right now so we have the camera position and we have this kind of uv thin which we see on the screen at the moment and we have an actual 3d scene that we see through this kind of projection i don't know surface okay so i hope i i hope i was at least a little bit clear and you have to watch the the art of code tutorials to get better understanding because they're really awesome and he deserves all the praise there is just like niko keyless his matrix video is just pure gold just go watch it it's the art of code channel it's dedicated to all the array marching things and have lots of videos about those concepts and also have very much unexplained for the newbies and yeah all sorts of things so go and subscribe okay and i'm gonna just do this loop finally because already lots of time spent okay so i'm gonna um current rate rate position i'm gonna set it to the camera position so we start rape and this camera position and then um i'm going to do the loop the equal zero how many iterations well i've seen different values let's go with this one and then and then inside of this loop i'm going to get the current position so it's going to be like something current position which is going to be equal to the com camera position plus [Music] some value going towards the right direction what's going to be that value by default that's this value set it to 0 it's going to be t multiplied by ray so this is going to be the marching part because this is the normalized vector and this is some scalar value and this is three dimensional starting point so when we gonna be adding this up we're gonna be moving towards the towards the object towards the right direction so then maybe i should call this sdf because this is sine distance function so let's measure the the distance then it's going to be h sdf from what from actual current position because we're measuring from some 3d point and this is the the point we should be measuring from okay and now if this h is less than something really small then break we can go out of the loop i think we also need to account for the situation when the array doesn't break into anything and let's just equals like five because i'm not going to have any objects further than 5 in my scene and then if t is greater than t max value also breaks so if the rate goes out of the all right so it's the only reason for doing for doing this is so i not go the full iteration count because the rate is just getting out of the object all right so i have this loop it actually returns something so in the end after this loop i'm going to have some t value right because this t was zero at the start and at the end i'm going to have this t vary so if t is less than t max okay let's do the default color effect 3 color equals black and then color equals white and then let's just do the color here and hopefully we should see something we don't see anything because probably some jlseller no we don't get any jealous ever still have something wrong here okay maybe the sphere is just too big no it's not too big okay something is wrong here but i'm not sure what um this is the most important step like once we figure this out what went out it's gonna be pretty straightforward all the rest so if t is less than oh i'm not marching in my step actually i'm not changing the t value anywhere so t should be i should be adding this uh distance value so this is the actual uh like this kind of step that i should be doing on each iteration the most important part the margin parts i forgot the marching part from the ray marching parts okay let's see what's gonna happen now um still not good maybe like 0.4 again okay i actually see something finally i see something so we have this sphere now at the place it's actually in like zero zero point coordinate because i need to kind of normalize the system of coordinates so i need to subtract something let's use new uv okay it's it's not getting better so let's use vuv minus 0.5 so now we get this in the center but because the aspect ratio is not really right one i'm gonna multiply this one and now we have it right because this resolution zw is actually just like the aspect ratio of my screen at the moment so now we have this this is actually sphere believe it or not this is actually a three three-dimensional sphere on a two-dimensional plane in this three-dimensional space this is really weird this is what i like all right next step would be to make it actually look three-dimensional for that i would need to get normals to make some lightning there already some pretty decent function again on the website of indigo kls normals normals for an sdf so there is already a like uh analytical i think it's a little function to calculate the normals at any given point at my scene and i'm gonna just write it down there's some math behind it it's a kind of simple it's kind of hard to imagine at first but it's actually simple we're taking the point at any surface and then calculating the the vector that points towards the biggest change in the values of that function and the biggest change in values is usually just the normal vector because it goes from zero to one you know when it goes through the normal vector direction i'm not sure if that's clear i hope it is so for that i would need to calculate the normals and there is already i think i've used this function it's pretty simple so i'm going to just do this one so i'm calculating the the vector at the three-dimensional some point in space and for that i will need this epsilon part uh like flawed apps on equals i mean it's actually kind of easy to do this way zero just kind of a small vector and then i'm gonna just return normalize because normal should be normalized and then three dimensional something and then here i'm going to do the those gradient vectors that the nikon describes here so i'm going to do exactly this kind of function i think yeah this is it this is like the function that i'm using i could as well just copy paste it maybe yeah so this is literally what i've just did i just did this vector with a real small value i think mine is one thousands and this is one of the ten thousands and then just get the normalized vector of adding something real small to your vector well yeah okay let's just copy paste it then i'm not gonna write it down i thought it was just a math explanation but it's actually a complete explanation and so we have it now and then let's just calculate the so let's do the like three normal equals normal and and like in which point we're going to be calculating this normal actually on this point that we need to calculate again because we have this variable only inside the loop but i i still need to calculate it again so now this is the final point where the race stopped because this conditional only happens when we actually hit something so this is going to be the point where we hit something and at this point i need to calculate normal vector and then i need to i can just do like normal and let's see if normal looks good okay something's wrong i forgot this something else is wrong okay if no match never loaded function phone because this is not f i could be pasted the thing but i need to provide my sdf here yeah so now we have the normals for the sphere so it's actually three-dimensional we can even make up simplest simplest yeah i'm gonna sneeze no no i'm not okay so uh i can actually do the simplest uh kind of lightning like the broken kind of lightning so i can do i can imagine the three-dimensional point directional light and then i can make a dot product with the normal and then i can do the color is as and it's sort of like a sphere okay so it's three dimensional sphere again what else what else now i have normal i have array direction i have position in my space a lot of things now what i could do here i could actually let's replace it with a cube and rotate it okay let's get the cube sdf let's get the cube sdf all right there's a box exact tstf and then i just did some rotation so the sphere is here let's make it an sd box and let's do the float box equals sd-box and then we should provide it with p and then the bounding stuff let's make it a small box i'll commend the sphere box let's make a sphere as a different kind of thing okay should be good here we have the square now i need to rotate this in 3d i'm going to get the rotation part yeah so here we have the function to rotate and then where is it again this is not what i want actually i think i wanted the other one yeah this one is better because this one has the already the function to rotate some some vector which is kind of a little bit cleaner to me so i can rotate something some angle and some axis okay so um i'm going to do the another system of coordinates i'm going to rotate the whole space b then some vector to rotate about and then the angle i'll let the angle be the time divided by 5 and then instead of using box b i'm going to use box b so now we have the rotated cube right which is pretty awesome yeah i've been speaking at the at the local ukrainian conference yesterday about the generative art it was a russian speaking conference yeah so i didn't really share it here all right so we have the box we have the lightning we have it rotated now we could actually merge them and it it kind of looks nice you can just do the uh mean between box and the sphere i think the box gotta be a bit bigger now smaller yeah so you can actually merge objects but this is not fun what's what is fun is actually that you can again on a class you can go and look for different kind of minimum functions and there is an s min which i really like and this is not the yes mean i guess page there's polynomial yeah this is i think the thing so we can use different kind of minimum function like the exponential the polynomial i think the polynomial is the best one here so instead of using the usual minimum we could use some other kind of minimum more smooth so we can do the s min here and then i believe you need to provide the other value there too so now we're getting sort of these things so when the value is really small we're going to get the distorted objects like this and then the layer is really big it's going to be more like something really weird hey all right let's get going so the next step i actually like to make a pretty cool coloring here and one of the ways to do this well i can just provide all the brdf of physical basic material rendering kind of stuff here and calculate them all but there is a another way of doing this is the madcaps so i'm going to use this whatever this matte cup is just a random image i downloaded from the internet and provided in my shader and let's see how it's going to look like so i need to set it as a uniform [Music] cap then i can use it right here but then um how do i use it well the mat gaps uh to use madcaps you actually need to to have the direction towards the point and then the normal at the point and well mat gaps is actually a way to map this simple png image to the 3d what object with its own normals so it kind of looks like this sphere not sure if it makes any sense anyway there is a formula to map a normal vector and then the ray direction that's just an open source kind of thing but you can map the map caps to to the actual object this function i'm going to just get the function view code i think it was here yeah it's it might look a little bit weird but this is just the math i'm not going to derive it here so it actually takes the i vector which is the array vector for us and then the normal vector and it returns uvs it returns uvs for the method so here i'm going to do the like the math cup uv equals uh mat cap i think i got it i'll call it it's one get mad cap to avoid all the clashes between yeah it's kind of pre-baked physical rendering i think you you could call this i'm not really pro in any kind of rendering but i guess it makes sense so uh i'm going to get the metcap uv i'm going to get it from the ray vector and then from the normal vector so we kind of should see something like uvs on my screen right now yeah we see something like uvs now it makes sense they're changing when the object is being rotated so now i can actually do this you can do the madcap and then match up uv and then boom we gotta be seeing something cool but not yet because why what's the error here 173 oh yeah because this is three dimensional thing and i need to get the three dimensions from this one yeah so boom we now see this actual thing being rendered on my screen and well just to show you how much fun this one is and just replace this image i can do this second matcap i'll be mad cap one and then instead of metcalf i'm gonna use madcap one so yeah it's pretty awesome all right next step let's connect our mouse and get this one to be interactive mouse events and then i'm gonna do the looped gif as well it's actually like that you could use all those concepts from like in in in ray martin you could use all concepts from the well actual lightning i mean it's just kind of a basic rendering so you could use anything like the matte caps for example like the usual lighting lighting it's light it's not lightning why do i pronounce it lightning all the time because i like lightning but it's lighting it's lighting okay i need to remember this i always do this mistake mispronouncing this word okay some mouse events mouse events and then documents let's get back to the html part because we are front-end developers after all right and then okay i need to have the this mouse equals and then here i need to have this sort of thing and then also in my uniforms yeah i remember about lighting here all right so mouse i also just recently learned that well when you subtract something it used to be subtract but now it's just subtract and substruct is just the old-fashioned way of pronouncing subtract and in my school they taught me that it's abstract so i still kind of pronounce it subtract sometimes but it's actually subtract okay so we have the mouse uniform now we have to set it equals what i want it to be the value between something minus one and one so it's going to be the event here let me e page x divided by this width and this is between 0 and 1 and i'll subtract 0.5 here this y should be y and i believe it should be inverted because y axis is usually inverted so i think i now have the this mouth thing i need to set it in my render loop ouch let's just check this real fast so on the left top corner it's minus yeah it's kind of big so the y is 0.5 the bottom is somehow because i'm still dividing by the width yeah i'm still dividing by the width whereas i should divide by height okay now it's correct so now we have the mouse position now we could add another object to my scene but this object is going to be at the mouse position just like at the original website i'm not really replicating the code of the original website more like i'm doing this same kind of thing with my knowledge like how i would do this so this is kind of inspired by the original website so so far so good i need to remove this freaking pencil lock okay so another cool stuff i need to add this new object and how do i add this one so when i'm using the sdf so instead of putting the sphere in the center i can just put it like sphere minus three dimensional thing then i'm going to be moving just the x y coordinates and then the z coordinate is going to be zero let's make it smaller also what's wrong what's wrong can't get property except undefined maybe maybe i'm doing this before the my actual mouse is set yeah so we have this kind of sphere i think i need to i think i need to multiply this one now with my resolution and get it the correct kind of thing so i need to go to the sdf i need to multiply this one with a resolution cw maybe by 2 because my values were alone from minus 0.5 to 0.5 so i need to multiply this all by 2. yeah so now we have this kind of object i think i could make it bigger yeah it looks pretty nice right and you can play with it as much as you like so what i want to do now first i want to make it kind of more smooth and for that i'm going to use fresnel shader and then i want to i want to make it like the infinite loop okay the plan is here so let's do the let's do it a little bit more smooth and i could still use the s min to make the cube more rounded so instead of just using the cube i'm going to use the s main here as well like 0.3 and then another sphere b like 0.3 part of this thing i just wanted to make the cube rounded i think it looks better when it's rounded glsl is a language for the shaders c kind of language this is already kind of looks like the original thing [Music] there are some interact more interaction kind of part let's also do this interaction kind of part so we have this progress failure so let's start with this i think i like it more so we have the we have the settings in my template already it's not going to be having the progress part yeah we do have it i need to set the progress value and then i could do a real box and use this final thing here in the end uh where did i mess up real box progress okay let's just look at the console cannot say property value of undefined progress i haven't said that okay it's almost almost there so we have the real box and we have the box yeah so this is the actual box this is uh like i mean this is the real this is just the box and this is the actual box i have to come up with better naming all right why did i want to do this in the first place maybe it shouldn't be a box but like more like a sphere so i can see the morphine box to the sphere what again sub sphere and should be just the float value so now we can just morph cube to the sphere with normals morphing in place okay so yeah let's do the background let's do the background part so inside my shader i'm gonna do this flood test equals length it's going to be distance towards the center you can just visualize it yeah we have it and then let's do the background is here one twist this is gonna be the value that smoothly changes i don't actually need this i can just do mix between fact 3 0.3 three so those are just two colors and then use this for this maybe it's the other way so it's kind of light in the in the center just to look nicer okay so we have our object in a bit a bit cooler background all right and still morph all these things now let's do the fresnel shader where do you get this fresnel i did in one of the previous streams and this is how you calculate this one so this is dot value between normal and the [Music] okay i think i have some saved fresnel function i'm gonna just type that down um or should i i think i have been one of the previous streams the final function all right let's just calculate for now as it is gonna be one plus one multiplied to the then that should be the power function some power and here i need to erase the now it's not like that i think it's like this i keep trying to guess it i should just just google that one plus dot in between normal and the view direction i think gray and just see how it looks like undeclared identifier okay [Music] so i think this is kind of the fresno function which is light on the edges and then i could do the mix i'm going to do the like color equals mix between color and background and for now it should make it which is also kind of cool even without any med caps right oh yeah because i just set it to fresnel yeah i need to mix with the actual color i think it's better it's kind of more smooth because on the edges it just [Music] you know it makes a gradient to the background and it becomes smoother this way yeah learned this trick in that actual website by ichida rosa okay next step next step what else i wanted to do i wanted to do the infinite loop now let's make the cube a bit smaller esd box a bit smaller where's my sdf f is right here the actual box i'm seeing right now is just the box i think so this is yeah it's kind of kind of a box yeah rounded corner box okay the next step is um yeah make it a loop okay so i will add another let's call this one a mouse one of them is mouse so far so good and then this is the final thing that i have at the moment like the final object before i merge it with the mouse so i could add something more to them to this object so let's add plot go to center which is going to be the sd sphere with the radius real small value value there and then p minus um three dimensional thing and this one i want to be dependent from time so plot progress equals fracts from time divided by three so this one between zero and one always and then like one multiplied by this progress and then i need to merge this go to center with my actual final so final as mean final go to center yeah so we just got the infinite loop for this kind of thing then i i think i need to get the uh just i just need random okay yeah this this will do good something to get a random value and then pom pom pom pom where is my infinite loop again here notice how it doesn't actually merge with my mouse because i i do this before before the actual mouse and it's actually going to the wrong direction it actually merges with the mouth you just go into the diagonal direction so if i just change this one to one one it's gonna be going on x x axis yeah it's gonna be perfectly merging now so i'm gonna do the loop i'm gonna do loop again 0 10. i like 10 of them first i'm going to get the random value so and then go to center and then i need to merge them to the final so i'm going to do the 10 times and i need to get the random value yeah the rent equals trend offset rand from i and zero doesn't really matter i'm just getting the random value and then this random offset i could just edit my time i think to the whole time like like this something is wrong okay i have to provide two-dimensional vector here this to work still something is wrong undeclared identifier yeah okay it's good now now it's a continuous flow of the balls to the right side and i don't really like it and for this i need to change the position they are going to and from and this is the position that i go into at the moment to change this position i'm going to just do the three and then i'm gonna do this and do random offset i mean i'm going to do sine from random offset multiplied by 2 pi and then same thing with the cosine and then zero and this would be it so i'm getting random position on the circle in the where z is equal to zero so just around my cube so it's kind of maybe i should multiply this by two or three and then i could do the other way and now we're getting this kind of weird animation and then we could just replace the matte cap and the other one looked better and now we get this kind of object and this is my mouse as well and well this is the gif i wanted to make it's it's it's kind of simple but i think it looks nice see what else we could do we could change the colors here so when we measure the distance so let's say i want um i want my mouse object to be of different color so this way i want my sdf to return two-dimensional thing so not just the distance but also a color so let's do a color so because of that i would need to set everywhere i'm only using the export next part sdfx yeah okay it should be good now so in the end i'm gonna return two dimensional thin and then zero yeah it's working good so far we're just returning zero but then when we color everything i'm gonna have this last cos -1 and then here type equals sdf y so far so good so now here we're going to be having this type and i could do this if type less than 0.5 and this and the other mud cap so now just to check if it's working it does so now i have to return either zero or one depending which object we hit here in the sdf scene and to know that it's actually like let's do the so let's make it zero by default by the way why do i need minus one so if minus sphere is less than final type equals one and here i'm going to return type yeah now i have the mouse as a well of course we can make it the smooth transition because right now it's really like depending on the distance we might make it smooth but i don't care at the moment maybe i should make mouse smaller i think mouse should be oscillating like in in the original demo let's just add this and i'm gonna be done with that we could actually return here something between zero and one and then mix those two textures right yeah but not not in this stream all right the last thing i wanted to do is to make it oscillate yeah mouse sphere so the radius is actually just this value and i could just do [Music] plus and plus so the sign is going to be actually like this multiplied by the sign from the time so it's pretty big i guess yeah you could fix the oscillation i think it's even cooler this way it's like they're eating the sun now they are eating my son all right and then what else what else i think i could also instead of using the progress for the mix between where to use the progress here i could do point 0.5 multiplied by sine of the time divided by three so it's going to be either cube or sphere all the time is gonna just oscillate between two shapes and you could do like all those different kind of things i think i also had a couple of mad caps saved let's try them out i really like this one so let's use it for the isn't this awesome and i have this gel kind of structure eating all the things out and then i could also oscillate the size of the cube in the center it's going to make it live probably so the size of the cube the size of the center cube this is the mouse sphere and this is the this is the final thing that i'm using and just to switch between box and real sphere and then let's make it size oh something like this i'm not sure if it look gonna look cool but let's just try this maybe i should make those smaller this kind of randomly lives i already did what i was trying to do it's like this gif i think you can go you can imagine that you could go anywhere with this like all kind of madcaps could be used all kind of lighting could be used and this was planned as a kind of basic very marching stream and i think we did a pretty good job so this is pretty nice i think what i also could do i could i could change the size of the all those spheres like here i could do 0.1 multiplied by sine of pi multiplied by the progress this means it's going to go from 0 to 1 and then to 0 when the progress goes from 0 to 1 this one is going to be between 0 0.5 0.1 and then 0 again yeah it's going to just make it a bit more lively and maybe i could also use this uh actually i think i need to stop we already spent one hour so it's just a continuous exploration like you could do anything with this you could go to the shader toy and see all the crazy demos that people come up with doing this what we did here is pretty basic stuff but it gives you an idea of you could what you could do you could actually use um i mean you could use very much to produce some creative images some really cool stuff sometimes you can even use them on production but you should be really careful with that because it's usually pretty hard to use them in production maybe i should use the blue value yeah i think i used all my madcaps yeah so i hope you like this one yeah you could do you could use this smooth transition between colors as well you should you should just use the the values in the sdf marcher and then you could do that but it's already a long time so we gotta stop right here so i hope you like this one it was pretty basic to be honest for the rain marching but it just shows you that you can like do anything really anything i really like to look at this image at the moment all hard for production because they're pretty hard to compute because this is computed for each pixel on my screen and sometimes the computation becomes real hard so just measure this thing i think the gpu is pretty much struggling at this moment no well my fans are working good for sure right now so maybe they're good because like richard matka oh actually used the ray marching on for the image on his home page and it worked pretty good you can go you could go and try his website yeah this is old jlsl just go ahead and try it yeah so this is done with the raymarch and i think i decompiled this one in one of the previous streams so you can check out i don't know maybe fifth stream in this season just go and read the titles and i did this one too so and it's actually in production so you could use them in production but you should be really careful with optimizations because this could just drain all the resources pretty fast and you just could drain the battery as well yeah so i hope you guys like this one i'm gonna go ahead and relax in today i'm wishing you a good day thank you again for supporting me your epic it was nice to stream to you thank you for all the support tell someone that you love him spend your day happily and i'll see you probably on the next sunday hopefully just follow the announcements on my uh streams on my twitter on my twitter oh my god um i'm just confusing all the english words at the moment yeah i can speak english for some time but once i get a bit tired once my brain gets a bit tired and like when you're stressed you're a bit tired then it just breaks down so yeah guys have a nice day have a nice day i'm gonna stay in the chat for a little while but overall don't forget to like the video it's really important to me and it makes them be higher in the rankings and more people would see them and i'd be more happy if more people see my videos and yeah have a nice day

Channel: Yuri Artiukh

Views: 7,026

Rating: 4.9861593 out of 5

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

Id: q2WcGi3Cr9w

Length: 66min 25sec (3985 seconds)

Published: Sun Dec 06 2020