I forked and updated the Rainbow Trail tutorial project to fix some issues that appeared in console, but the mesh with the rainbow didn’t worked and there is no errors in the console. Somebody knows what is happening?
I’ve fixed the project. Try forking it again.
Thanks @will
Below is the original project, for anyone who’s interested.
https://playcanvas.com/project/733569/overview/rainbow-trail-with-mesh-api
@will looks like there is some issue - the trail is no longer touching the ball after a couple of circles:
Edit:
The issue is this line:
// Update mesh
const numVertices = Math.min(this.segments.length * 2, MAX_SEGMENTS * 2);
The way the vertices are arranged after the update is that last vertices get closer to the ball. MAX_SEGMENTS is too small to fit all, so the vertices get cut. Either reverse them, so the last vertices are further away from the ball (recommended) or up the MAX_SEGMENTS limit (by 200 or so in the example).
Thanks for the heads up @LeXXik. Can you run the project again in the launch page and see if it’s fixed now please?
There is a glitch where one of the balls and its trail repeatedly disappear for one frame after some time.
@Albertos This is now fixed.
For some reason, on my mobile I see many colors with a fade-out, which looks correct to me, but on my laptop I only see three colors with no fade-out.
Mobile:
Laptop:
I see this in the console on my laptop.

@will the ribbon is now always attached to the ball, that issue is fixed. @Albertos found another one - I can confirm it on my pc monitor. Looks like the length depends on the refresh rate: 60hz - longer, 144hz - shorter
Edit:
I’ve had a look at it. The issue is again with the max segments limit MAX_SEGMENTS. Since the script is adding a new segment each frame, we reach the limit sooner on higher refresh rate monitors, which results in a cut off. A solution can be instead of adding segment each frame, add it based on min distance from the last segment or min time passed since last addition. This should make the trail frame time independent.
@Albertos I’ve removed that console.log message (it was left over from a debugging session).
I have implemented a fix, @LeXXik. Feel free to test again.
Seems to work well now! ![]()
Works like a charm, @will
Well done!


