はいふりWeb VRつくろうよ!

はいふりWeb VRつくろうよ!

これははいふり Advent Calendar 2016 - Adventarの24日目の記事です。

こんにちは、艦長の岬です。 締め切りを伸ばしに伸ばした冬コミの各種原稿に押されてしまい、アドベントカレンダーのための時間がまったくとれませんでした。 〆切は本日の12:00なのでまだまだ脱稿前なのです。 ということで、はいふりアドベントカレンダー24日目の記事は、まったく時間がない状態で書かれていることを念頭に、続きを読み進めてください。

目次

Open 目次

  1. Web VR
  2. Three.js
    1. 艦モデル
    2. 艦長
  3. まとめ

Web VR

Web VRとは名前そのまま、WebブラウザでVRを楽しむためのAPIや開発環境・実行環境の総称として近年登場したものです。

WebVR API - Web API インターフェイス | MDN

ブラウザで3DCGゲームをバリバリ動かすWeb GLの沿線に語られ、 同様にして「ブラウザさえあれば、なにもいらない。」でVRを実現するためのものです。 スマホやタブレット、ヘッドセットの加速度・ジャイロセンサーを用いることで、Web空間をVRとして操作することができます。

Web VRの利用や実装にはJavaScriptベタ書きのほか、3Dライブラリを使う手があります。 ライブラリを用いることで、スマートフォーンなどを用いた本格的なVRヘッドセットを必要としない、簡易VRを楽しむことも可能となります。 そのうちの一つ、今回はThree.jsを用いてWeb VRを簡単に実現しようと企てました。

Three.js

Three.jsは最近追加されたMMD Loaderによって、日本国内で多く用いられるMMDモデルを読み込んでWeb GL/Web VRで表示できるようになりました。 これができるということは、自由なライセンスで配布されている艦のモデルや艦長のモデルを読み込んで表示させることができるということです。

さっそく、はいふり Advent Calendar 2016の6日目の記事に登場した 岬明乃MMDモデル夕雲型駆逐艦MMDモデル を読み込み、Three.jsのWeb GLレンダラで表示させてみることにしました。

艦モデル

艦を表示させるにおいて最適な背景として、Three.jsのサンプルにある海のシェーダを利用しました。

three.js webgl - shaders - ocean

夕雲型駆逐艦MMDモデルを読み込み表示したところ、MMDモデルのカラー情報が適切に扱えてないようで、変なところに値がセットされてしまい、 テクスチャのないところは艦の色が黒くなっているところが多くあります。

ship1

また、MMDモデルは日本で多く利用されていることもあり、日本語ファイル名がクソ文字エンコードShift_JISで記されていることから、 内部のファイル読み込み処理をフックし、TextDecoder APIを用いて適切にファイル名を変換してあげる必要がありました。

TextDecoder() - Web API インターフェイス | MDN

ship2

艦の色がおかしい点を除けば、さらさらと揺れる波の背景のおかげでそれらしく見えます。

ship3

艦橋もしっかりとモデルが作り込まれていますね。

艦長

艦長においても、艦と同様にしてMMD LoaderによってWeb GLで表示させることができます。

misakiakeno1

ボーンの位置が初期状態なので腕と足を広げたままですが、パラメタをいくつかいじったり、 MMDのモーションデータをセットすることで、動きをつけることができます。

misakiakeno2

さきほどの艦に乗せてあげると、より海を往きている感じが表現できます。


と、ここまでで進捗が止まっています。 表面上はこれだけしか進んでいないのですが、 現時点でMMDファイルの内包されたZipファイルをブラウザにD&Dすることで新しい乗員を追加する機能や、 艦を前進させる機能などが実装されています。

時間があるときにちょこちょこと進めていき、はいふり1期再放送で晴風が沈む前には公開できるかたちにしたいです。

まとめ

Done is better than perfect.

Related Posts

blogを建ててみた

blogを建ててみた

いままで情報を発信する場として、確かなものが周りになかったので新年に向けて新しくブログを作成しました。 よろしくお願いします。今回はサイトのホスティングとして、Github pagesを用いること...

read more
Team TomoriNaoのサイトの秘密

Team TomoriNaoのサイトの秘密

こちらは 友利奈緒 Advent Calendar 2016 - Adventar 17日目の記事です。...

read more

Streaming Conference #2 -TELETEXT-

こんにちは、Fennecエバンジェリストです。 最近暇で暇でしょうがないので何かアウトプットしようと、先日 Streaming Conference #2 にてLTをしてきました。 表題は**# TE...

read more
2016年のまんがタイムきららアニメを振り返る

2016年のまんがタイムきららアニメを振り返る

まんがタイムきらら Advent Calendar 2016 - Adventar 5日目の記事にようこそ! 今日は2016年のまんがタイムきらら作品を振り返ってみよう!...

read more