マイクからの音声波形や周波数レベルをバーチャル背景のように表示するサイト（WebGLとBlazePose使用）
こんな感じに動きます。
BlazePoseで背景を消した映像を非表示キャンバスに送り、そのキャンバスからWebGLのテクスチャを作成することで、 WebGL上にも表示しています。以下の記事で解説をしております。
- BodyPixとWebGLを組み合わせて3次元的な次世代バーチャル背景を作る ← BodyPixを使用した最初のバージョンの記事
- BlazePoseでBodyPixによる人物抽出処理を置き換えよう ← BodyPixがdeprecatedとなったために、BlazePoseで代替するための記事
音声処理はAudioNodeインタフェースを使用しております。また、WebGLでの行列計算にminMatrix.jsを使用しております。