なぜJSでバイナリを書くのか?

JSでバイナリ?

• JSでDOM操作や通信はわりとメイン?
• 画像、音声や動画、とかとりあえず、ブラウザに任せる?
• 通信も大体テキストをパースする感じかもね
• てか、大体テキストでやる
• 馴染がないよね?
• なんか難しいイメージがある?

JSバイナリを扱うとき

• 画像の編集や、圧縮など
• 3Dのバイナリデータの読み込み
• 音声ファイルのメタデータを取得
• 動画のエンコードやデコード
• バイナリデータの送受信

大半はライブラリがある

• JavaScriptはそれだけコミュニティがでかい
• まず、最初にライブラリを探しましょう。
  • JSのスキルは大半はライブラリ検索技術かもしれない...
• それでもバイナリのプログラミングが必要なときがある
  • 3Dデータの保存
  • 独自データ形式を利用する
  • ライブラリがクソ過ぎワロタ
  • そもそも欲しいライブラリがなかった...
  • 高速化や通信量を減らすなど

あんまり難しくない

• プログラム自体はすごく簡単
• 2進法の知識そこまでいらん
• ただ、結果が見えにくいのが難しいのかな?

前提知識

バイナリの知識

• 2進法
• ビットとバイト
• エンディアン

2進法

• 0と1の並びだけでデータを表わす(符号化とか言う)
• 数だけではなく、文字、音声、画像、動画もすべてこれ
  • 例
    • 1 = L
    • 01 = I
    • 001 = S
    • 0001 = P
    • 1010010001 = LISP
• 電気的(物理的)に扱いやすい。
  • 電圧のHighとLowで表すなど

ビットとバイト

• ビット
  • 情報量の単位
  • でもまぁ、2進法の単位と思ってええよ。
• バイト
  • ビットのまとまり
  • だいたい8ビット=1バイト

1

1

0

0

0

1

0

1

1

基本的にバイト単位で扱う

エンディアン

• 例:[1234,5678,9012,3456]のデータ列
  • [1234567890123456] = ビッグエンディアン
  • [4321876521096543] = リトルエンディアン
• CPUによってエンディアンが異なる

JSでバイナリ取扱

ArrayBuffer

• バイナリデータを格納するクラス
• バイナリを直接操作することができない
• 読み書きのためには、ビューを利用する
  • Typed Array Object
  • DataView Object
• XMLHttpRequest、FileReaderから取得する
• new ArrayBuffer(size);

Typed Array

• ArrayBufferのデータ列を一定のサイズで区切った配列と見なす
• 配列と同様に扱える
• 種類：
  • Uint8Array : 8ビットで区切った整数の配列
  • Int32Array  : 32ビットで区切った整数の配列
  • Float64Array : 64ビットで区切った浮動小数点数の配列
  • Uint8ClampedArray : 8ビットで区切った画素配列

Typed Arrayの注意点

• CPUのネイティブのエンディアンを利用する
• ネットワークを通じて、複数のコンピュータでバイナリデータを利用する場合
• 逆にCPUのエンディアンを利用するので高速
• エンディアンが問題になるときDataViewを利用

DataView

• 異なる、型のデータ列を利用する場合につかう
  • 例：ヘッダとボディがあるようなデータ
    • 8ビット整数と16ビットの整数というヘッダと16ビットのデータ列のボディ
• エンディアンの指定もできる
• XMLHttpRequest、FileReaderのinput/output APIで読み出すときに使う

TypedArray Object

•  
• Bullet Two
• Bullet Three

STLを読み出す

STLとは

• Standard Triangle Language
• 三角形で3Dのポリゴンを表現するデータ形式
• テキスト形式とバイナリ形式がある

STLを読みこみ3Dの

オブジェクトを表示する

• webglを利用する
• stlで頂点データを取り出し -> シェーダ -> 表示
• 3Dデータの頂点データを取り出すまで

STLをロード

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.stl", true);
xhr.responseType = "arraybuffer";

xhr.onload = function(event){
    var arrayBuffer = xhr.response;
    ...
}

xhr.send();

STLのフォーマット

三角形の数を読み出す

    let dataView = new DataView(arrayBuffer);
    let faces = dataView.getUint32( 80, true );

三角形の情報

A(0,1,0)

B(1,3,5)

C(4,1,2)

三角形の情報

三角形の頂点データ読み出し

    let offset = 84;
    let faceLength = 12 * 4 + 2;
    let polygons = [];

    for(var face = 0; face < faces; face++ ) {
        let begin = offset + face * faceLength;
        let vertex1Begin = begin + 12;
        let vertex2Begin = vertex1Begin + 12;
        let vertex3Begin = vertex2Begin + 12;

        ....
    }

三角形の頂点データ読み出し

var vertex1 = {
    x : dataView.getFloat32(vertex1Begin, true),
    y : dataView.getFloat32(vertex1Begin + 4, true),
    z : dataView.getFloat32(vertex1Begin + 8, true)
};
var vertex2 = { ... };
var vertex3 = {  ... };

polygons.push({
    vertices : [vertex1, vertex2, vertex3]
 });

まとめ

JSでのバイナリ取扱

• この3つを覚えておくだけ
  • ArrayBuffer
  • DataView
  • TypedArray
• 基本的にDataViewを利用すれば良い

まとめ

• 案外難しくはない
• 大抵はライブラリを使う
• 覚えておくと、できることがひろがる