Question

我目前正在尝试使用带有视图的arraybuffer，将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);

知道为什么我的arraybuffer代码（第一个例子）不起作用？只是为了澄清，当我说它不起作用时，我的意思是什么都没有渲染，虽然我在运行它时没有看到任何错误（在chrome开发者控制台或webgl检查器中）

Answer 1

您不应该使用DataView。您可以在同一个缓冲区上使用多个视图，例如

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];
}

您不使用DataView的原因是因为您需要GPU数据的原生浮点和RGBA格式。 DataView用于以特定的endian格式读取/写入数据，无论本机平台的字节顺序如何。

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

数组缓冲区不能与webgl一起使用

1 个答案: