p5.js icon indicating copy to clipboard operation
p5.js copied to clipboard

fix(webgl): normalize nearly identical vertices before tessellation

Open avinxshKD opened this issue 2 months ago • 1 comments

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() in src/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 lint passes
  • [x] Inline reference is included / updated (N/A - internal fix, no API changes)
  • [x] Unit tests are included / updated

avinxshKD avatar Oct 31 '25 17:10 avinxshKD

Hey @davepagurek @perminder-17, made the necessary changes. Please review whenever you get a chance.

avinxshKD avatar Nov 24 '25 07:11 avinxshKD