extrude-polyline
Extrudes a 2D polyline with a given line thickness and the desired join/cap types. Tries to maintain visual consistency with HTML5 2D context stroking.
var polylne = 25 25 15 60 var stroke = thickness: 20 cap: 'square' join: 'bevel' miterLimit: 10 //builds a triangulated mesh from a polylinevar mesh = stroke
The returned mesh is a simplicial complex.
positions: xy xy cells: abc abc
variable thickness
Currently, to achieve variable thickness you can provide a mapThickness
function to the stroke instance before building. By default, it will simply return the current thickness.
//create a falloff, so the thickness tapers toward the start of the pathstroke { return thisthickness * index/pointslength-1}
demo
Git clone, npm install
, then npm run test
Usage
stroke = Extrusion([opt])
Creates a new path builder with the given settings:
thickness
the line thicknessmiterLimit
the limit before miters turn into bevels; default 10join
the join type, can be'miter'
or'bevel'
- default 'miter'cap
the cap type, can be'butt'
or'square'
- defalut 'butt'
mesh = stroke.build(points)
Builds a stroke with the specified list of 2D points. Returns a simplicial complex.
Roadmap
Some features that could be useful to add at a later point. PRs welcome.
- round corners
- round end caps
- use consistent winding order so we don't need to disable gl.CULLING
- connecting start and end points
- optimizations for flat arrays (Float32Array) ?
- optimizations for GC (pooling, etc)
- handling anti-aliasing
- degenerate triangles or some other form of supporting disconnected lines
- unify codebase with polyline-normals
License
MIT, see LICENSE.md for details.