0

我想为我的 webgl 应用程序获取一些数据。我需要将这些数据与着色器一起使用，所以我必须将它们放入 ArrayBuffer 中。现在我这里有两个非常相似的代码片段。第一个应该使用二进制文件：

function readBinaryFile(file) {
    var request = new XMLHttpRequest();
    request.open('GET', file, true);
    request.responseType = "arraybuffer";
    request.onload = function (e) {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var buffer = request.response;
                // here I already have a Buffer, 
                // so Im just constructing TypedArray 
                var result = new Float32Array(buffer, 64, 4*3*250 );
            } else {
                console.error(request.statusText);
            }
        }
    };
    request.send(null);
};

readBinaryFile('data/file.bin'));

第二个应该与 json 文件一起使用：

function readJSONFile(file) {
    var request = new XMLHttpRequest();
    request.open('GET', file, true);
    request.responseType = "arraybuffer";
    request.onload = function (e) {
        if (request.readyState === 4) {
            if (request.status === 200) {
                var jsonData = JSON.parse(request.responseText);
                // here I dont have a buffer, so 
                // it will create both Buffer and TypedArray
                var result = new Float32Array(jsonData.vertexPositions);
            } else {
                console.error(request.statusText);
            }
        }
    };
    request.send(null);
};

readJSONFile('data/file.json'));

我喜欢 json 文件的结构，我看到很多人都在使用它。但我觉得它有点脏，因为我做了一些我不需要做的事情，比如解析大型 json 或请求 responseText 而不是二进制数据。我宁愿使用 json 方式，但我的应用程序应该真的很棒而且很快，所以也许不值得......

所以我的问题是，是否有人也考虑过它并用它做了一些测试。谢谢你。

PS：考虑一下已经在浏览器数据存储中的 100MB 数据，或者可能正在运行中加载一些数据......

4

1 回答 1

0

一般来说，如果你在运行自己的服务器，你可以 gzip 压缩你的数据，并告诉服务器告诉浏览器数据被 gzip 压缩，下载后它会在后台解压缩它。这里至少有一个关于这个的问题。

在这种情况下，您可能会发现发送文本比发送二进制文件要小，因为文本更容易压缩。

要考虑的另一件事是格式化您的数据和/或使用有损格式来使您的数据非常小。举个简单的例子，如果你要存储法线，你可能只为每个 X、Y、Z 发送 8 位，然后在加载它们或告诉 GL 为你做这些时将它们转回浮点数。另一个例子是量化你的位置。网格通常使用 32 位浮点数存储。您可以计算网格的范围，然后通过将每个值转换为 16 位存储数据，如

  smallX = Math.floor((x - minX) * 65535 / (maxX - minX));

加载后，您可以返回接近原始值的值

  originalX = smallX * (maxX - minX) / 65535 + minX;

有一个库可以将这些概念付诸实践，在这里制作非常小的网格。

您需要注意的唯一问题是发送二进制数据不是跨平台的。如果您的原始平台是小端并且用户的浏览器是大端，则它将无法工作。像上面这样的库可能会处理这个问题。另一方面，目前没有支持 WebGL 的浏览器的通用大端平台，所以也许你可以忽略这个问题。谁知道未来会怎样。

于 2014-01-17T04:47:54.667 回答