Three.js reflective grid with energy wave from crosswire.io

good morning everyone is Ohio hello everyone let me know if you can hear me well see me well and let's get started coding today I have power today I have power at least right now but that could change any moment not even kidding here okay all right let me arrange some windows put in Morgan gotta add that to my morning greeting routine so I assume you can hear me and everything is all right okay today and we gonna be going for the crosswire IO look which is created buenos dias Amigo and which is created by unseen Studio they had a lot of actual updates recently I believe I think their own website was recently nominated still a really cool agency and they created the crosswired dot IO website which I think is awesome I mean the transitions between okay I gotta switch the I gotta switch the screen so you can see it better hello hello everyone so yeah they have a really nice transitions between the scenes like real smooth and lots of small elements with a nice like animations lots of cool stuff in here of course I will not create the full website in one hour obviously but we're gonna try to create some of the coolest parts of this website right this is what we're going to be building today and we're going to be using 3GS so let's get started and again hello to everyone let me know where you're from let's check the geography real fast and let's let's get going while we do that I'm gonna run my usual boilerplate I'm gonna call this one well cross wire I'm trying to switch to the warp right now not sure it going that well but it kind of nice kind of nice so first of all I'm gonna install some stuff thank you Amelia I wish I could say the same in your language by the way what is uh what's the name of the language pardon me that I don't know that but what's the name of language that you speak in South Africa is it just South African language or name probably or to Taiwan Esh all right so we got this I'm gonna do the code gotta automate this process of the lighting windows but yeah it is what it is right the website seems to function anyway even in this narrow window Tijuana all right now we have like the full Globe I guess because we have this Hemisphere and the other one and then we also have South Africa so that's that's the full Planet actually all right um where do we start with this one so first of all there are some objects on this scene right and I believe it is actually possible to recreate these ones with just extrude geometry so you could just go for the 3js extrude there are some drawbacks with this one and the main one I think is having UVS like you would have to calculate your own UVS probably for the extra geometry like it can do the pivot without like boxes with rounded edges but there are I think they're going to be a problem with the UVS on the edges and we're gonna need UVS here also that would be a problem with these shapes because they don't really go all the way to each other as you can see especially here it's in it's it doesn't go all the way to the like the edge the corner it stops here because it looks more beautiful this way hello to Canada really to Mariana this is for anybody that doesn't know this is history that I live in all right all right um from where do we start where do we start so yeah the objects I already downloaded the objects so let's just preview them so they're using the glb files and they look somewhat like this they use three of them this one is a water of a circle and this one which completes that quarter of a circle like this nice shape what is good about them that they have uh like nice UVs and this is the benefit of drawing dance oh to Nicole make life almost said Nikolai right um yeah so let's load them I'm gonna copy them and I also downloaded the textures these are the textures that I used on the website and we're gonna see how exactly they help us to achieve this look so the objects are called ob1 and nobody almost and let's do this not assets so let's get the object URLs in the parcel now the next step I kind of want to load this these objects around all this stuff so here uh yeah let's first run something right yeah so we have the template in place thank you for asking well I'm good today I slept left a lot hopefully we will not have any blackouts today because it's way too sunny today and I believe Our Heroes fixed all the stuff that was damaged by the missiles two or three days ago well at least temporarily fixed as we had some major missile attack again like two days ago right right right right so we're gonna command this but like this at this moment in time it doesn't seem like a big deal anymore uh why don't I have them okay right so this is empty because I don't have anything and now I need to load the stuff but there are a couple of ways to load this stuff I already have the gltf loader which can okay I I really love I can't get used to this like helping me with my own variables actually because like no autocomplete would know that I have the ob1 variable already although I hate it it doesn't get the the arrow functions yet so you have to edit it anyway so this way we can yeah basically do this and we're gonna see some object and we can already see that it's actually centered at the bottom so you could probably probably do something like this I think it's 10 is the size of it yeah so now we have this column here it's pitch black because I don't know why it probably is like mesh standard material or something and you don't have any lights in this scene and that's why it's black go to India too all right all right but I actually need three of them and to add three of them you would need to it's it's a little bit of a hassle like you need either promise all or like waiting to load them all so maybe I'll just wait uh just do something like mesh equals weight this child there I think there's gotta be a lot of sync this and now I need to add anything here just to make it without the what they call it promise hell or like something like that so I think I also can do this uh get deeper do I get anything in there in in the children yeah the children is actually a group and I don't need to take the mesh I only I'm only interested in this geometry actually I only need the geometry here so that's gl1 I'm gonna make one picker probably okay hello to Bangladesh looks like it's video yeah that's true also smooth so smooth but we're gonna at least I think at least 40 percent of this amazing look we're gonna be recreating today so we're gonna be feeling that created something cool but I gotta speed it up all right so I have the uh I'll try to remove it we don't need any lights here usually you want to avoid lights let's at all costs 18 lights is better than having lights all right so we have children and children I'm a much dumber than co-pilot doesn't make such stupid mistakes to children uh zero because this is the first one is a mesh and then geometry okay so this should be a geometry buffer geometry no what's that then children do this group okay ass I still have to take another children uh so it's like grandchildren something what is going on here okay we finally got the buffer geometry here and I need three of them just so we don't get back to these I'm gonna take three of them not consistent at all with the number in here but the hell we need this once so just to check that we have all the geometries in place like Q two Gear 3 here so we have three geometries so a layer different I hope so at least I'm loading different objects here and then hit they're not actually different you know because I'm still using the health okay now they are different because I'm actually using different objects here all right so we have three geometries now the next step we could actually just create like hundreds of meshes and populate the whole screen with them like where's the crossfire yeah like to create this kind of grid but this wouldn't be performant at all because we would obviously need to animate their positions later later on and well it just doesn't it's not sustainable doesn't work like that so we need to create the instanced mesh out of those and to do this I would need first to create some kind of material which I have already but let's create a debug material first normal material just to test insert because you know to to use the instances in your Shader material you would need to add some like instance metrics probably so let's say we have some kind of rows which is 10 and then this count equals rows multiplied rows and then um what else what else what else I think to like position correctly this zombie you you always need a dummy use instances because it's easier to thread them around and then I'll need two loops now first I need to create the instant smash which is going to be uh pretty much this yeah I wonder if at some point in time you're just gonna write code for me well not this part although this part comes from the 3.js examples I believe so it learned on the 3js examples and then it's using it anyway and then this scene at this instance maybe we will see something okay we just see one of them is not something that I like so let's um Wanna Be Rose then I need another look like that and create an agreed i j and then when I lazy I'm just formatting everything right okay I wonder by the way if if there's a way to get even deeper in this like decomposing JavaScript thing could you like go even deeper in some way like maybe a little something like this gotta learn JavaScript quite a lot oh to Finland um my friends from Finland used to teach me how to pronounce goodnight in Finnish and it really sounds weird all right is it the right thing that co-pilot says like in the current development you have to think like is this correct code you're not actually writing code actually thinking if that's correct it does look pretty much correct to me to be honest except that like maybe you could do something like this instead of this and then X Y I don't actually need y this could be as well zero so like Y is going to be here so it's not actually X and Y 3D coordinates it's more like X and Y grid coordinates in this in this particular place and right so this changes between one and like minus rows divided by 2 minus rows divided by two mm-hmm this tiny physician said not actually this so it it did make a mistake oh no it didn't make a mistake it was calculating X and Y before that just me made a mistake okay so we are almost there minus 10 here okay so it seems that it doesn't really work for me yet some reason so I'm going into the instant smash maybe I need to update some like attributes kind of thing in there so I'm just gonna go to the 3Gs oh it's not yet we gotta we gotta buy it which has come we just examples just safest safest spot so yeah we do need to update the attributes after all right so this should work but it doesn't and why is that this instance set Matrix at maybe this was missing yeah believe so so now we have the grid and this is already an instant mesh so it's it's only one like render call here which is really good for performance really good all right now the next step I kind of want to use my own material yeah yeah you're right it was undefined because copilot helped me with that but he didn't like realize that I need to define the variable actually have you seen by the way the guys like recently on the Reddit someone posted chucked GPT versus stockfish playing chess it's a really funny example of how helpful the AI is right now I mean it is helpful but not with this stockfish all right all right hello to Vietnam as well all right next uh just gonna follow some sequence here so created the instance mesh for now I'm going to just use the basic grid later on we can populate it with different meshes by the way I could just add right here and it's going to be fun already also kind of want to move my camera something far away and with the angle something like this I also want to use um not the perspective camera but but uh orthographic camera and then the thrustum what's going to be the frustum here I don't know four yeah that looks good so obviously they are using the um the orthographic camera because you don't really see which is there's no perspective in this rendering all right next where do we go next uh we want to use our Shader material right now so we basically created the mesh and the thing is now I'm going to use my Shader material to recreate it so instead of just mesh normal material or whatever by the way we could just temporarily test our mat cup which is going to be a matte cap so instead of using ugly material let's create the beautiful material matte cap and then let's use this one matcar PNG the website I think they have six of them and they change like while you scroll they slightly animate those mat gaps so you get a kind of a different lighting or look to the website maybe like more purple because you could see that they are kind of like similar similar colors it's just that the light the blue light actually changed its position here com and well in the yellow one as well so it just it's it kind of simulates that the lights are moving around but you don't actually have any lights it's just the texture being simple okay okay okay we have it here now if we just use a the mat cap material it already looks fun not too much fun but fun see like what's the difference between those two actually well yeah it also depends on the angle from which you look at them but anyway now use this one looks cool with a different angle already looks cool right so with such an easy like really easy setup you could achieve amazing looks it really depends on the angle right so you gotta find the correct angle from the camera to look at this thing to get the colors that you want like this probably is something yeah kind of like this anyway anyway let's move on now when I use my custom material here instead of mad cap material so where was I material now I don't have anything nothing is moving but I need a texture so first of all I need this uh let's call it matka right we have it what else do we need there well I think we're good for now the rest is go to the vertex Shader and we actually need a this is usually usually the kind of MV position so yeah usually multiply this with the right position and at some point here I need to multiply it with an instance Matrix so I can't uh I mean I shouldn't actually think it's already defined so this way I'm going to get the Shader error that the redefinition all right so I have it already and that this means that I have to probably hear or maybe not Dimension mismatch okay okay okay figure out uh [Music] should have been all right but maybe we shouldn't multiply this we should just [Music] um Maybe oh I believe this gotta be a four-dimensional thing yeah yeah this is this is the problem yeah right so now we have uh everything the looks are just the UVS here hello tomorrow whoa now we have this now we we have this in the Shader material actually what I want to do here also I want to do um I believe at first it's not should multiplied by the model Matrix model Matrix and then The View for the camera like MB position model view position equals uh you Matrix multiplied with the representation this should work this is the same thing yeah this is the same thing I need this because I can change MV position right here like you can do why Plus let's also add some random attributes like right now we are changing the positions of our objects with this thing which I don't want to do but what I want to do I have uh let's call it a a just random gonna be discount and then in this Loop I'm just gonna random uh index math random and then in the end I have to add this not this it's going to be this instanced geometry set attribute come on help me I'll just help how to trigger this Copilot I mean it's going to be a challenge add random values to the geometry and let's see if uh if it if it helps me yeah it did help like I mean if you write the comments properly it does try to like help you properly so this is the thing that I want so actually adding the attribute a random the steps you really like I'm getting more lazier to write like those things because it's really a long invocation of the stuff attribute plot a a random and then here what's wrong with this sign actually let's let's use this sign thing okay everything broke at three didn't actually work for me for some reason maybe uh stick to the plan yeah this is wrong because this is not the buffer attribute but it's got to be the instanced buffer attributes oh copilot let me down now it works because now this attribute is tied to each of the separate meshes not just for the like for for each of the vertices right now we have this so far so good moving closer to the desired result what I want to do next I think I gotta use my mat cap somehow in my Shader uh called one you met cap right what's that the name yeah your mouth cap I have the matte cap texture in there I'll have to figure out the UVs let's go the Mr dupe Repository and then let's search for the Mad cap let's find the medcap material let's get the stuff from there it's like I need Shader it's not the one these are the shaders so first of all I need the view position uh varying also kind of need fee position and also the normal and also World position but let's get to that and usually this versus why the MV position is useful because we already have that and we can just set the the varying piece so give your position is minus MV position all right all right so far so good you can actually now add this something like something like this to spice it up a little why it doesn't work I'm gonna remove the time oh yeah oh yeah I did all right but we gotta slow down the time which I could do that in my real life okay so now we have something pretty cool we could actually do what can we do the rows number of rows make them hundred not something pretty cool still running steady 60 FPS together with streaming already some kind of generative Arts I would believe there's a lot of creative Dev agencies just look in the comments or my tweets basically every one of my tweets is the creative web agency all right we gotta we're gonna use the Mad caps getting distracted okay so we first we calculate the V view position and then we can calculate uh like this you can calculate the actual UVs I like this magic number 4.95 because of the reasons okay and then let's calculate the stuff so we have the V view position here what else do we need we also need the normal yeah but I first need to calculate that normal and I'm not sure I have it and just to be sure that we have the normal layout now it's all black but it's still the same scene because I don't really have a normal yet let's calculate the normal see if copilot helps me here well it does but I also need the instance Magics here I think but does the instance Matrix changes my normal here if I have the orthographic projection I believe it doesn't matter like because I'm looking at everything with the same angle so it doesn't matter but still I think this is the way because later we might change it to the perspective and that it will stop working okay so now we have the normals and now I can try to use the mat Gap so this is the correct way now copilot will help me obviously with this one and let's see if we get it yeah so now we have it looks pretty cool right especially because now it's our own Shader material and we can basically do anything with this thing which we're gonna do right now okay um we also need the world position so I also need them this thing and position particle grade with World position okay usually wrote like first calculate just roll position because it's usually it's going to be it's something similar to MB position except except without the view metrics I think it's just the model Matrix instance metrics okay this seems good and then I think yeah okay it's more and more that copilot writes this code to me so this is already varying and I'm taking only X Y Z part of this world position which is basically the same as model view position without the like sounds the model part only sounds The View part sorry right that's a lot of mattresses for the like half an hour right hello to a small City in Ukraine okay getting close so let's output this world position just to see what exactly is in there with shaders it's it's nice that you could always output those in the fragment Shader and just see them yeah this seems right because this is basically the coordinate system that I have like three three-dimensional coordinate system and if I go further yeah just seems right seems right to me but I believe I believe I also need to add this offset here so let's calculate the offset plot offset equals this offset here and then um should be also Plus but if this is the zero value actually doesn't matter anyway now it's already looking cool even in a debug view right because the change in the world position and I'm output in the world position so it's already pretty neat look in a way I think it's simulating the fog or maybe like uh the Water surface right because the deeper we go the darker it gets actually so it kind of but the colors are different anyway already pretty cool right especially that we have 10 000 of those that's a lot that's a lot of objects alrighty alrighty the next thing and next thing what I want to do I want to use another texture from the um [Music] on the website so I believe yeah this is the one because when you go into the website this is one one more effect that I want to recreate from this actually two more things left to do to create kind of a cool look here so first I'm gonna try to put this thing like if you go deeper into the website there are some like waves or the waves are here yeah like this thing goes through the through the mesh and I really love that look it has this like cyber thing in there like Tron kind of like thing right because they also travel in here but that's not the story maybe for for another stream anyway I think we are done with pretty much done with the vertex Shader we're gonna go to the Moon front and I don't know all right all right so let's uh imagine that we have some kind of origin which is going to be zero this is the origin where the wave this kind of wave effect will will be starting and let's uh let's move back to the matte cap color yeah kind of like this let's make Frost I'm a little bigger maybe 10 yeah something like that looks a bit cooler From perspective and then what else what else what else so we have some kind of origin so I'll need to calculate um at every point in time I will need to calculate uh the distance from origin to the like pixel in my in my on my screen okay but first of all yeah let's put the texture let's put the texture down let's try to put the texture down uh one last thing let's move them all to the zero perfect grid and now I can try to use in the fragment Shader but they call it scan and it's going to be texture but we have to where's my scan did I even download it can PNG let's get the scan clean gym let's get the you scan okay what's the error here yeah texture 2D you scan and then we let's just use the default yes now we put the texture on all those meshes which well looks weird but we don't actually need to do this so let's do this can UV equals actually correct of we World position uh x y should I multiply it with something no I'm not sure and let's do this can UV and then let's use this well something is where maybe XZ actually need X to Z because Y is zero everyone okay so now we put the texture on all those meshes maybe now I need to move camera closer anyway so now we have still have all those meshes I can bring back the animation maybe just make it smaller so we do have all those textures and by the way you could see that like on the edges we don't actually have anything and that's because we only using the x and z part of the UVs what we can do here and what the guys in the Unseen Studio did just pretty neat trick so if the normal is sn0 you could scan UV we could actually take the usual UVS so when the V normal is less than zero that means it's not pointing upwards and this means that we could just use the generic texture like the U generate UVS here Let's uh try this and from here comparison yeah we only need to the y coordinate like whether it's pointing upwards and now it's too big so maybe multiply it with 10. and now we are wrapping our texture actually because this box is exactly 10 times higher than it's wider If I multiply the UVS by 10 it actually wraps a perfect almost perfectly okay there are some like edges where it doesn't wrap but I don't think it will be noticeable within that we are trying to do anyway so now we got the texture here like the skin mask let's call it right and I can take uh something like this just one of the things that I need here okay all right all right all right so far so good um hello to Poland right okay what's next next I need to create this actual wave like going through the mesh let's take a look at all those 10 000 meshes actually that's a lot of them I think I'd rather also take a fraction here it's weird it won't be some angle oh yeah that's because that's because the V normal uh y actually changes the direction once I'm once the camera is lower than the than the mesh that's why I get this but as long as we are looking on the angle and we control the scene it doesn't really matter so it's only when we get deeper all right all right the wave the wave wave can you help me with this one no it's not the way that I was looking although kind of interesting too probably just a black and white way up here okay what's gonna be next there's the distance going to calculate the distance and it's going to be the pre-World position and the origin and let's set up the debug pin here I want to debug everything let's debug this list it's gonna be the value of this list he also was like him used how they fixed this whole situation because combining those two values kind of really neat [Music] yes now we have this and and this is fine yes if you're looking from the top you could see it's smooth adjusted because we are changing the changing the height of the maybe I should remove that for a moment yeah so it's going to be perfect distance like it's zero at the origin point and then it slowly goes into the infinity all right and we have time also and we have to combine those two um so plot something radio move it's gonna be um something with a minus so correct uh East minus time yeah kind of get in there so because this is this value goes into the infinity and with the time like without the time it will just get this but with time we get those circles uh coming in from there you can already see where we are going with this one give a moment my friend okay um now we have to just connect this with the texture and with colors and it's kind of tricky a little bit but let's see and then just one more final trick after this and we are done turned out to be a lot a little bit more work than I thought in the beginning so now we need to smooth this thing just to make it a little more like uh cybernetic kind of waves so just to remember the the values here I think just gotta multiply this with the 1 minus mood step and then the dist I want to smooth that one three tests uh okay it's just just getting a little smoother you could see that we can just output this value basically to see what what it does so this is kind of this smoothing and just smooth as things a little and then I think they used another kind of smoothing just to make it even just to cut off a little bit so rather I'll move uh um something with a step or minus step I'm and then well dist see what this is about making the right move here yeah so this is the like the harsh kind of circle and this will cut like it will not I will not have the infinite amount of circles now I will only have uh the one now so this basically Cuts this circle to one and then we create an infinite amount of circles and then cut in one inside so that it starts with one and then it fades away when it goes to the I don't actually need it to fade away to be honest but I believe I gotta move I gotta add the time at some point here but that's still nice okay anyway this should work out for us well and then I need to create some kind of variable to put the texture in there so I'm going to call it scan mix and this one is going to be um let the guys use some magic values I'm not sure if they are like really important but let's just follow those magic values and one minus basically inverting this thing again radial move so let's output this and let's see when I have here so basically just cuts it to the edge the like the less this value is going to be the more narrow the circle is going to be with this one it's going to be like real white so it just creates uh something like this right what else what else we could do here so now we could finally add the actual texture here and the scan mix is going to be hmm this moment I think I gotta use the scan mask oh yeah better to multiply with this one yeah so we're multiplying with this one when this one goes to zero it just leaves uh the stuff untouched when we have some values in there it actually outputs our texture our mask texture which is kinda kinda neat I think smaller than this I think also something we gotta make it just to make it brighter we're gonna add another and just just another um another thing like this make it brighter on the edge except it was 0.3 we could do it 0.1 like a really narrow Edge to make it uh just to make it brighter in there um yeah you could see it now we have like a more brighter edge here also wonder why my circles like disappear and it's probably because of this uh stepping that I've added at some point do they disappear oh this one cuts it yeah so I think maybe I should add uh like a time in here as well but it depends on the look like maybe we need to cut it at some point anyway let's leave it just like this because I need to see all of them obviously and it's cooler to see all of them coming in from the center now we have this Edge because this basically did the same as this except it's a more narrow kind of edge so I think we are done with this fancy mat but I think it's just like uh trial and error you just try a lot of things and then finally you get the loot that you want like the brightness that you want on the edge I think any combination of smooth tap and steps could work just that I'm trying to get it more similar to the original design and there are some magic values in there so all right they actually using two colors to to map this whole wave into the original uh mesh grid and um leave it something like this and then two colors already kind of helping me with something but what I want here I think they use let's use something really bright here and the second one [Music] RGB something blue and well the scan color I just don't put the scan color pretty cool right except that I don't really need the the Reds probably but anyway looking pretty cool even with these Colors Let's see how that works yeah it's a little better I like this color scheme okay um well it's only the last thing that is left so we could actually do finally this and then RGB and this one also RGB I don't really change uh Alpha transparency here scan colors can mix here and now I think I'm gonna make it less harsh and maybe less harsh in here as well yeah and also probably red is not or whatever the color I picked there maybe it's just white should be just White Maybe well the blue one that I I like it maybe this is actually the the look it's it's up to maybe multiply this a little bit to make it brighter on the edge make it white um now it's a matter of like uh right coefficients to make it look whatever that you want to look at and then we can actually bring back the um bringing back the animation here and it's going to be like using all those Dynamic positions for those waves which is pretty cool if you ask me and then another interesting part about this is that you could actually in how many rows do we have here let's use five so when those waves are coming they actually it's not just a two-dimensional wave it's actually a three-dimensional sphere-like wave in this space so we could see those waves being projected on all sides of the mesh which is if you ask me like really cool if you look on top it's just the concentric circles but I mean that's cool right ah had to figure out the correct color but I forgot the correct color I forgot to write it down for me it's especially cool on the edges like you could see how the waves coming in and on the sides you could still see this pattern this same pattern and because it tiled correctly except for The Coloring maybe but it actually tile in correctly hexagonal it actually looks pretty cool all right and the last thing to add Maybe I mean this is like the part that I wanted to recreate here maybe I should play with the colors more here all sorts of different looks here maybe here like at any point you're changing coefficient and you're getting something new well I guess it's up to the we can make it super bright super like saturated or we can make it like medium saturated let's leave it at this now let's make it a bit wider okay okay okay well we still did this in under one hour I mean I knew what I'm gonna do but this is not really a complicated thing that's medium complicated Maybe and the last thing I want to do or maybe we should leave it at that the last effect that today using to create this amazing look I mean yes I think it's pretty much similar actually what I did maybe just a little bit different mine even brighter anyway last look that I do here you could see that there's a reflection all kind of a shadow or reflection for each of those meshes this is actually a reflection and let's let's just try to do last thing 3.js of it's called SSR screen space reflections so what I want to do here give me the code give me the code advance let's see what's gonna happen I believe this SSR is only for perspective camera that's the problem there's there's some others which work with orthographic cameras this one's my perspective but we're going to change the prospective camera for a second this actually might look even cooler with [Music] perspective camera let's try to use it yeah now you see what perspective changes actually okay all right all right what else and obviously you could change this position because it's just the value um what I was going to do oh yeah the SSR right SSR so I need the SSR pass pass where is it okay this is it I'm gonna put the init lost uh this should be like this and these both are null I don't really have is it selects yeah it selects why it's okay all right and then we're gonna add this one also you need to and the other thing that I need to do is this okay it needs post right you need post is not defined of course it's not defined all right so now we have back to the scene renders okay I think I also maybe uh this yeah because I'm getting some artifacts here which is actually useless because I'm going to be using post processing now which I'm not going to be using it but still pretty nice to see the anti-alias scene now I need to switch the rendering I want to switch the render now so we need some parameters probably you were getting something but not quite and you know why because um that would require a lot more steps Dynamic scene would require a lot more steps because uh this pass is using normal material to get the normals of the scene and that normal material doesn't use this animation in there so this will look like what I want to do but this will work just for a second let's make it static and you see this amazing look that we have here like those uh what I call them Shadows Reflections are really making okay I have to remove the circles for for a second because it's getting too much too much stuff happening here but you could see how amazing like these Reflections are coming it's it's just right coming home with this look because this looks so reflective now without the uh that it looked pretty cool right but with the reflections like with this see it's pretty pretty amazing and this is what they actually use in there except that they're using the um the meshes the the post-processing step blurring and then what else and then they're using the orthographic one I think there's it's just slightly different version of the screen space reflection which is not at the 3Gs examples or is it yeah you can change a lot of things here and well turns out it's kind of with some parameters it's kind of a cheap step so I still have my 60fps going on here and if we look at the performance well yeah the most of stuff happening on the GPU but still pretty much nothing is happening next so we just rendered this whole thing for free I believe yeah so this is it this is the look and let's just switch for the orthographic maybe it works with the orthographic maybe I messed it up let's see what's gonna happen nah it doesn't work with autographic this particular version doesn't work with autographic but now it's a pretty cool look so what else what else what else uh this this document this 200 mint I mean looks like a generative art or something already right pretty cool all right I think I gotta answer on this positive note we probably achieved critical result for one hour we made a wave and we also made uh like I showed you how this mad cap combining with the yeah probably you gotta try that just go for the cross first wire I think they have the mobile version so it pretty much works the same way not much work to make tiles into hexagons well I don't think much work here a basic math to like making the hexagonal tiling and get the hexagonal object and that's it not really much of a work here I think despite Sanchez did something like this despite hexagonal he played with this thing yeah it was his tweet I mean a lot of different people played with this one but yeah I wouldn't lose another chance to give the shout out to this amazing person if you don't follow him yet you should because he's one of the I don't know foundations of the uh webgl Community oh not the foundations like I don't know the goat all right I'm going to read the chat and thank you guys is there a way to keep SSR reflection but with the vertex yeah of course there's a way you just have to replace like if you go into the basically if you go into the uh SSR thing where is it SSR Shader so they they have the where is it it's not the Shader it's SSR whole thing Yeah so basically they invoke here normal materials you can see and what you should do is just replace just basically copy paste in this SSR pass ing this normal material with your normal material where you add like this thing to the vertex Shader and that's it and it's gonna work it's just that it requires you to copy paste it and this another step and I just maybe it's not worth doing it during the Stream but this is the way and well I've made something like four or the the grass but it wasn't like something that the Broner Simon lately did so maybe you should check out his tweets he's later lately I think released a week or so ago released his demo uh with the grass uh Runner shout out to Bruno uh should be one of his recent tweets probably maybe not oh yeah this is the one so maybe we should check out this one really need demo by Bruno commentary thank you Chris all right guys so I'm gonna be finishing this out I'm happy that you spend this hour with me hope you learned something new let me know in the comments this also helps spreading this video maybe I'll get a million subscribers or something finally anyway there are some workshops by me in the process right now so hopefully I'm gonna release them in the following month those are going to be about GP GPU and some blending kind of HTML plus webgl thing combining everything so thank you guys for being with me uh gonna go continue with my Key of Life and wishing you a happy week a safe week and hope it's gonna be all right for all of us and slow green my Ukrainian friends and everybody else yeah yes all righty I'm gonna stick in the chat for a couple of minutes to reply to any questions but otherwise wishing you a good week say some kind words to everybody that you love see ya

Channel: Yuri Artiukh

Views: 10,801

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

Id: JaXb-hH2BIg

Length: 70min 10sec (4210 seconds)

Published: Sun Feb 12 2023