Oculus Riftの仮想空間でプログラミングしてリアルタイムで3Dアニメーションを作成

没入型3Dヘッドアップディスプレイの「Oculus Rift」向けに、JavaScriptライブラリーのthree.jsを使い仮想空間内で3Dアニメーションをリアルタイムで作成可能なライブコーディングWebアプリが開発されました。開発者のBrian Peirisさんは、実際にアプリを使って仮想空間内で3Dアニメーションを作成している様子をYouTubeに公開しています。

Live coding in VR with the Oculus Rift, Firefox WebVR, JavaScript and Three.js - YouTube


仮想空間にさっそうと現われたコードエディター。

カタカタカタとコードが入力されると……

仮想空間の上の方に黒いボックスが出現しました。

黒いボックスは小型化して、色が赤に変化。

さらにコードが入力されていき……

赤い立方体は9つに増えました。

位置をエディタで調整、9つの赤い立方体は3×3の隊列を組んだまま画面手前に移動してきました。

コードを入力すると、今度は上下に浮遊しながら波打つように動き出すブロック。

立方体の色が黒に変化した後……

波打の動きに合わせて色が少しずつ変化する、グラデーション効果が付け足されました。

グラデーション効果と立方体の数が調節されて6×6の形へと変化。

今度はボックスの動きを、ベースは波のまま、パターンだけが変更されていきます。

立方体の数をさらに増やしてグラデーションのパターンも変更されました。

グラデーションのパターンはそのままに、全体がぺったんこに。

1つ1つのブロックの間がキュッと縮められ、さらに1つ1つのブロックが浮遊する動きも変化がつけられて、表面に線の模様が出現。

ブロックの個数が増加して、ゆっくりと波打つように動く姿は空飛ぶじゅうたんのようです。

最後はグラデーションが黄色と紫に変化するように変更されました。

なお、Peirisさんが開発したライブコーディングWebアプリはGitHubで公開されていますが、Firefox向けにビルドされたWebVR APIを利用しているので、同ブラウザ上でしか動作しないとのことです。