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

I don’t have a clue about the artifacts.

I could port the Godot shader for you soon so you can compare.

Hopefully you’'l pick one from the three shaders bro :smiley: :sweat:

Hopefully yes! :slight_smile:
But the artifacts are very annoying in VR…
Anyone has some hint about them?

Here is a PG without artefacts by using one of Inigo Quilez method (Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more)

I don’t know if there was something preventing you from using this one, but I think it still works for most of use cases!

1 Like

Hi Crashmaster, which of the three methods is implementing here?
The latest method I find (video above) visually seems better… But I can’t confirm that, because the texture are obviously not the same.

I implemented the first technique from Quilez’s article

I agree comparing the techniques without using the same textures is very challenging :sweat_smile:

You can compare them now by just changing the channel0 texture in the playground though :thinking:

What was causing the artifacts?

Probably a textureGrad artefact, like the so called “Greenwich artefact” described here: Shader - Shadertoy BETA

By changing the function, the issue went away but that’s a bit cheating haha

1 Like

@mawa, for some reason I felt compelled to share this. Here’s a PG showing how to mask tiling artifacts using node materials. Just to show the technique, I grabbed textures from the Substance library and had to grab mud textures since they didn’t have any good grass textures. The technique is the same, however. You will also notice that one of the textures has a slightly different color temperature and when they are all blended, it’s still obvious there is one outlier there. I was going to take the time to blend the color harmony, but felt this illustrated what was going on in a more clear way. For production, use a collection of textures that all have the same color palette and it will look seamless.

This is the texture straight out of the box. You can easily see tiling artifacts in it, even at 4x4 since there are some obvious dark spots that cause a noticeable repetition.

This technique is like the ones mentioned above where we are blending multiple textures together using a series of masks so the final color contribution minimizes the repetition to make the ground seem unique.

In this case I used four texture sets of base color, normal, and ORM (occlusion, roughness, metallic) textures, but you could get away with fewer depending on the textures. To blend them, I generated a series of masks that had areas of strong contrast with some blending between them to transition the textures. You don’t want super hard masks or you will see the hard separation. But you don’t want very soft masks either or your asset will look muddy… pardon the pun. Having areas where one texture clearly shows through will retain the crispness of the original textures while still allowing smooth transitions. These are the masks I used to blend the textures:

I start by blending two textures using the first mask, then the result of that with the third texture using the second mask, then the result of that with the fourth texture using the third mask. The offset button in the PG will randomly offset the initial UVs before tiling to move all textures around, but then each individual mask is giving a random offset as well do demonstrate that each time you use the material, it could look completely different giving your environment a more unique feel as though it is not rendering the same mud texture every time mud is present.

Lastly, you will notice that I created the ground with node geometry. This means that if you want to sprinkle ground clutter like weeds or patches of tall grass, you could use node geometry’s instantiate features to scatter quads or even meshes around the ground randomly. And if you want motion on the scatter, you can assign vertex color to vertices that should move either on imported assets or on cards created straight in node geometry to apply a displacement shader on them.

I will drop this example in the docs for node material and likely do a second round with scatter and vertex displacement to show that technique as well for the node geometry docs. Not a new technique, but I hope this helps show how to achieve it in Babylon!

7 Likes

Thanks for sharing your expertise with us once again :hugs: I’m sure many people will be interested in reading this and moreover, have the opportunity to start from a solid base :smiley:

It’s funny because (once again) I got the same kind of ‘high-level’ approach. It’s basically what I do with ‘hard-design’ (ie, in PSD)… except here, it’s all ready (nearly) for procedural :stuck_out_tongue: So, I think this approach would work (has to work). Fine-tuning the masks and settings depending on design would be the part to work (per design). I’m actually quite eager to see what result this would bring on a rush using different types of design/textures. If by any chance, I get a moment during these holidays, I’d love to edit, twist and tweak this… If so, I’ll let yours know and shall post my art :sweat_smile:… once again, simply based on your invaluable input. :wink:
Well, thanks again :pray: for taking the time :hourglass_flowing_sand: for this (for us and for the community). I hope you will have time to get some holidays? :beach_umbrella:… Meanwhile, have an amazing day :sunglasses:

EDIT:

Oh, I’m sorry… I didn’t mean to be ‘pushy’… not my type, is it? :innocent: :joy: :rofl:

1 Like

OK then… For some reason, I felt compelled to do my homework :grin:… and I’m hereby annoucing the upcoming release of a set of grass textures in 3-4 different styles, totally free to use, twist and tweak to your liking… to use as a base in your project. Might hopefully save yours some time :hourglass_flowing_sand:.

Here’s the drill: At 6am, while the sun was out but without any shadows yet, I went in my garden and captured (using my iphone) 7 pictures of a view from above grass. Nothing professional, but I tried to keep with the a same distance/focus and made the serie from about 30 sqm of “grass” within 5 minutes. So, the result to serve as a base is I believe pretty “consistent”.

Consistent” is the keywork when it comes to this sort of thing. From this base, I created a fully-dynamic (non-destructive) PSD template. Using a set of (fairly basic) fx and filters on it, I am generating 4 sets of different ‘design’ textures. I will be releasing the entire sets of textures in 4k, 2k and 1k resolution for yours to use, twist and tweak. Hopefully, before the weekend :sweat_smile:

For each design type, there will be a set of 7 to 14 samples you can select from. Each has a base/diffuse, an emissive, a normal/bump and a roughness textures. I will eventually also add an alpha version to serve as occlusion (parallax or ambient). We’ll see how I’m doing…Because, I’m not gonna lie, doing all this turns it into a bit of a ‘factory’ of grass texturing :grin: :sweat_smile:

Anyways, don’t expect to be able to use it all straight without any effort in your project. In fine, many things are ‘per design’. But as I often say “A good base with FX can make for great design” … Whilst, “a shit base with FX will always remain a flavored with FX shit base:grin: :laughing: For this reason (the per design thingy) I’m going to also release the PSD base. Do with it whatever you want. No constrain, no credits nor anything :smiley: As I said, my only hope is that it can save you some time in working just this part of your project. :sweat_smile:

Here’s just quickly a sneak preview of what’s coming:


8 Likes

Fantastic :wink:

I believe the realistic one could benefit from using
parallax mapping Babylon.js docs

2 Likes

Yes, parallax or even parallax occlusion or whatever occlusion :grin:. As said, I will likely attempt to deliver also an alpha version texture one can play with. For just now, I’m in the process of automating the delivery of all the ‘base’ sets of textures. I expect to have those ready in a few hours. From there, I will start to see how it can be further improved… AND… my final goal: Finally see how this performs using this base of node material kindly deliverd by Patrick :smiley: I’ll keep yours in the loop… shouldn’t be all too long… meanwhile, (you know the drill :joy:) enjoy your weekend and have an awesome day :sunglasses:

1 Like

Hi all, thanks to all for all your ideas and implemetations!
To Mawa: very good textures, but sorry I’m a bit confused about that…
Are you working to a way to produce better textures to use with the Patrick method?
Because I’ve tried your playground and I’ve noticed that the demo textures are not seamless at the moment…

Thanks, for your message.

Absolutely. That’s the goal (aside from delivering a set/a base of consistent textures/tiles to work from :smiley:)

It’s a preview of just a single tile with different styles. In fact, it’s not even a tile. It’s the original 4k (rectangular) picture with styles.

As said, I’m on it. For now I have the set of ‘realistic’ and ‘styled’ tiles available in multiple resolutions. Working towards the pixel version. Next will load these into the node material (eventually work the masks, per design). I’ll let yours knows when it will be ready. Not all too sure when just exactly. It’s the weekend and sunny :sunny: :sunglasses: at my place so, I can’t promess it will be delivered before monday :face_with_hand_over_mouth: We’ll see how I feel/how it goes :sweat_smile: Do you want me to ping you when its ready?

Edit: Just to make this clear, for…

They are not going to be ‘seamless’ in the way that you cannot just ‘puzzle them’. Since you can actually also rotate them and stuff. They are made to be ‘seamless’ using the ‘masking’ method (using either the node material or some other mask technique).

There are some good free seamless textures (grass as well) here - 3designer.app/textures/seamless

2 Likes

Yes, sure is. And other sources as well. I just “felt compelled” to also contribute to this with my own version, extending on the effort @PatrickRyan did for us :hugs: My only hope is that I will be up to the challenge :sweat_smile: :joy:

Godot Stochastic procedural texture shader rewritten for babylonjs:

1 Like

@mawa is probably gonna laugh at me for this but there is this tool which does the “actual seamless” part for you: Bounding Box Software - Materialize

1 Like

Hi Roland! Very Good job! I’d like to try this method with my own textures (or the Mawa ones :slight_smile: ) but I’m not sure about the correct settings to use…
I’ve noticed that the final resolution using your textures is very low: to achieve some decent result I’ve put the procedural texture resolution to 16384 pixels!

What’s the correct way to use this algorithm?
Thanks

To Joe_Kerr
Thanks for the link! Meanwhile I’m tryng an interesting way to do this with Photoshop:

Hi @roland,

I see that you have made excellent PG with shaders to return repeating textures.
For example, I like this one :

However I was wondering how this could be done on terrain that has mixed textures. I’m thinking of mixMaterial.
Here is a PG that has the mixMaterial and I added your shader, but it won’t work as is. How would you adapt this with this material?

Thanks

1 Like