# GreasedLine as a poor man's particle system

**URL:** <https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865>\
**Category:** Demos and projects\
**Created:** [July 7, 2024, 5:34am UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865 "2024-07-07T05:34:16Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**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:34am UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/1 "2024-07-07T05:34:16Z")

</div>

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!

> **[Babylon.js Playground](https://playground.babylonjs.com/#0K3AQ2%233289)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/f/1fb7ef57ae06a900a7c3e10dcbbc7c9996796c34.jpeg)

> **[Babylon.js Playground](https://playground.babylonjs.com/#0K3AQ2%233290)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/8/08ad3287af17ad9e11348883a3be6800ee3eed3e.jpeg)

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:

> **[Babylon.js Playground](https://playground.babylonjs.com/#0K3AQ2%233292)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Thank you!

---

<div class="post-metadata">

**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, 8:43am UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/2 "2024-07-07T08:43:09Z")

</div>

> [@roland](#):
>
> poor man’s particle

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

> **[Babylon.js Playground](https://playground.babylonjs.com/#0K3AQ2%233293)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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 😅 😂

---

<div class="post-metadata">

**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:22am UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/3 "2024-07-07T09:22:25Z")

</div>

> [@mawa](#):
>
> I will gladly let @CodingCrusader impress us and inspire us

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

---

<div class="post-metadata">

**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:48pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/4 "2024-07-07T16:48:05Z")

</div>

… work in progress, waiting for inspiration. 🙂

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 8, 2024, 10:07am UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/5 "2024-07-08T10:07:49Z")

</div>

@roland here is my contribution 😁 → [Fireworks](https://playground.babylonjs.com/#4U4QH9#61)

![Screencast from 08-07-2024 12:04:47](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/a/3a0c4c6ff2fcaf9cab71633d6a4b070f85edd8d4.gif)

---

<div class="post-metadata">

**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 8, 2024, 10:45am UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/6 "2024-07-08T10:45:34Z")

</div>

I LOOOOVE IT BRO!! ❤

---

<div class="post-metadata">

**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 10, 2024, 2:56pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/7 "2024-07-10T14:56:28Z")

</div>

How can I update the points, Roland?

---

<div class="post-metadata">

**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 10, 2024, 3:04pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/8 "2024-07-10T15:04:12Z")

</div>

Try one of these (accepts `number[][]` - you can use [` BABYLON.GreasedLineTools.ConvertPoints()`](https://doc.babylonjs.com/typedoc/classes/BABYLON.GreasedLineTools#ConvertPoints)

```auto
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_

```auto
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._

---

<div class="post-metadata">

**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 10, 2024, 3:20pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/9 "2024-07-10T15:20:40Z")

</div>

> [@roland](#):
>
> I am so curious buddy! 🙂

me, too! 🙂

---

<div class="post-metadata">

**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 10, 2024, 3:33pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/10 "2024-07-10T15:33:14Z")

</div>

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

---

<div class="post-metadata">

**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 10, 2024, 4:06pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/11 "2024-07-10T16:06:46Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/5/85ba026aa611b30a3a96377f356cea1fa0cd7fa3.jpeg)

[fractal line system](https://www.babylonjs-playground.com/#HUP7VW)

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

---

<div class="post-metadata">

**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 10, 2024, 4:11pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/12 "2024-07-10T16:11:14Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/2/f2a05455c7ec618a1e02c794cac8c669ecb4d2b4.jpeg)

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 10, 2024, 4:23pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/13 "2024-07-10T16:23:23Z")

</div>

> [@CodingCrusader](#):
>
> depth \> 5 kills your browser 🙂

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 😃

---

<div class="post-metadata">

**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 10, 2024, 4:26pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/14 "2024-07-10T16:26:14Z")

</div>

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

> [@CodingCrusader](#):
>
> depth \> 5 kills your browser 🙂

@RaananW we need localstorage to store the code before running 🙂

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [July 10, 2024, 4:29pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/15 "2024-07-10T16:29:08Z")

</div>

> [@roland](#):
>
> @RaananW we need localstorage to store the code before running 🙂

Or get a better computer! 😉

> [@CodingCrusader](#):
>
> depth=4 : german motorway with cars dring 160-200 km/h

more 180-280 🙂

---

<div class="post-metadata">

**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [July 10, 2024, 4:30pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/16 "2024-07-10T16:30:49Z")

</div>

> [@RaananW](#):
>
> more 180-280. From experience.

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 😂

---

<div class="post-metadata">

**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 10, 2024, 5:49pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/17 "2024-07-10T17:49:25Z")

</div>

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

[Experiments with Vertex Shader](https://playground.babylonjs.com/#4G8VZ3#3)

---

<div class="post-metadata">

**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 10, 2024, 6:58pm UTC](https://forum.babylonjs.com/t/greasedline-as-a-poor-mans-particle-system/51865/18 "2024-07-10T18:58:34Z")

</div>

You could write your a material plugin.

Or you can use:

```auto
    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.

> <https://github.com/BabylonJS/Babylon.js/blob/64f370f97974ad2340e16d67648448a85a630192/packages/dev/core/src/Shaders/greasedLine.vertex.fx>