Patrons can now vote for the next video! Thank you for your support. ❤ Support me on Patreon: www.patreon.com/simondevyt 🌍 Live Demo + Courses: simondev.io
For the wind, try giving each blade of grass a random 'stiffness' which goes from 1 to 0.8 or so then use this to multiply the effect from the wind. That would give a little bit of variance to each blades movement which would make it feel a little more realistic, since each blade will have slightly different resistance to being moved by the wind.
@@gibraelkotwal6894 not really, just a single random number generation and multiplication per blade. Of all the things done in the video that would probably be one of the least expensive things
They aren't particularly 'powerful' really, per die / computing unit theyre Way weaker than most mobile phone CPUs, the difference is better modeled conceptually by comparing mentally a high pressure hydraulic line at 600 atmospheres but it has tiny diameter, while the GPU is a firehose, not nearly as fast but boy does it move a Lot of stuff. The SIMD concept or something similar is very important to understand for graphics programmers if you don't want to be like some new 'AAA' titles that get their shaders 'proper' fixes by modders to make them run well. Essentially you want to make sure everything is as flat as possible, that you write in aliased manner from memory without in-flight conflicts (read only done right is ok). There's no getting around learning the fundamentals of SIMD architecture if you want to be good at graphics programming.
@@michael-zv5xqIt has nothing to do with the engine, it's the people using it that matters. Bethesda can't to shit with their engine but modders make better job and optimize things. Same goes for unreal engine games, some people optimise and others don't, frostbite too etc.
Dude, you are like "yeah I'm just messing around" and then build a scene that looks absolutely amazing and far better than like half of the games I can think of right now.
@wille84fin man... he just made a tech demo of grass. In real games you need to optimize your games to be more accessible and like... aside from grass you need to render and compute billion other things lol I honestly can comperhand how people compare tech demons and real playable games
As the developer of GrassFlow, I approve of this video. It's weird how familiar hearing about their grass setup feels to how I ended up developing it. Ghost of Tsushima actually inspired me to add bendy grass and stuff at the time because I was jealous they could do it and I didn't have it. That was back when using geometry shaders though, now it's just raw mesh instancing baybee. At one point I hacked together an experiment inspired by nanite using a compute shader based micropolygon software rasterizer to render a truly insane amount of grass with like 1000 triangles per single clump and hundreds of millions of triangles at like 2K 450 fps. I wish it was practical to implement that more generally. But cool nonetheless
To be honest man, this grass looks artisticly unique and very beautiful. I really love it ! One of the best grasses I have seen in a game. The more realistic something is to real life the more it looses that childlike connection and desire to that play game. Your grass has a a type of characterstic to it which i find very wanting to run around the grass meadowy hills.
The fact that this was made in Javascript is mind-boggling for me as a web-developers that have been working with JS-related stuff for about 10 years. And as always, awesome video!
Three.js uses WebGL, wich is just a way of using OpenGL in the web, so while it is indeed JavaScript, the havy work is all done on the GPU and JavaScript just uses it. I'm shure you know that but to me it feels like cheating to say that this was done with JS (performance-wise)
@@greggoog7559 browsers can indeed pretty much do anything, I'm just not sure whether that is even desirable. Wouldn't be surprised to see browsers replacing the OS entirely 😅
@@greggoog7559for rendering and games? Javascript is good for toying around or experimenting, but if u want to make anything fullscale, native is absolutely the way to go.
Simon, consider this: Since the video compression really messes with the grass details far away, you could consider this step: Simply upscale the video to 4k and upload. This sounds a bit silly but the 4k stream will have much more bitrate and the grass will look much nicer, even though it is technically still a 1080p video. The upscaling does not make it nicer, but the higher bitrate does - and you won't get that from youtube without increasing the resolution.
@@simondev758We upscale our videos as well to force the better codec that TH-cam won't give us unless we have many subscribers (although you probably have that codec already)
Agreed. No. matter the resolution of the source file, you should always upload at the highest resolution possible to tap into that higher bitrate. Wish TH-cam would just decouple resolution and bitrate, but it is what it is.
Love how you're doing your tutorials in the browser - not only is it easier for people to view this demo, but it also constantly reminds people of the power of modern browsers and what you can make with them. I much prefer this approach over fiddling around in some heavyweight engine like Unity.
And browsers are only getting more powerful with additions like WASM and WebGPU. As these technologies mature, the only things that will really be holding the web back from being the primary way to deliver games will be tradition (good luck getting a steam user to move away from steam), download speeds (as large assets will still take a very long time to download), and browser cache size (though there are already ways around this now so this one is less of an issue.)
@@jabadahut50and Logic also. Browsers should focus more on being a way to get and send information on internet instead of trying to become another operative system Browsers should get simpler, not more complex, It Is already too complex to develop a browser from scratch even for Microsoft
@@jabadahut50the Steam client does more than just downloading games. Do you know how big of a performance impact the browser makes? With the sandbox I'd imagine it to be quite big
@@Onaterdem Ease of access, and more control over your own product. Business 101 in trying to make a great product that makes a lot of money is to try and cut out any middlemen and buy and/or sell direct from suppliers and to consumers. Even drug dealers know this.
Some of the best javascript and game dev content on the Internet. Thanks for sharing your knowledge. I'll definitely be looking into your courses (when I get some money).
I recently watched the same GDC talk, after playing the game for the first time, and wondered how it could be approached in the browser. Super cool to see your thought process, especially around the points you chose to focus on vs simplify. Great stuff. Really loving your content both here and on Twitter!
I think the real value of this video (aside from the great approach to grass) is demonstrating how to turn a description of a methodology into an implementation
As someone who codes but doesn't write video games, I love watching stuff like this. When I play games, I constantly think about some of the nuances. Grass/vegetation is something I constantly think about. It's neat to see the code that drives this kind of stuff. Geek-friendly and enjoyable.
Id pay money for a more in depth course that follows more of the talk or just other techniques as well. GPU instancing a bunch of geometry like horizon zero dawn has been something ive been trying to learn for a while. Is there any chance u could cover rendering trees/rocks and other geometry with compute shaders?
100% yes I'm holding a poll on Patreon right now on the next video, 2 potential topics are how to render 100's of thousands of objects easily, the other is how to manage enormous scenes, basically 2 different spins on rendering a crapload of stuff. I will eventually build up to how games like Horizon, etc. use compute shaders for modern gpu driven rendering.
I just wanted to add a rooman for the algorithm, but also your ego. This has on so many LODs so much quality that everybody should believe in humanity again. Thanks for your humble work.
I didn't expect you would mention browser at the end. It caught me off guard. Though, I was a little confused why there was javascript in the middle of the video. Anyways, Great stuff! Looking forward to see your next videos!
Last year I wrote this for Unity HDRP but got stuck building artist tools to paint grass and creating a system to bake a heightmap based on multiple meshes. Thanks for motivating this programmer to get back to work!
I'm curious about how you would do this in unity, do you have a single object for all the grass? Do you model the grass and import or create the mesh inside unity?
@@xdanic3 Currently, it's created in a C# script with each chunk being its own mesh. From my research it's the only feasible way to support important HDRP stuff like deferred lighting. It's probably not possible to only use one object (mesh) as you'll probably very quickly overload the index buffer which when formatted to 32 bits supports about 4 billion vertices.
I noticed a difference in the real life video you took of some grass, where vortices are formed in between blades of grass moving them horizontally instead of just vertically. You could introduce some random movement in the blades proportional to the perpendicular of the wind to create a more varied/realistic look.
I love how so many channels I watch keep showing all these techniques for doing grass. It's really making me want to make a lawn moving game. Although, I'm wondering how I might apply these techniques to have a room of tentacles like say you're on an alien planet and there are tentacles coming from every crevice.
This is one of the biggest difficulties for me as a beginner in Blender. Wanting to design the environment, and render it, AND add animations AND maybe custom assets is pretty easy. When you learn the basics. Hoping to get there.
At 6:40 in the movement part, the thing that looks off is that it looks like the bottom of the grass moves before the top. Which is the opposite of the IRL version. Dunno how to change that, though.
Ah yeah, that was a mistake from commenting/uncommenting so much to take videos. The live version doesn't have the issue as much, I had accidentally applied a uniform rotation to the entire strand of grass.
I love how often beauty is crated from simplicity in computer graphics. When you look at it all it often feels overwhelming, you can't stop the optimalizations and you just marvel at how the fuck does my computer even handles that? and then you hear it explained, and it's still beautiful, but there is something more to it for me, since it is made with nothing as complicated as my brain made it out to be. No matter if high fidelity, stylized, or something else I think most often the most beautiful games prove to be the ones that get simplicity right, not the other way around.
Their blending from 15 to 7 vertices is CRAZY. PS I'm not a graphics pro but I've been around for a while and I've never seen this technique. Does it have a name?
It's really amazing how much games have improved in this area. Back in the day, you'd be lucky if you saw a couple static blades of grass and a green ground texture in a large open area. Nowadays it's all over and individual blades are modeled as well as have movement with the wind and player.
Not sure you added that delay, but I think their grass wind is affecting the Bezier handles first then the end points, like with an offset delay to get that smooth bend motion
Holy shit. Holy fucking shit this is awesome! This grass looks so good I that I want to go out and touch some. All jokes aside, the grass looks insane. You got youself a new subscriber mate
This is awesome. Im not smart enough to understand these talks but thanks to you i now can. If possible please try to recreate the physics driven animation GDC talk for uncharted
I once saw a video (i think of stylized station) where he explained how food prints were made in red dead redemption 2. Its been some time since i watched it, but i think they made and updated a 2d texture with the step data, end then sent that to the shaders. Would it be possible to use a similar method to bend the grass away from where the player is standing? And to make a trail of behind the player while they walk through the grass?
Great as always! This would be a great addition to the shader course. I think I’ll give this a shot some time this week to see if I can replicate it. I’m curious to see the performance and with some of the acerola ideas how optimized it could go.
I think we do really similar things with chunking and LOD'ing, so I wouldn't realistically expect performance to be substantially different any difference in the shaders. My shaders likely being more complex since they're both doing all the Ghost of Tsushima stuff + deriving from the full lighting and shadowing system from three.js. Memory wise, this uses almost nothing. The vertex format is heavily compressed, float16's for offsets, uint8s for the vertex itself. It would be even smaller, if not for some problems with three.js that I didn't feel like overcoming. The path forward for optimizing likely includes doing what they mention, which is aggressively swapping out tiles 4:1.
@@Desopolis I've now tested on 3 different systems, vega64 was running at 100fps no problem, no idea the actual top framerate, 4080 was the same, and my old surface laptop was getting 35-40 fps for just the grass. 20 fps on a 3060? Yeah, something is seriously wrong. Maybe try it again with the latest, I removed a lot of the extra passes that I added just to take the video, should be mostly grass Although tbh, those passes are mostly basic ssao and stuff, I didn't write them, but they shouldn't be so heavy weight to even bother a 3060.
I didn't really call it out in the video, but there's a video on my twitter of player influence. Added it for fun, but just didn't feel like it needed to be included on YT.
that would of it the video for me that beautiful end part with a player walking threw the grass almost pushing it to each side, love the buttflies too@@simondev758
about any acceleration structure, ie, grid/octree system, for checking object intersections, instead, you can sort aabb/spheres xyz axes, then use lookup m log n time complexity, you dont have to construct the acceleration structure, for physics and render sorting-intersections collision checking
@3:25 When there is also a tangent and bitangent source somewhere and when the bitangent would be the blade-side-pointed vector, a maybe better and code-smaller way for rounded procedural normals, would be (here as GLSL): ```glsl vec3 bladeRelativeNormal = normalize(vec3(0.0, sin(vec2(radians(mix(-30.0, 30.0, texCoord.x))) + vec2(0.0, 1.5707963267948966)))); workNormal = normalize(mat3(tangent, bitangent, normal) * bladeRelativeNormal); ```
Simon be like: "Yeah I just added so fucking bullshit stupid ass shit ugly shit to try to look good, looks awful though" and then proceed to show us one of the most beautiful videogame environment we've ever seen
As far as I can tell, it's just some cheating in the shader with gradients and a rough idea of how dense the grass patch is. They rely on screen-space-shadows on top of that, I subbed in SSAO.
Patrons can now vote for the next video! Thank you for your support.
❤ Support me on Patreon: www.patreon.com/simondevyt
🌍 Live Demo + Courses: simondev.io
is it possible to clip bottom parts of grass what are not visible?
It seems like online games, like in milsims where render distance is far. Have a really bad problem with grass if you ever feel like analyzing it.
can you please pleas pelase host this crazy stuff
THe more you render grass the less you touch grass
100th like
Quote for generations to come
year 2400: "go render some grass"
Haha@@Thorfinn0607
@@Thorfinn0607😂
For the wind, try giving each blade of grass a random 'stiffness' which goes from 1 to 0.8 or so then use this to multiply the effect from the wind. That would give a little bit of variance to each blades movement which would make it feel a little more realistic, since each blade will have slightly different resistance to being moved by the wind.
Good idea!
Wouldn't that take a hell of a lot of computation power?
@@gibraelkotwal6894 not really, just a single random number generation and multiplication per blade. Of all the things done in the video that would probably be one of the least expensive things
@@squidwardstesticles5914 To add, GPU's are measured in TFLOP's these days, to give you an idea of just how absurdly powerful they are.
They aren't particularly 'powerful' really, per die / computing unit theyre Way weaker than most mobile phone CPUs, the difference is better modeled conceptually by comparing mentally a high pressure hydraulic line at 600 atmospheres but it has tiny diameter, while the GPU is a firehose, not nearly as fast but boy does it move a Lot of stuff.
The SIMD concept or something similar is very important to understand for graphics programmers if you don't want to be like some new 'AAA' titles that get their shaders 'proper' fixes by modders to make them run well.
Essentially you want to make sure everything is as flat as possible, that you write in aliased manner from memory without in-flight conflicts (read only done right is ok).
There's no getting around learning the fundamentals of SIMD architecture if you want to be good at graphics programming.
Simon: "I'm just messing around"
(Proceeds to make one of the most awesome grass scenes that looks better than some games released in 2023)
in a browser...wtf
Part of that would be because the performance and the engine they chose to make the grass lol
@@michael-zv5xqIt has nothing to do with the engine, it's the people using it that matters. Bethesda can't to shit with their engine but modders make better job and optimize things. Same goes for unreal engine games, some people optimise and others don't, frostbite too etc.
Dude, you are like "yeah I'm just messing around" and then build a scene that looks absolutely amazing and far better than like half of the games I can think of right now.
And it doesn't magically just vanish (stop) after 30-50 meters like in 90% of games today..
…running in a browser
@wille84fin man... he just made a tech demo of grass. In real games you need to optimize your games to be more accessible and like... aside from grass you need to render and compute billion other things lol
I honestly can comperhand how people compare tech demons and real playable games
I'm mesmerized by how good this stuff can look. I'm not a game developer, but you make me want to become one. 😁
Makes me want to be a render engineer instead of game development
Epitaph
It's easier than it looks once you know what you're looking at.
I'm 44 and trying to teach myself UE5 using TH-cam videos. There's no reason why you can't.
@@Shifae_ : I'm already working in game industry (network infrastructure).
As the developer of GrassFlow, I approve of this video.
It's weird how familiar hearing about their grass setup feels to how I ended up developing it.
Ghost of Tsushima actually inspired me to add bendy grass and stuff at the time because I was jealous they could do it and I didn't have it.
That was back when using geometry shaders though, now it's just raw mesh instancing baybee.
At one point I hacked together an experiment inspired by nanite using a compute shader based micropolygon software rasterizer to render a truly insane amount of grass with like 1000 triangles per single clump and hundreds of millions of triangles at like 2K 450 fps. I wish it was practical to implement that more generally. But cool nonetheless
That sounds super cool!
Sounds so cool I hate to say I actually don't believe you. Any scraps on github?
To be honest man, this grass looks artisticly unique and very beautiful. I really love it ! One of the best grasses I have seen in a game.
The more realistic something is to real life the more it looses that childlike connection and desire to that play game.
Your grass has a a type of characterstic to it which i find very wanting to run around the grass meadowy hills.
Thanks!
The fact that this was made in Javascript is mind-boggling for me as a web-developers that have been working with JS-related stuff for about 10 years.
And as always, awesome video!
Three.js uses WebGL, wich is just a way of using OpenGL in the web, so while it is indeed JavaScript, the havy work is all done on the GPU and JavaScript just uses it. I'm shure you know that but to me it feels like cheating to say that this was done with JS (performance-wise)
Web technologies have really come such a long way that I'd personally go as far as saying that native code is unnecessary in 95% of use cases.
@@greggoog7559 browsers can indeed pretty much do anything, I'm just not sure whether that is even desirable. Wouldn't be surprised to see browsers replacing the OS entirely 😅
@@greggoog7559 Until you move to huge projects.
@@greggoog7559for rendering and games? Javascript is good for toying around or experimenting, but if u want to make anything fullscale, native is absolutely the way to go.
Simon, consider this: Since the video compression really messes with the grass details far away, you could consider this step: Simply upscale the video to 4k and upload. This sounds a bit silly but the 4k stream will have much more bitrate and the grass will look much nicer, even though it is technically still a 1080p video. The upscaling does not make it nicer, but the higher bitrate does - and you won't get that from youtube without increasing the resolution.
That is a great idea!
@@simondev758We upscale our videos as well to force the better codec that TH-cam won't give us unless we have many subscribers (although you probably have that codec already)
TH-cam uses a significantly higher bitrate and better compression from 1440p onwards. Sometimes, 2k will do the trick!
Agreed. No. matter the resolution of the source file, you should always upload at the highest resolution possible to tap into that higher bitrate. Wish TH-cam would just decouple resolution and bitrate, but it is what it is.
you are all right but its not only about bitrate as you think,
it is also about the codec used by youtube: keyword vp9
I'd add the actors move vector to the "wind" for a given area so the grass gets a little push as you pass through.
you are a true wizard. And I absolutely love your approach of tutorial making. Please dont stop, its inspiring.
Love how you're doing your tutorials in the browser - not only is it easier for people to view this demo, but it also constantly reminds people of the power of modern browsers and what you can make with them. I much prefer this approach over fiddling around in some heavyweight engine like Unity.
And browsers are only getting more powerful with additions like WASM and WebGPU. As these technologies mature, the only things that will really be holding the web back from being the primary way to deliver games will be tradition (good luck getting a steam user to move away from steam), download speeds (as large assets will still take a very long time to download), and browser cache size (though there are already ways around this now so this one is less of an issue.)
@@jabadahut50and Logic also. Browsers should focus more on being a way to get and send information on internet instead of trying to become another operative system
Browsers should get simpler, not more complex, It Is already too complex to develop a browser from scratch even for Microsoft
@@jabadahut50the Steam client does more than just downloading games.
Do you know how big of a performance impact the browser makes? With the sandbox I'd imagine it to be quite big
@@jabadahut50 Are there any benefits to "the web back from being the primary way to deliver games"? Why would we move towards such a future?
@@Onaterdem Ease of access, and more control over your own product. Business 101 in trying to make a great product that makes a lot of money is to try and cut out any middlemen and buy and/or sell direct from suppliers and to consumers. Even drug dealers know this.
Some of the best javascript and game dev content on the Internet. Thanks for sharing your knowledge. I'll definitely be looking into your courses (when I get some money).
I used to dream of becoming a game programmer. Now, I watch technical videos such as this, and enjoy them a lot. Thank you!
I recently watched the same GDC talk, after playing the game for the first time, and wondered how it could be approached in the browser. Super cool to see your thought process, especially around the points you chose to focus on vs simplify. Great stuff. Really loving your content both here and on Twitter!
I'm absolutely impressed by how good of a result you got for what is basically a throwaway toy demo. Love your explanations.
Almost everything bounced over my head but I loved the video for some reason. Subscribed because I wanna watch remaining videos you have uploaded.
the plot twist at the end got me. amazing
Absolutely insane, you sir are a genius.
Thanks for another informative and fun video 🎉
I think the real value of this video (aside from the great approach to grass) is demonstrating how to turn a description of a methodology into an implementation
At 5:40 that grass would already work really well for a stylized game. Good stuff
This looks very nice, if you really want to sell the wind illusion you could make the butterflies be slightly perturbed by the wind waves.
Definitely going to check out your courses first chance I get. Please don't stop what you're doing, this is some of the best dev content out there!
As someone who codes but doesn't write video games, I love watching stuff like this.
When I play games, I constantly think about some of the nuances. Grass/vegetation is something I constantly think about.
It's neat to see the code that drives this kind of stuff.
Geek-friendly and enjoyable.
The last scene you made literally drew my breath away.
😍
That is nuts. Really excelllent result! I'm not a coder but it was very interesting to follow your steps.
As someome tuning into your optimization analysis, that last sentence made me choke. I wasn't prepared, but am impressed
That was some lovely grassing and nice outcome! Thank you!
Just listening to your voice while watching that snack-sized video summary of something so interesting is a nice way to start the evening
You're, sir, are insane. You changed the way I think about JS.
You truly make the best Indepth videos on how to do these techniques. Your truly amazing.
Id pay money for a more in depth course that follows more of the talk or just other techniques as well.
GPU instancing a bunch of geometry like horizon zero dawn has been something ive been trying to learn for a while. Is there any chance u could cover rendering trees/rocks and other geometry with compute shaders?
100% yes
I'm holding a poll on Patreon right now on the next video, 2 potential topics are how to render 100's of thousands of objects easily, the other is how to manage enormous scenes, basically 2 different spins on rendering a crapload of stuff.
I will eventually build up to how games like Horizon, etc. use compute shaders for modern gpu driven rendering.
I just wanted to add a rooman for the algorithm, but also your ego. This has on so many LODs so much quality that everybody should believe in humanity again. Thanks for your humble work.
I didn't expect you would mention browser at the end. It caught me off guard. Though, I was a little confused why there was javascript in the middle of the video. Anyways, Great stuff! Looking forward to see your next videos!
Yeah, it's amazing what JS can do these days. I mostly use it out of ease and convenience.
You deserve more recognition bro, this is amazing
What a banger of a topic! I've bumped into this issue a few times working on my own lil games, excited to hear your perspective
Watching this video, seeing the program slowly come to life was as amazing as the final product 🙏
Last year I wrote this for Unity HDRP but got stuck building artist tools to paint grass and creating a system to bake a heightmap based on multiple meshes. Thanks for motivating this programmer to get back to work!
I'm curious about how you would do this in unity, do you have a single object for all the grass? Do you model the grass and import or create the mesh inside unity?
@@xdanic3 Currently, it's created in a C# script with each chunk being its own mesh. From my research it's the only feasible way to support important HDRP stuff like deferred lighting.
It's probably not possible to only use one object (mesh) as you'll probably very quickly overload the index buffer which when formatted to 32 bits supports about 4 billion vertices.
Ey, another high quality content from you. Thanks! :)
Fantastic narration and video. Love how it's paced well but still concise and to the point
Oh and the final result looks fantastic
I noticed a difference in the real life video you took of some grass, where vortices are formed in between blades of grass moving them horizontally instead of just vertically. You could introduce some random movement in the blades proportional to the perpendicular of the wind to create a more varied/realistic look.
I am absolutely tuned about to buy your courses. I loved your knowledge.
Looks great! I was shocked when you said it's running in a browser. Impressive!
This looks amazing! Awesome video
Thanks!
This makes me excited like a child, that things like that can be done by a human being. Definitely worth learning
This guy just does not miss. Absolute GOAT
Thank you so much Simon!
Wow. This is just pure gold man. Thank you so much Simon. 👏🏻👏🏻👏🏻
grass does look good, it's amazing to see this was done in JS
aliased grass is the bane of every gameplay experience lol. Looks pretty good!!!
Wow. It's amazing! Thank you for your share!
Everytime that I beginning to lose the direction of what I'm doing, I come back here and get that glow on the eye back. Love your work.
I love how so many channels I watch keep showing all these techniques for doing grass. It's really making me want to make a lawn moving game. Although, I'm wondering how I might apply these techniques to have a room of tentacles like say you're on an alien planet and there are tentacles coming from every crevice.
That sounds awesome, some nice cutting mechanics and fluid sim for slime flying everywhere.
Oh damn I bet people would love a lawnmowing game. Look how much they love Powerwashing Simulator
Thank you for sharing these videos with us! :)
Your results are really cool, thanks for sharing!
SimonDev is a god among us, best videos on youtube
that grass movement looks fucking sick, it looks like actual wind is moving across the field, and it's just a tiny square... bro
Great video.
The grass looks great!
I'll try the movement tricks here at some point 😋
This is one of the biggest difficulties for me as a beginner in Blender. Wanting to design the environment, and render it, AND add animations AND maybe custom assets is pretty easy. When you learn the basics. Hoping to get there.
Absolutely incredible. Well done
The Perlin noise really did it, looks like real wind!
Great video. Thanks for sharing.
At 6:40 in the movement part, the thing that looks off is that it looks like the bottom of the grass moves before the top. Which is the opposite of the IRL version. Dunno how to change that, though.
Ah yeah, that was a mistake from commenting/uncommenting so much to take videos. The live version doesn't have the issue as much, I had accidentally applied a uniform rotation to the entire strand of grass.
Sadly the youtube video compression does not like the grass moving towards the end of the video. Still very beautiful though!
Thanks very much
I love how often beauty is crated from simplicity in computer graphics.
When you look at it all it often feels overwhelming, you can't stop the optimalizations and you just marvel at how the fuck does my computer even handles that? and then you hear it explained, and it's still beautiful, but there is something more to it for me, since it is made with nothing as complicated as my brain made it out to be.
No matter if high fidelity, stylized, or something else I think most often the most beautiful games prove to be the ones that get simplicity right, not the other way around.
fantastic! as a simple web dev this stuff blows my mind
looks so good. dusk scene fire!
Their blending from 15 to 7 vertices is CRAZY.
PS
I'm not a graphics pro but I've been around for a while and I've never seen this technique. Does it have a name?
What a great video you have here! Instant sub!!
This just looks absolutely amazing!! Makes me want to get back into graphics programming
Amazing as always! Thanks!
It's really amazing how much games have improved in this area. Back in the day, you'd be lucky if you saw a couple static blades of grass and a green ground texture in a large open area. Nowadays it's all over and individual blades are modeled as well as have movement with the wind and player.
Crazy they have to model every blade of grass!
Awesome video.
The grass movement is not looking much like wind to me. More like someone was moving a grass carpet from underneath.
wow, long time no see, welcome back with threejs
This is so cool. Makes me excited about computers again. Thank you very much sir :)
Fantastic article and video!
great tutorial, easy to follow and the results is really nice
This was a great video, I love the detail
Not sure you added that delay, but I think their grass wind is affecting the Bezier handles first then the end points, like with an offset delay to get that smooth bend motion
Great results and easy to follow.
Thanks for your game-math course!
Holy shit. Holy fucking shit this is awesome! This grass looks so good I that I want to go out and touch some.
All jokes aside, the grass looks insane. You got youself a new subscriber mate
Would be interesting to see what small variations in height, either from a noise map or maybe just random offsets, would look like?
This is awesome. Im not smart enough to understand these talks but thanks to you i now can. If possible please try to recreate the physics driven animation GDC talk for uncharted
Really amazing video! These videos keeps me more interested with game dev! Just subcribed your channel! Great content 🫡😎thank you ❤
Strong skills dude !
I once saw a video (i think of stylized station) where he explained how food prints were made in red dead redemption 2. Its been some time since i watched it, but i think they made and updated a 2d texture with the step data, end then sent that to the shaders.
Would it be possible to use a similar method to bend the grass away from where the player is standing? And to make a trail of behind the player while they walk through the grass?
Yep, draw to rendertargets and then read from that, been around forever. I used that technique back on XBox360 for the game Prototype :)
Great as always!
This would be a great addition to the shader course.
I think I’ll give this a shot some time this week to see if I can replicate it.
I’m curious to see the performance and with some of the acerola ideas how optimized it could go.
I think we do really similar things with chunking and LOD'ing, so I wouldn't realistically expect performance to be substantially different any difference in the shaders. My shaders likely being more complex since they're both doing all the Ghost of Tsushima stuff + deriving from the full lighting and shadowing system from three.js.
Memory wise, this uses almost nothing. The vertex format is heavily compressed, float16's for offsets, uint8s for the vertex itself. It would be even smaller, if not for some problems with three.js that I didn't feel like overcoming.
The path forward for optimizing likely includes doing what they mention, which is aggressively swapping out tiles 4:1.
@@simondev758what kind of FPS were you getting?
I’m hovering around 20fps on my 3060 which seems super low.
I’m wondering if it’s a problem on my end
@@Desopolis I've now tested on 3 different systems, vega64 was running at 100fps no problem, no idea the actual top framerate, 4080 was the same, and my old surface laptop was getting 35-40 fps for just the grass.
20 fps on a 3060? Yeah, something is seriously wrong. Maybe try it again with the latest, I removed a lot of the extra passes that I added just to take the video, should be mostly grass
Although tbh, those passes are mostly basic ssao and stuff, I didn't write them, but they shouldn't be so heavy weight to even bother a 3060.
Looks amazing! I'd love to see how you'd implement player influence on the grass movement
I didn't really call it out in the video, but there's a video on my twitter of player influence. Added it for fun, but just didn't feel like it needed to be included on YT.
that would of it the video for me that beautiful end part with a player walking threw the grass almost pushing it to each side, love the buttflies too@@simondev758
Our hero is back !
very inspiring, thank you!
about any acceleration structure, ie, grid/octree system, for checking object intersections, instead, you can sort aabb/spheres xyz axes, then use lookup m log n time complexity, you dont have to construct the acceleration structure, for physics and render sorting-intersections collision checking
@3:25 When there is also a tangent and bitangent source somewhere and when the bitangent would be the blade-side-pointed vector, a maybe better and code-smaller way for rounded procedural normals, would be (here as GLSL):
```glsl
vec3 bladeRelativeNormal = normalize(vec3(0.0, sin(vec2(radians(mix(-30.0, 30.0, texCoord.x))) + vec2(0.0, 1.5707963267948966))));
workNormal = normalize(mat3(tangent, bitangent, normal) * bladeRelativeNormal);
```
Simon be like: "Yeah I just added so fucking bullshit stupid ass shit ugly shit to try to look good, looks awful though" and then proceed to show us one of the most beautiful videogame environment we've ever seen
Great video! but it seems I didn't understand the part with ambient occlusion and grass density, how do you get that density in the shader?
As far as I can tell, it's just some cheating in the shader with gradients and a rough idea of how dense the grass patch is. They rely on screen-space-shadows on top of that, I subbed in SSAO.
The end genuinely killed me.
Wow, excellent work!
Wait, running in the browser? I’m sorry, right at the end there, the BROWSER? This Is Running, In THe BROWSER???