Connecting Two Points in 3D Space Using a Shader-Generated Line in Three.js

Questions
, ,
1

Hello Three.js community,

I’m working on a project that involves shader-based animated lines. I’ve been experimenting with this cool wavy line effect (example here on CodePen) that draws dynamic lines on a plane using GLSL shaders.

Now, I’m looking to take this effect and use it in a 3D context. Specifically, I want to connect two arbitrary 3D points in space (pointA and pointB) with a line that has a similar animated, wavy style.

Questions:

  1. Is there a way to project this shader effect along a path or between two 3D points in Three.js?

  2. If a direct approach isn’t possible, what would be a good workaround to achieve a similar wavy effect between two points?

  3. Any resources or examples for creating shader-based lines along a 3D path would be super helpful!

Thanks so much for any advice or pointers!