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:
- Reproduced the effect in the wireframe materials example, but using
BufferGeometry
: http://jsfiddle.net/ogav6o77/ - Port the logic of
EdgesHelper
to a "BufferEdgesHelper
" function that works withBufferGeometry
(but still use it to create aTHREE.Line
): http://jsfiddle.net/L2aertya/ - 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!