Loving the thin instances!

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)

1 Like

You would not need to use the Geometry for this:


It is using internal private data, however, so it’s for educational purpose only.

However, I think we can provide something like thinInstancePartialBufferUpdate: @Deltakosh?

Thanks @Evgeni_Popov I’ll look into that.
Here’s the current demo BTW:

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 :smiley:


That’s perfect for my current use-case, I didn’t find the updateDirectly functionality when I was poking through it - thanks!

of course this is awesome! (please update the doc as well with maybe a link to @pjbaron demo?)

@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
How can I make the child rabbits run a different range/set of animation from the parent ?

You can also use Babylon Fur material to create grass


Example: https://hiteshsahu.com/Tiger use W,S,A,D keys to walk the tiger

1 Like

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 :smiley:

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:

You could use a shader for the grass effect as well:
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.


It will be cool if we can use this shader and try to mimic this effect in Babylon.

Thanks :wink: . 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.

That’s great!

You can even have a different setting for frequency/wave length/wave size for each blade of grass:



PR for the partial update method:

With those changes, this PG will work: Babylon.js Playground

1 Like

Yes, the current demo was designed to work with touch screen devices as easily as desktop :smiley:

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!

Amazing, thanks! I’ll see if I can revisit this soon and play with the new stuff.

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!)


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…

1 Like

Thin instance Grass based on Playground by Cedric Guillement

Cedric Guillemet (skaven_)

Thanks to instances and @babylonjs , you can generate and animate thousands of grass blades in your scenes. Check this playground : playground.babylonjs.com/#A0YCX2#7 #gamedev #vfx #windows95 #windmill #indiedev https://twitter.com/skaven_/status/1377226589109358597/video/1