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 a separate THREE.Line object. Essentially I'd like to do what's done in this demo, but only for the "hard" boundaries; e.g. boundaries that are not between two coplanar faces

Approach: apply similar routine to EdgesHelper, but mark vertices that are in hard edges with a custom attribute (e.g. isEdge); probably need to use BufferGeometry, since regular Geometry allows re-use of vertices in multiple faces, but BufferGeometry duplicates vertices such that each vertex is part of only one face (at least, this is my understanding; the documentation isn't explicit).

Progress so far:

1. Reproduced the effect in the wireframe materials example, but using BufferGeometry: http://jsfiddle.net/ogav6o77/
2. Port the logic of EdgesHelper to a "BufferEdgesHelper" function that works with BufferGeometry (but still use it to create a THREE.Line): http://jsfiddle.net/L2aertya/
3. Attempted to adapt the BufferEdgesHelper to save its results in a custom attribute (isEdge), then read that attribute in the custom shader when deciding whether to render the edge or not: http://jsfiddle.net/4tf4c6sf/

The first two fiddles work as expected, showing (1) the white wireframe edge rendered by the shader, then (2) the white edges from the shader plus the red "hard" edges from the Line. However, (3) gives the same results as (2), rather than using the isEdge attribute to decide whether to draw a line or not; I can't figure out why that is.

Any idea how to fix this so that only the hard edges are rendered by the shader (e.g. the red and white lines overlap)?

Thanks!

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.