在WebGL中同時使用多個圖元

我實際上正在嘗試開發一種可以將可視化有限元網格的Web應用程序。爲了做到這一點，我正在使用WebGl。現在我有一個頁面，其中包含使用三角形作爲圖元在視口中繪製網格所需的所有代碼（網格中的每個四元素被分割成兩個三角形來繪製它）。問題是，當使用三角形時，所有的作品都是「連續的」，你不能看到三角形之間的分隔。事實上，我想實現的是在節點之間添加線條，以便在每個四邊形元素（由兩個三角形形成）周圍，我們將這些線條變成黑色，因此網格實際上可以顯示出來。在WebGL中同時使用多個圖元

所以我能夠定義我的頁面中的行，但由於一個着色器只能有一種類型的基元，如果我添加行緩衝區的代碼並綁定它們，它只顯示行，而不是元素因爲它們是綁定的最後一個緩衝區）。

所以我找到的最接近的解決方案是使用多個着色器，並使用多個程序來管理它們，但是這種解決方案只能使我能夠使用trias繪製幾何圖形還是隻繪製線條，具體取決於當前的程序選擇。

難道你們能幫助我解決這個問題嗎？我看到一個使用OpenGL顯示FE網格的Windows應用程序，除了使用不同的圖層，照明等外，它還能夠將三角形與點和線混合在一起。所以我知道這可能很複雜，但我認爲如果它有可能以某種方式使用OpenGL，它應該和webGL一樣。

如果您提供任何解決方案，我將非常感謝它包含一些代碼作爲示例，例如繪製一個三角形，但在邊界包括三條黑線，並且可能在頂點處有三個點。

來源

2014-01-14 EPApro

爲什麼downvote？ – EPApro

setup() { <your current code here>

附加步驟 - 取消綁定先前紋理，上傳和一個1x1的黑色像素結合作爲紋理。讓此紋理對象爲borderID; }

Draw loop() {

取消綁定先前的紋理，綁定你的正常的紋理，得出像目前設定的網格。這會用不同的顏色填充整個區域，沒有邊框（當前情況下）
綁定borderID紋理，並且除了這次再次繪製相同的頂點，請使用context.LINE_STRIP而不是context.TRIANGLES。這將繪製黑色紋理的線條，並在每個三角形的先前繪製的顏色的頂部顯示爲邊框。你可以像下面

if(currDrawMode==0) context3dStore.bindTexture(context3dStore.TEXTURE_2D, meshTextureObj[bindId]); else context3dStore.bindTexture(context3dStore.TEXTURE_2D, borderTexture1pixObj[bindId]);

context3dStore.drawElements((currDrawMode == 0) ? context3dStore.TRIANGLES: context3dStore.LINE_LOOP, indicesCount[bindId], context3dStore.UNSIGNED_SHORT, 0);，其中currDrawMode繪製邊框和拉絲meshfill之間切換。

由於線條紋理表現爲在平坦的顏色，你早些時候曾邊框，這應該解決您的需要 }

來源

2014-01-14 08:19:56 prabindh

感謝您的回覆prabindh。我已經嘗試過你的迴應，但無法讓它工作，我可能做錯了什麼。例如，如果我創建一個帶有黑色邊框的白色正方形的圖像，並將其作爲紋理加載。應該有可能得到一個最終的顏色乘以這個顏色我已經有的頂點，所以它逐像素乘以兩個。因此，在白色區域我應該有顏色（rgb的每個顏色分量乘以1），並且在邊框中我應該變黑（無論rgb分量乘以零是否爲零）。 – EPApro

你介意怎麼做？我發現的問題是，我可以運行代碼只是爲了紋理或僅僅爲了顏色，但我不知道如何同時正確使用兩者（它只是足以綁定一個，然後是第二個？請提前致謝 – EPApro

使用具有白色填充和黑色邊框的紋理可能會導致不同的邊框寬度（和模糊），因爲紋理在x和y方向上的縮放比例不同 – virtualnobi

在WebGL中同時使用多個圖元

回答

相關問題