仕事の進捗が進んだ

請負っている仕事の進捗が進みました！

window.onload = function() {
    fetch('./Box.glb')
    .then((res) =>  res.arrayBuffer())
    .then((buffer) => {
        // GitHubからコピペしたやり方
        const header = new Uint32Array(buffer, 0, 3);
        console.log( header[0].toString(16) );
        console.log(header[1]);
        console.log(header[2]);
        // 師匠に教わったやり方
        var view = new DataView(buffer);
        console.log(view.getUint32(0, true).toString(16));
        console.log(view.getUint32(4, true));
        console.log(view.getUint32(8, true));
    })
    .catch((reason) => {
        console.log(reason);
    });
}

以上のソースコードでglTF形式の一部のバイナリファイルのヘッダーの読込が出来るようになりました！

以下リンクの3Dボックス形状の表示になるファイルを読込ます。

https://github.com/KhronosGroup/glTF-Sample-Models/blob/fb85803eaeb9208d1b6f04e3f3769ebc8aa706f6/2.0/Box/glTF-Binary/Box.glb

解析の仕方は以下リンクのファイルのような解析の仕方だと思います。

https://github.com/KhronosGroup/glTF-Sample-Viewer/blob/master/src/glb_parser.js

まとめ

この処理に１週間悩みましたが、結果的に使っていたボックスのデータファイルがおかしい値になっていて、今回使ったリンク先にあるボックスのデータを使うと正しい値が取れる事が分かりました。

正しいデータを使うことの重要性を感じさせられました。