@oh-just-another/curve-mesh

@oh-just-another/curve-mesh

L1 Loop-Blinn-style quadratic Bezier triangulation for resolution-independent WebGL2 curve rendering. Pure functions — no DOM, no Node API. No runtime dependencies.

Each curve segment becomes a triangle covering the convex hull of its control points; per-vertex (u, v, w) coordinates let a fragment shader decide which pixels fall inside the parabola, so curves stay crisp at any zoom without re-tessellation.

Install

pnpm add @oh-just-another/curve-mesh

Usage

import {
  quadraticToTriangle,
  cubicToTriangles,
  packCurveTriangles,
  type CurveTriangle,
} from "@oh-just-another/curve-mesh";

// One quadratic segment p0 → p2 with control p1 (null if colinear):
const tri = quadraticToTriangle({ x: 0, y: 0 }, { x: 50, y: 100 }, { x: 100, y: 0 });

// A cubic, subdivided into quadratic triangles:
const tris: readonly CurveTriangle[] = cubicToTriangles(
  { x: 0, y: 0 },
  { x: 30, y: 80 },
  { x: 70, y: 80 },
  { x: 100, y: 0 },
);

// Flatten into contiguous Float32Arrays for bufferData(STATIC_DRAW):
const { positions, uvs } = packCurveTriangles(tris);

The expected fragment-shader test is discard if (u*u - v) * w > 0.

Exports