# How to achieve grass "3d effect" similar to this one **URL:** \ **Category:** Questions\ **Created:** [June 9, 2024, 6:35am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166 "2024-06-09T06:35:13Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [July 7, 2024, 9:32am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/22 "2024-07-07T09:32:59Z")
Dears, Interesting topic. Let me just add the link to the video. Will make it easier to understand the scope, I believe. [![](https://img.youtube.com/vi/ihZBrUz4kxM/hqdefault.jpg "Vray Grass Tutorial in 3ds Max - How to create realistic Grass material with Vray") ](https://www.youtube.com/watch?v=ihZBrUz4kxM) It’s funny how the ‘grass’ topic is kind of redundant in this forum. I believe at some point, there are some keywords, like ‘displacement’ or ‘vray’. * * * Let me also just add another link from the forum. > [@Grass, butterflies and trees with instancing](https://forum.babylonjs.com/t/grass-butterflies-and-trees-with-instancing/45646): > > Hello everyone! After watching the last [video of Simon Dev on grass](https://youtu.be/bp7REZBV4P4), I was inspired to recreate and expand it using BabylonJS. So I had a lot of fun with instances and stuff and it came up nicely I think: You can try it out at [Hello BabylonJS !](https://barthpaleologue.github.io/AssetScattering/) (WASD or ZQSD to move around the character) The framerate holds at 60fps most of the time (not on the screenshot lol) on my Iris Xe integrated GPU. I think the trees my be to blame on that one I am not sure. All the source code is available [o…](https://github.com/BarthPaleologue/AssetScattering) The video is kind of interesting, I believe. Now, I’m not a real dev, so don’t count on me to give you the algorythm or the final logic/&method, however… as a creative, there’s a number of things that are clear to me. 1) Applying a texture, even with bump or parallax/parallax occlusion on a terrain will never create the vertical displacement when viewed from the camera (real time camera). 2) At some point, the old school method was to add sprites… next moved to either decals or instances. Or we can now create a geometry using a variety of methods (from vertices or from materials like the fur mat). And then, we have the shaders and the node mats which (at least up to some point) can help do the trick. Up to some point? Either I’m missing something or it is so that we still need to use a ‘mix’ of techniques? Do we? I suppose it would be great to have @PatrickRyan input at this point. If you have a minute for this? I’m pretty sure this is the kind of thing where you’d like to impress us with your expertise, isnt’it? In any case, I would be eager to read about your analyse of the current state of this in BJS… if you can save a moment to enlight us? 😃 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 9:39am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/23 "2024-07-07T09:39:10Z")
> [@frank71](#): > > Is porting this code to baylonjs more difficult? It depends who do you ask to port it 😃 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 9:44am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/24 "2024-07-07T09:44:21Z")
Displacement maps needs highpoly meshes. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [July 7, 2024, 9:47am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/25 "2024-07-07T09:47:33Z")
Indeed. But that’s kind of conflicting with the ‘high performance’ request, isnt’it? ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 9:50am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/26 "2024-07-07T09:50:35Z")
Yerr 🤡 ---
**Author:** ![frank71](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@frank71](https://forum.babylonjs.com/u/frank71)\ **Post date:** [July 7, 2024, 9:57am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/27 "2024-07-07T09:57:57Z")
Please Roland, can you port it? 🙂 I’m curious to compare these different approches… To Mawa: I think the other way is really a performace killer… ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [July 7, 2024, 10:06am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/28 "2024-07-07T10:06:32Z")
> [@frank71](#): > > the other way is really a performace killer Oh, yeah. If you’d implement it just like that on a large terrain and for low grass, without clipping and lod and some other fancy stuff, it would likely put your GPU to the knees 😂 Reason why I’d really love to read about our expert/guru @PatrickRyan input on this. And then. ‘imagine’ we could obtain even just the base of (a shader/an NME/a whatever suitable method)… now, how awesome would that be? 😃 😀 Sidenote: Anyone noticed I’m trying to trigger something here? 🤭 Just don’t tell anyone, may be it will do the trick 😂 ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 10:34am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/29 "2024-07-07T10:34:03Z")
> [@frank71](#): > > Please Roland, can you port it? 🙂 I saw this coming 😛 Lemmesee… ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 10:55am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/30 "2024-07-07T10:55:16Z")
EDIT: working PG: > **[Babylon.js Playground](https://playground.babylonjs.com/#PIGK3L%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Doesn’t seem to do anything funky yet 😃 but it compiles. I’m missing something with the UVs here I believe. ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 11:13am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/31 "2024-07-07T11:13:13Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/6/c6ab3a6af8557c700695398dc3f3fa9678fd5cd2.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/b/0bd57f6df3841704f3427796a6a6f04eb60ed8d4.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/5/958a88693cf54d7d5612e12ec9fe5652f7cd0493.jpeg) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/5/95899ea0b3b0d5516e015892d03e91d1608b0e63.jpeg) ---
**Author:** ![frank71](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@frank71](https://forum.babylonjs.com/u/frank71)\ **Post date:** [July 7, 2024, 12:37pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/32 "2024-07-07T12:37:43Z")
Mitico Roland! Can you simplify the code to handle only the last result (now I’ve stop the time…)? > **[Babylon.js Playground](https://playground.babylonjs.com/#PIGK3L%233)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes And what about the UV scaling? And I’ve seen that there are some artifacts:(white dashed line?) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 12:58pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/33 "2024-07-07T12:58:40Z")
> **[Babylon.js Playground](https://playground.babylonjs.com/#PIGK3L%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/a/9a313a3af2185592520e2a5992b20eb86b9a3f0d.png) > [@frank71](#): > > And I’ve seen that there are some artifacts:(white dashed line?) Screenshot? I can’t see any artifacts. ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [July 7, 2024, 3:40pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/34 "2024-07-07T15:40:21Z")
I asked chatGPT [Adding Short Grass Texture (chatgpt.com)](https://chatgpt.com/share/48651c53-642a-4fe9-8f76-fd1d62df00d2) [grass with noise added | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#PIGK3L#5) It is not the final product, but the shader could be compiled and the grass was slightly mixed. modify the factor of uv uv.x += (noise - 0.5) \* 0.05; uv.y += (noise - 0.5) \* 0.05; * * * may be I ask the wrong questions… 🙂 how can i make a flat picture look 3d with a shader? > **[ChatGPT](https://chatgpt.com/share/ae61d1df-df22-4ba7-9cf2-97ed76fb8bca)** > > A conversational AI system that listens, learns, and challenges ---
**Author:** ![frank71](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@frank71](https://forum.babylonjs.com/u/frank71)\ **Post date:** [July 7, 2024, 3:42pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/35 "2024-07-07T15:42:57Z")
Hi, can you see the Dashed Line? Move near to the texture and rotate the view… In VR mode are more evident. ![Screenshot (5)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/6/9657061f3a6d4007629b4fc897b8e753549489ec.jpeg) ---
**Author:** ![frank71](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@frank71](https://forum.babylonjs.com/u/frank71)\ **Post date:** [July 7, 2024, 3:46pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/36 "2024-07-07T15:46:11Z")
![artifacts](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/6/162c2a50c5fd938431e95be94c2315c46db40718.jpeg) ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [July 7, 2024, 4:05pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/37 "2024-07-07T16:05:31Z")
while walking the dog i came up with a very simple idea: since the shadows depend on the normals of the plane, you would actually have to turn the normal vectors in places so that they form a shadow. this assumes that you have a plane with many segments to get better details. no extra material shader is necessary for this idea. ---
**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\ **Post date:** [July 7, 2024, 4:18pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/38 "2024-07-07T16:18:23Z")
Here is a quick made example with the help of chatgpt ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/7/6751dee9b91e7007b47f2a9435469d45217c0e51.jpeg) [grass with noise added | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#PIGK3L#8) ---
**Author:** ![frank71](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@frank71](https://forum.babylonjs.com/u/frank71)\ **Post date:** [July 7, 2024, 4:36pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/39 "2024-07-07T16:36:40Z")
What about this method? [![](https://img.youtube.com/vi/SFJRqbg0vLE/hqdefault.jpg "確率論的プロシージャルテクスチャシェーダー for Godot Engine") ](https://www.youtube.com/watch?v=SFJRqbg0vLE&t=16s) ---
**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\ **Post date:** [July 7, 2024, 5:14pm UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/40 "2024-07-07T17:14:25Z")
> [@How to achieve grass "3d effect" similar to this one](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/20): > what’s the difference with this one? The concept is the same. Isn’t it? ---
**Author:** ![frank71](https://avatars.discourse-cdn.com/v4/letter/f/977dab/32.png) [@frank71](https://forum.babylonjs.com/u/frank71)\ **Post date:** [July 8, 2024, 9:01am UTC](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166/41 "2024-07-08T09:01:38Z")
Ah, ok… From the video the results seem better… And what about the artifacts mentioned above? [Previous page](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166.md?page=1) [Next page](https://forum.babylonjs.com/t/how-to-achieve-grass-3d-effect-similar-to-this-one/51166.md?page=3)