SVGRenderer showing internal triangle (earcut) geometry on transparent surfaces

The triangles that make up each face become visible when I make use of the SVGRenderer to render semi-transparent surfaces. In the codepen, below, you can make out the triangles on the lowest level of the stacked shape pretty well, and then can see similar, but lighter, ones as you look at each “floor” above.

If you switch useSVGRenderer to = false at the top of the codepen’s JS, you will see that the WebGLRenderer doesn’t show these.

Is there a parameter or function I can call to simplify the geometry so that these will go away?

On a side note, SVGRenderer doesn’t have getSize() or setAnimationLoop() methods, but I’ll open a bug in github for those.

(1) It’s an aliasing issue. Setting overdraw to 0 removes the triangle edges (they overlap by .5px otherwise.)

SVGRenderer.overdraw

(2) I found an interesting artefact when rotating your model:

Screen Shot 2020-06-22 at 23.12.55

Seems like an SVGRenderer bug, since they do not appear on WebGLRenderer.

1 Like

Fantastic! I swear I had tried overdraw=0, but apparently not.

Thank you!