使用自定义着色器渲染“硬”边缘

Question

我想重现使用THREE.EdgesHelper (在“硬”对象边缘上绘制边界)创建的效果，但是使用自定义着色器而不是添加单独的THREE.Line对象。本质上，我想做在这个演示中所做的事情，但只针对“硬”边界；例如，不位于两个共面之间的边界。

方法:将类似的例程应用于EdgesHelper，但是用自定义属性标记处于硬边的顶点(例如，isEdge)；可能需要使用BufferGeometry，因为常规的Geometry允许在多个面中重复使用顶点，但是BufferGeometry重复顶点，这样每个顶点只能是一个面的一部分(至少，这是我的理解；文档并不是明确的)。

迄今取得的进展：

1. 在线框材料示例中再现了效果，但使用了BufferGeometry：http://jsfiddle.net/ogav6o77/
2. 将EdgesHelper的逻辑移植到与BufferGeometry一起工作的"BufferEdgesHelper“函数(但仍然使用它来创建THREE.Line)：http://jsfiddle.net/L2aertya/
3. 尝试调整BufferEdgesHelper以将其结果保存在自定义属性(isEdge)中，然后在决定是否呈现边缘时在自定义着色器中读取该属性：http://jsfiddle.net/4tf4c6sf/

前两个手摇按预期工作，显示(1)白色线框边缘呈现的着色器，然后(2)白色边缘从着色器加上红色“硬”边缘从Line。但是，(3)给出了与(2)相同的结果，而不是使用isEdge属性来决定是否画一条线；我不知道为什么会这样。

是否知道如何解决这个问题，以便只有硬边被渲染(例如红白线重叠)？

谢谢!

Answer 1

首先，需要对边缘修剪算法进行一些调整.您需要保存两个面的顶点，而不仅仅是第一个面，因为您需要修改与边相关的两个三角形，以便它们使用重心坐标正确地呈现。

其次，我认为这可以在不使用新的isEdge变量的情况下完成，但只需更改centers即可。

重心坐标的正常设置是有三个顶点为(1,0,0)、(0,1,0)、(0,0,1)。但是，如果我们不想绘制顶点0和1之间的边，我们可以将其更改为(1,0,1)、(0,1,1)、(0,0,1)，这样无论我们得到的顶点2有多远，vCenter.z总是1。然后，我们可以从填充有1的centers开始(所有的边都禁用)，并在看到哪些边应该保留时，逐个启用边。

考虑到这一点，我已经对您的代码做了一些修改。我去掉了边缘对象，只留下了重心为中心的东西：http://jsfiddle.net/v72rn4bk/4/

我发现，对计算法线的调用应该在转换到BufferGeometry之后进行。调用.fromGeometry确实复制了顶点，但是如果您正在工作的对象具有共享顶点，则必须重新计算法线。