# GreasedLine as a poor man's particle system

Hi there!

Below are some PG’s which shows how could you emulate particles with `GreasedLine`.

@CodingCrusader As you’re the math king and the procedural creator mastermind in my eyes could you tweak this PG to create some cool effects? I don’t have time to play with the math nowadays.

@mawa @Tricotou @Joe_Kerr @labris and everyone else is very welcome to post your creations!

It could be used to simulate small sparks very easily too w/o the heavy particle system stuff. Fireworks, or whatever else…

HINT: you can control the line length dynamically by the `visibility` property. It would be cool if someone figures out the math to calculate the dash values for a single GRL instance with multiple lines (the dash values applies to the whole instance) so the whle thing could run in 1 draw call.

PG with 1 instance:

Thank you!

4 Likes

Actually, I would rather think this could be a perfect fit for ‘pixelart’. With something just a little bit more ‘squarisch’ like (rush)

I can easily imagine explosions and other particles fx (flames, water splash, etc…) in pixel art using this method. As for the maths, I will gladly let @CodingCrusader impress us and inspire us as this is clearly not part of my skillset

Can’t wait to taste something saucy from the Math Mage’s kitchen

1 Like

… work in progress, waiting for inspiration.

1 Like

@roland here is my contribution Fireworks

5 Likes

I LOOOOVE IT BRO!!

How can I update the points, Roland?

Try one of these (accepts `number[][]` - you can use ` BABYLON.GreasedLineTools.ConvertPoints()`

``````addPoints(points: number[][]) // adds points to the existing ones and recreates the mesh
setPoints(points: number[][]) // sets the points and recreates the mesh - the number of points must be the same as in the original line
``````

Please notice the last sentence - otherwise adding points will not work - just moving the existing ones around!

I am so curious buddy!

From the docs:

Please note that `points` property is not updatable unlike when using a `LineMesh`. You have to use the property `offsets` on the line instance to update the position of points without recreating the mesh. Updating the `offsets` doesn’t involve any calulcations and updated only one vertex buffer. See below the Offsets section and the PG example Offsetting line vertices.

However there are two public methods available on the line instance for manipulating the points. Both of these functions will destroy the mesh and create a new one. This point manipulation method is slower but if you are not dealing with a lot of lines it should not cause FPS issues.

javascript

``````addPoints(points: number[][]) // adds points to the existing ones and recreates the mesh
setPoints(points: number[][]) // sets the points and recreates the mesh - the number of points must be the same as in the original line
``````

If you are using the right handed coordinate system please create the lines after you switch the scene to it.

If you modify the number of points in the line you have to set the widths for the new lines or lines segments prior calling any of these two methods.

me, too!

1 Like

There is one more lighting fast way to update the positions. Look at the offsets property.

my first creation, nothing special, just playing around with greased line

fractal line system

depth=2 : network of a tramsystem
depth=4 : german motorway with cars dring 160-200 km/h
depth > 5 kills your browser

1 Like

Who to make sure that 100% of curious guys reading the topic will kill their browser whatever the depth needed

• I could go up to depth 7 with 120 fps
• Depth 8 I had a drop to 40 fps
• Depth 9 was the kill

8 - 32 FPS
9 - I didn’t even try it

@RaananW we need localstorage to store the code before running

1 Like

Or get a better computer!

more 180-280

1 Like

And after blowing a tire on the German Autoban, I can say that when you are standing up on the road waiting for assistance, it feels more like Mach1 or Mach2

1 Like

@roland Is there a proper way to inject a code of a vertex shader into greased line?

Experiments with Vertex Shader

You could write your a material plugin.

Or you can use:

``````    const line1 = BABYLON.CreateGreasedLine("line1",
{ points: points1 },
{
-->      materialType:
BABYLON.GreasedLineMeshMaterialType.MATERIAL_TYPE_SIMPLE,
``````

It uses `ShaderMaterial` so de shader injections should work. Or tamper the `ShaderStore` directly.

1 Like