WebGL修復網格中沒有重複頂點的單元格的紋理

我正在編寫一個使用WebGL的Web應用程序，我在其中創建了一個頂點網格，將其組裝成四邊形，有點像網格。WebGL修復網格中沒有重複頂點的單元格的紋理

這是它看起來像，完全紋理。

sample

它工作正常，但有一個問題。紋理是以下8x8圖像與2個箭頭，一個指向左側，一個指向上。

texture

在這一點上，你可能已經意識到，紋理在視頂點各個方向翻轉。

我使用下面的Dart代碼來創建頂點。這應該不是太難遵循JavaScript開發人員雖然

vertices = new Float32List(verts * ChunkRenderer.FLOATS_PER_VERTEX); 

    for (int i = 0; i < w + 1; i++) { 
     for (int j = 0; j < h + 1; j++) { 
      int index = (i + j * (w + 1)) * ChunkRenderer.FLOATS_PER_VERTEX; 

      double x = i * 16.0; 
      double z = j * 16.0; 
      double y = 0.0; 

      double r = rand.nextDouble(); 
      double g = rand.nextDouble(); 
      double b = rand.nextDouble(); 

      double u = i % 2 == 0 ? 0.0 : 1.0; 
      double v = j % 2 == 0 ? 0.0 : 1.0; 

      vertices.setAll(index, [ 
       x, y, z, 
        u, v, 
       r, g, b, 
      ]); 
     } 
    }

特別是這些生產線負責設置UV貼圖

double u = i % 2 == 0 ? 0.0 : 1.0; 
double v = j % 2 == 0 ? 0.0 : 1.0;

有沒有辦法重用每個三角形的頂點，而不弄亂了紋理，還是我真的需要爲每個單元格複製頂點？

我喜歡這個當前的設置，因爲我可以移動一個頂點，例如它會創建一個「尖峯」，如果你願意的話。如果每個小區都有自己的頂點，而不是，我不得不更新4個不同的頂點來達到同樣的效果（當然上的網格邊緣不包括頂點）

感謝

來源

2015-10-15 Nicolas Martel

可以提供4對（U，V）爲每個頂點，然後決定使用哪一個。

我不知道你的渲染代碼，所以很難提供任何示例。

來源

2015-10-15 10:42:05

昨天發佈這個問題後，我確實有過這個想法，但後來我意識到，着色器應該如何知道哪一對使用呢？ –

如果您逐一繪製四邊形，則可以添加一個制服來指示您正在繪製哪個四邊形。如果使用實例化渲染，則可以使用此數據創建額外的緩衝區。 –

我認爲重用的最基本形式是爲一個四邊形準備網格數據，然後用每個繪製調用的不同平移和旋轉信息重新繪製四邊形。由於額外的繪製調用，這會比你所做的要少得多，但是也會需要更少的內存。

來源

2015-10-22 08:52:23 tsherif

WebGL修復網格中沒有重複頂點的單元格的紋理

回答

相關問題