Drawing Dynamic Sine Waves on a 3D Surface

To create an animation of a sine wave with dynamically changing wavelength on a 3D surface while preserving previous wave data, you'll need a strategy that balances visual quality with performance. Here are some approaches you could consider:

Approach 1: Trail-based Rendering

You could implement a system where you:

1. Generate new wave segments with the current wavelength parameter
2. Move previous segments along the surface
3. Maintain a fixed-length history of segments

JAVASCRIPTCopied
// Pseudocode for trail-based approach
class WaveTrail {
  constructor(maxSegments) {
    this.segments = [];
    this.maxSegments = maxSegments;
  }
  
  update(currentWavelength, speed) {
    // Generate new segment with current wavelength
    const newSegment = this.generateWaveSegment(currentWavelength);
    
    // Add to beginning of array
    this.segments.unshift(newSegment);
    
    // Move all existing segments
    for (let i = 1; i < this.segments.length; i++) {
      this.segments[i].position.x += speed;
    }
    
    // Remove segments that exceed our limit
    if (this.segments.length > this.maxSegments) {
      this.segments.pop();
    }
  }
  
  render() {
    // Draw all segments to create continuous wave
    for (const segment of this.segments) {
      drawSegment(segment);
    }
  }
}

Approach 2: Texture-based Solution

You could render the wave to a texture that moves across the 3D surface:

1. Render new wave data to one edge of a texture
2. Shift the existing texture data
3. Apply the texture to your 3D surface

GLSLCopied
// Fragment shader snippet for texture-based approach
uniform sampler2D prevWaveTexture;
uniform float wavelength;
uniform float time;
uniform float scrollSpeed;

void main() {
  // Calculate new wave value at the edge
  vec2 uv = gl_FragCoord.xy / resolution.xy;
  
  // Shift existing texture data
  vec2 prevUV = vec2(uv.x - scrollSpeed, uv.y);
  vec4 prevColor = texture2D(prevWaveTexture, prevUV);
  
  // Generate new wave at the edge
  if (uv.x > 1.0 - scrollSpeed) {
    float normalizedX = (uv.x - (1.0 - scrollSpeed)) / scrollSpeed;
    float waveValue = sin(normalizedX * 2.0 * PI / wavelength + time);
    gl_FragColor = vec4(waveValue, 0.0, 0.0, 1.0);
  } else {
    gl_FragColor = prevColor;
  }
}

Approach 3: Parametric History

Store a history of wavelength parameters and timestamps, then reconstruct the entire wave:

JAVASCRIPTCopied
class ParametricWave {
  constructor(historyLength) {
    this.wavelengthHistory = [];
    this.maxHistory = historyLength;
  }
  
  update(currentWavelength) {
    this.wavelengthHistory.unshift({
      wavelength: currentWavelength,
      timestamp: Date.now()
    });
    
    if (this.wavelengthHistory.length > this.maxHistory) {
      this.wavelengthHistory.pop();
    }
  }
  
  calculateWaveAt(x) {
    // Find which historical wavelength applies at this position
    const distanceFromOrigin = Math.abs(x);
    let accumulatedDistance = 0;
    let applicableWavelength = this.wavelengthHistory[0].wavelength;
    
    for (let i = 0; i < this.wavelengthHistory.length - 1; i++) {
      const segmentLength = calculateSegmentLength(
        this.wavelengthHistory[i].timestamp,
        this.wavelengthHistory[i+1].timestamp
      );
      
      accumulatedDistance += segmentLength;
      
      if (distanceFromOrigin <= accumulatedDistance) {
        applicableWavelength = this.wavelengthHistory[i].wavelength;
        break;
      }
    }
    
    return Math.sin(x * (2 * Math.PI / applicableWavelength));
  }
}

Performance Considerations

1. Limit history length: Only keep as much history as needed for your visual effect
2. Use level of detail: Render distant/older wave segments with less detail
3. GPU acceleration: Use shaders for the wave calculations where possible
4. Batch rendering: Minimize draw calls by batching wave segments

Which approach works best will depend on your specific requirements and the platform you're developing for. The texture-based approach is likely the most efficient for complex waves, while the parametric approach gives you the most flexibility.