How to draw a tail in an optimized way

I’m trying to draw a character trail. http://g.recordit.co/EysTJyoKec.gif
I draw with CreateGreasedLine. Every frame, dispose of the old object and create a new GreasedLine.
But this method is too resource-intensive for phones.
Can someone please suggest a better way to draw a trail like this on a gif.

cc @roland, I think a greased line can be updated and not recreated each time?

2 Likes

But can you tell me how to do it right? The methods that I looked at, in any case, recreate the line.

Hello!

Use the instance option.

You could also add line segments that long that it gets covered by your player every X-th frame and set the visibility option to 0 and reveal the line segment by increasing the value of this option every frame.

4 Likes

Hello. Thanks for the solution. But if you do it quickly, for example, 10ms, it starts to affect performance very quickly.

1 Like

When you add a new line to a line instance it has to recreate the mesh and it takes time. This is why you need to add longer lines and reveal them by the visibility option.

Another solution:
You could use pooling to make it faster. Precreate multiple greased line meshes, put them in a pool and disable them. Then take out one mesh from the pool and set the offsets of the points to move the line to a desired position and enable the mesh. If the pool is getting close to empty you can add more meshes on the fly.

Changing the offsets is very fast so you can do it on every frame. If you create the line meshes with point positions [0,0,0, 0,0,0], the offset value is practically the new point position value.

Actually this is a quite interesting scenario for greased line so I’ll create a working optimized PG to showcase it.

2 Likes

Thanks for the solution, it’s really interesting. I will try to reproduce in my project and write about the results.

1 Like

I’ve just realized that the solution with the mesh pool will use a lot of draw calls. So the better approach will be to create one greased line mesh with several segments all at position [0, 0, 0, 0, 0, 0] and then you will need to come up with an algorithm which will move the segments.

So at first you create the line with a 2D points array:
[[0,0,0, 0,0,0], [0,0,0, 0,0,0], [0,0,0, 0,0,0], ....]

You will end up with one mesh - one draw call but you can still use the offsets property to move the line segments.

400 line segments moving with offsets. Each color is a line segment. Seems to be fast enough :slight_smile:

5 Likes

This is awesome, thanks a lot for the live example. :star_struck:

1 Like

I’ve created one more PG with some comments and it is visually more easier to understand how the offsets property is used to move the line segments:

5 Likes

Looks like an awesome doc candidate ?

1 Like

Yes, it will get to get docs. I am working on more advanced examples so when I am done I will put them to refer docs with this one one obe PR.

2 Likes

Best Were Not Worthy GIFs | Gfycat

@sebavan, like this one:

6 Likes

This is so coooool !!!

1 Like

Hello. I apologize for the long answer. But I have some questions.

If you use [0,0,0,0,0,0,0,0,0], then offset does not work and does not shift the line in any way.
If you do [0,0,0,0.01,0,0,0,0,0], then the line starts to tremble a lot.
I also got out of this so far by doing a slight offset [0,0,0,0.001,0,0,0.002,0,0]. But with offset, part of the line is visible only at a certain angle.

Can these problems be fixed somehow?

Hello!
Let me have a look at it.

:vulcan_salute:

There are two lines with the same final vertex positions. The line on the left is using offsets and the line on the right is using positions. There is definitelly something not working correctly. I will check it now.

EDIT: After thinking more deeply about your goal I must admit GreasedLine will not solve your problem but there is another solution. Let me prepare a PG for you.

1 Like

Hello!

I had an idea to draw a tail using a DynamicTexture and I didn’t have to code anything because I’ve found this cool implementation:

I just added the sphere and rotation.

Draw with the mouse…

:vulcan_salute:

3 Likes