前置き

みなさま、PlayCanvasをご存知でしょうか？

WebGLで3Dコンテンツを作るためのブラウザベースのツールです。

UnityでWebGLコンテンツを吐き出すこともできるけど、色々としんどいじゃないですか……スマホ挙動とかデバッグとか…
それをぜーーーーーんぶ解消してJavaScriptベースで制作できる、バージョン管理システムまでついてる超・優れものです。

今回はそのPlayCanvasで自作音楽アルバムの「遊べるMV」バーチャル動物園コンテンツを作った話をします。

そもそもなんですか遊べるMVって

わたくし、ミュージシャンとして活動しております。

これは宣伝なんですけど、今年2月に動物の鳴き声をフィーチャーしたアルバム「ZOO-ZOO-SEA」をリリースしました。

で、どうせなら「遊べるMV」を作りたいなと思ったのです。

クリックできる、360°ぐりぐり見れる。
で、動物がテーマなので動物園を作ろう。
ということで、これが完成品です。

ロードが重いのは後々改善したい。
重すぎて諦めちゃった方はこちらの動画で雰囲気を味わってくれ。

ではそれぞれの機能について紐解いていきます。

各機能

カメラ操作

最初は何も知らずに自前実装しようとして四苦八苦していたのですが、公式exampleのソースコードを使ったらあっさり理想の挙動になりました。

ありがとう公式example。

ビデオ再生

こちらの記事を参考にしました。

HLSというストリーミング形式でビデオを貼っています。

premireで制作したmp4を.mu8uという形式に書き出し直す必要があります。エンジニアならfffmpegなどを使って変換するのが一般的かと思いますが、わたしはものぐさがってこちらのブラウザ上での変換ツールを使いました。

音楽と同期して動物オブジェクトを動かす

音楽自動解析サービス「Songle」というものを利用しました。

YouTubeやmp3の楽曲を登録すると、BPMや曲のセクションなどを解析してくれ、いま何拍めが再生中なのかといった情報を受け取ることができます。

当初はmp3で試しましたが、埋め込み再生がなぜかうまくいかなかったのでYouTube経由で楽曲を登録しました。

これで再生中の楽曲のリズムにあわせて動物たちをTweenさせています。

音楽と映像を同期させる

動物と音楽を同期させるのは上記でクリアしましたが、では背景の映像との同期は……？

動画は環境によって度々ロードが走るので、単純に音楽と同時に再生開始するだけではズレが生じます。

動画の再生状態を見て、音楽もそれに合わせて一時停止したり再開したりといければよかったのですが、モバイルブラウザ仕様の壁が立ちはだかります。

ユーザーのアクションなしに音声付きのコンテンツの再生を開始することはできません。

ここで採用したのが下記の力技です。

「音声付きの動画を再生する。
Songleの埋め込みはiframeのDOMをほじくり、JavaScriptで無音にして任意のタイミングで再生停止できるようにする。」

無音コンテンツなら任意のタイミングで再生停止できます。
songleは無音で再生しても拍や楽曲情報を得ることが可能です。

シークバー

シークバー実装はsongleにお世話になりました。

ドラッグでシークはできないですが、タップでのシークを実装しています。

再生中のsongle楽曲の長さと現在位置を取得し、バーの長さを決めています。

ダブルタップで動物に関連するオブジェクトを投げる

それぞれのエリアの空間をダブルタップすると、その動物に関連するオブジェクトを投げることができます。

遊べるMVのアイデアとして、360°ぐりぐり見れる、動物をつんつんできる他だと実装できそうなのがこれだったのです…

これは、それぞれのエリアに透明な壁を立てて、その壁で当たり判定(Ray)をとっています。

その壁に動物に応じたタグを設定しておき、当たった壁を判別、オブジェクトを生成し落とす、という仕組みです。

作ってみて

初めは3DコンテンツならUnityかな？ってことでUnityで制作していましたが、モルモットとイルカを実装したあたりでUnityはWEBには絶望的に向いていないことを目の当たりにし挫折しました。

そこでPlayCanvasを見つけたのです。

Unityはもともと初学者に優しいツールだと思っているのですが、Unityで得た勘所があればPlayCanvasもわりといけます。

ふだんゲームや3Dコンテンツといったものにはあまり触れて来なかったのですが、「自分だけの壮大な箱庭を作っていく」感覚がとてもワクワしました。

わたしはモデリングができないので、各オブジェクトは全てロイヤリティフリーの3D素材サイトから買ったり落としたものです。

このへんから

寄せ集めの素材でもこんなに愛おしくなってしまうんだから、自分でモデリングからできたらどうなってしまうのでしょう……

肝心のアルバムのプロモーションとしては1mmもおバズりいたさずですが、インディアーティストがこんなもん作ったよ！ということで自慢半分、忘備録半分でした。

よかったらアルバムもきいてね！！！