fix(webgl): normalize nearly identical vertices before tessellation by avinxshKD · Pull Request #8204 · processing/p5.js

avinxshKD · 2025-10-26T18:05:00Z

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

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

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:

Tessellation produces visual artifacts and incorrect geometry
Referenced in issue [p5.js 2.0 Bug Report]: Tessellation of beginShape/endShape with multiple contours sometimes produces weird results #8186

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 · 2025-10-26T18:05:03Z

🎉 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 · 2025-10-29T06:24:57Z

hey @davepagurek, kindly review when you get a chance

davepagurek

Hi, thanks for taking this on! ~~The approach looks good. I was initially testing in p5 2.x, have we confirmed that this issue exists in 1.x?~~ (Update: this exists in 1.x too, so we can keep this PR into main around, but we'll need another one into the dev-2.0 branch for 2.x.) Regardless, it may be a good idea to start by making the change just in 2.x, in the dev-2.0 branch instead of main.

davepagurek · 2025-10-30T14:06:03Z

+    myp5.loadPixels();
+
+    // Check that center pixels are white (hole cut out properly)
+    const centerIdx = (myp5.width / 2 + myp5.height / 2 * myp5.width) * 4;


Grabbing pixels out of an array can be hard for contributors to debug when something breaks a test in the future, do you think we could add this as a visual test instead?

Converted pixel-checking unit test to visual test as suggested by maintainer. This makes the test easier to debug when issues arise in the future.

avinxshKD · 2025-11-04T06:15:37Z

Hi, thanks for taking this on! ~~The approach looks good. I was initially testing in p5 2.x, have we confirmed that this issue exists in 1.x?~~ (Update: this exists in 1.x too, so we can keep this PR into main around, but we'll need another one into the dev-2.0 branch for 2.x.) Regardless, it may be a good idea to start by making the change just in 2.x, in the dev-2.0 branch instead of main.

Thanks for the review @davepagurek

I've converted the pixel-checking unit test to a visual test as you suggested.

And also created a separate PR targeting the dev-2.0 branch with the same fixes, since the file structure is different there (ShapeBuilder.js instead of p5.RendererGL.Immediate.js). Here's the link #8221

Thanks

perminder-17 · 2025-11-04T11:29:56Z

+      if (Math.abs(prevZ - currZ) < epsilon) {
+        contour[i + 2] = prevZ;
+      }


Was there a reason for snapping the z coordinates as well? I don't think we need to do that for z?

perminder-17 · 2025-11-04T12:21:17Z

    });
  });
+
+  visualSuite('Tessellation', function() {


The new visual test doesn’t actually cover this change. I see the same output before and after the patch. Please update the sketch to reproduce the bug which is fixed at your PR.

Removed Z-axis coordinate normalization as testing confirmed it's not needed. Replaced simple test case with actual textToContours() example from issue processing#8186 that clearly demonstrates the tessellation bug and verifies the fix works. Resolves processing#8186

avinxshKD · 2025-11-24T07:37:48Z

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

avinxshKD · 2026-02-06T16:57:19Z

@perminder-17 @davepagurek can you pls check this one? Just checking if it still makes sense for me to continue working on it. This one was for the main branch as asked. Thanks

avinxshKD · 2026-02-21T17:03:26Z

Hey @perminder-17 @davepagurek @ksen0 updated the visual test, now uses hardcoded vertex data with a ~1e-8 coordinate offset that actually triggers the libtess bug. Old test was loading a font that didn't exist in test assets anyway.

Also cleaned up the normalization loop and removed the extra screenshots that got committed by mistake

.

avinxshKD · 2026-04-07T08:44:42Z

Hey @davepagurek @perminder-17 can you pls look into this, thanks.

fix(webgl): normalize nearly identical vertices before tessellation

bec1f51

davepagurek reviewed Oct 30, 2025

View reviewed changes

refactor(test): convert tessellation test to visual test

8254f05

Converted pixel-checking unit test to visual test as suggested by maintainer. This makes the test easier to debug when issues arise in the future.

perminder-17 reviewed Nov 4, 2025

View reviewed changes

avinxshKD mentioned this pull request Nov 5, 2025

fix(webgl): normalize nearly identical vertices before tessellation #8221

Merged

3 tasks

fix(webgl): rewrite visual test, clean up vertex normalization

8b0eb43

avinxshKD requested review from davepagurek and perminder-17 February 22, 2026 09:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(webgl): normalize nearly identical vertices before tessellation#8204

fix(webgl): normalize nearly identical vertices before tessellation#8204
avinxshKD wants to merge 4 commits into
processing:mainfrom
avinxshKD:fix/tessellation-nearly-identical-vertices

avinxshKD commented Oct 26, 2025 •

edited

Loading

Uh oh!

welcome Bot commented Oct 26, 2025

Uh oh!

avinxshKD commented Oct 29, 2025

Uh oh!

davepagurek left a comment •

edited

Loading

Uh oh!

davepagurek Oct 30, 2025

Uh oh!

avinxshKD commented Nov 4, 2025

Uh oh!

perminder-17 Nov 4, 2025

Uh oh!

perminder-17 Nov 4, 2025

Uh oh!

avinxshKD commented Nov 24, 2025

Uh oh!

avinxshKD commented Feb 6, 2026

Uh oh!

avinxshKD commented Feb 21, 2026 •

edited

Loading

Uh oh!

avinxshKD commented Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

avinxshKD commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Implementation Details

Technical Background

Screenshots of the change

PR Checklist

Uh oh!

welcome Bot commented Oct 26, 2025

Uh oh!

avinxshKD commented Oct 29, 2025

Uh oh!

davepagurek left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

davepagurek Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

avinxshKD commented Nov 4, 2025

Uh oh!

perminder-17 Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

perminder-17 Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

avinxshKD commented Nov 24, 2025

Uh oh!

avinxshKD commented Feb 6, 2026

Uh oh!

avinxshKD commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

avinxshKD commented Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

avinxshKD commented Oct 26, 2025 •

edited

Loading

davepagurek left a comment •

edited

Loading

avinxshKD commented Feb 21, 2026 •

edited

Loading