Mapbox-GL.js用に用意したglyphのpbfを活用出来ないか調べている話 Part1

こちらはMIERUNEアドベントカレンダーの12月20日分の記事です
当初は１記事で完結させるつもりだったのですが、解決しなかったので、２部以上に分かれます

概要

Mapbox-GL.jsで文字を表示させるためにフォントデータをpbf（Protocol Buffers）に変換して使うのですが
そのpbfを活用出来たら色々便利なのでは。。。ということで、まずはブラウザで読み込んでみようと思いました
ちなみに、glyph pbfは以下のツールで作れます
https://github.com/openmaptiles/genfontgl

まずはProtocol Buffersのスキーマ定義を調べる

最初、Mapboxのソースコードを追いかけていたのですが、ありました
https://github.com/mapbox/glyph-pbf-composite/blob/master/proto/glyphs.proto

Mapboxはこのスキーマ定義に沿ってJavascriptにてパースを行っておりましたが、今回はこのprotoファイルを利用しました

protobuf.jsを利用します
https://github.com/protobufjs/protobuf.js
まずはこの定義ファイルをglyphs.protoとして設置して、protobuf.jsでloadします

protobuf.load("glyphs.proto", function(err, root) {
    // 定義を取得
    const glyph = root.lookupType("llmr.glyphs.glyphs");

}

pbfファイルを取得して、デコードする

pbfファイルを取得して、定義を利用してデコードします

protobuf.load("glyphs.proto", function(err, root) {
    // 定義を取得
    const glyph = root.lookupType("llmr.glyphs.glyphs");

    load("ココに読み込みたいpbfファイルを設定").then(val => {
        // ArrayBufferから変換
        const buf = new Uint8Array(val)
        // 定義でデコード
        const message = glyph.decode(buf)
        const obj = glyph.toObject(message)
        console.log(obj);
    });

}

gryphのpbfの内容が見れた

ここまでで以下の内容を取得できます

stacks:[
    glyphs:[
        {
            advance: 6
            bitmap: [
                // BufferArray
                ]
            height: 17
            id: 33
            left: 1
            top: -5
            width: 4
        }
        ... //省略
    ],
    name:"フォントの名前",
    range:"0-255"
]

ここで、私はbitmap取れたから表示出来るのでは…と思い、取れたBitmapと思われるBufferArrayをBlobにして、createImageBitmapを利用して画像表示を試みましたが、エラーになりました

ということで、Part2へ続きます
https://qiita.com/northprint/items/949ac1f7dcfbf73dd85f