webgl2-sdf 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -0
- package/node/bezier/bezier-curves-to-line-segs.d.ts +10 -0
- package/node/bezier/eval-de-casteljau.d.ts +17 -0
- package/node/bezier/from-to/from-to-2.d.ts +12 -0
- package/node/bezier/from-to/from-to-3.d.ts +12 -0
- package/node/bezier/from-to/from-to.d.ts +10 -0
- package/node/bezier/is-cubic-obtuse.d.ts +11 -0
- package/node/bezier/is-quad-obtuse.d.ts +11 -0
- package/node/bezier/is-really-point.d.ts +9 -0
- package/node/bezier/split-by-deviation-from-straight-line-cubic.d.ts +20 -0
- package/node/bezier/split-by-deviation-from-straight-line-quad.d.ts +11 -0
- package/node/bezier/split-into-line-segments.d.ts +10 -0
- package/node/debug-shaders.d.ts +9 -0
- package/node/generate-sdf.d.ts +18 -0
- package/node/helpers/calc-circs.d.ts +11 -0
- package/node/helpers/clip-line-segment-to-grid.d.ts +14 -0
- package/node/helpers/clip-line-segment-to-strips.d.ts +13 -0
- package/node/helpers/create-empty-grid.d.ts +8 -0
- package/node/helpers/create-empty-strips.d.ts +7 -0
- package/node/helpers/distance-seg-to-p.d.ts +5 -0
- package/node/helpers/find-close-cells.d.ts +3 -0
- package/node/helpers/find-crossing-cells.d.ts +3 -0
- package/node/helpers/get-distance-to-line-function.d.ts +10 -0
- package/node/helpers/jump-idx.d.ts +2 -0
- package/node/helpers/map-to-viewbox.d.ts +2 -0
- package/node/helpers/seg-box-x.d.ts +10 -0
- package/node/helpers/seg-strip-x.d.ts +9 -0
- package/node/index.d.ts +1 -0
- package/node/main-program.d.ts +4 -0
- package/node/max-aspect-ratio-before-stretch.d.ts +2 -0
- package/node/prepare-buffers.d.ts +10 -0
- package/node/row-count.d.ts +2 -0
- package/node/shaders/main.fragment.d.ts +2 -0
- package/node/shaders/main.vertex.d.ts +2 -0
- package/node/svg/get-beziers-from-raw-paths.d.ts +12 -0
- package/node/svg/get-paths-from-str.d.ts +9 -0
- package/node/svg/path-data-polyfill/parse-number.d.ts +10 -0
- package/node/svg/path-data-polyfill/parse-path-data-string.d.ts +9 -0
- package/node/svg/path-data-polyfill/source.d.ts +19 -0
- package/node/svg/path-segment/c.d.ts +19 -0
- package/node/svg/path-segment/h.d.ts +15 -0
- package/node/svg/path-segment/l.d.ts +16 -0
- package/node/svg/path-segment/q.d.ts +16 -0
- package/node/svg/path-segment/s.d.ts +20 -0
- package/node/svg/path-segment/t.d.ts +18 -0
- package/node/svg/path-segment/v.d.ts +15 -0
- package/node/svg/path-segment/z.d.ts +13 -0
- package/node/svg/path-state.d.ts +11 -0
- package/node/tex-width.d.ts +11 -0
- package/node/types/attribute.d.ts +6 -0
- package/node/types/cell.d.ts +18 -0
- package/node/types/gl-context.d.ts +28 -0
- package/node/types/gl-type.d.ts +2 -0
- package/node/types/gl-usage.d.ts +2 -0
- package/node/types/program.d.ts +16 -0
- package/node/types/strip.d.ts +8 -0
- package/node/types/texture.d.ts +4 -0
- package/node/utils/calc-circs.d.ts +11 -0
- package/node/utils/clip-line-segment-to-grid.d.ts +14 -0
- package/node/utils/clip-line-segment-to-strips.d.ts +13 -0
- package/node/utils/create-empty-grid.d.ts +8 -0
- package/node/utils/create-empty-strips.d.ts +7 -0
- package/node/utils/distance-seg-to-p.d.ts +5 -0
- package/node/utils/find-close-cells.d.ts +3 -0
- package/node/utils/find-crossing-cells.d.ts +3 -0
- package/node/utils/get-distance-to-line-function.d.ts +10 -0
- package/node/utils/jump-idx.d.ts +2 -0
- package/node/utils/map-to-viewbox.d.ts +2 -0
- package/node/utils/seg-box-x.d.ts +10 -0
- package/node/utils/seg-strip-x.d.ts +9 -0
- package/node/vector/dot.d.ts +8 -0
- package/node/vector/from-to-vec.d.ts +8 -0
- package/node/vector/len.d.ts +6 -0
- package/node/webgl-utils/compile-shader.d.ts +2 -0
- package/node/webgl-utils/get-gl-context.d.ts +10 -0
- package/node/webgl-utils/set-attribute.d.ts +15 -0
- package/node/webgl-utils/set-uniform-block.d.ts +9 -0
- package/node/webgl-utils/set-uniform.d.ts +4 -0
- package/node/webgl-utils/uniform-block.d.ts +6 -0
- package/node/webgl-utils/uniform-type.d.ts +2 -0
- package/node/webgl-utils/use-program.d.ts +17 -0
- package/node/webgl-utils/use-texture.d.ts +9 -0
- package/node/webgl2.d.ts +2 -0
- package/package.json +56 -0
- package/src/bezier/bezier-curves-to-line-segs.ts +39 -0
- package/src/bezier/eval-de-casteljau.ts +78 -0
- package/src/bezier/from-to/from-to-2.ts +159 -0
- package/src/bezier/from-to/from-to-3.ts +176 -0
- package/src/bezier/from-to/from-to.ts +30 -0
- package/src/bezier/is-cubic-obtuse.ts +31 -0
- package/src/bezier/is-quad-obtuse.ts +26 -0
- package/src/bezier/is-really-point.ts +25 -0
- package/src/bezier/split-by-deviation-from-straight-line-cubic.ts +109 -0
- package/src/bezier/split-by-deviation-from-straight-line-quad.ts +66 -0
- package/src/bezier/split-into-line-segments.ts +39 -0
- package/src/debug-shaders.ts +38 -0
- package/src/generate-sdf.ts +91 -0
- package/src/index.ts +2 -0
- package/src/main-program.ts +160 -0
- package/src/max-aspect-ratio-before-stretch.ts +5 -0
- package/src/prepare-buffers.ts +149 -0
- package/src/row-count.ts +6 -0
- package/src/shaders/main.fragment.ts +157 -0
- package/src/shaders/main.vertex.ts +55 -0
- package/src/svg/get-beziers-from-raw-paths.ts +112 -0
- package/src/svg/get-paths-from-str.ts +19 -0
- package/src/svg/path-data-polyfill/parse-number.ts +138 -0
- package/src/svg/path-data-polyfill/parse-path-data-string.ts +26 -0
- package/src/svg/path-data-polyfill/source.ts +176 -0
- package/src/svg/path-segment/c.ts +34 -0
- package/src/svg/path-segment/h.ts +28 -0
- package/src/svg/path-segment/l.ts +30 -0
- package/src/svg/path-segment/q.ts +30 -0
- package/src/svg/path-segment/s.ts +40 -0
- package/src/svg/path-segment/t.ts +35 -0
- package/src/svg/path-segment/v.ts +28 -0
- package/src/svg/path-segment/z.ts +27 -0
- package/src/svg/path-state.ts +15 -0
- package/src/tex-width.ts +14 -0
- package/src/types/attribute.ts +9 -0
- package/src/types/cell.ts +21 -0
- package/src/types/gl-context.ts +28 -0
- package/src/types/gl-type.ts +16 -0
- package/src/types/gl-usage.ts +14 -0
- package/src/types/program.ts +14 -0
- package/src/types/strip.ts +11 -0
- package/src/types/texture.ts +7 -0
- package/src/types/typed-array.ts +16 -0
- package/src/utils/calc-circs.ts +129 -0
- package/src/utils/clip-line-segment-to-grid.ts +133 -0
- package/src/utils/clip-line-segment-to-strips.ts +196 -0
- package/src/utils/create-empty-grid.ts +32 -0
- package/src/utils/create-empty-strips.ts +21 -0
- package/src/utils/distance-seg-to-p.ts +50 -0
- package/src/utils/find-close-cells.ts +171 -0
- package/src/utils/find-crossing-cells.ts +40 -0
- package/src/utils/get-distance-to-line-function.ts +59 -0
- package/src/utils/is-point-in-box.ts +16 -0
- package/src/utils/jump-idx.ts +107 -0
- package/src/utils/map-to-viewbox.ts +41 -0
- package/src/utils/path.ts +137 -0
- package/src/utils/seg-box-x.ts +84 -0
- package/src/utils/seg-strip-x.ts +72 -0
- package/src/utils/sum.ts +13 -0
- package/src/vector/dot.ts +13 -0
- package/src/vector/from-to-vec.ts +13 -0
- package/src/vector/len.ts +11 -0
- package/src/webgl-utils/compile-shader.ts +15 -0
- package/src/webgl-utils/get-gl-context.ts +61 -0
- package/src/webgl-utils/set-attribute.ts +74 -0
- package/src/webgl-utils/set-uniform-block.ts +45 -0
- package/src/webgl-utils/set-uniform.ts +24 -0
- package/src/webgl-utils/uniform-block.ts +9 -0
- package/src/webgl-utils/uniform-type.ts +10 -0
- package/src/webgl-utils/use-program.ts +48 -0
- package/src/webgl-utils/use-texture.ts +34 -0
package/README.md
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
WORK IN PROGRESS!!
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
A library to generate the signed distance transform (sdf) of an array of bezier
|
|
6
|
+
curves, typically some some closed shape(s).
|
|
7
|
+
|
|
8
|
+
* *dozens of times faster* than ()[webgl-sdf-generator] for real-time (60 fps)
|
|
9
|
+
applications
|
|
10
|
+
|
|
11
|
+
* drop-in replacement for ()[webgl-sdf-generator] with some additional options
|
|
12
|
+
|
|
13
|
+
The bezier curves can be given in raw form or as an svg string (except arcs are
|
|
14
|
+
not supported)
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Bug reports, pull requests and ⭐⭐⭐⭐⭐s are welcome and appreciated!
|
|
21
|
+
|
|
22
|
+
## Features
|
|
23
|
+
|
|
24
|
+
* **Fast** Special care has been taken to ensure each function performs well not
|
|
25
|
+
only in theory but also in practice.
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
```cli
|
|
30
|
+
npm install flo-bezier3
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
|
|
34
|
+
It can be used in `Node.js` or in a browser.
|
|
35
|
+
|
|
36
|
+
Additionally, self-contained `ECMAScript Module` (ESM) files `index.js` and
|
|
37
|
+
`index.min.js` in the `./browser` folder are provided.
|
|
38
|
+
|
|
39
|
+
## Usage
|
|
40
|
+
|
|
41
|
+
Below are usage examples for some common environments.
|
|
42
|
+
|
|
43
|
+
Please see the [docs](https://florissteenkamp.github.io/FloBezier) for a complete
|
|
44
|
+
list of available functions.
|
|
45
|
+
|
|
46
|
+
### Node.js
|
|
47
|
+
```js
|
|
48
|
+
import { fitQuadsToCubic } from 'flo-bezier3';
|
|
49
|
+
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Browsers - directly, without a bundler, using the pre-bundled minified .js file
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
```html
|
|
56
|
+
<!doctype html>
|
|
57
|
+
|
|
58
|
+
<html lang="en">
|
|
59
|
+
<head>
|
|
60
|
+
<script type="module">
|
|
61
|
+
import { fitQuadsToCubic } from "./node_modules/flo-bezier3/browser/index.min.js";
|
|
62
|
+
|
|
63
|
+
// some cubic bezier curve given by an array of its control points
|
|
64
|
+
const cubic = [[1, 1], [5.125, 8], [15.375, 0.875], [13.6875, 7.71875]];
|
|
65
|
+
const quads = fitQuadsToCubic(cubic, 0.1); //=> [[[1, 1], [2.617431640625, 3.5152587890625], ...
|
|
66
|
+
|
|
67
|
+
if (quads.length === 4) {
|
|
68
|
+
console.log('success! 😁'); // we should get to here!
|
|
69
|
+
} else {
|
|
70
|
+
console.log('failure! 😥'); // ...and not here
|
|
71
|
+
}
|
|
72
|
+
</script>
|
|
73
|
+
</head>
|
|
74
|
+
|
|
75
|
+
<body>Check the console.</body>
|
|
76
|
+
|
|
77
|
+
</html>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Bundlers (Webpack, Rollup, ...)
|
|
81
|
+
|
|
82
|
+
Webpack will be taken as an example here.
|
|
83
|
+
|
|
84
|
+
Since your webpack config file might still use `CommonJS` you must rename
|
|
85
|
+
`webpack.config.js` to `webpack.config.cjs`.
|
|
86
|
+
|
|
87
|
+
Follow this [guide](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c#how-can-i-make-my-typescript-project-output-esm).
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
## License
|
|
91
|
+
|
|
92
|
+
The MIT License (MIT)
|
|
93
|
+
|
|
94
|
+
Copyright © 2026 Floris Steenkamp
|
|
95
|
+
|
|
96
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
97
|
+
|
|
98
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
99
|
+
|
|
100
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns an array of line segments that is an approximation of the given
|
|
3
|
+
* bezier curves up to `PIXEL_ACCURACY` accuracy.
|
|
4
|
+
*
|
|
5
|
+
* @param bezierLoops
|
|
6
|
+
* @param resolution each bezier curve is split until its hausdorff distance
|
|
7
|
+
* from the line connecting it's endpoints are less than this value
|
|
8
|
+
*/
|
|
9
|
+
declare function bezierCurvesToLineSegs(bezierLoops: (number[][])[][], resolution: 0.5 | 1): number[][][];
|
|
10
|
+
export { bezierCurvesToLineSegs };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns the resulting point of evaluating the given bezier curve at the
|
|
3
|
+
* given parameter `t`.
|
|
4
|
+
*
|
|
5
|
+
* * uses [De Casteljau's algorithm](https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm)
|
|
6
|
+
* in double precision floating point arithmetic
|
|
7
|
+
*
|
|
8
|
+
* The resulting point `p` is returned as the pair `[x,y]`, where `x` and `y` are
|
|
9
|
+
* double precision floating point numbers.
|
|
10
|
+
*
|
|
11
|
+
* @param ps an order 1,2 or 3 bezier curve, e.g. `[[0,0],[1,1],[2,1],[2,0]]`
|
|
12
|
+
* @param t the parameter value where the bezier should be evaluated
|
|
13
|
+
*
|
|
14
|
+
* @doc mdx
|
|
15
|
+
**/
|
|
16
|
+
declare function evalDeCasteljau(ps: number[][], t: number): number[];
|
|
17
|
+
export { evalDeCasteljau };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a bezier curve that starts and ends at the given `t` parameters.
|
|
3
|
+
*
|
|
4
|
+
* @param ps a quadratic bezier curve given as an ordered array of its
|
|
5
|
+
* control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
|
|
6
|
+
* @param tS the `t` parameter where the resultant bezier should start
|
|
7
|
+
* @param tE the `t` parameter where the resultant bezier should end
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
declare function fromTo2(ps: number[][], tS: number, tE: number): number[][];
|
|
12
|
+
export { fromTo2 };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a bezier curve that starts and ends at the given t parameters.
|
|
3
|
+
*
|
|
4
|
+
* @param ps a cubic bezier curve given as an ordered array of its
|
|
5
|
+
* control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
|
|
6
|
+
* @param tS the `t` parameter where the resultant bezier should start
|
|
7
|
+
* @param tE the `t` parameter where the resultant bezier should end
|
|
8
|
+
*
|
|
9
|
+
* @internal
|
|
10
|
+
*/
|
|
11
|
+
declare function fromTo3(ps: number[][], tS: number, tE: number): number[][];
|
|
12
|
+
export { fromTo3 };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a bezier curve that starts and ends at the given `t` parameters.
|
|
3
|
+
*
|
|
4
|
+
* @param ps an order 2 or 3 bezier curve given as an ordered array of its
|
|
5
|
+
* control point coordinates, e.g. `[[0,0], [1,1], [2,1], [2,0]]`
|
|
6
|
+
* @param tS the `t` parameter where the resultant bezier should start
|
|
7
|
+
* @param tE the `t` parameter where the resultant bezier should end
|
|
8
|
+
*/
|
|
9
|
+
declare function fromTo(ps: number[][], tS: number, tE: number): number[][];
|
|
10
|
+
export { fromTo };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns `true` if the given cubic bezier is obtuse, `false` otherwise (i.e.
|
|
3
|
+
* `false` if acute).
|
|
4
|
+
*
|
|
5
|
+
* Obtuse here is defined as follows: let the cubic form triangles through its
|
|
6
|
+
* control points P0, P1, P3 where P0 and P3 are the endpoints. If both interior
|
|
7
|
+
* angles ∠P0 and ∠P2 are <= 90 degrees then the cubic is considered acute,
|
|
8
|
+
* otherwise it is considered obtuse. The same should be true for P0, P2, P3.
|
|
9
|
+
*/
|
|
10
|
+
declare function isCubicObtuse(ps: number[][]): boolean;
|
|
11
|
+
export { isCubicObtuse };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns `true` if the given quadratic bezier is obtuse, `false` otherwise (i.e.
|
|
3
|
+
* `false` if acute).
|
|
4
|
+
*
|
|
5
|
+
* Obtuse here is defined as follows: let the quad form a triangle through its
|
|
6
|
+
* control points P0, P1, P2 where P0 and P2 are the endpoints. If both interior
|
|
7
|
+
* angles ∠P0 and ∠P2 are <= 90 degrees then the quad is considered acute,
|
|
8
|
+
* otherwise it is considered obtuse.
|
|
9
|
+
*/
|
|
10
|
+
declare function isQuadObtuse(ps: number[][]): boolean;
|
|
11
|
+
export { isQuadObtuse };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns `true` if the given bezier curve has all control points coincident,
|
|
3
|
+
* `false` otherwise.
|
|
4
|
+
*
|
|
5
|
+
* @param ps an order 0,1,2 or 3 bezier curve given as an array of its control
|
|
6
|
+
* points, e.g. `[[0,0],[1,1],[2,1],[2,0]]`
|
|
7
|
+
*/
|
|
8
|
+
declare function isReallyPoint(ps: number[][]): boolean;
|
|
9
|
+
export { isReallyPoint };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Split the given cubic bezier curve into pieces (given as an array of
|
|
3
|
+
* parameter `t` values) such that each piece is guaranteed to deviate less
|
|
4
|
+
* than `maxD` from a straigh line.
|
|
5
|
+
*
|
|
6
|
+
* * a crude method is employed (for efficiency) by noting that the hausdorff
|
|
7
|
+
* distance between a cubic and the line segment connecting its endpoints is at
|
|
8
|
+
* most 3/4 the distance of the max distance between any control point and the
|
|
9
|
+
* line segment if the control points are on the same side of the line segment
|
|
10
|
+
* and at most 4/9 if they are on opposite sides AND (in both cases) the cubic
|
|
11
|
+
* is not obtuse, i.e. the inner control points are not outside the strip formed
|
|
12
|
+
* by the two lines passing through the endpoint control points normal to the
|
|
13
|
+
* line segment connecting the endpoint control points.
|
|
14
|
+
*
|
|
15
|
+
* @param ps an order 2 bezier curve given as an ordered array of its
|
|
16
|
+
* control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
|
|
17
|
+
* @param maxD
|
|
18
|
+
*/
|
|
19
|
+
declare function splitByDeviationFromStraighLine_Cubic_Crude(ps: number[][], maxD: number): number[];
|
|
20
|
+
export { splitByDeviationFromStraighLine_Cubic_Crude, };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Split the given quadratic bezier curve into pieces (given as an array of
|
|
3
|
+
* parameter `t` values) such that each piece is guaranteed to deviate less
|
|
4
|
+
* than `maxD` from a straigh line.
|
|
5
|
+
*
|
|
6
|
+
* @param ps an order 2 bezier curve given as an ordered array of its
|
|
7
|
+
* control point coordinates, e.g. `[[0,0], [1,1], [2,1]]`
|
|
8
|
+
* @param maxD
|
|
9
|
+
*/
|
|
10
|
+
declare function splitByDeviationFromStraighLine_Quad(ps: number[][], maxD: number): number[];
|
|
11
|
+
export { splitByDeviationFromStraighLine_Quad };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns the result of splitting the given bezier curve into straight line
|
|
3
|
+
* segments up to `maxDeviation`
|
|
4
|
+
*
|
|
5
|
+
*
|
|
6
|
+
* @param ps
|
|
7
|
+
* @param maxDeviation maximum deviation from straight line
|
|
8
|
+
*/
|
|
9
|
+
declare function splitIntoLineSegments(ps: number[][], maxDeviation: number): number[][][];
|
|
10
|
+
export { splitIntoLineSegments };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* @param gl
|
|
4
|
+
* @param type `gl.VERTEX_SHADER | gl.FRAGMENT_SHADER`
|
|
5
|
+
* @param shaderStr
|
|
6
|
+
*/
|
|
7
|
+
declare function debugGlsl(gl: WebGL2RenderingContext, type: typeof gl.VERTEX_SHADER | typeof gl.FRAGMENT_SHADER, shaderStr: string): void;
|
|
8
|
+
declare function debugShaders(gl: WebGL2RenderingContext): void;
|
|
9
|
+
export { debugShaders, debugGlsl };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* @param gl
|
|
4
|
+
* @param psss
|
|
5
|
+
* @param width
|
|
6
|
+
* @param height
|
|
7
|
+
* @param viewbox
|
|
8
|
+
* @param maxDistance
|
|
9
|
+
* @param sdfExponent
|
|
10
|
+
* @param inclInside
|
|
11
|
+
* @param inclOutside
|
|
12
|
+
* @param x
|
|
13
|
+
* @param y
|
|
14
|
+
* @param channel
|
|
15
|
+
* @param resolution
|
|
16
|
+
*/
|
|
17
|
+
declare function generateIntoFramebuffer(gl: WebGL2RenderingContext, psss: (number[][])[][] | string, width: number, height: number, viewbox: [number, number, number, number], maxDistance: number, sdfExponent?: number, inclInside?: boolean, inclOutside?: boolean, x?: number, y?: number, channel?: number, resolution?: 0.5 | 1): void;
|
|
18
|
+
export { generateIntoFramebuffer };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Represents the max distance (in cell side length units) from one corner of
|
|
3
|
+
* the viewbox to the opposing corner.
|
|
4
|
+
*/
|
|
5
|
+
declare const circsCache: Range[];
|
|
6
|
+
interface Range {
|
|
7
|
+
readonly from: number;
|
|
8
|
+
readonly u: number;
|
|
9
|
+
readonly v: number;
|
|
10
|
+
}
|
|
11
|
+
export { circsCache };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { Cell } from "../types/cell";
|
|
2
|
+
/**
|
|
3
|
+
* Clips a line segment to grid boundaries and returns multiple segments.
|
|
4
|
+
*
|
|
5
|
+
* * modifies grid by adding line segments to cells
|
|
6
|
+
* * size/count *must* be a power of 2
|
|
7
|
+
*
|
|
8
|
+
* @param count the number of grid cells per dimension
|
|
9
|
+
* @param width
|
|
10
|
+
* @param height
|
|
11
|
+
* @param seg the line segment (array of 2 points)
|
|
12
|
+
*/
|
|
13
|
+
declare function clipLineSegmentToGrid(grid: Cell[][], width: number, height: number, colCount: number, cellSize: number, seg: number[][], padCount: number): void;
|
|
14
|
+
export { clipLineSegmentToGrid };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Strip } from "../types/strip";
|
|
2
|
+
/**
|
|
3
|
+
* Clips a line segment to strip boundaries and returns multiple segments.
|
|
4
|
+
*
|
|
5
|
+
* * modifies strips by adding line segments to each strip
|
|
6
|
+
* * size/count *must* be a power of 2
|
|
7
|
+
*
|
|
8
|
+
* @param count the number of strips
|
|
9
|
+
* @param height the height of a strip
|
|
10
|
+
* @param seg the line segment (array of 2 points)
|
|
11
|
+
*/
|
|
12
|
+
declare function clipLineSegmentToStrips(strips: Strip[], height: number, seg: number[][]): void;
|
|
13
|
+
export { clipLineSegmentToStrips };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns a function that returns the signed distance to the given line from
|
|
3
|
+
* the given point.
|
|
4
|
+
*
|
|
5
|
+
* @param pS a point on the line
|
|
6
|
+
* @param pE a different point on the line; if `pS` is the same as `pE` then
|
|
7
|
+
* the distance to the point `pS` (or `pE`) will be returned.
|
|
8
|
+
*/
|
|
9
|
+
declare function getDistanceToLineFunction(pS: number[], pE: number[]): (p: number[]) => number;
|
|
10
|
+
export { getDistanceToLineFunction };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns the ordered (by t-value) intersection points of the given line
|
|
3
|
+
* segment and square.
|
|
4
|
+
*
|
|
5
|
+
* @param seg a line segment given by its endpoints
|
|
6
|
+
* @param square a square given by its two opposing corner points, min-x, min-y
|
|
7
|
+
* first
|
|
8
|
+
*/
|
|
9
|
+
declare function segBoxX(seg: number[][], square: number[][]): number[][];
|
|
10
|
+
export { segBoxX };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns the ordered (by t-value) intersection points of the given line
|
|
3
|
+
* segment and half-open strip.
|
|
4
|
+
*
|
|
5
|
+
* @param seg a line segment given by its endpoints
|
|
6
|
+
* @param strip a half-open strip given by max-x, min-y, max-y
|
|
7
|
+
*/
|
|
8
|
+
declare function segStripX(seg: number[][], strip: number[]): number[][];
|
|
9
|
+
export { segStripX };
|
package/node/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { generateIntoFramebuffer } from './generate-sdf.js';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Program } from './types/program.js';
|
|
2
|
+
import { GlContext } from './types/gl-context.js';
|
|
3
|
+
declare function mainProgram(glContext: GlContext, programMain: Program, resolution: 0.5 | 1, psss: number[][][][], viewbox: [number, number, number, number], maxDistance: number, sdfExponent: number | undefined, width: number, height: number, colCount: number, cellSize: number, inclInside: boolean, inclOutside: boolean, padCount: number, stretch: number): void;
|
|
4
|
+
export { mainProgram };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare function prepareBuffers(psss: (number[][])[][], width: number, height: number, colCount: number, cellSize: number, maxDistance: number, padCount: number, resolution?: 0.5 | 1, viewbox?: [number, number, number, number], stretch?: number): {
|
|
2
|
+
lineSegPtCoords_Arr: Float32Array<ArrayBuffer>;
|
|
3
|
+
segIdxs_PerCell_Range_Arr: Int32Array<ArrayBuffer>;
|
|
4
|
+
closeCellIdxs_PerCell_Arr: Int32Array<ArrayBuffer>;
|
|
5
|
+
closeCellIdxs_PerCell_Range_Arr: Int32Array<ArrayBuffer>;
|
|
6
|
+
crossCellIdxs_PerCell_Arr: Int32Array<ArrayBuffer>;
|
|
7
|
+
crossCellIdxs_perCell_Range_Arr: Int32Array<ArrayBuffer>;
|
|
8
|
+
segIdxs_PerStrip_Range_Arr: Int32Array<ArrayBuffer>;
|
|
9
|
+
};
|
|
10
|
+
export { prepareBuffers };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
declare const main_Vertex = "#version 300 es\n\nprecision highp float;\n\nuniform vec2 uWidthHeight;\nuniform float uStretch;\nin vec2 aUV;\nin ivec2 aCloseCellIdxRangePerCell;\nin ivec2 aCrossIdxRangePerCell;\nout vec2 vXY;\nflat out int instanceId;\nflat out ivec2 closeCellIdxRange;\nflat out ivec2 crossCellIdxRange;\n\n\nvoid main() {\n instanceId = gl_InstanceID;\n closeCellIdxRange = aCloseCellIdxRangePerCell;\n crossCellIdxRange = aCrossIdxRangePerCell;\n\n // drawn column-by-column\n float i = float(instanceId / 32); // column index\n float j = float(instanceId % 32); // row index\n\n vec2 trans = vec2(\n i / float(32),\n j / float(32)\n );\n\n vec2 uv = aUV + trans;\n\n float width = uWidthHeight.x;\n float height = uWidthHeight.y;\n\n vXY = vec2(\n height * uv.x,\n height * uv.y\n );\n\n float aspectRatio = width / height;\n\n gl_Position = vec4(\n vec2(\n (2.0*(uv.x / aspectRatio) - 1.0),\n 2.0*uv.y - 1.0\n ),\n 0.0, 1.0\n );\n}\n";
|
|
2
|
+
export { main_Vertex };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns order 1, 2 and 3 beziers from the given SVG DOM element. If a path
|
|
3
|
+
* data tag is not "C, Q or L, etc", i.e. if it is not an absolute bezier
|
|
4
|
+
* coordinate then it is converted into one.
|
|
5
|
+
*
|
|
6
|
+
* @param paths An SVG element
|
|
7
|
+
*/
|
|
8
|
+
declare function getBeziersFromRawPaths(paths: {
|
|
9
|
+
type: string;
|
|
10
|
+
values: number[];
|
|
11
|
+
}[]): number[][][][];
|
|
12
|
+
export { getBeziersFromRawPaths };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns an array of loops with each loop consisting of an array of beziers
|
|
3
|
+
* and each bezier in turn consisting of an array of control points from the
|
|
4
|
+
* given SVG path string. An array of loops are returned (as opposed to a single
|
|
5
|
+
* loop) since an SVG path may have sub-paths.
|
|
6
|
+
* @param str The SVG path string, e.g. 'M1 1 C 5 1 5 2 4 2 C 3 3 1 3 1 1 z'
|
|
7
|
+
*/
|
|
8
|
+
declare function getPathsFromStr(str: string): number[][][][];
|
|
9
|
+
export { getPathsFromStr };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Source } from './source.js';
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* Parse a number from an SVG path. This very closely follows genericParseNumber(...) from
|
|
5
|
+
* Source/core/svg/SVGParserUtilities.cpp.
|
|
6
|
+
* Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF
|
|
7
|
+
* @param source
|
|
8
|
+
*/
|
|
9
|
+
declare function parseNumber(source: Source): number;
|
|
10
|
+
export { parseNumber };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/** @hidden */
|
|
2
|
+
declare class Source {
|
|
3
|
+
_string: string;
|
|
4
|
+
_currentIndex: number;
|
|
5
|
+
_endIndex: number;
|
|
6
|
+
_prevCommand: string | undefined;
|
|
7
|
+
constructor(string: string);
|
|
8
|
+
parseSegment(): {
|
|
9
|
+
type: string;
|
|
10
|
+
values: number[];
|
|
11
|
+
};
|
|
12
|
+
hasMoreData(): boolean;
|
|
13
|
+
initialCommandIsMoveTo(): boolean;
|
|
14
|
+
_isCurrentSpace(): boolean;
|
|
15
|
+
_skipOptionalSpaces(): boolean;
|
|
16
|
+
_skipOptionalSpacesOrDelimiter(): boolean;
|
|
17
|
+
_parseArcFlag(): number;
|
|
18
|
+
}
|
|
19
|
+
export { Source };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { PathState } from "../path-state.js";
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* C and c: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: x1 y1 x2 y2 x y
|
|
7
|
+
*
|
|
8
|
+
* Draws a cubic Bézier curve from the current point to (x,y)
|
|
9
|
+
* using (x1,y1) as the control point at the beginning of the
|
|
10
|
+
* curve and (x2,y2) as the control point at the end of the
|
|
11
|
+
* curve. C (uppercase) indicates that absolute coordinates
|
|
12
|
+
* will follow; c (lowercase) indicates that relative
|
|
13
|
+
* coordinates will follow. Multiple sets of coordinates may
|
|
14
|
+
* be specified to draw a polybézier. At the end of the
|
|
15
|
+
* command, the new current point becomes the final (x,y)
|
|
16
|
+
* coordinate pair used in the polybézier.
|
|
17
|
+
*/
|
|
18
|
+
declare function c(s: PathState): number[][];
|
|
19
|
+
export { c };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { PathState } from '../path-state.js';
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* H and h: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: x
|
|
7
|
+
*
|
|
8
|
+
* Draws a horizontal line from the current point (cpx, cpy) to (x, cpy). H
|
|
9
|
+
* (uppercase) indicates that absolute coordinates will follow; h (lowercase)
|
|
10
|
+
* indicates that relative coordinates will follow. Multiple x values can be
|
|
11
|
+
* provided (although usually this doesn't make sense). At the end of the
|
|
12
|
+
* command, the new current point becomes (x, cpy) for the final value of x.
|
|
13
|
+
*/
|
|
14
|
+
declare function h(s: PathState): number[][];
|
|
15
|
+
export { h };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PathState } from '../path-state.js';
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* L and l: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: x y
|
|
7
|
+
*
|
|
8
|
+
* Draw a line from the current point to the given (x,y) coordinate which
|
|
9
|
+
* becomes the new current point. L (uppercase) indicates that absolute
|
|
10
|
+
* coordinates will follow; l (lowercase) indicates that relative coordinates
|
|
11
|
+
* will follow. A number of coordinates pairs may be specified to draw a
|
|
12
|
+
* polyline. At the end of the command, the new current point is set to the
|
|
13
|
+
* final set of coordinates provided.
|
|
14
|
+
*/
|
|
15
|
+
declare function l(s: PathState): number[][];
|
|
16
|
+
export { l };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { PathState } from '../path-state.js';
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* Q and q: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: x1 y1 x y
|
|
7
|
+
*
|
|
8
|
+
* Draws a quadratic Bézier curve from the current point to (x,y) using (x1,y1)
|
|
9
|
+
* as the control point. Q (uppercase) indicates that absolute coordinates will
|
|
10
|
+
* follow; q (lowercase) indicates that relative coordinates will follow.
|
|
11
|
+
* Multiple sets of coordinates may be specified to draw a polybézier. At the
|
|
12
|
+
* end of the command, the new current point becomes the final (x,y) coordinate
|
|
13
|
+
* pair used in the polybézier.
|
|
14
|
+
*/
|
|
15
|
+
declare function q(s: PathState): number[][];
|
|
16
|
+
export { q };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { PathState } from "../path-state.js";
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* S and s: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: x2 y2 x y
|
|
7
|
+
*
|
|
8
|
+
* Draws a cubic Bézier curve from the current point to (x,y). The first control
|
|
9
|
+
* point is assumed to be the reflection of the second control point on the
|
|
10
|
+
* previous command relative to the current point. (If there is no previous
|
|
11
|
+
* command or if the previous command was not an C, c, S or s, assume the first
|
|
12
|
+
* control point is coincident with the current point.) (x2,y2) is the second
|
|
13
|
+
* control point (i.e., the control point at the end of the curve). S
|
|
14
|
+
* (uppercase) indicates that absolute coordinates will follow; s (lowercase)
|
|
15
|
+
* indicates that relative coordinates will follow. Multiple sets of coordinates
|
|
16
|
+
* may be specified to draw a polybézier. At the end of the command, the new
|
|
17
|
+
* current point becomes the final (x,y) coordinate pair used in the polybézier.
|
|
18
|
+
*/
|
|
19
|
+
declare function s(s: PathState): number[][];
|
|
20
|
+
export { s };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { PathState } from '../path-state.js';
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* T and t: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: x y
|
|
7
|
+
*
|
|
8
|
+
* Draws a quadratic Bézier curve from the current point to (x,y). The control
|
|
9
|
+
* point is assumed to be the reflection of the control point on the previous
|
|
10
|
+
* command relative to the current point. (If there is no previous command or if
|
|
11
|
+
* the previous command was not a Q, q, T or t, assume the control point is
|
|
12
|
+
* coincident with the current point.) T (uppercase) indicates that absolute
|
|
13
|
+
* coordinates will follow; t (lowercase) indicates that relative coordinates
|
|
14
|
+
* will follow. At the end of the command, the new current point becomes the
|
|
15
|
+
* final (x,y) coordinate pair used in the polybézier.
|
|
16
|
+
*/
|
|
17
|
+
declare function t(s: PathState): number[][];
|
|
18
|
+
export { t };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { PathState } from '../path-state.js';
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
* V and v: (from www.w3.org)
|
|
5
|
+
*
|
|
6
|
+
* params: y
|
|
7
|
+
*
|
|
8
|
+
* Draws a vertical line from the current point (cpx, cpy) to (cpx, y). V
|
|
9
|
+
* (uppercase) indicates that absolute coordinates will follow; v (lowercase)
|
|
10
|
+
* indicates that relative coordinates will follow. Multiple y values can be
|
|
11
|
+
* provided (although usually this doesn't make sense). At the end of the
|
|
12
|
+
* command, the new current point becomes (cpx, y) for the final value of y.
|
|
13
|
+
*/
|
|
14
|
+
declare function v(s: PathState): number[][];
|
|
15
|
+
export { v };
|