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

You can render each texture you use in the MixMaterial to a render target using any of the stochastic shaders I rewrote for babylon.js.

You can use those render targets in your mix material so the inputs to the mix material will be the generated stochastic textures.

What settings? :slight_smile: Leave everything as is just provide your base color and tangents texture to the shader.

I don’t understand at all what you’re talking about. I don’t understand much about shaders. What is stochaic?
Do you have an example?

Let me create a PG.

LOL Stochastic - phone auto-incorrect :smiley:

2 Likes

Something like this. This can be achieved many ways. I chose to use an RTT with a shader material to render a bigger non tiled version of the tile texture.

These newly created textures are used as a base color input for the MixMaterial>

2 Likes

Didn’t know about this tool. Just saw the tutorial and looks pretty cool (and free :smiley:)… and then who would dare laughing at ‘uncharted’? :grin: …Certainly, not me :sweat_smile:
In fact, I think I’m gonna actually try this tool on my grass base (thus delaying it a little, sry for those waiting… but I think it will be worth it and in the end, masked or not, delivering a seamless set of tiles makes more sense and is more inclusive for those who want to use it using different approaches/methods. Thanks a lot for sharing this :hugs: and meanwhile, have a great sunday :sunglasses:

3 Likes

yes, well, this is just the basic or base (old style :grin:) way of making seamless textures. It is still valid though, I believe. Though, I was looking back at the topic and all shared methods (thanks everyone for sharing, btw… this subject is always very interesting to read :smiling_face_with_three_hearts:)… BUT…

I think at this point we should probably make a distinction between ‘repeating a pattern’ and ‘creating a rich textured environment’. I mean, no matter the method you use (app or algorythm and incl. the AI), If you repeat (or nurture the AI) with just a single 1sqm texture of grass (or brick)… well, let’s make this clear… it will extrapolate from just a 1sqm source. It might be seamless, it might have quite a bit of variety in reassembling/interpreting the source BUT it will always build from just a very limited/repeating source. The idea of creating an average of 4 (better 6 or more) sources for each material is I believe nothing new and had some proven results. I believe this still stands today (again, even with the AI).

Not being a dev, my contribution to this will remain to try deliver a set of a ‘consistent base’ yours will be able to use (edit, twist and tweak). For I’m not gonna try it with each and every method (sorry).

As for…

I’m afraid I got the wrong approach to this, thinking of the masks. In the end, my new goal is clearly to deliver seamless (tiles) of textures. It will cover a much a larger use case and… why deliver assets with such limitations… it just doesn’t make sense.

I’m afraid though, it will delay the delivery just a little :face_with_hand_over_mouth: my apologies for taking the wrong approach to it (and pushing it way too far before realizing :grimacing: :crazy_face:)

Well, anyways, you know what "meanwhile, enjoy this (sunny at my place :sunny:) sunday… may be get the bbq running :meat_on_bone: :bacon: and have yourselves a great sunday :beach_umbrella: :tropical_drink:

It looks awesome.
I am very grateful to you for taking the time to make this PG.
Thank you very much.

1 Like

I think I’ll propose to include a detile like function in babylon.js.

Maybe Texture.GenerateDetiledTexture(tile: Texture, size: Vector2, repeat: Vector2)

2 Likes

That would be really useful.

@roland, I integrated your PG into a class.
On the other hand, this does not work with WebGPU. I wanted to integrate this great PG into my project which exclusively uses WebGPU and there are many errors that I don’t understand.

On the other hand on WebGL, I notice that it really pixelates a lot when we increase the number of tiles.

Increase the RTT texture size at line 187 for example to 4096.
Or we need an implementation w/o the RTT.

Yes, an implementation without RTT would certainly be better. I tried increasing the texture to 4096. It’s slightly better, but not enough.

In addition, with RTT, you create a camera for the RTT then the other when the scene is loaded, this creates problems when you have several cameras on a large scene (GUI camera, camera for the character… )

If it’s possible without RTT, that would be great.
And for the fact that it doesn’t work with WebGPU, wouldn’t that be because of the RTT? I thought I read that somewhere in the doc, but I’m not sure.

No RTT, WebGPU compatible:

It seems good. Works with WebGPU too.
Thank you very much @roland for your time. I really like the result.

I converted your PG typescript to Javascript for those who might be interested :

1 Like

bugfix:

line 74: if (this._tile) {

add this.autoClear = false; to the constructor

You are welcome :slight_smile:

1 Like

@roland How can we prevent textures from pixelating?

For example, on this first image, when the camera is far enough away, it pixelates less:

But if I bring the camera closer to the ground (especially when controlling a character) It really pixelates a lot.

Here is what I had before for the earth texture. (It didn’t pixelate.)

Isn’t it possible to add a texture LOD so that when the camera is close to the ground (or the texture), add detail to the texture.

Would that be a good idea and possible too?
I think this system is great and needs some fine-tuning.

What do you think of the texture LOD?

I’m putting the PG back here with the fixes you suggested previously.

You can choose a bigger size for the DetiledTexture, now it’s only 2048 for such a big area.

Currently the texture of 2048 already pixelate on a terrain of 100 * 100.

My terrain on my project is 2048 * 2048. So I would have to multiply the texture by at least 100 to have a correct rendering. Or a texture of 204800.

I liked the method proposed in this topic where you only flipped the textures to avoid seeing too much of the seams of the repetitions.

Dears,
Hope you’re all well?
I said I would deliver a set of seamless grass textures to play with… and so shall I do :grin: :innocent:

I’m gonna post and deliver the packages in some other topic (more appropriate) but I will link it to this one.

Meanwhile, here’s an updated preview showing the new sets of ‘realistic’ and ‘styled’ versions in ‘seamless mode’. Missing is the pixelart version that will come a bit later. All textures have now undergone a transform to make them ‘seamless’. However ‘seamless’ doesn’t mean without a visible pattern when repeating. Else, you should call them ‘flat’… which is basically something you can find easily on the web, from various sources. These are ‘richer’ textures made to best work using some masking or mixing technique. They are also made for BJS - editing, twisting and tweaking - in the sense that they are not using the standards (i.e. for metallic/pbr) levels (sorry for the purists :grin:…but then again, you can find lots of those on the web). Instead, these sets of textures (hopefully) contain enough information between the white and black point to set your own levels or edit them in whatever way to make your own ‘cuisine’ :cook: :smiley:.

This is a first version preview, in 1k resolution. Texture Sets will be made available in 3k, 2k and 1k. As said, I’m gonna add to the current sets, an alpha version of both the grayscale and base RGB. Again, with the idea to give you the maximum latitude to play, twist and tweak these to your liking/design.

I also (very) quickly updated the base of @PatrickRyan 's node material with these textures. Without changing/enhancing the NME (might still want to do this later… it looks like something quite fun to do :boy:… but I personally have no use for it at this moment, so we’ll see if I feel like spending more time on this :face_with_hand_over_mouth: :thinking:). Obviously from this base, you may want to add more channels for the textures, change the masks and clearly change the mask for the shader (if it is just grass you want). It’s also using only 4 textures at the moment, where my set of grass contains 7 (and I believe 5 to 6 for a large terrain would likely be a good compromise). You can still get a good feeling of it with this base, I believe. I can sense it would work (with just a little bit more effort :grin:)

Ok, I’ll leave you with this for this sunday afternoon :beach_umbrella: and will post and send the links to download sometime tomorrow. Meanwhile, enjoy your day :sunglasses:

7 Likes