WebGL 中的 texImage2D 需要多少数据？

Question

我在 ThreeJS 中创建了一个 DataTexture，它会依次调用 texImage2D。

var twidth = 50;
var theight = 50;
var tsize = twidth * theight;

var tileData = new Uint8Array( tsize * 3);

//fill it with some data

tileDataTexture = new THREE.DataTexture(this.tileData, twidth, theight, THREE.RGBFormat);

如您所见，我使用了 50x50 Texel 大小和三个 8 位通道（THREE.RGB in threejs）。当我使用大小为 7500 (50*50*3) 的 UInt8Array 时，Firefox 告诉我它需要更多数据：

Error: WebGL: texImage2D: not enough data for operation (need 7598, have 7500)

我想知道：这额外的98字节是从哪里来的？我猜对齐，但 7598 甚至不能被 4 整除，而 7500 是。（现在想来，我的频道数也不能被3整除）

7600 是有意义的，因为这意味着每行填充 2 字节，最后一行没有填充吗？

（我知道尺寸应该只使用四的倍数，但我还是想知道答案）

Answer 1

除最后一行外，行长度与 4 的倍数对齐。在您的情况下，这意味着每行需要 2 个字节的填充，每行总共 152 个字节（3 * 50 + 2）。

152 * (50 - 1) + 3 * 50 = 7598

如需参考，请参阅 source code of Gecko。

Answer 2

正如 user1421750 指出的那样，行已填充

但是，您可以通过设置 texture.unpackAlignment 来设置每行的填充量。它默认为 4，但您可以将其设置为 8、4、2 或 1。

就我个人而言，我会将默认值设置为 1，因为我认为您不太可能像以前那样感到惊讶

WebGL 中的 texImage2D 需要多少数据？

How much data does texImage2D in WebGL need?

javascript

webgl

three.js