Makio MeshLine

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

• Supports: Three.js r178+, WebGPURenderer (WebGPU/WebGL2 backends)
• Features: gradients, dashes, textures, variable width, instancing, TSL hooks

Install

pnpm add makio-meshline

Quick Start

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

const renderer = new THREE.WebGPURenderer()
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 100)

const line = new MeshLine().configure({
  lines: circlePositions(64),
  closed: true,
  color: 0xff6600,
  lineWidth: 0.4
})
scene.add(line)

renderer.setAnimationLoop(() => renderer.render(scene, camera))

Documentation & Demos

• Docs: https://meshline.makio.io
• Live demos: https://meshline-demo.makio.io

License

MIT © David Ronai (Makio64)