重要的是要知道的WebGL其實沒有絲毫關於您提供它TypedArray
的格式關心。不管你給它什麼,它都會把它當作一個不透明的二進制緩衝區。重要的是你如何設置你的vertexAttribPointer
。這允許來回混洗數據的一些非常方便的方法。例如:我經常從二進制文件中讀取一個Uint8Array,並將其作爲緩衝區數據提供,但將其綁定爲浮點數和整數。
TypedArrays也具有很好的能力,可以充當其他數組類型的視圖,這使得混合類型變得很容易(只要你沒有對齊問題)。在特定情況下,我建議做這樣的事情:
var floatBuffer = new Float32Array(verts.length * 4);
var byteBuffer = new Uint8Array(floatBuffer); // View the floatBuffer as bytes
for(i = 0; i < verts.length; ++i) {
floatBuffer[i * 4 + 0] = verts.x;
floatBuffer[i * 4 + 1] = verts.y;
floatBuffer[i * 4 + 2] = verts.z;
// RGBA values expected as 0-255
byteBuffer[i * 16 + 12] = verts.r;
byteBuffer[i * 16 + 13] = verts.g;
byteBuffer[i * 16 + 14] = verts.b;
byteBuffer[i * 16 + 15] = verts.a;
}
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, floatBuffer, gl.STATIC_DRAW);
這將上傳包含3輛32位的花車和132種顏色的GPU緊密包裝的頂點緩衝。不像你提出的一對64位整數那麼小,但GPU可能會更好地工作。當綁定它渲染以後,你會做這樣這樣的:
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer(attributes.aPosition, 3, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(attributes.aColor, 4, gl.UNSIGNED_BYTE, false, 16, 12);
與相應的着色器代碼看起來像這樣:
attribute vec3 aPosition;
attribute vec4 aColor;
void main() {
// Manipulate the position and color as needed
}
這種方式,你必須使用交錯陣列的好處,這GPU喜歡使用,並且只需要跟蹤一個緩衝區(獎金!),而且不會浪費每個顏色分量的完整浮動空間。如果你真的希望變小,你可以用短褲代替花車,但我過去的經驗表明,使用短屬性時桌面GPU不是非常快。
希望有幫助!
我不完全相信包裝你描述的方式會更有效率。你以前如何暴露xyz/rgb數據? – Toji 2012-03-06 16:18:21