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?
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.
Hello. Thanks for the solution. But if you do it quickly, for example, 10ms, it starts to affect performance very quickly.
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.
Thanks for the solution, it’s really interesting. I will try to reproduce in my project and write about the results.
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
This is awesome, thanks a lot for the live example.
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:
Looks like an awesome doc candidate ?
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.
@sebavan, like this one:
This is so coooool !!!
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.
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.
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…