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

Question

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

方法：将类似的例程应用于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. 然后，我们可以从centers 开始填充一个（禁用所有边缘），并根据我们看到哪些边缘应该保留而一个一个启用边缘。

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

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