A modern, performant TSL-powered meshline solution for Three.js

Support matrix

• Three.js: r178+
• Renderer: WebGPURenderer only
• Backends: WebGPU / WebGL2

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

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

pnpm add makio-meshline # or npm/yarn

MeshLine is published as the makio-meshline package. Use your favourite package manager.

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

// 1. Basic Three.js scaffolding ------------------------------------------------
const renderer = new THREE.WebGPURenderer()
document.body.appendChild(renderer.domElement)
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 100)
camera.position.set(0, 0, 4)

// 2. Create a line -------------------------------------------------------------
const line = new MeshLine({
  lines: circlePositions(64), // Float32Array helper – use your own points too
  closed: true,               // close the loop
  color: 0xff6600,            // hex or THREE.Color
  lineWidth: 0.4              // in pixels (when sizeAttenuation=false)
})
scene.add(line)

// 3. Render loop ---------------------------------------------------------------
function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

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)

Features includes : gradients, dashes, textures, variable width, instancing, gpu control or cpu batching, advanced mitter, tsl Hook, etc..

Performance: the MeshLine will upload to the gpu only whats needed to keep performance optimal, also supporting instancing and gpu movement.

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