All examples By author By category About

fabiovalse

Three.js Edges Helper

This example tries to render the edges of a 3D model created by SketchUp as hard borders.

All toon shading techniques we found were unsuitable for long faces (they specify the width of the border as a fraction of the length of the face, causing more thick borders to appear when used on longer faces).

Three.js's Wireframe Helper is unable to correctly draw triangulated geometries, causing all diagonal lines to be rendered as borders.

Three.js's Edges Helper seems to be a better solution. It removes almost all the diagonal lines by performing a conplanarity check on faces (see this jsfiddle for an example). Concave volumes can also be correctly rendered by properly setting up WebGL's polygon offset in the mesh's material.

Unfortunately, as it can be seen in this example, some spurious borders remain, such as the diagonal line on the floor of the darker object, or the short vertical line on the side of the "stairs" of the cube-like object.