Performance Guide

Makio MeshLine uses TSL core for efficient GPU rendering, supporting both WebGPU and WebGL2 backends.

The core approach minimizes overhead by generating only necessary vertex attributes and uniforms based on active features, like skipping UVs if no textures are used.

It also supports Instancing and optimized CPU batching.

Include Optimizations

• Selective Attributes: Only creates buffers for what's needed (e.g., no 'previous/next' for GPU-driven positions).
• Instancing: Smaller footprint & one drawcall + custom behavior by instance.
• Batching: Draw multiple lines in one call by passing an array to lines.
• CPU->GPU Fast Updates: setPositions() modifies existing buffers in-place without recreation. Pass true as the second argument when movement changes bounds enough for frustum culling to matter.
• Miter Clamp + Optional Corner Smoothing: The shader miter is always on (no branch cost, simpler than the old opt-in path). For static sharp polylines, opt into smoothSharpBends to split near-hairpin corners on the CPU before they reach the shader. Leave it off for dynamic lines or custom per-vertex attributes that need stable topology.

Best Practices

• Use Instancing when all your lines have the same number of segments.
• Use Float32Array for initial positions to avoid conversions.
• Reuse arrays in hot loops to reduce GC pressure.
• Call dispose() on unused lines to free GPU memory.
• For massive repeated lines, combine gpuPositionNode with instancing to skip CPU position uploads.
• For picking or hover, set raycaster.params.Line.firstHitOnly = true when you only need the nearest hit.
• Test on target devices—WebGPU often yields 2x speedup over WebGL.

Follow these for smooth 120FPS even with thousands of segments!