最近、WebUIにおけるWebGLの活用に興味があり、その流れでThree.jsに入門してみました。 わからないながら、Three.jsとWebRTCをシンプルに組み合わせて、テクスチャとしてデバイスのカメラを表示してみましたので、その際の所感をまとめます。

現物はこちら↓
リポジトリ: https://github.com/kamichidu/js-sandbox-threejs
デモ: https://kamichidu.github.io/js-sandbox-threejs/

まず画面上部の選択欄から、カメラデバイスを選択し、隣のGoボタンを押すと画面中央にカメラからの入力が出てきます。 それだけのシンプルプログラムです。

Three.jsのドキュメントを読んでいる間は、 THREE を毎回打つのだるいなと思ってました（どうでもいい）。 実際に書き初めてみると、意外と打ちにくくはなかったので、その点良かったと思います。

また私自身、OpenGLはCやC++、Goなどからやっていたことはありますが、大抵の場合生のAPIをいじっていたので、そちらのほうが戸惑いが大きかったように思います。 『なんだこの楽さは』的な。

特に最近のバージョンからvideoタグと併用することで、簡単にカメラ入力をテクスチャ化することができるようになっており、大変便利でした。 最初はWebRTCからカメラ入力取って、videoタグで読み込んで、canvasでキャプチャして…という流れでやろうとしていたので、この点で驚かされました。

今回は時間がなくて試せなかったのですが、例えばスプライトにカメラ入力を貼り付けて、そのスプライトに対して拡大/縮小や、そのような効果をつけられると楽しそうな気がします。 また、折角実世界の情報が入力されているので、リアルタイムでの測量やカメラ入力にオーバレイしての情報表示など試してみたい気持ちになりました。

昨今VRが騒がれていますが、私個人としては任意のシステムに対するより発展的なインタフェイスとしてのARに興味を持っています。 そのため、WebRTCと合わせてWebGLなどを活用する道を模索していけたらな、と思っています。

以上、お付き合いいただきありがとうございました。