GreasedLine as a poor man's particle system

Demos and projects
1

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!

image
image1102×758 66.4 KB

image
image1566×1204 39.4 KB

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
2

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 :stuck_out_tongue_closed_eyes: as this is clearly not part of my skillset :sweat_smile: :joy:

3

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

1 Like
4

… work in progress, waiting for inspiration. :slight_smile:

1 Like
5

@roland here is my contribution :grin: → Fireworks

Screencast from 08-07-2024 12:04:47

5 Likes
6

I LOOOOVE IT BRO!! :heart:

7

How can I update the points, Roland?

8

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! :slight_smile:

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.

9

me, too! :slight_smile:

1 Like
10

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

11

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

image
image833×683 38.1 KB

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

1 Like
12

image
image1550×1618 156 KB

13

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

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

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

@RaananW we need localstorage to store the code before running :slight_smile:

1 Like
15

Or get a better computer! :wink:

more 180-280 :slight_smile:

1 Like
16

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

1 Like
17

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

Experiments with Vertex Shader

18

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