レイマーチングを GLSL で記述し多層パーセプトロンの出力を可視化した興味深いプロダクト
専門用語が多くて素人にはちょっとむずかしい
今回ご紹介するのは、深層学習、いわゆるディープラーニングに関連した WebGL のデモです。
私は正直ディープラーニングについてまったくと言っていいほど予備知識がないので、うまく解説する自信がないのですが……
一般に「多層パーセプトロン」と呼ばれているアーキテクチャの出力結果を、なんとレイマーチングで可視化したという面白い内容となっています。あえてレイマーチングでサーフェスを描いているというのが本当に興味深いですね。
シェーダで高速演算!
先にも書いたとおり、私は専門知識がまったく無いのでこのデモがどういう意味を持ち、専門的な目線でどうして面白いのかということは上手に解説できません。
でも、この作品が GLSL を用いてディープラーニングの興味深い側面を可視化している、ということだけはわかります。
英語で書かれた解説を見ても、用語が難しくてよくわからない……
そしてその用語について調べていると、それについて解説しているところにまたわからない用語が出てくる……という悪魔のループにハマりそうになります。日本語の解説記事を読んでもよくわからない場合が多くて、もうディープラーニングについて下手に解説するのは駄目! と割り切りました(笑)
ものすごくざっくりな理解なのですが、ディープラーニングに必要となる多数の演算を、今回のデモの場合はシェーダ内で高速に演算しています。その結果生まれる層(Surface)を、レイマーチングの要領で可視化しているわけですね。
描画エリアの左側には、出力結果を可視化した立体的なビジュアルが浮かんでいます。
この部分にはマウスカーソルのインタラクションが仕込まれているので、マウスカーソルを重ねて滑らせてやるだけで、自分の好きな角度から全体を眺めることができます。
また、画面の右側には、重みの係数が色によって表現された丸い模様がたくさん並んでいますね。
下にある「Randomize」のボタンをクリックすると、重みがランダムに変化して、まったく違ったサーフェスが出てきます。面として認識しやすい層が出てくることもありますが、時には途切れ途切れの不思議な形になることももちろんあります。
さらに、この右側にたくさん並んでいる丸印の上でホイール操作を行うと、重みに直接干渉することができるようになっています。
重みは青から赤というふうに色で値が表現されているのですが、丸印の上でホイールスクロール操作をしてやると、これがインタラクティブに変化してリアルタイムに左側の描画結果も変わります。
たぶんこれ、すごく、すごくディープラーニングの学習に適した可視化事例だと思うのですが、やっぱり予備知識がないとちょっと難しいですね。
実際はかなりシンプルな実装になっていて入門者向けの内容だと思います。
もしディープラーニングに取り組むことがあったら、またあらためて見てみたい、そんなふうに思いました。 ※というかあまりにわからなすぎてつらいw
今回の作品はディープラーニングとレイマーチングを組み合わせたという意味で非常に面白いハイブリッドな実装ですが……
なんと WebGL の実装そのものも、実はハイブリッドになっています。
全体的な制御は three.js を利用して書かれており、画面内に出ている XYZ の軸のラインなどは、普通に three.js のレンダリング結果として描かれていますね。そこに、GLSL でレイマーチングして求めたサーフェスの状態を重ね合わせて描いているようです。
こういった、どちらかというと硬派でごついシェーダを、気軽に組み合わせることができるというのも、やはり three.js のすごいところですよね。
私は本当に申し訳ないですが深層学習についてあまりに無知なのでうまく解説できなかったのですが、パッと見た印象からもわかるとおり、かなり初学者向けの、非常に有用なコンテンツだと思います。
興味のある方はぜひチェックしてみてください。