diff --git a/index.js b/index.js index 17e8be4..bb8336d 100644 --- a/index.js +++ b/index.js @@ -106,7 +106,7 @@ export default class TinySDF { } edt(gridOuter, 0, 0, width, height, width, this.f, this.v, this.z); - edt(gridInner, buffer, buffer, glyphWidth, glyphHeight, width, this.f, this.v, this.z); + edt(gridInner, 0, 0, width, height, width, this.f, this.v, this.z); // encode signed distance as a byte: inside the glyph maps to high values, outside to low, // with the edge gradient spanning [-radius * cutoff, radius * (1 - cutoff)] pixels around the edge; diff --git a/playground.html b/playground.html new file mode 100644 index 0000000..7029fb6 --- /dev/null +++ b/playground.html @@ -0,0 +1,312 @@ + + + + SDF — interactive viewer + + + + + +

SDF — interactive viewer

+

+ Each pixel = normalized distance field value [0..1]. Black = outside · + White = inside · + = iso-contour at cutoff. +

+ +
+
+
Character
+
+ Char + +
+
+ +
+
TinySDF parameters
+
+ fontSize + + 256 +
+
+ buffer + + 8 +
+
+ radius + + 8 +
+
+ cutoff + + 0.75 +
+
+ +
+ buffer : padding in px around the glyph (available gradient + zone).
+ radius : max extent of the distance field from the edge.
+ cutoff : SDF value at the exact shape edge.

+ The red line is the iso-contour at + cutoff × 255 — the threshold used by the fragment shader to + distinguish inside from outside. +
+
+
+
+
+ +
+
—
+
+
+ + + +