ShaderMaterial数据处理/自定义颜色策略咨询及大线段网络动画需求

Hey there, let’s tackle this large-scale line network color animation strategically—this is a resource-intensive problem, so we need to optimize every layer from data storage to GPU execution to keep things smooth. Here’s a structured approach:

Your initial plan of storing a Float32Array of all RGBA values for every segment and time slot would eat up ~770MB of memory—way too much for most browsers to handle comfortably. Let’s fix that:

• Switch to compressed color storage: Instead of Float32Array (4 bytes per channel), use Uint8Array (1 byte per channel) since RGBA values only need 0-255 precision. This cuts memory to ~192MB instantly, and you can convert to 0-1 floats in the shader.
• Store color data as a 2D texture (game-changer): Instead of storing every time slot’s color per vertex, pack all segment-time color data into a single WebGL texture. Each row represents one segment, each column represents a 24-hour time slot. For 150k segments × 24 slots, a Uint8 RGBA texture only takes ~14MB (150000 × 24 × 4 bytes). This is orders of magnitude more efficient than a buffer array.
  • Pro tip: Use a texture size with power-of-two dimensions (e.g., 256 columns × 262144 rows) to leverage GPU hardware optimizations—pad empty rows if needed.
• Eliminate redundancy: If multiple segments share identical color patterns across time, use an index buffer to reference a single pattern instead of storing duplicates.

150k individual THREE.LineSegments will cause a draw call explosion, which will tank performance. Fix this with:

• Merge all lines into one BufferGeometry: Use THREE.BufferGeometryUtils.mergeBufferGeometries to combine every line into a single geometry. This drops your draw count from 150k to 1—huge win for GPU throughput.
• Add a segment ID attribute: When merging, add a custom float attribute (segmentId) to each vertex that identifies which original segment it belongs to. This lets the shader know which texture row to sample for color data.
• Use interleaved buffers: Interleave vertex position and segmentId data into a single buffer. This improves GPU cache hit rates since related data is fetched together.

Never update color data on the CPU—this would require writing millions of values per frame, which is impossible for smooth 60fps animation. Instead, handle all interpolation logic in the GPU:

Vertex Shader Example #

attribute vec3 position;
attribute float segmentId;

uniform sampler2D colorTexture;
uniform float currentTime; // Value from 0 to 167 (7×24 hours, fractional)
uniform vec2 textureSize; // (24, 150000) or your padded power-of-two size

varying vec4 vColor;

void main() {
    // Calculate current and next time slot indices
    float totalHours = 24.0 * 7.0;
    float clampedTime = mod(currentTime, totalHours);
    
    int hour1 = int(floor(clampedTime));
    int hour2 = int(mod(hour1 + 1, 24));
    int dayOffset1 = int(floor(clampedTime / 24.0));
    int dayOffset2 = hour2 == 0 ? dayOffset1 + 1 : dayOffset1;
    dayOffset2 = mod(dayOffset2, 7);
    
    int slot1 = dayOffset1 * 24 + hour1;
    int slot2 = dayOffset2 * 24 + hour2;
    
    // Texture coordinates (center of pixel to avoid sampling artifacts)
    vec2 uv1 = vec2(
        (slot1 + 0.5) / textureSize.x,
        (segmentId + 0.5) / textureSize.y
    );
    vec2 uv2 = vec2(
        (slot2 + 0.5) / textureSize.x,
        (segmentId + 0.5) / textureSize.y
    );
    
    // Sample colors and interpolate
    vec4 color1 = texture2D(colorTexture, uv1);
    vec4 color2 = texture2D(colorTexture, uv2);
    float interpolationFactor = fract(clampedTime);
    
    vColor = mix(color1, color2, interpolationFactor);
    
    // Standard vertex transformation
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Fragment Shader Example #

varying vec4 vColor;

void main() {
    gl_FragColor = vColor;
}

• Time-based animation: Use THREE.Clock.getDelta() to calculate frame time increments. To advance one time slot every 2.5 seconds, update currentTime like this:

  const clock = new THREE.Clock();
  let currentTime = 0;
  
  function animate() {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      currentTime += delta / 2.5; // 2.5s per time slot
      material.uniforms.currentTime.value = currentTime;
      renderer.render(scene, camera);
  }
  

• Loop handling: The shader already uses mod() to loop back to day 0 after 7 days, so no extra CPU logic needed.

• Use THREE.Stats to track frame rate, memory usage, and draw calls.
• Use WebGL Inspector to verify texture memory usage and shader execution.
• Test on low-end devices early—mobile GPUs have stricter memory limits, so keep texture size and geometry complexity in check.

内容的提问来源于stack exchange，提问作者geozelot