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…
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 
are you referring to this one?
Yes, cool, some nice approaches there!
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
Thank you! And sorry for the late!
In the meantime I’ve found this other algorithm…
What about this methods? Are difficult to implement in Babylon JS?
Thanks
It is definitely not as straight forward as just dropping a glsl code snippet, but if the quality looks better to you then that’s what matters ^^
Since you found some code already, it is probably not too difficult to port it to BabylonJS
Well, actually, if we just take this one: non_repeating_hextiling/shaders/shd_nonrepeat/shd_nonrepeat.fsh at master · Gizmo199/non_repeating_hextiling · GitHub
There is two varyings which are probably uv coord and vertex color. Then you have 3 uniforms you can trial&error later what they do. There is one undeclared sampler “gm_BaseTexture” which is likely the texture to “untile”. The rest can be treated as a black box.
Hi CrashMaster, hi Joe, thanks.
To Joe: but to implement this Gizom199 method I can use your previous sample code (version I) as reference?
I would give it a try! Copy and paste the “Gizom199 method”, adapt the varyings, uniforms, samplers. And then work through the compiler errors if any.
Thanks Roland, thanks to all! I’ve tried your adjusted code with different texture, but the result seems not so good with this algorithm… Do you think this was better?
Shader - Shadertoy BETA → latest algorithm version V. Is porting this code to baylonjs more difficult?
