Makio MeshLineWide lines for Three.js.

A Modern MeshLine for Three.js ​

Makio MeshLine is an open-source Three.js line library for drawing wide and thick lines with gradients, dashes, textures, and shadows. Its MeshLine API supports GPU-driven positions and instancing for animated trails, creative coding, and data visualization.

Built with Three.js Shading Language (TSL), it runs on WebGPURenderer with WebGPU and WebGL2 backends.

Demo Video ​

<!-- HEVC/H.265 for iOS/Safari (better compression than H.264) -->
<source media="(max-width: 768px)" src="/meshline-teaser-mobile-hevc.mp4" type="video/mp4; codecs=hevc">
<source src="/meshline-teaser-hevc.mp4" type="video/mp4; codecs=hevc">

<!-- H.264 fallback for older browsers -->
<source media="(max-width: 768px)" src="/meshline-teaser-mobile.mp4" type="video/mp4">
<source src="/meshline-teaser.mp4" type="video/mp4">

Your browser does not support the video tag.

What You Can Build ​

• Cursor trails and draw-on-screen tools
• GPU-driven circles, waves, and parametric curves
• Instanced vegetation, ropes, and wire sculptures
• Gradient, dashed, and textured lines for motion design
• Shadow-casting line meshes for stylized environments

Why It Stands Out ​

• TSL-powered hooks let you customize position, width, color, opacity, UVs, dashes, and discard logic directly in the shader.
• Instancing and batched lines keep draw calls low when one line turns into hundreds or thousands.
• GPU position nodes let you animate lines without pushing vertex updates from the CPU every frame.
• The API stays small enough to learn quickly, with helpers like circlePositions, squarePositions, sineWavePositions, and straightLine.

Start Here ​

• Read Getting Started for installation and the first line setup.
• Open Basic Examples to compare width, dashes, gradients, textures, opacity, and size attenuation side by side.
• Use the Interactive Sandbox to tune a line visually and export code.
• Browse the API Reference once you want hooks, joins, helpers, instancing, or GPU positions.

Feature Snapshot ​