Creating Shader-Based Animated Lines in Three.js

Based on your goal of creating shader-based animated wavy lines between two 3D points, here are some approaches using Three.js:

1. Using Line2 with Custom Shaders

Three.js provides enhanced line rendering capabilities through the Line2 class and related utilities:

• Line2 - Improved line rendering with custom width
• LineGeometry - Specialized geometry for lines
• LineMaterial - Material designed for lines with shader capabilities

You can create a path between your two points and apply custom shaders to achieve the wavy animation effect.

2. Curve-Based Approach

For more complex paths, you could use Three.js curve classes:

• LineCurve3 - For straight lines in 3D space
• CubicBezierCurve3 - For curved paths with control points
• CatmullRomCurve3 - For smooth spline curves through points

You can generate points along these curves and then use them with Line2 or LineSegments2 for rendering with custom shaders.

3. Custom Shader Implementation

To create the wavy effect, you'll need to:

1. Create a geometry representing your line path
2. Apply a custom shader material that:
   • Displaces vertices perpendicular to the line direction
   • Animates the displacement over time
   • Controls the wave amplitude and frequency

Recommended Approach

1. Create a path between your two points using LineCurve3 or another curve class
2. Generate a LineGeometry from this path with sufficient segments
3. Create a custom LineMaterial with shaders that:
   • Calculate the tangent direction at each point
   • Generate perpendicular displacement vectors
   • Apply sine/cosine-based displacement that varies with time

This approach would allow you to create animated wavy lines between any two points in 3D space while maintaining control over the animation parameters.

For more complex implementations, you might want to explore the curve classes under the "Extras / Curves" section of the Three.js documentation, which provide various ways to define paths in 3D space that could serve as the foundation for your animated lines.