Makio MeshLine

Appearance

API Reference ​

Makio MeshLine is built with creative coding requirements in mind: performance, customization, and simplicity, so you can focus on your creativity.

It's built for the future, using TSL and is compatible only with the new WebGPURenderer (But both backend: WebGPU/WebGL2)

MeshLine ​

High-level façade – the class you will use 99 % of the time.

ts
new MeshLine(options?: MeshLineOptions)

For convenience, use the fluent API below:

ts
new MeshLine().color(0xff0000).gradientColor(0xff00ff) // etc.

MeshLineGeometry ​

Low-level geometry builder – it's created internally by MeshLine; reach for it when you need to update or add extra buffer attributes.

ts
new MeshLineGeometry(options?: MeshLineGeometryOptions)

MeshLineNodeMaterial ​

Specialised NodeMaterial that understands the vertex attributes generated by MeshLineGeometry and renders them with:

  • Constant CSS-pixel thickness or scene-space projected thickness
  • Optional gradients, textures, dashes, etc..
  • Always-on clamped miter join (miterLimit tunes the cap) — pairs with the geometry's automatic sharp-bend smoothing
  • Optional TSL hooks to customize the vertex & fragment easily
ts
new MeshLineNodeMaterial(parameters?: MeshLineNodeMaterialParameters)

MeshLinePicker & MeshLinePickerHelper ​

GPU pixel-picker that identifies which line / instance is under the cursor — works with GPU-positioned, instanced, animated, and hook-driven lines because it reads what was rendered, not a CPU proxy.

ts
new MeshLinePicker(renderer, scene, camera, options?: MeshLinePickerOptions)

MeshLinePickerHelper is a Three.js-style visual helper (in the spirit of BoxHelper / SkeletonHelper) that overlays the picker's wide hit-zones on your scene, painted with a distinct hue per instance — useful for verifying coverage and debugging missed hits.

ts
const helper = new MeshLinePickerHelper(picker, { opacity: 0.45 })
scene.add(helper)
// in your render loop:
helper.update()

See the dedicated picking page for the full API.

Implementation Notes ​

  • Only the uniforms / attributes needed are created & uploaded to the GPU.
  • Many hooks are available for customizing line behavior and rendering
  • Instancing + gpu position will allow you to render thousands of lines like a breeze
  • You can also use batching for performant CPU-controlled animation or static lines
  • No runtime dependencies beyond three