📖

bellFaceで採用した超軽量バーチャル背景について

2021/12/17に公開

JavaScript

TensorFlow

WebAssembly

tech

bellFaceのバーチャル背景

2021年8月にリリースされたbellFaceのバーチャル背景にて採用した技術についてご紹介します。

Tensorflow.jsについて

ブラウザ上で実装されるバーチャル背景の多くはTensorflow.js^[1]を用いて実装されていることが多いかと思います。
Tensorflow.jsは通常WebGLバックエンド^[2]と呼ばれるものを用いて演算を行っています。
このWebGLバックエンドはCPUバックエンドと比べて最大100倍高速ですが、当然ながらグラフィックボード非搭載のPCではパフォーマンスが伸びにくいです。

Wasmバックエンドについて

WasmとはWebAssemblyのことですが、TensorFlow.jsにおけるWasmバックエンドはニューラルネットワーク演算用に最適化されており、グラフィックボードが無くともCPUのみで高速な演算を可能としています。

ただし、Wasmバックエンドも万能というわけではなく公式ガイドに以下のように記載されています。

一般的に、Wasm はモデルが小さい場合、または WebGL (OES_texture_float 拡張機能) サポートがないか、性能が低い GPU が搭載されたローエンドデバイスがある場合に適しています。

また、以下の表はTensorFlow.js 1.5.2時点の推論時間ですが、この表を見ると小規模モデルにおいてはWasmの方が高速であり、モデルサイズが大きいほどWebGLが優位になっています。

小規模モデル

モデル	WebGL	Wasm	CPU	メモリ
BlazeFace	22.5 ms	15.6 ms	315.2 ms	.4 MB
FaceMesh	19.3 ms	19.2 ms	335 ms	2.8 MB

大規模モデル

モデル	WebGL	Wasm	CPU	メモリ
PoseNet	42.5 ms	173.9 ms	1514.7 ms	4.5 MB
BodyPix	77 ms	188.4 ms	2683 ms	4.6 MB
MobileNet v2	37 ms	94 ms	923.6 ms	13 MB

尚、TensorFlow.jsのバージョン2.3.0からはWasmバックエンドが上記表よりも高速化^[3]されました。
動作環境にもよりますが、Wasm + SIMD + マルチスレッドをサポートしていればPoseNetにおいてもWasmバックエンドの方が高いパフォーマンスがでるようになります。
使い方も簡単で以下のようなコードで簡単に切り替え可能です。

// どこかで↓を定義しておく
// tfjsWasm.setWasmPaths('wasmのある場所を指定');
// バックエンドを指定する
await tf.setBackend('wasm');
await tf.ready();

bellFaceで採用した手法について

Tensorflow.js + Wasmバックエンド + BlazeFaceによって実現しています。

クライアントの動作環境は以下で試していますが、バーチャル背景をONにしてもCPU負荷は8%程度しか上昇せず一般的なバーチャル背景よりも遥かに低負荷で実現できています。
CPU負荷が高いとファンが唸りだして動作が不安定になることもありますが、bellFaceでは長時間バーチャル背景を利用しても問題ないよう実装されていますので機会がございましたら是非お試しいただければ幸いです。

機種	CPU	メモリ
MacBook Pro (13-inch, 2019)	2.8 GHz クアッドコアIntel Core i7	16 GB 2133 MHz LPDDR3

動作検証ページ

埋込み型だとCORS制約によりカメラが動作しない為、以下のリンクから開いてご確認ください。

ページ右上のControlsパネルからバックエンドとモデルの切り替えができます。
下記にMacbookで開いた場合のスクショを掲載しており、Wasm + Blazefaceが最も高速な組み合わせとなっています。
尚、お使いのPCに高速なグラフィックボードを搭載されている場合はWebGLの方が早くなるケースもあります。

Wasm + BlazeFace

wasmblazeface
60fps前後

WebGL + BlazeFace

webglblazeface
35fps前後

Wasm + BodyPix

wasmbodypix
18fps前後

WebGL + BodyPix

webglbodypix
20fps前後

まとめ

現時点ではWasmバックエンド＋BlazeFaceが最もパフォーマンスがでる組み合わせであり、それらを用いてbellFaceのバーチャル背景を実装しました。
Wasmバックエンドのパフォーマンス改善は引き続き行われているようで、バージョンアップやブラウザの実装状況次第では今後変わってくるところもあるかと思います。

また、WebGLよりも高速なWebGPUにも期待が持てます。
10月にはTensorFlow.jsのWebGPUバックエンドのalpha版もリリースされたようなので将来的にはネイティブアプリと変わらないパフォーマンスを発揮できるようになるかもしれませんね。

We are hiring!!!

ベルフェイスではプロダクトやシステムのメンバーを引き続き積極採用しています。

エンジニアの方は以下から応募可能です。

またそれ以外の各ポジションは以下から確認できます。

Meetyもあるそうなのでカジュアル面談で色々聞いてみたいという方は下記よりお願いいたします。

Who's Next ??

明日の「bellFace Advent Calendar 2021」は、プロダクトマネージャーの野元さんです。明日もお楽しみに！

脚注