Question

It seems that when overdraw is set to true, the canvas renderer actually expands the fill beyond the edges of the faces so they overlap a little. This is fine normally, but when the material is transparent, these overlapped edges create an undesireable wireframe-type artifact.

see the pink arrows in the example: Example

Is there a way to play with how much the fill is actually expanded? I’m afraid the source code is simply over my head, but if someone could point out where that’s handled (what line in the source), that would be much appreciated. Failing that, hopefully someone knows another solution or workaround.

I realize the problem goes away when using the WebGL renderer, but I’ve been asked to make this work on Canvas if possible.

Answer 1

Yep. I’m afraid there is no solution for that using CanvasRenderer.

But if you want to try some values… this is the function that does that:

https://github.com/mrdoob/three.js/blob/master/src/renderers/CanvasRenderer.js#L1011-1025

You can try this…

idet = ( 1 / Math.sqrt( det ) ) * 0.5;

Then, with python installed in your system, go to /utils and run this to generate a new Three.js:

python build.py --common

And this for minifying it when you’re done:

python build.py --common --minified

But I think you may get different results in different browsers.

Curious to know if you solve this.