Makio MeshLineA performant and customizable line solution for Three.js.

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.

A Modern MeshLine for Three.js ​

Makio MeshLine is built for the cases where THREE.Line is too limited and older MeshLine approaches feel dated. It gives you wide and thick lines for Three.js with gradients, dashes, textures, shadows, GPU-driven positions, and instancing, all wrapped in a small fluent API.

It is designed around Three.js TSL and WebGPURenderer, so the same line system works across WebGPU and WebGL2 backends while staying friendly to creative coding, interactive scenes, data visualization, and stylized rendering.

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 ​