Skip to content

Conversation

@avinxshKD
Copy link

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().

Implementation Details

  • Modified _tesselateShape() in src/webgl/p5.RendererGL.Immediate.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 comprehensive unit test in test/unit/webgl/p5.RendererGL.js:

    • Tests tessellation with nearly identical consecutive vertices
    • Verifies that contour holes are properly cut out
    • Confirms shape fills work correctly with problematic coordinates

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:

After (with this fix):

  • Clean tessellation with proper contour cutouts
  • No visual artifacts

PR Checklist

  • npm run lint passes
  • Inline reference is included / updated (N/A - internal fix, no API changes)
  • Unit tests are included / updated

@welcome
Copy link

welcome bot commented Oct 26, 2025

🎉 Thanks for opening this pull request! For guidance on contributing, check out our contributor guidelines and other resources for contributors!
🤔 Please ensure that your PR links to an issue, which has been approved for work by a maintainer; otherwise, there might already be someone working on it, or still ongoing discussion about implementation. You are welcome to join the discussion in an Issue if you're not sure!
🌸 Once your PR is merged, be sure to add yourself to the list of contributors on the readme page !

Thank You!

@avinxshKD
Copy link
Author

hey @davepagurek, kindly review when you get a chance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[p5.js 2.0 Bug Report]: Tessellation of beginShape/endShape with multiple contours sometimes produces weird results

1 participant