Render “hard” edges using custom shader

Question

I\'d like to reproduce the effect created by using THREE.EdgesHelper (drawing a boundary on \"hard\" object edges), but using a custom shader rather than adding

Answer 1

First off, the edge-pruning algorithm needs to be tuned a bit. You need to save the vertices for both faces, not just the first face, because you need to alter both triangles associated with the edge for them to render properly using barycentric coordinates.

Second, I think that this can be done without a new isEdge variable, but just by altering centers.

The normal setup for barycentric coordinates is having the three vertices be (1,0,0), (0,1,0), (0,0,1). However, if we want to not draw the edge between vertices 0 and 1, we can change this to (1,0,1), (0,1,1), (0,0,1), so that no matter how far from vertex 2 we get, vCenter.z is always 1. Then, we can start with centers filled with ones (all edges disabled), and enable the edges one by one as we see which edges should stay.

With that in mind, I've reworked your code a bit. I've stripped out the edge object and just left the barycentric stuff: http://jsfiddle.net/v72rn4bk/4/

I found that the call to compute normals should be done after the conversion to BufferGeometry. Calling .fromGeometry does indeed duplicate the vertices, but the normals have to be recomputed if the object you're working has shared vertices.