2

我目前正在尝试使用带有视图的数组缓冲区，将 3 个 float32 (x,y,z) 和 4 个 uint8 (r,g,b,a) 组合成一个可以传递给我的 web gl 应用程序的数据流。

问题是当我使用数组缓冲区时没有任何效果，代码如下：

var buffer = new ArrayBuffer(nbrOfVertices * 16);
var positionView = new DataView(buffer);   

for (var j = 0; j < nbrOfVertices; j++)
{
    positionView.setFloat32((j*16),meshVertexPositions[(j*7)]);
    positionView.setFloat32((j*16)+4,meshVertexPositions[(j*7)+1]);
    positionView.setFloat32((j*16)+8,meshVertexPositions[(j*7)+2]); 
}
gl.bufferData(gl.ARRAY_BUFFER,buffer,gl.STATIC_DRAW);

我知道所有其他代码都是正确的，因为当我使用它时它可以工作：

var buffer = new Float32Array(nbrOfVertices * 4);

for (var j = 0; j < nbrOfVertices; j++)
{
    buffer[(j*4)] = meshVertexPositions[(j*7)];
    buffer[(j*4)+1] = meshVertexPositions[(j*7)+1];
    buffer[(j*4)+2] = meshVertexPositions[(j*7)+2];
}
gl.bufferData(gl.ARRAY_BUFFER,buffer,gl.STATIC_DRAW);

知道为什么我的数组缓冲区代码（第一个示例）不起作用吗？只是为了澄清，当我说它不起作用时，我的意思是没有渲染，尽管我在运行它时没有看到任何错误（在 chrome 开发人员控制台或 webgl 检查器中）

4

1 回答 1

3

您不应该DataView为此使用 a 。你会像这样在同一个缓冲区上使用多个视图

var buffer = new ArrayBuffer(nbrOfVertices * 16);
var floatView = new Float32Array(buffer);
var uint8View = new Uint8Array(buffer);

for (var j = 0; j < nbrOfVertices; ++j) {
  var floatVertexOffset = j * 4;
  floatView[floatVertexOffset + 0] = meshVertexPositions[?? + 0];
  floatView[floatVertexOffset + 1] = meshVertexPositions[?? + 1];
  floatView[floatVertexOffset + 2] = meshVertexPositions[?? + 2];

  var uint8ColorOffset = j * 16 + 12;
  unit8View[uint8ColorOffset + 0] = meshVertexColors[?? + 0];
  unit8View[uint8ColorOffset + 1] = meshVertexColors[?? + 1];
  unit8View[uint8ColorOffset + 2] = meshVertexColors[?? + 2];
  unit8View[uint8ColorOffset + 3] = meshVertexColors[?? + 3];
}

您不使用 a 的原因DataView是您想要 GPU 数据的本机浮点和 RGBA 格式。DataView用于以特定字节序格式读取/写入数据，而与本机平台的字节序无关。

换句话说，如果你使用DataView你最终会上传错误类型的数据到 GPU。您用于DataView读取本机格式或将本机数据转换为特定的二进制格式。

于 2014-02-04T11:15:30.343 回答