CODEWITHSUNDEEP
three.js
VintLucky777
VintLucky777

Reputation: 43

Three.js canvas renderer seams between polygons

I'm already feeling comfortable enough with this library, but this one made me tired already:

When I'm trying to simply render a mesh without any textures, exported from blender to .obj (triangulating, smoothing groups enabled), the WebGL renderer does that perfectly, but I also need to make it possible with canvas renderer, and here comes the trouble; polygon edges have seams between them and become partially seen through

Just to make it clear, providing screenshots

WebGL Renderer https://www.monosnap.com/image/OVaQO8yLDU9Wl6ufhADDVCEWg

Canvas renderer https://www.monosnap.com/image/1AYeyHjWkGx9fQ6vg6xLr0EcV

mesh is quite complex, ~7k triangles

Upvotes: 4

Views: 1583

Answers (1)

WestLangley
WestLangley

Reputation: 104793

When using CanvasRenderer, you need to set

material.overdraw = 0.5; // or some number between 0 and 1

This will help to alleviate the problem.

Note: overdraw used to be a boolean; it is now a float.

three.js r.63

Upvotes: 3

Related Questions