Makio MeshLine
Makio MeshLine is a TSL‑powered line library for Three.js that delivers fast, easy to customizable thick lines with modern features.
It's built for WebGPURenderer and both Backends (WebGPU & WebGL)
Why a new MeshLine?
Back in 2015s, TheSpite released TheSpite's MeshLine, it opened up new possibilities for thick, styled lines in Three.js, allowing the creation of new effects & explore new horizons.
With Three.js evolving, there was a need for a modern Meshline version that leverages TSL power and improved the core concept.
Makio MeshLine is my vision of it : built to be performant, simple but flexible. It allows creators to focus on ideas rather than implementation details.
If you enjoy it or need special feature consider sponsoring me Makio64
Improvements
- Modernize the stack: first‑class TSL nodes and WebGPU pipeline
- Push performance: minimal uploads, smart attributes, large indices
- Instancing out of the box
- Expand flexibility: rich node hooks (position, width, color, opacity, dash), CPU or GPU positions, miter options, gradients, textures, dashes
- Simplify usage: a chainable, ergonomic Fluent API
- Handy helpers (
circlePositions,straightLine, etc.) - Sustain long‑term: ESM‑only, typed, tree‑shakeable
Thanks
A big shout-out to the community, @Floz for constant support, MrDoob for his feedbacks, Sunag for making & improving TSL everyday, Samsyyyy for early feedbacks, to TheSpite for pioneering MeshLine & all my Threejs friends!