# Loving the thin instances! **URL:** \ **Category:** Demos and projects\ **Created:** [August 28, 2020, 6:48am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743 "2020-08-28T06:48:20Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 28, 2020, 6:48am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/1 "2020-08-28T06:48:20Z")
![image (3)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/9e9fcbbad57b97837d09c8c83a9a99e8ee7d091a.jpeg) 512x512 blades of (boxy) grass, placed in a grid but perturbed randomly within their cells, with random colour variations, rotation and height adjustments. I’ve tried ‘crushing’ the grass where participants walk, but the thinInstanceSetBuffer() is too slow for real-time. Are there any plans to make a thinInstanceSetBufferRange() version which just adjusts a sub-set of the matrices? If not, I might make one but would want to be sure that Geometry.setVerticesBuffer() can be changed to update part of an existing buffer instead of throwing it away and replacing it as it currently does. (I didn’t get any further than that when I was digging into it) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [August 28, 2020, 9:33am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/2 "2020-08-28T09:33:35Z")
You would not need to use the Geometry for this: [https://playground.babylonjs.com/#V1JE4Z#16](https://playground.babylonjs.com/#V1JE4Z#16) It is using internal private data, however, so it’s for educational purpose only. However, I think we can provide something like `thinInstancePartialBufferUpdate`: @Deltakosh? ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 28, 2020, 9:37am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/3 "2020-08-28T09:37:11Z")
Thanks @Evgeni_Popov I’ll look into that. Here’s the current demo BTW: [https://gig-dev.pl.ai/c/](https://gig-dev.pl.ai/c/) This is a multi-player ‘experience’. Currently you can just move around (touch where you want to move and the character moves towards that point). The online version doesn’t attempt to crush the grass. You can socialise with other visitors using emojii symbols 😃 ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 28, 2020, 9:38am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/4 "2020-08-28T09:38:37Z")
That’s perfect for my current use-case, I didn’t find the updateDirectly functionality when I was poking through it - thanks! ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [August 28, 2020, 5:41pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/5 "2020-08-28T17:41:14Z")
of course this is awesome! (please update the doc as well with maybe a link to @pjbaron demo?) ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [August 29, 2020, 4:19am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/6 "2020-08-29T04:19:07Z")
@pjbaron I also love using thininstances! Great work, keep it up! @Evgeni_Popov Is it possible for thininstances to decouple their animation from the source ? For example, in this rabbit family PG: [https://playground.babylonjs.com/#QY1WYT#245](https://playground.babylonjs.com/#QY1WYT#245) How can I make the child rabbits run a different range/set of animation from the parent ? ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [August 29, 2020, 8:40am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/7 "2020-08-29T08:40:47Z")
You can also use Babylon Fur material to create grass [https://www.babylonjs-playground.com/#EUCNP#6](https://www.babylonjs-playground.com/#EUCNP#6) Example: [https://hiteshsahu.com/Tiger](https://hiteshsahu.com/Tiger) use W,S,A,D keys to walk the tiger ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/ddf4dcad8bdf9c45914111908ab89c8a9bbb472e.jpeg) ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 29, 2020, 10:35am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/8 "2020-08-29T10:35:21Z")
Very nice @HiteshSahu, I love your tiger! I did try with the fur material but I wasn’t happy with the gaps between each layer. You have chosen a very dry grass type, which gets away with it. With a fresher ‘smoother’ blade of grass I wasn’t happy with that broken/repetitive appearance. I’m going to click through a few more of your demos - you’ve made a lot 😃 ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [August 29, 2020, 11:30am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/9 "2020-08-29T11:30:47Z")
> [@phaselock](#): > > Is it possible for thininstances to decouple their animation from the source No it’s not possible out of the box because a thin instance is really only a matrix that allows to scale/position/rotate differently a mesh geometry. However, with a bit of work you can have different animations for different instances / thin instances. See for eg: - [Independent animations on instances](https://forum.babylonjs.com/t/independent-animations-on-instances/7225) - [Vertex Animation Textures](https://forum.babylonjs.com/t/vertex-animation-textures/6325) ---
**Author:** ![Raggar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raggar/32/20672_2.png) [@Raggar](https://forum.babylonjs.com/u/Raggar)\ **Post date:** [August 29, 2020, 12:17pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/10 "2020-08-29T12:17:11Z")
You could use a shader for the grass effect as well: [https://playground.babylonjs.com/#NZDFUB](https://playground.babylonjs.com/#NZDFUB) Then you could use an array and loop for multiple players/positions. Or you could take it one step further and use the RenderTargetTexture with particles emitting from the players and use that texture to deform the grass, creating trails of deformation, like seen in some games. ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [August 29, 2020, 12:28pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/11 "2020-08-29T12:28:15Z")
It will be cool if we can use this shader and try to mimic this effect in Babylon. https://codepen.io/al-ro/embed/preview/jJJygQ?height=300&slug-hash=jJJygQ&default-tabs=js,result&host=https://codepen.io ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [August 29, 2020, 12:33pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/12 "2020-08-29T12:33:17Z")
Thanks 😉 . I think a low-poly version of grass-like you are doing with instance mesh will fit well with your game scene. I liked the concept of the player following the sphere. This way you can make game playable on smartphones. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [August 29, 2020, 3:49pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/13 "2020-08-29T15:49:26Z")
That’s great! You can even have a different setting for frequency/wave length/wave size for each blade of grass: [https://playground.babylonjs.com/#NZDFUB#1](https://playground.babylonjs.com/#NZDFUB#1) ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [August 29, 2020, 6:08pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/14 "2020-08-29T18:08:04Z")
PR for the partial update method: > With those changes, this PG will work: [Babylon.js Playground](https://playground.babylonjs.com/#KJWXTG) ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 30, 2020, 8:21am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/15 "2020-08-30T08:21:21Z")
Yes, the current demo was designed to work with touch screen devices as easily as desktop 😃 ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 30, 2020, 8:23am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/16 "2020-08-30T08:23:51Z")
That’s awesome, I spent a few hours playing with shaders but didn’t get near a useful effect - your demo is awesome and @Evgeni_Popov has added some lovely variation to the waving. So many cool ideas here! ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 30, 2020, 8:24am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/17 "2020-08-30T08:24:54Z")
Amazing, thanks! I’ll see if I can revisit this soon and play with the new stuff. ---
**Author:** ![pjbaron](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pjbaron/32/6983_2.png) [@pjbaron](https://forum.babylonjs.com/u/pjbaron)\ **Post date:** [August 31, 2020, 12:21am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/18 "2020-08-31T00:21:58Z")
Thanks for your help everyone, I got the grass to crush nicely (I used the original @Evgeni_Popov PG with the private member access… The PR failed on CI and I’m too lazy to rebuild from TS source!) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/83d21a706f69588f8e5ba7fe47f716a32abd6f49.jpeg) ---
**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\ **Post date:** [August 31, 2020, 3:05am UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/19 "2020-08-31T03:05:24Z")
Thanks for the links, I’m aware 3rd party tools/hacks/other 3D engines can get the job done but I’d prefer a native solution within bjs. The easiest by far (afaik) is to craft a custom shader and use in conjunction with instances. This workflow isn’t straightforward tho. Ideally, I would prefer 1 mesh with animations (skeleton or otherwise) ported into a custom shader automatically (one can only dream) and combo with instances. ehehehe, now that would be something… ---
**Author:** ![HiteshSahu](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/hiteshsahu/32/50817_2.png) [@HiteshSahu](https://forum.babylonjs.com/u/HiteshSahu)\ **Post date:** [April 3, 2021, 11:32pm UTC](https://forum.babylonjs.com/t/loving-the-thin-instances/13743/20 "2021-04-03T23:32:16Z")
Thin instance Grass based on Playground by Cedric Guillement #### [Cedric Guillemet (skaven\_)](https://twitter.com/skaven_/status/1377226589109358597) Thanks to instances and [@babylonjs](https://twitter.com/babylonjs) , you can generate and animate thousands of grass blades in your scenes. Check this playground : [playground.babylonjs.com/#A0YCX2#7](https://playground.babylonjs.com/#A0YCX2#7) [#gamedev](https://twitter.com/search?q=%23gamedev) [#vfx](https://twitter.com/search?q=%23vfx) [#windows95](https://twitter.com/search?q=%23windows95) [#windmill](https://twitter.com/search?q=%23windmill) [#indiedev](https://twitter.com/search?q=%23indiedev) [https://twitter.com/skaven\_/status/1377226589109358597/video/1](https://t.co/fbwBCgQxK7) [https://playground.babylonjs.com/#A0YCX2#8](https://playground.babylonjs.com/#A0YCX2#8) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/4/4281b70095c701bd42825c982ed258301b934a7b.jpeg)