渲染獨立的四邊形，每個四邊形使用一個繪製調用還是一個調用所有這些調用？

Question

在WebGL應用程序中，我必須畫出一堆四邊形（越好越好，但1000應該是合理的上邊界）。每個四元組都有一些屬性，如顏色，位置，大小，可能還有一些材質屬性。每四個浮點數爲10浮點數。着色器會用這些做一些花哨的東西，但這裏沒有關係。每個頂點可以描述爲（位置+大小×（±1，±1,0））。現在我想知道如何最好地渲染所有這些四邊形。基本上有三種選項，我看到：

1. 使用工作服的所有參數，然後調用gl.drawArrays一次爲每個四，與只包含對角相對座標，形式即向量的數組緩衝區（±1，±1）。這意味着一個由四個頂點構成兩個三角形的三角形帶。

2. 使用單一gl.drawArrays呼籲所有四邊形在一起。由於屬性是每個頂點而不是每個三角形，這意味着要複製所有頂點的所有參數。此外，由於我不能通過所有頂點有一個單一的三角形條，所以我必須重複頂點，所以我基本上每個四邊形有6個頂點，並且可能使用不同的三角形而不是三角形條。這意味着每個四元組大約有6×（10 + 2）= 72個浮點數，這裏有很多冗餘。

3. 類2，但使用gl.drawElements，以避免重複形成每個四邊形的兩個三角形頂點。所以我最終得到4×（10 + 2）= 48個浮點數作爲屬性和6個索引索引。

我不確定採取哪種方法。他們中沒有一個感覺完全足夠。在1中，我得到的印象是每次調用只繪製四個頂點的陣列可能會浪費性能。我不確定使用這種方法繪製的幾個四邊形是否可以並行渲染。 2.和3.我擔心大量的數據冗餘，以及保存陣列所需的緩衝區大小。 3.稍微減少數據量，但可能由於間接性而導致額外的開銷。

我知道，在性能方面最終的答案是執行基準。但我想知道這裏是否有一些確定的最佳實踐，它不僅考慮我的一臺開發機器的性能，而且考慮了各種硬件，驅動程序和瀏覽器的性能，並且還考慮了其​​他方面，如內存的可伸縮性要求。這就是我問這個問題的原因，而我仍在努力實現適合現實生活比較的實現。

Answer 1

我做了一些實驗，在Linux和Mac上使用Firefox。出於某種原因，我無法運行PROP框架計數器，但是從響應性到鼠標交互方法2感覺明顯優於1. Linux機器上的區別更大，它具有舊式的新型驅動的圖形卡。所以除非別人提出相反的答案，否則我會用這個作爲指導，現在用2來代替。如果我遇到內存成爲問題的場景，也許切換到3。

Answer 2

減少繪製調用通常是提高性能的時候做的第一件事情，讓需要1出直線距離，只會有更多的四邊形變得更糟。

我沒有看到使用2比3的優勢，所以我會用3去記住，你可以隨時使用退化三角形使用三角形帶在不連續的對象，你的情況四邊形。

如果你想減少冗餘，而不是使用屬性，可以考慮使用textures as a lookup和編碼你的紋理，這樣你可以簡單地查找顏色。我不確定這是否會更快，但它是一種選擇。