我正在編寫一個使用WebGL的Web應用程序,我在其中創建了一個頂點網格,將其組裝成四邊形,有點像網格。WebGL修復網格中沒有重複頂點的單元格的紋理
這是它看起來像,完全紋理。
它工作正常,但有一個問題。紋理是以下8x8圖像與2個箭頭,一個指向左側,一個指向上。
在這一點上,你可能已經意識到,紋理在視頂點各個方向翻轉。
我使用下面的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個不同的頂點來達到同樣的效果(當然上的網格邊緣不包括頂點)
感謝
昨天發佈這個問題後,我確實有過這個想法,但後來我意識到,着色器應該如何知道哪一對使用呢? –
如果您逐一繪製四邊形,則可以添加一個制服來指示您正在繪製哪個四邊形。如果使用實例化渲染,則可以使用此數據創建額外的緩衝區。 –