使用自定義着色器渲染「硬」邊緣

Question

我想重現使用THREE.EdgesHelper（在「硬」物體邊上繪製邊界）創建的效果，但使用自定義着色器而不是添加單獨的對象。基本上我想要做的是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填充1（禁用所有邊），並在我們看到哪些邊應停留時逐個啓用邊。

考慮到這一點，我已經重新設計你的代碼位。我已經刪除了邊緣對象，只是離開了重心的東西：http://jsfiddle.net/v72rn4bk/4/

我發現計算法線的調用應在轉換爲BufferGeometry後完成。調用.fromGeometry確實會複製頂點，但如果您正在工作的對象已共享頂點，則法線必須重新計算。