Webgl和飛鏢每幀更改頂點緩衝區中的數據

我有一個非常簡單的'hello world'webgl應用程序（臭名昭着的三角形），我決定改變每個頂點的顏色以使每個幀具有酷炫的顏色。我有這在我的渲染方法Webgl和飛鏢每幀更改頂點緩衝區中的數據

if (tick % 5 == 0) { 
    data[3] = rand.nextDouble(); 
    data[4] = rand.nextDouble(); 
    data[5] = rand.nextDouble(); 

    data[3 + 6] = rand.nextDouble(); 
    data[4 + 6] = rand.nextDouble(); 
    data[5 + 6] = rand.nextDouble(); 

    data[3 + 12] = rand.nextDouble(); 
    data[4 + 12] = rand.nextDouble(); 
    data[5 + 12] = rand.nextDouble(); 
}

其中數據是一個包含6個浮子3個頂點的Float32List。

我目前做這一塊上面

gl.bindBuffer(GL.ARRAY_BUFFER, vertexBuffer); 
gl.bufferDataTyped(GL.ARRAY_BUFFER, data, GL.DYNAMIC_DRAW);

該做的工作，但不知何故，我有一種感覺，這是不正確的回答我的問題，並有可能影響性能的代碼之後。

來源

2014-09-21 Nicolas Martel

嗯，它適合你的三角形。對於更復雜的基元，你會想要使用分段着色器。編輯：你在談論你的「問題」，你的問題是什麼？ – 2014-09-21 02:57:08

對於只有精靈的遊戲（每個精靈4個頂點），這很可能是一個簡單的渲染引擎。我可以想象我的精靈的xyz座標會經常改變，並且屏幕上可能會出現很多精靈 – 2014-09-21 03:01:04

現在我明白了，沒有你不想每幀更新你的頂點緩衝區來改變你的幾何體。平移，旋轉和縮放等轉換通常通過向着色器提交4x4矩陣並在頂點着色器內進行頂點轉換來完成。 – 2014-09-21 03:03:22

如果您需要爲您的應用程序進行更新，則每幀更新頂點沒有任何問題。例如，這些例子更新所有的頂點每一幀

https://www.khronos.org/registry/webgl/sdk/demos/google/nvidia-vertex-buffer-object/index.html

http://webglsamples.googlecode.com/hg/google-io/2011/10000-objects-optimized.html

至於你在你的評論中提到的精靈，有各種方式來實現的精靈。

最常見的方式是可能製作單位正方形四，單位紋理座標，然後用一個3x3或4x4矩陣調整頂點渲染的大小，位置，以及你想要的方向，併爲使用另一個矩陣或以及紋理座標的偏移和乘數，因此您可以對它們進行平移和縮放以從紋理圖集中選擇特定的精靈。

我懷疑儘管這類似於第二樣品的技術之上，更新頂點，最終會比在與取向矩陣和額外的用於紋理座標繪製一個子畫面在時間吸引更多的精靈。

例如，here is a sample that draws one sprite per draw call。在我的機器，我得到8000級左右的精靈在50fps的

here is a sample that updates vertices every frame因此它使用較少的繪製調用。我以50fps的速度獲得72000個精靈。即使它每幀更新72000x4或280000個頂點，速度幾乎是速度的9倍。

當然，這些樣本都沒有做一個真正的精靈引擎的全部工作，因爲他們總是在畫相同的精靈。如果您使用了紋理圖集（因此您需要更新紋理座標系），並且您支持以不同大小，比例和方向繪製圖形（因此您需要在JavaScript中進行頂點*矩陣計算），但時間可能會大不相同。

如果我是你，我會用最簡單的方法，抽象您的使用時間等，你可以用的東西，如果你需要更優化後更換。

來源

2014-09-21 03:49:23 gman

Webgl和飛鏢每幀更改頂點緩衝區中的數據

回答

相關問題