How to achieve grass "3d effect" similar to this one

Hi, I’d like to achieve an effect similar to this image, to add at the ground a little 3d effects (short grass) and avoid tiling repetitions.

Maybe some combining techniques?
Fur? Instances? adding Noise? Adding bump map? Adding Details?
Please can you help me with a babylon playground simple example?
Thanks
Frank

Some great examples:

Thanks Regna, but I think these solutions are very CPU/GPU consuming… I don’t need that type of high and defined grass but only an effect for very low grass and ground with low elevation…

Did you search for “grass” in this forum?

Field of grass? - Questions - Babylon.js (babylonjs.com)

This one seems promissing for you:

Realistic Grass | Babylon.js Playground (babylonjs-playground.com)

other threads

Grass generation - Questions - Babylon.js (babylonjs.com)

you should have a look at shell texturing for enhanced performance for low grass:

https://www.babylonjs.com/Demos/Fur/

https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary/furMat

Thanks to all! I’ve take a look at some examples and I wonder me: for best performance,
there is a way to use the texture present in the below playground (adding a little bump effect?), make it seamless with noise or other methods, and then unevenly add some short grass (with fur or similar)?

I forgot: use some sort of very low “height map”? to make the terrain not so flat…

For the bump effect, I would recommend using a normal/bump map. You can find good normal maps with their corresponding albedo texture at https://freepbr.com/

You can definitely use a height map to create a landscape see here: Babylon.js docs

To make the texture seamless on a deformed terrain, you will need triplanar mapping Babylon.js docs

If you want to make small patches of grass, you might want to use billboards instead of shell texturing

Thanks, but sorry, for seamless I mean no evident pattern repetitions…
Also in triplanar projection the pattern repetions are evident:

On flat ground, I forgot the name of the technique but, they copy a texture rotate/scale it a bit and then overlay it back onto the original texture. Something like that. Google like: avoid terrain texture tiling.

But one thing I noted is that some textures are seemingly random enough and you hardly notice the tiling. So I would try a couple and hope I can get away with it.

Alright, there are solution for this as well.

First you can warp the uv coordinates in a fragment shader with this technique Shader - Shadertoy BETA

The other solution is to blend two textures or more with some noise.

In both of these cases, I think you will have to do some shader tinkering :slight_smile:

are you referring to this one?

1 Like

Yes, cool, some nice approaches there!

1 Like

Hi, this suggest approch seems interesting… there are 3 methods here:

About you, What is the best for optimize resources?
How can I put this code in a “babylon compatible” shader or material?
I’m a newbie, thanks!

Just ported the 1st version because I was too lazy to find a noise texture: https://playground.babylonjs.com/#D8IDR8#90 But this should get you started. See also

1 Like