fix(webgl): normalize nearly identical vertices before tessellation
Resolves #8186
Changes
This PR fixes tessellation artifacts that occur when drawing shapes with multiple contours where consecutive vertices have nearly identical coordinates (differing by ~1e-8 or similar small amounts). This commonly happens when using font.textToContours().
-
Modified
_tesselateShape()insrc/webgl/ShapeBuilder.js:- Added coordinate normalization loop before passing vertices to libtess tessellator
- Consecutive vertices with coordinates within
1e-6(epsilon) of each other are normalized to use the exact same value - Prevents numerical precision issues in libtess that cause glitchy rendering
-
Added visual test in
test/unit/visual/cases/webgl.js:- New visual test "Tessellation → Handles nearly identical consecutive vertices"
- Easier for contributors to debug visually when issues arise
Technical Background
This workaround addresses a numerical precision issue in libtess, which is a JavaScript port of SGI C code from the 1990s. When consecutive vertices have coordinates that are almost (but not exactly) equal, libtess produces glitchy tessellation output. This issue is particularly likely to occur with contours automatically sampled from fonts via font.textToContours().
Screenshots of the change
Before:
- Tessellation produces visual artifacts and incorrect geometry
- Referenced in issue #8186
After (with this fix):
- Clean tessellation with proper contour cutouts
- No visual artifacts
PR Checklist
- [x]
npm run lintpasses - [x] Inline reference is included / updated (N/A - internal fix, no API changes)
- [x] Unit tests are included / updated
Hey @davepagurek @perminder-17, made the necessary changes. Please review whenever you get a chance.