- Tessellate not only polygons, but also quadratic Bezier curves, into a resolution independent form.
- Tessellate not only filled regions, but also straight/curve strokes.
- Holes and separated regions supported, with no need of explicit declaration.
- Without any post-processing, all necessary basic data for rendering by WebGL is ready in output.
- Reasonable degree of error tolerance.
Install using npm
npm install tesspathy
Then require it into any module
var Tesspathy = ;var tLoactions = /* ... */ tLabels = /* ... */;var tResult = Tesspathy;
To use Tesspathy from a browser, download the appropriate file(s) from the following:
- dist/tesspathy.js: uncompressed JS file
- dist/tesspathy.min.js: compressed JS file
- dist/tesspathy.min.js.map: source map file
And then add it as a script tag to your page
Input data of shape contours with one or multiple separated regions, zero or multiple holes, can be all passed in together, without explicit separation. The same for lines with one or multiple connected/disconnected strokes.
Tessellate one or multiple closed shapes (with zero or multiple holes possibly) defined by
Tesspathy.triangulateLine(locations, labels, lineStyle)
Tessellate one or multiple strokes defined by
Set the values to be used when generating the
fillCoordinates field of the output object of both
The meaning and usage of this
fillCoordinates is not defined in the scope of Tesspathy project. One possible usage is to pass it as another vertex attribute to shader program for certain rendering effects, such as resolution independent curve (live demo).
Get the current values used to generate the
fillCoordinates field of the output object.
Array of point locations, of the following form:
x0 y0 x1 y1 x2 y2 ... xN yN // 1st shape or linexN+1 yN+1 xN+2 yN+2 ... xN+M yN+M // 2nd shape or line... // more shapes or lines
- For each single closed shape (not line), the last point location must be the same with the first location.
- The order of point locations (clockwise or counterclockwise) is not restricted, but within a single
locationsarray, all the contours should be in the same order while all the holes should be in the reversed order.
Array of point labels to indicating
- the start of a new shape or line,
- normal point or control point(of Bezier curve).
// START = [Tesspathy.PATH_START], ANCHOR = [Tesspathy.PATH_ANCHOR], CONTROL = [Tesspathy.PATH_CONTROL];START ANCHOR CONTROL ... ANCHOR // 1st shape or lineSTART CONTROL ANCHOR ... ANCHOR // 2nd shape or line... // more shapes or lines
- For each single closed shape or line, the first label must be
STARTand the last must be
- The label of point with location
Object defining the line style used to render strokes, of the following form:
width: 20cap: 'round'join: 'round';
- The value of
widthwill be regarded as using the same length unit of
- By now, the only supported line join/cap is
Object defining the values to be used when generating the
fillCoordinates field of the output. For example:
straight: s: STRAIGHT_S t: STRAIGHT_Tout_anchor0: s: OUT_ANCHOR0_S t: OUT_ANCHOR0_Tout_control: s: OUT_CONTROL_S t: OUT_CONTROL_Tout_anchor1: s: OUT_ANCHOR1_S t: OUT_ANCHOR1_Tin_anchor0: s: IN_ANCHOR0_S t: IN_ANCHOR0_Tin_control: s: IN_CONTROL_S t: IN_CONTROL_Tin_anchor1: s: IN_ANCHOR1_S t: IN_ANCHOR1_T
The output of both
Tesspathy.triangulateLine will be an Object of the following form:
triangleLocations: x0 y0 x1 y1 ... xK yKfillCoordinates: s0 t0 s1 t1 ... sK yKtriangleIndices: 0 1 2 1 3 4 ... K-5 K-3 K-2
This output can be used directly by WebGL. For example:
...var tPosition = gl;gl;gl;var tCoord = gl;gl;gl;gl;gl;
Thus, if you set your GL status and matrix uniform(s) correctly, and write your shaders (especially fragment shader) well, you will see your shapes or lines defined in vector form being rendered by using WebGL. If there is any problem, please first have a look at the live demo provided.
- Shapes with self-crossing contours will result in undefined behaviour.
- By now, the only supported curve type is quadratic Bezier curve.
We use GitHub issues to track requests and public bugs. Please ensure your description is clear and has sufficient instructions to be able to reproduce the issue.
Copyright © 2015 Guangyao Liu / GREE, Inc.
Licensed under the MIT License.