Javascript 如果要使用arrayBuffer，请使用二进制文件或JSON文件

我想为我的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数据，或者在运行时加载一些数据

一般来说，如果您正在运行自己的服务器，您可以gzip压缩数据，并告诉服务器告诉浏览器数据已gzip，下载后它将在后台取消gzip

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

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

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

加载后，您可以使用

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

您需要注意的唯一问题是发送二进制数据不是跨平台的。如果您的原始平台是little endian，而用户的浏览器是big endian，那么它将无法工作。像上面这样的库可能会处理这个问题。另一方面，目前还没有支持WebGL浏览器的通用big-endian平台，因此您可以忽略这个问题。但谁知道未来会怎样