How to implement path animation effects in this video

The solid line could be done with a dynamic mesh, but the chevron path would be a nightmare.
I’d recommend using a fragment shader on a ground material under the car. Send it a list of centre points as UV coordinates (put the car in the middle of the texture always) then use one of the many curve shaders from ShaderToy. To get chevrons, you would need to mask additional pixels in the line, but you’d have the point-to-next-point vector to give you the tangent angle, which should make things fairly easy.

possible done in playcanvas?

Definitely! Shaders in playcanvas are a very good implementation of glsl which is what they use on ShaderToy (with a few minor modifications on that site to make it easy to work without a controller script).
When you’re looking for examples try to find a more modern one, as the system has changed a few times over the years. I think the best way to identify a ‘good’ example is if it uses two ‘shader’ type script objects instead of trying to bury the shader code in a string.

Start here, then look for examples that are closer to your design requirements:

or start here and modify

1 Like

very nice… but why are so many examples using those horrible string shaders when there’s a really clean ‘shader’ type object in the editor? Is it so they will work without the editor too?

What’s a “shader type object in editor”? Do you mean the inlining shaders as strings? I think its just a copy/pasta/habbit from old engine-only examples.

Probably everyone was starting from this example, which was originally inlining them as strings :

As for the original post:
I would create a mesh using Mesh API and just offset the UVs to animate arrows. This example uses UVs offset as well to animate the ground (the car is actually stationary):


1 Like

Yep, I realized you were speaking of shader assets only after posting it.

1 Like

varying vec2 vUv0;
uniform float uTime; // 当前时间
uniform float Speed;// 移动速度
uniform float trans;
uniform vec3 Color;

void main(void) {

float ani = step(vUv0.x, abs (cos(uTime)));
float alphaF = ani * trans;

gl_FragColor = vec4(Color, alphaF);


the animation is very strange ,
The animation of the UV coordinates causes a brief flicker during the transition.
How fix this。。。。

Without looking at your shader, have you tried doing it without a shader? PlayCanvas allows to do that just by updating a material:

how fix this z fighting issue。

it doesn’t work

I am not sure I understand the problem. I opened the project and I see a few animated textures. I don’t see any flickering.

What is not correct here?

Do you mean the transparent texture sometimes appearing above and sometimes under the opaque texture? That is a common issue of sorting transparent objects in WebGL.

Usually there are 2 ways:

  • Since the sorting is done using depth buffer, you can increase the precision of the depth, by making the distance between far and close planes on camera component smaller.
  • Placing the objects into different layers, and then sorting those layers.

Option 3 - don’t use transparent texture :slight_smile:

i want to jkonw how fix this in playcanvas shader. i turned of the deapth test in shader ,but it not work here…