javascript - 在javascript中下载深度数据的最佳方法？

Question

我正在制作一个 Three.js 应用程序，需要下载一些深度数据。数据由 512x256 深度条目组成，以压缩二进制格式存储，每个条目精度为两个字节。数据必须可以从 CPU 读取，因此我无法将数据存储在纹理中。无论如何，许多浏览器都不支持浮点纹理，例如 iOS 上的 Safari。

我可以在 Unity 中使用此功能，但我不知道如何使用 javascript/Three.js 下载这样的压缩深度。我是 JavaScript 新手，但似乎它对二进制数据处理和压缩的支持有限。

我正在考虑切换到文本格式，但内存占用和下载大小是一个问题。用户可能必须加载数百个这样的深度缓冲区。

是否有更好的方法来下载可读深度缓冲区？

Answer 1

您可以使用 fetch 以二进制数据形式下载文件。和 async/await

async function doIt() {
  const response = await fetch('https://webglfundamentals.org/webgl/resources/eye-icon.png');
  const arrayBuffer = await response.arrayBuffer();

  // the data is now in arrayBuffer
}
doIt();

之后你可以制作TypedArray views查看数据。

async function doIt() {
  const response = await fetch('https://webglfundamentals.org/webgl/resources/eye-icon.png');
  const arrayBuffer = await response.arrayBuffer();
  console.log('num bytes:', arrayBuffer.byteLength);
  
  // arrayBuffer is now the binary data. To access it make one or more views
  const bytes = new Uint8Array(arrayBuffer);
  
  console.log('first 4 bytes:', bytes[0], bytes[1], bytes[2], bytes[3]);
  
  const decoder = new TextDecoder();
  console.log('bytes 1-3 as unicode:', decoder.decode(bytes.slice(1, 4)));
}

doIt();

至于深度数据的格式，这完全取决于你。假设您的格式只是 16 位值，表示从最小到最大的深度范围

uint32 width
uint32 height
float min
float max
uint16 data[width * height]

加载数据后，您可以使用多个数组 View 。

const uint32s = new Uint32Array(arrayBuffer);
const floats = new Float32Array(arrayBuffer, 8); // skip first 8 bytes
const uint16s = new Uint16Array(arrayBuffer, 16); // skip first 16 bytes

const width = uint32s[0];
const height = uint32s[1];
const min = floats[0];
const max = floats[1];
const range = max - min;

const depthData = new Float32Array(width * height);
for (let i = 0; i < uint16s.length; ++i) {
  depthData[i] = uint16s[i] / 0xFFFF * range + min;
}

如果您关心 future 世界的字节序，其中有任何浏览器在大字节序硬件上运行，那么您可以编写自己的函数来读取字节并生成这些值，也可以使用 DataView .

假设您知道数据采用小端格式

const data = new DataView(arrayBuffer);

const width = data.getUint32(0, true);
const height = data.getUint32(4, true);
const min = data.getFloat32(8, true);
const max = data.getFloat32(12, true);
const range = max - min;

const depthData = new Float32Array(width * height);
for (let i = 0; i < uint16s.length; ++i) {
  depthData[i] = data.getUint16(i * 2 + 16, true) / 0xFFFF * range + min;
}

如果您想要更复杂的压缩，例如您需要的膨胀/放气文件 a library或者自己编写。