Prefacing this question by saying I have no idea what I’m doing. Been reading for a few days about how I could make a field of grass, and curious if my conclusion is roughly right.
As far as I can tell, there is no geometry shader, but if there was then this would be a good option. The other methods are:
thin instances/solid particle system to place pieces of grass. Then for wind blowing across a field, using a shader to handle the motion, or animating the texture, node material, or something along those lines.
I guess I’m curious if there’s another way I’m not aware of, or just thoughts in general. Honestly the first option seems really hard for me to do but otherwise seems excellent. The second option seems like I’d have issues past 10-100k pieces or so, plus I’d probably have to consider the implications adding/removing/moving pieces as the player moves across the field. I guess I’m fine with that but figured I’d ask first just in case. Thanks!
I also asked myself this question some time ago. I had done it with sprites which worked quite well, but I always wondered if with the Fur material it could not work better with some adjustment.
This already has the shader you want to do
Fur material seems promising. A couple of the pg’s on that page have a grass-y example. Great great, another option for me to consider.
Sprites seem like a very promising option also. I don’t really understand the pros/cons of that vs (thin) instancing vs ps/sps. I think I need to do more reading or maybe just try things out.
I wonder if gpu particle system or points cloud system has potential that I’m not aware of.
I believe you saw this example from @cedric in the playground demos for grass thin instances
If this can help in your process of decision making.
I’d actually love to see what’s possible to achieve with the fur material. If you’d choose to go this way, do not hesitate to share.
There’s a lot of options and my beginnerness is overwhelmed. I’m glad I asked my question though! In one of the links above, there’s a reference to this page which I think is interesting. Aesthetically it’s exactly what I want. Just slow for me to understand the method. Maybe a sign I need to eat breakfast and use a computer screen instead of my phone. https://github.com/spacejack/poaceae
Yes, at first sight, it looks like a good approach and some nice slick code. To be honest, I just had a quick look at the script, didn’t even see what it does. It’s based on angle and instanced/buffered arrays and is creating patches of grass with a certain level of interaction. I’m not sure what you want to do with it (twist it, change the type of grass, …). In which case yes, I can only recommend you get your breaky first (especially if it’s just returning from your sat night and a bigger screen could also be a good thing. Personally, I have the feeling my brain gets smaller depending on the size of the screen; so a phone is probably worst thing for me
Now, more seriously, once you get a feeling of it and would actually feel like using it, you can call the people in and ask your questions directly with @. Wingnuts and Pryme8 are regular contributors to the forum (not to say historical I’m sure they’d help you out with it, if needed.
So far I like the method of 6-10 vertices per grass blade, just a flat plane, so each blade is identical; then using custom attributes for the vertex shader to change each blade’s position/rotation/time/height/curvature.
Apart from a fairly high inter-frame time and some freezes on cam movements when testing on an old rig (1gb GPU medium-range from a decade ago and slow memory, still 8 core CPU at 2.8Ghz), it seems to work pretty well. Of course on a newer system, (an MBP from late 2019 with 4gb GPU still medium range) it works perfectly at 60FPS. But then yes, the loading time is currently a problem. Next, I guess it will depend what else is in your scene.
I was curious how it’d work on a different computer. Glad it’s not too bad. Could make grass a graphics option if necessary. I hope there’s still opportunity for performance improvement.
Another playground! Some neat additions I see from an earlier version you made:
Multiple zones with 1 mesh per zone.
LOD variants to have different segments per base blade.
The method of making a base blade, then pushing a bunch of clones into one merged mesh remains roughly the same.
If I understand correctly, a procedurally generated noise texture is being used to get random values into the shader to help determine position offsets/rotation/curl. Whereas before the randomness was coming from Math.random() inside the nested for loop that cloned the base blade.
Loading time is pretty good. I can’t figure out why, yet.
I’d be curious to see the version you were looking for if you happen across it again. No worries otherwise. What you’ve shared already is insightful.
Wow, thx so much @Dad72 for this experiment. It really looks amazing, loads fast and works beautifully at high FPS even on lower end rigs.
The only point is when looking closer you get a bit of this edged look rendering. I believe this can be tempered with the texture. Quickly added a rendering pipeline to your PG to see if this effect can be lowered using FXAA and depthOfField. It can help but not totally.
Anyways, applause for this great effort of yours. One of the very best grass I’ve seen so far in webGL
Yes I also think it can be further improved with another texture (texture has thick grass, so it’s not the best of the textures I’ve used)
Maybe a rendering pipeline would improve things too.
in my PG I used a diffuseTexture : grassMaterial.diffuseTexture = new BABYLON.Texture("textures/grass.jpg", scene);
But I wonder if with a heightTexture the result would not be better (I didn’t try) grassMaterial.heightTexture = new BABYLON.Texture("heightTextureGrass.jpg", scene);
I had just done this quickly to see if my test would be conclusive and that I could continue to improve this for my project when the time comes.
I made some adjustments to improve the result. But I can’t made better.
Changing texture (grass.dds instead) just changes colors.
I increased the density a little which reduced the thickness of the grass. Maybe something is missing in the material to reduce the thickness rather than increase the density
I increased the movement speed to simulate more wind
The rendering pipeline does not change much I feel
I increased the quality from 30 to 45 (you have to stay reasonable with the quality otherwise the fps starts to drop)
and a bigger screen could also be a good thing. Personally, I have the feeling my brain gets smaller depending on the size of the screen; so a phone is probably worst thing for me 
for this great effort of yours. One of the very best grass I’ve seen so far in webGL 