为什么 ArrayBuffer 会改变值？

Question

为什么当我更改 positionView 和 colorView 时缓冲区也会更改？

var buffer = new ArrayBuffer(nbrOfVertices * vertexSizeInBytes);
var positionView = new Float32Array(buffer);
var colorView = new Uint8Array(buffer);

Answer 1

全部 typed array structures are views upon an ArrayBuffer. They allow you to access and modify the underlying binary data within the ArrayBuffer 选择布局，例如 32 位浮点数。

如果你想创建单独的缓冲区，你可以通过使用顶点数乘以组件数作为参数来创建你的位置和颜色缓冲区，这隐含地创建了一个底层 ArrayBuffer 可通过 buffer 属性的视图。

var numVertices = 4;
var positions = new Float32Array(numVertices * 3 /*position: x, y, z*/);
var colors = new Uint8Array(numVertices * 4 /*color: r, g, b, a*/);

如果您尝试使用以下布局设置交错的 VertexBuffer：f32pX,f32pY,f32pZ,ui8cR,ui8cG,ui8cB,ui8cA "on the fly" 你的 colorView 也是 "views" 浮点数据，所以你必须将你的文字偏移 12 字节。

var positionOffset = 3 * 4;//3 positions with 4 byte each
var bufferOffset = positionOffset+4;//each color component is 1 byte
for (
  var colorStart = positionOffset;
  colorStart < colorView.length;
  colorStart += bufferOffset
) {
  colorView[colorStart]=r;
  colorView[colorStart+1]=g;
  colorView[colorStart+2]=b;
  colorView[colorStart+3]=a;
}

为什么 ArrayBuffer 会改变值？

Why does ArrayBuffer change value?

javascript

buffer