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:
https://developer.playcanvas.com/en/tutorials/custom-shaders/
or start here and modify
https://playcanvas.com/project/619593/overview/ribbon-updated-for-new-script
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 :
https://developer.playcanvas.com/en/tutorials/custom-shaders/
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):
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ăăăă
https://playcanvas.com/editor/scene/1863293
Without looking at your shader, have you tried doing it without a shader? PlayCanvas allows to do that just by updating a material:
https://developer.playcanvas.com/en/tutorials/animated-textures/
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.
Edit:
Option 3 - donât use transparent texture 
i want to jkonw how fix this in playcanvas shader. i turned of the deapth test in shader ,but it not work hereâŚ