Animated arrows/dashed line/flow

Help & Support
1

Hi

I have this 3D production presentation and it has a couple of hoses and cables. I’d love to depict the flow of electricity, water and another substance in these hoses. I would have to be in 3D space somehow because the user can tumble and orbit around the product.

I’m thinking about something along the line of marching ants, a dashed line offsetting, arrows offsetting, or a gradient moving or something similar. Any ideas are helpful!

I’m not sure on where to start here. Would this be done with an animated texture, or moving 3D objects, or 2D canvas/SVG bezier with stroke effects or whatnot. Has anyone got any input?

Here are some reference material in different directions:

Best regards

  • Björn
2

Ok, so I tried animating the offset of a striped texture on an offsetted mesh version of the hose:

this.offset += dt*this.speed;

this.material.emissiveMapOffset = new pc.Vec2(0, this.offset);
this.material.opacityMapOffset = new pc.Vec2(0, this.offset);
this.material.update();

This seems to work just like expected!

How taxing would it be to be updating the materials in the update-loop for 4-5 hoses?

3

It shouldn’t be too expensive. I have a feeling that calling material.update() is note required if you just update the offset/tiling of a texture. Try it and see. Also, you can avoid allocating the Vec2 objects on every update by doing:

this.offset += dt*this.speed;

this.material.emissiveMapOffset.set(0, this.offset);
this.material.opacityMapOffset.set(0, this.offset);
1 Like
4

EDIT: I just tried removing the update, but then the animation stopped unfortunately.

Side question: When I use

this.material.emissive.set(0, 153, 204);

I get the "blue " on the left. But when I use a PNG texture with the exakt same RGB values I get the correct blue on the right. What’s up with that?

5

I’m not sure. Can you reproduce that in a minimal scene and I’ll check it out?