日本初らしいWeb3Dハッカソンに参加して、賞も頂いてきた話

概要

Web3Dのハッカソンに参加して、jThree + milkcocoaを使って
リアルタイムに3D空間で音のセッションができるようなものを作りました。

Web3dSession


また、協賛企業であるモバイルファクトリー様から賞として、
iTunes Storeカードとモバイルファクトリー様のステッカーを頂きました。


関係者各位にはこの場を借りて感謝申し上げます。

そもそもjThreeとは


jThree - 3DCGと立体音響が数行で動くWeb3Dライブラリ
ChromeやFirefox、一部のIE等のモダンなブラウザで3Dコンテンツを動かせるWebGLのラッパーであるthree.jsをさらにラップすることで、jQueryでのDOM操作くらいが分かっていればブラウザで動作する3Dコンテンツを簡単に制作できるもの。
という説明で多分合ってると思います。
簡単に制作できる代償もそれなりにあって、動作が遅い、Webで3Dをやることの本質が理解しにくくなる等々言われているようです。

本文


【3DCG・立体音響の面白さで勝負】日本初Web3Dハッカソンで年越ししよう！jThree Class主催 Web3D Hackathon Japan 2014 : ATND
日本初らしいWeb3Dハッカソン、でもまあ、主催がjThreeの松田さんなので、実質、jThreeハッカソンなんだろうなと思いつつ時間が出来たので参加してみました。

協賛企業様

朝日新聞メディアラボ様からは会場を、
モバイルファクトリー様からはハッカソンで自由に使用できる音源を提供して頂きました。
ここに改めて感謝申し上げます。

アイディア発表、チームビルディング

参加できるのが決まったのが急だったので特にアイデアもなく、一緒に組んだお二方と考えることに。
結果、せっかく3Dオーディオが簡単に使えることを活かすのと、
Javascript1行を埋め込むだけで簡単にバックエンドが用意できるmilkcocoaを使って
音楽のセッションのようなことができたら面白いのではという案に落ち着きました。

作成

アイデア出し1時間、昼休憩1時間、制作時間3時間半と時間が厳しいので以下のボーダーラインを設定し、まずはそこにたどり着くことを目標としました。

  • 固定した3点を置き、1つの点から音を出す処理を行うと、同時に接続してる他の人も同期してそこから音が出る。
  • また、3Dオーディオなのでカメラの位置によって、その音が左から聞こえたり右斜め前から聞こえたりする。

結局のところ、3Dオーディオの使い方を1から知るというレベルだったり、僕がmilkcocoaとの連携でつまらないミスを連発したりで、ボーダーはなんとか超えたというところでタイムオーバーでした。

出来上がったもの

概要にも貼りましたが、以下になります。

Web3dSession
右側の再生ボタンを押すとA、B、Cの3つのオブジェクトが現れ、それぞれbeat、scratch、thunderに対応しています。
カメラ切り替えボタンやドラッグで視点を変えて音を鳴らすと、音の聞こえ方が左からだったり右斜め前からだったりと変化することがわかると思います。
また、milkcocoaで同期しているため同時に接続している人が音を鳴らすと、自分のブラウザでもその音が聞こえてきます。


左のエディタを見てもらえると分かりますが、記述するのはGOML、HTML、CSS、Javascriptと4種類ありますが、それぞれ50行も書いていません。これだけの記述で3Dオブジェクトを描いて、3Dオーディオを設定して、ブラウザ間のリアルタイム通信も行えるとは、jThreeとmilkcocoaの素晴らしさに誰しもが震えると思います。それこそ西野カナばりに震えますよね？　震えたくなくても、震える！

時間があればやりたかったこと

  1. BGMを設定して、ブラウザ間で再生タイミングを同期させる → jThreeの音楽を鳴らす関数にホストの再生時間をつっこめば出来そうだが、1秒くらい遅延がおきそう。
  2. オブジェクトを固定しないで、プレイヤーとして移動できるようにする →

milkcocoaでリアルタイム対戦できるFPSを作った話 - QiitaのようにFPSっぽく設定すれば出来るかと。というかこのゲームに銃の発射音を3Dオーディオで設定して、どこから撃たれているのかわかるっていうのも面白そうだと思った。

  1. 楽器を複数種類用意して多人数でセッション → 複数用意するのは大変。あと、再生タイミングの同期が音楽レベルにすると無理そう。

総じて、最初に目指した音楽のセッションというレベルは厳しそうだが、みんなが集まって音を出してるだけでも楽しいと思うのでチャカポコチャカポコできる何かが作れればいいなと感じた。

成果発表

初音ミクなんかは簡単に踊らせられるので、音ゲーを作っていたグループ、
jThreeは一切使わずthree.jsで立体音響を体感できるものを作り、技術の難しさに感動した松田さんからjThree賞をもぎ取ったグループ、
RedMine的なタスク管理ツールでのタスク割り振りを楽しくするためにjThreeを使おうぜ！ という発想にいたったグループ、
バンジージャンプをしている人が杵を持ち、地上にある臼めがけてモチをつくという説明していてよく分からないけどインパクトある画面を作ってメディアラボ賞に輝いたグループ。
そして私のグループは音源を提供していただいたモバイルファクトリー様から賞を頂きました。
ステッカーがあるだけでもかなり嬉しいですね。

以下、今回のハッカソンやjThreeの勉強会に何度か出て思うところ

この日の松田さんの話で「Webで3Dと言っても、素人が見てすごいと思えることをやろうとするとレンダリング能力やファイルの容量＝ローディングの重さの問題で現実的でないことが多い」というのがあって、これはそのとおりだと思います。
「その分、アイデアで勝負」というのも当然の流れかとは思いますが、まだどういうことが面白いのかという知見は集まっていないのが現状でしょう。
ただし、「『楽しい』をキーワードにjThreeを勧める」というのは非常に納得できる部分で、本来であれば面倒なことが多いはずの3Dコンテンツ作成において、今回の参加者の方々は私も含めてみんな楽しそうに作業をされていました。
今はまだ、技術を活かす道を模索する段階だとは思いますが、「楽しさ」でこちらに来てくれる人の可能性を考えれば、3Dコンテンツ全体の発展としては良い土壌となり得るのではないでしょうか。


あとはぱっとしての見てくれがいいものがあるといいかなと思うので、例えばアニメ『翠星のガルガンティア』でWebGLを用いた3Dゲームが無料で公開されていましたが、こういったコラボ企画が作れたりすると箔がつくかなと。

翠星のガルガンティア 〜キミと届けるメッセージ〜
質の良いモデルを使って簡単にWebで3Dコンテンツを作る、そういった道もあるのではないかと思いました。

参考URL

簡単にリアルタイム通信を実現：Milkcocoa - JavaScript一行に詰め込まれたバックエンド
milkcocoaとjThreeでFPS：milkcocoaでリアルタイム対戦できるFPSを作った話 - Qiita
Webオーディオの使い方について：jQueryの記法で学ぶWeb3D勉強会@Adwaysに行ってきました | takemikami's note
少し前の動画だけど、MMDでここまで出来るという作例（単に紹介したいだけ）

.