Makio MeshLine

A modern MeshLine library for Three.js wide lines, gradients, dashes, textures, shadows, GPU positions, and instancing.

Makio MeshLine is built for creative coding, interactive trails, data visualization, and stylized rendering on top of Three.js WebGPURenderer. It gives you a small fluent API for wide and thick lines, while keeping TSL hooks available when you need custom GPU behavior.

• TSL-powered — Built with Three.js Shading Language for maximum GPU performance
• WebGPU & WebGL2 — Works with both backends via WebGPURenderer
• Instancing — Render thousands of lines with a single draw call
• 14 GPU hooks — Customize position, color, width, opacity, dash, UV and more in the shader
• Gradients, dashes, textures — Built-in support for common line styles
• Variable width — Per-vertex width control via callback or GPU hook
• Line joins — Always-on clamped miter with automatic CPU-side corner smoothing for very sharp polylines (opt-out available)
• Shadow support — Cast shadows from lines
• GPU positions — Procedural line generation entirely on the GPU
• Tree-shakeable — ESM-only, sideEffects: false, import only what you need
• TypeScript — Full type definitions included
• Zero dependencies — Only Three.js as peer dependency

• Replace older THREE.MeshLine style workflows with a WebGPU-ready Three.js line renderer.
• Use the same API for one-off wide lines, repeated batches, or thousands of instanced lines.
• Keep CPU uploads low with setPositions(), batching, and GPU position nodes.
• Add styling and motion with gradients, dashes, textures, vertex colors, opacity, and TSL hooks instead of maintaining multiple line systems.

• Interactive cursor trails, drawing tools, and paint-like strokes
• Motion design, sci-fi wireframes, stylized ropes, and decorative outlines
• Data visualization, flow fields, and parametric curves
• Large repeated scenes such as vegetation, hair-like structures, or wire sculptures

See it in action with examples on https://meshline-demo.makio.io and check out the code here : demo/src/demos

pnpm add makio-meshline # or npm/yarn

import * as THREE from 'three/webgpu'
import { MeshLine, circlePositions } from 'makio-meshline'

// 1. Basic Three.js scaffolding ------------------------------------------------
const renderer = new THREE.WebGPURenderer()
renderer.setSize(innerWidth, innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100)
camera.position.z = 4

// 2. Create a line (fluent API) ------------------------------------------------
const line = new MeshLine()
  .lines(circlePositions(64), true) // 64-segment circle, closed loop
  .color(0xff6600)                  // hex or THREE.Color
  .lineWidth(0.4)                   // scene-space width (sizeAttenuation on by default)

scene.add(line)

// 3. Render loop ---------------------------------------------------------------
renderer.setAnimationLoop(() => renderer.render(scene, camera))

Use Makio MeshLine with React Three Fiber or Vue. Each example ships a declarative <MeshLine> wrapper and is ready to open on StackBlitz.

import { Canvas } from '@react-three/fiber'
import { WebGPURenderer } from 'three/webgpu'
import { circlePositions } from 'makio-meshline'
import { MeshLine } from './MeshLine' // wrapper from the example

export default function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 10] }}
      gl={async ( props ) => {
        const renderer = new WebGPURenderer( { ...props, antialias: true } )
        await renderer.init()
        return renderer
      }}
    >
      <MeshLine points={circlePositions( 64, 3 )} closed lineWidth={0.2} color={0xff8800} gradientColor={0xffffff} />
    </Canvas>
  )
}

Full example & wrapper source: examples/react-three-fiber/ — docs

<MeshLine
  v-if="group"
  :parent="group"
  :points="circlePositions( 64, 3 )"
  closed
  :line-width="0.2"
  :color="0xff8800"
  :gradient-color="0xffffff"
/>

Full example & wrapper source: examples/vue/ — docs

Check out the documentation site for detailed instructions, API reference, and examples.

• Why Makio MeshLine
• Getting started
• API overview
• Common Patterns
• Advanced Patterns
• Performance tips
• Helpers functions
• GPU picking & debug helper
• React Three Fiber integration
• Vue integration

The concept was to build a performant but easily customizable MeshLine with TSL for WebGPURenderer, allowing the devs to focus on creativity instead of implementation. (read more about it)

If you've been using spite/THREE.MeshLine, makio-meshline is a modern replacement built for Three.js WebGPU era. The API is different (fluent/chainable), but the concepts are the same. Check the documentation for migration guidance.

A big thanks to the community, especially to my friend @Floz for his constant support, Samsyyyy for the early tests & feedbacks, to TheSpite for making the first version i knew of MeshLine, to MrDoob and Sunag for Three.js and TSL!

• Matt DesLauriers's drawing-lines-is-hard
• Nathan Gordon's crafting-stylised-mouse-trails-with-ogl

Bug reports, feature requests and PRs are welcome. Please open an issue first to discuss major changes.

This project is licensed under the MIT License .

Made with ❤️ by Makio64