Go言語でWebAssembly

2018/06/18
このエントリーをはてなブックマークに追加

はじめに

こんにちは。カブクのThree.js担当的存在だったあんどうですが、最近は主にGo言語を雰囲気で使用しています。Go言語いいですね。JavaScriptが刺激あふれる大都会だとすると、Go言語は緑薫る大草原。人生には青い空と澄んだ空気、そして最低限の文法要素と標準添付ライブラリしかいらんかったんや!ここには「何もない」がある!

背景

さて、現在Go言語で作成しているのはあれをそれして3Dモデルに変換してブラウザで表示するツールですが、残念ながら自動生成した3Dモデルがいきなり完璧であることはまずありません。そうした場合、ブラウザ側でプロパティを直接変更したり、アノテーションを追加したりして、再度3Dモデルを生成し直すことになります。

もちろん編集内容をサーバーに送り返して再度3D化することは可能ですが、この修正と再生成は何度も繰り返されることになるため、変更が小さいなら、なるべくブラウザ側で3D化したいところです。かといってGo言語の実装をJavaScriptに移植するのは明らかに面倒くさい。そもそもGo言語の実装もまだまったく安定していませんし。などと困っていたらPublickeyさんでこんな記事が公開されていました。

Go言語がWebAssemblyをサポートへ。GOARCHは「wasm」、GOOSは「js」に

ということでこのGo言語製の3D変換ツールをWebAssemblyにしてブラウザ上で動かしてみるのが今回の目標です。

Go言語のWebAssemblyサポートについて

https://github.com/golang/go/issues/18892

Go言語のWebAssemblyサポートはGopherJSの作者であるneelanceさんによって進められていて、今年8月にリリースされるはずのGo 1.11に乗る予定です。現時点ではWASMサポートに関係するドキュメントは一切ありませんが、neelanceさんによると以下のような機能がすでに組み込まれています(#issuecomment-347057409#issuecomment-359208503)。

  • WASMを生成してブラウザとNode.jsで動作
  • 基本的な操作
  • インターフェース
  • Goルーチンとチャネル
  • defer/panic/rescue
  • ファイルI/O(Node.js)
  • リフレクション
  • 各種パッケージ(bytes、container/heap、container/list、container/ring、encoding/ascii85、encoding/asn1、encoding/base32、encoding/binary、encoding/csv、encoding/hex、errors、flag、hash/adler32、hash/crc32、hash/crc64、hash/fnv、html、image、image/color、index/suffixarray、math、math/bits、path、sort、strconv、strings、text/scanner、text/tabwriter、unicode、unicode/utf8、unicode/utf16、etc…)

動作させること優先でパフォーマンスなどの非機能要件は後回しにされているようですが、とはいえこれは思いの外、ちゃんと使えそうです。

Go言語のWebAssembly出力を試す

https://blog.lazyhacker.com/2018/05/webassembly-wasm-with-go.html

先ほども書きましたが今の所WebAssembly出力に関するドキュメントは一切ありません。が、HelloWorldを試してブログにまとめてくれている方がいらっしゃいます。ありがたく参考にさせていただきましょう。まずはここに書かれてあることをそのままやってみます。

開発はneelanceさんのリポジトリで進められているので、そちらからコードを取得してビルドします。

$ git clone https://github.com/neelance/go.git
$ cd go
$ git checkout wasm-wip
$ cd src
$ ./all.bash

test.goを用意して

// test.go
package main
import "fmt"

func main() {
  fmt.Println("Hello, WASM!")
}

neelanceさんのリポジトリから取ってきたgoコマンドを使用してビルドします。見ればわかると思いますが、GOOS=js GOARCH=wasmが肝です。

$ GOOS=js GOARCH=wasm go build -o test.wasm test.go

test.wasmが生成されたはずです。同じディレクトリにmisc/wasmディレクトリ以下にあるwasm_exec.htmlとwasm_exec.jsをコピーしてウェブサーバーを起動し、wasm_exec.htmlを表示してみましょう。

失敗します(すいません)。参考にしているブログにも書いていますし、エラーメッセージを見てもわかりますが、wasmファイルのMIMEタイプはapplication/wasmでなければいけません。/etc/mime.typesを開いて以下を追加します。

application/wasm wasm

もう一度試してみます。

無事に動きました。

引数と返り値を処理する

思いの外トラブルもなくあっさり動いてしまいましたが、本当にやりたいのはこの先です。ここまでで実現できているのは以下です。

  • main()関数の呼び出し
  • fmt.Printlnによるコンソール出力

3D変換ツールの機能を呼び出すにはさらに次の2つを実現する方法を調べなければいけません。

  • 引数の受け渡し方
  • 返り値の受け渡し方

先ほどの例ではmain()を呼び出していましたが、任意の関数を公開してJSから呼び出せるならまとめて解決できそうです。できるんでしょうか?ドキュメントがないのでとりあえずコードリーディングとDevToolsに頼ります。まずwasm_exec.htmlを見てみましょう。

// wasm_exec.html
...
const go = new Go();
let mod, inst;
WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {
  mod = result.module;
  inst = result.instance;
  document.getElementById("runButton").disabled = false;
});

async function run() {
  console.clear();
  await go.run(inst);  /* wasmのコードを呼び出してるっぽい部分 */
  inst = await WebAssembly.instantiate(mod, go.importObject); // reset instance
}
...

実際の呼び出しはgo.run(inst)で行われているようです。wasm_exec.jsを確認します。

...
global.Go = class {
  ...
  async run(instance) {
    this._inst = instance;
    ...その他のプロパティ等の設定...

    while (true) {
      ...
      this._inst.exports.run(argc, argv);
      ...
    }
  }
}
...

回り回って結局inst.exports.runが呼ばれているようなので、とりあえずコンソールでinst.exportsを確認します。

関数はrun以外に公開されていなさそうです。runmainを呼んでいるので、main関数経由でなんとかするしかないのかも。mainになにかパラメータを渡す方法はないんでしょうか?wasm_exec.jsのGoクラスの定義を確認します。

// wasm_exec.js
...
global.Go = class {
  constructor() {
    this.argv = [];
    this.env = {};
    ...

コマンドライン引数や環境変数でパラメータを渡せそうな空気が漂ってます。試してみましょう。wasm_exec.htmlにコマンドライン引数を設定し、test.goでそのコマンドライン引数を使用するように修正します。

// wasm_exec.html
...
const go = new Go();
go.argv.push("Hello, arg!");
...

// test.go
package main

import (
  "fmt"
  "os"
)

func main() {
  fmt.Println(os.Args[0])
}

確認します。

うまく引数を渡せたようです。ちなみにos.Argsの代わりにflag.Argを使用するとなぜか動きませんでした。コマンドライン引数ではなく環境変数を使用する場合はos.Getenvgo.envを使ってください。

とりあえずパラメータを渡せるようになったので、残る問題は処理結果をどう受け取るかです。

先ほどinst.exportsを確認したときにmemというMemory型のプロパティがあったことを覚えているでしょうか。このオブジェクトはJSとWASMで共有されるメモリです。つまりこの中身をJS側で自由に利用できるなら返り値の問題は解決します。なにはともあれまずこのmemの中身を見てみましょう。

何もわかりません。雰囲気で太刀打ちできるレベルではありません。そもそもなにをどう保持しているかわからないと数字の羅列を見たところでなんともならないので、とりあえず生成されたwasmのコードが何をやっているか見てみましょう。ただ、wasmはバイナリファイルなのでそのまま目視で理解できるものではありません。まずはwasm2watでテキスト形式に変換します。

$ wabt/bin/wasm2wat -o test.wat test.wasm

これは詳細を省くが結論だけ言うと約56万行あってお前は死にます。確認してみるとwasmの段階でむっちゃでかくなってますね。

$ ls -lah test.*
-rw-r--r--  1 andoyasushi  staff    80B  6 15 16:14 test.go
-rwxr-xr-x  1 andoyasushi  staff   2.3M  6 15 13:19 test.wasm
-rw-r--r--  1 andoyasushi  staff    64M  6 15 16:04 test.wat

追々tree shakingが実装されるんだろうと思われますが、現状ではwasmの方面から共有メモリの使われ方を把握するのはたいへんそうです。かといってGoのバックエンドのコードを読むのも劣らずたいへんです。方針を変えましょう。

現在のHello Worldはコンソールに結果が出力されています。WebAssemblyから直接コンソールに出力することはできないので、WASMのコードをインスタンス化するときにJS側からconsole.logを渡しているはずです。このconsole.logを呼び出している部分で結果を横取りするのはどうでしょう。とりあえず該当部分を見てみます。

// wasm_exec.html
...
WebAssembly.instantiateStreaming(fetch("test.wasm"), go.importObject).then((result) => {
...

instantiateStreamingの第二引数がwasmにインポートされるJavaScriptの関数です。このgo.importObjectがどうなっているか見てみましょう。

// wasm_exec.js
...
let outputBuf = "";
global.fs = {
  constants: {},
  writeSync(fd, buf) {
    outputBuf += decoder.decode(buf);
    const nl = outputBuf.lastIndexOf("\n");
    if (nl != -1) {
      console.log(outputBuf.substr(0, nl));
      outputBuf = outputBuf.substr(nl + 1);
    }
    return buf.length;
  },
};

global.Go = class {
  constructor() {
    ...
    this.importObject = {  // ココ
      go: {
        ...
        // func wasmWrite(fd uintptr, p unsafe.Pointer, n int32)
        "runtime.wasmWrite": (sp) => {
          const fd = getInt64(sp + 8);
          const p = getInt64(sp + 16);
          const n = mem().getInt32(sp + 24, true);
          fs.writeSync(fd, new Uint8Array(this._inst.exports.mem.buffer, p, n));
        },
        ...

go.importObjectsgo["runtime.wasmWrite"]で呼ばれているfs.writeSyncconsole.logが呼ばれているようです。あまりきれいな方法ではありませんがとりあえずこの関数を次のように変更します。

writeSync(fd, buf) {
  outputBuf += decoder.decode(buf);
  const nl = outputBuf.lastIndexOf("\n");
  if (nl != -1) {
    //console.log(outputBuf.substr(0, nl));
    window.wasmResult = outputBuf.substr(0, nl);   // 結果をwindow.wasmResultに保存
    console.log(window.wasmResult);
    outputBuf = outputBuf.substr(nl + 1);
  }
  return buf.length;
},

どうでしょう。

期待通りwindow.wasmResultで結果が取得できるようになりました。

3D変換ツールをブラウザで動かす

それでは当初の予定通り3D変換ツールをブラウザで動かしてみます。変換ツールはJSON形式で与えられる2D情報をもとに、3D形状を表すJSONを返すものです。WebAssemblyを出力するために変換ツールのコードに対して行った変更は以下の通り。

  • 2D情報をファイルから読み取るのではなく、コマンドライン引数として受け取るように変更
  • 変換結果をファイルに書き出すのではなく、fmt.Printlnで標準出力に書き出すように変更

これだけです。では試してみます。

画面左の文字列が2D情報(内緒)で、画面右の文字列がその情報を解釈して3D情報に変換したものです。画面中央の3D表示はGo言語(WebAssembly)ではなくThree.jsで行っています。

ということで、無事にGo言語製の変換ツールをWebAssemblyビルドしてブラウザ上で動かすことができました。

まとめ

思った以上にあっさりとGo言語製のツールをブラウザ上で動かすことができました。

  • ドキュメントがない
  • JSから実行できるのはmain()関数のみ?
  • パラメータはコマンドライン引数か環境変数わたす?
  • 実行結果はfmt.Println()した結果を横取りするしかない?
  • 生成されるwasmのファイルサイズめっさでかい

上記のようなつらみはありますし、それ以外にもいろいろと小さな問題はありましたが、8月のリリースまでには潰してくれると信じています。その頃にはもちろんドキュメントも整備されていることでしょう。正直「もし使えたらラッキー」くらいのつもりで試し始めましたが、今は確実に業務で使えると思っています。

株式会社カブクではGo言語のWebAssembly出力に興味のある開発者を募集しています。

その他の記事

Other Articles


TypeScript で “radian” と “degree” を間違えないようにする

2019/02/05
Python3でGoogle Cloud ML Engineをローカルで動作する方法

2019/01/18
SIGGRAPH Asia 2018 参加レポート

2019/01/08
お正月だョ!ECMAScript Proposal全員集合!!

2019/01/08
カブクエンジニア開発合宿に行ってきました 2018秋

2018/12/25
OpenAPI 3 ファーストな Web アプリケーション開発(環境編)

2018/12/23
いまMLKitカスタムモデル(TF Lite)は使えるのか

2018/12/21
[IoT] Docker on JetsonでMQTTを使ってCloud IoT Coreと通信する

2018/12/11
TypeScriptで実現する型安全な多言語対応(Angularを例に)

2018/12/05
GASでCompute Engineの時間に応じた自動停止/起動ツールを作成する 〜GASで簡単に好きなGoogle APIを叩く方法〜

2018/12/02
single quotes な Black を vendoring して packaging

2018/11/14
3次元データに2次元データの深層学習の技術(Inception V3, ResNet)を適用

2018/11/04
Node Knockout 2018 に参戦しました

2018/10/24
SIGGRAPH 2018参加レポート-後編(VR/AR)

2018/10/11
Angular 4アプリケーションをAngular 6に移行する

2018/10/05
SIGGRAPH 2018参加レポート-特別編(VR@50)

2018/10/03
Three.jsでVRしたい

2018/10/02
SIGGRAPH 2018参加レポート-前編

2018/09/27
ズーム可能なSVGを実装する方法の解説

2018/09/25
Kerasを用いた複数入力モデル精度向上のためのTips

2018/09/21
競技プログラミングの勉強会を開催している話

2018/09/19
Ladder Netwoksによる半教師あり学習

2018/08/10
「Maker Faire Tokyo 2018」に出展しました

2018/08/02
Kerasを用いた複数時系列データを1つの深層学習モデルで学習させる方法

2018/07/26
Apollo GraphQLでWebサービスを開発してわかったこと

2018/07/19
【深層学習】時系列データに対する1次元畳み込み層の出力を可視化

2018/07/11
きたない requirements.txt から Pipenv への移行

2018/06/26
CSS Houdiniを味見する

2018/06/25
不確実性を考慮した時系列データ予測

2018/06/20
Google Colaboratory を自分のマシンで走らせる

2018/06/15
カブクエンジニア開発合宿に行ってきました 2018春

2018/06/08
2018 年の tree shaking

2018/06/07
隠れマルコフモデル 入門

2018/05/30
DASKによる探索的データ分析(EDA)

2018/05/10
TensorFlowをソースからビルドする方法とその効果

2018/04/23
EGLとOpenGLを使用するコードのビルド方法〜libGLからlibOpenGLへ

2018/04/23
技術書典4にサークル参加してきました

2018/04/13
Python で Cura をバッチ実行するためには

2018/04/04
ARCoreで3Dプリント風エフェクトを実現する〜呪文による積層造形映像制作の舞台裏〜

2018/04/02
深層学習を用いた時系列データにおける異常検知

2018/04/01
音声ユーザーインターフェースを用いた新方式積層造形装置の提案

2018/03/31
Container builderでコンテナイメージをBuildしてSlackで結果を受け取る開発スタイルが捗る

2018/03/23
ngUpgrade を使って AngularJS から Angular に移行

2018/03/14
Three.jsのパフォーマンスTips

2018/02/14
C++17の新機能を試す〜その1「3次元版hypot」

2018/01/17
時系列データにおける異常検知

2018/01/11
異常検知の基礎

2018/01/09
three.ar.jsを使ったスマホAR入門

2017/12/17
Python OpenAPIライブラリ bravado-core の発展的な使い方

2017/12/15
WebAssembly(wat)を手書きする

2017/12/14
AngularJS を Angular に移行: ng-annotate 相当の機能を TypeScrpt ファイルに適用

2017/12/08
Android Thingsで4足ロボットを作る ~ Android ThingsとPCA9685でサーボ制御)

2017/12/06
Raspberry PIとDialogflow & Google Cloud Platformを利用した、3Dプリンターボット(仮)の開発 (概要編)

2017/11/20
カブクエンジニア開発合宿に行ってきました 2017秋

2017/10/19
Android Thingsを使って3Dプリント戦車を作ろう ① ハードウェア準備編

2017/10/13
第2回 魁!! GPUクラスタ on GKE ~PodからGPUを使う編~

2017/10/05
第1回 魁!! GPUクラスタ on GKE ~GPUクラスタ構築編~

2017/09/13
「Maker Faire Tokyo 2017」に出展しました。

2017/09/11
PyConJP2017に参加しました

2017/09/08
bravado-coreによるOpenAPIを利用したPythonアプリケーション開発

2017/08/23
OpenAPIのご紹介

2017/08/18
EuroPython2017で2名登壇しました。

2017/07/26
3DプリンターでLチカ

2017/07/03
Three.js r86で何が変わったのか

2017/06/21
3次元データへの深層学習の適用

2017/06/01
カブクエンジニア開発合宿に行ってきました 2017春

2017/05/08
Three.js r85で何が変わったのか

2017/04/10
GCPのGPUインスタンスでレンダリングを高速化

2017/02/07
Three.js r84で何が変わったのか

2017/01/27
Google App EngineのFlexible EnvironmentにTmpfsを導入する

2016/12/21
Three.js r83で何が変わったのか

2016/12/02
Three.jsでのクリッピング平面の利用

2016/11/08
Three.js r82で何が変わったのか

2016/12/17
SIGGRAPH 2016 レポート

2016/11/02
カブクエンジニア開発合宿に行ってきました 2016秋

2016/10/28
PyConJP2016 行きました

2016/10/17
EuroPython2016で登壇しました

2016/10/13
Angular 2.0.0ファイナルへのアップグレード

2016/10/04
Three.js r81で何が変わったのか

2016/09/14
カブクのエンジニアインターンシッププログラムについての詩

2016/09/05
カブクのエンジニアインターンとして3ヶ月でやった事 〜高橋知成の場合〜

2016/08/30
Three.js r80で何が変わったのか

2016/07/15
Three.js r79で何が変わったのか

2016/06/02
Vulkanを試してみた

2016/05/20
MakerGoの作り方

2016/05/08
TensorFlow on DockerでGPUを使えるようにする方法

2016/04/27
Blenderの3DデータをMinecraftに送りこむ

2016/04/20
Tensorflowを使ったDeep LearningにおけるGPU性能調査

→
←

関連職種

Recruit

サーバーサイドエンジニア(Python/Go)

業務内容

カブク自社で開発・運営しているWebサービス(3Dプリンターなどを活用したデジタル製造サービス)のサーバサイド開発。WebサービスのバックエンドやAPIの設計・実装をお任せします。

フロントエンドエンジニア(TypeScript)

業務内容

自社で開発・運営しているWebサービス(3Dプリンターなどを活用したデジタル製造サービス)のフロントエンドの設計や実装をお任せします。 また、新規サービス開発プロジェクトへも参画いただけます。

機械学習エンジニア

業務内容

機械学習を用いた3Dデータや2Dデータからの情報抽出モデルの構築やセンサーデータの分析モデルの調査・研究・開発。 PoCだけでなく、データの前処理や学習、ハイパーパラメータチューニング、獲得モデルの評価、適用、運用のパイプライン構築まで、機械学習をプロダクション適用する全てのお仕事に携われます。

インターン(エンジニア)

業務内容

カブクの社員と肩を並べて、実業務を中心とした知識やスキルを身につけていただく実践型インターンシップ。スタートアップならではのスピードがあり、ダイナミックな就業経験を体験することが可能です。

→
←

お客様のご要望に「Kabuku」はお応えいたします。
ぜひお気軽にご相談ください。

お電話でも受け付けております
03-6380-2750
営業時間:09:30~18:00
※土日祝は除く