たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる! jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう

CodeZine / 2014年5月29日 14時0分

 本連載では、jQuery+three.jsを実現したWebGLライブラリ「jThree(ジェイスリー)」について、MMDプラグインを利用したコンテンツのコーディング例を紹介します。連載初回となる今回は、導入編として、jThreeが提供する機能の概要を説明するとともにコーディング手順を紹介します。さらにCanvasを自動生成し、マウスで動かせる立方体を描画してみて、シンプルな記述だけでコンテンツが作れることを感じていただきます。

■はじめに

 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。

 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。

 今回紹介する「jThree(ジェイスリー)」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。

 本記事ではこのjThreeについて、MMDプラグインを含めた機能の紹介とjQuery記法で操作するためのちょっと独特なコーディング手順を説明します。

 そのあと、Canvasを自動生成しマウスで動かせる立方体を描画してみます。



■対象読者

HTML、CSS、jQueryの基礎を理解している方 3DCG・WebGLコンテンツを手軽に作ってみたい方 MMDモデルを自分のサイト上で3Dのまま躍らせてみたい方 ■jThreeが提供する機能

 jQueryとjThreeをWebページに読み込むことで、WebGLの手軽な操作が可能です。また、プラグインを使うと、最近話題のデバイス「Oculus Rift(オキュラス リフト)」にも簡単に対応するようにもなります。

●1)jThree本体が提供する機能

WebGL(three.js)をjQueryの記法で操作できるようになります。 コードの記述量がthree.jsに比べて4分の1程度に削減されます。 カメラのアスペクト比の計算や、ウィンドウリサイズへの対応が不要になります。 オブジェクトのクリックやスクロールイベントを、jQueryと同様に取得できるようになります。 もちろん、three.jsの機能にもアクセスできます。 ●2)jThreeの公式プラグイン群が提供する機能

jThree.MMD.js(+ammo.js)
MMD(MikuMikuDance)のモデルデータを表示し、モーションデータを再生できるようになります。
  jThree.Oculus.js
作ったコンテンツをヘッドマウントディスプレイ「Oculus」に対応させられます。
  jThree.FlyView.js
空間を鳥のように飛び回るカメラコントロールを実現します。
  jThree.Trackball.js
対象物を鑑賞するのに適したカメラコントロールを実現します。
  jThree.Stats.js
フレームレートのメーターを表示できます。 ■jThreeがサポートする環境

 jThreeを利用するには、jQueryの2.0.0または1.10.0以降の読み込みが必須です。

 OSはWindows 7でのみでテストしましたが、ブラウザの要件を満たしているとMAC OS XやLinux、Androidでも動作するようです。

 ブラウザは動作テストを行ったもののみ以下に記述しますが、それ以外にもSleipnirやAndroid 4.4標準ブラウザでも動作する可能性があります。

Internet Explorer:11.0.7以上 Google Chrome:最新版(執筆時点、以下同) Firefox:最新版 Opera:最新版  なお、後述するサンプルはWindows 7(64bit)、Google Chrome最新版で動作確認しています。

■jThreeのライセンス体系

 jThreeと公式プラグイン群はすべてMITライセンスで公開されており、商用利用・配布・改変何でも自由です。いわゆるオープンソースソフトウェアであり何をするのも無料です。

 ソースコード内の著作権表記の取り扱いについては、MITライセンスの規約に従ってください。

■jThree開発の環境を整えよう

 jThree開発を行うには、WebGLのセキュリティ上、オンラインサーバーかローカルサーバーが必要になります。

 開発途中でファイルを更新するたびにオンラインサーバーにアップロードして動作確認するのは大変なので、ローカルサーバーを立てるか、Dropboxのパブリックフォルダを利用するのがお勧めです。

●ローカルサーバーを立てる場合

 XAMPPを導入するのが良いでしょう。

『Aptana + XAMPP によるローカル開発環境の構築 - XAMPP導入編』  上記のサイトに導入方法の詳細が丁寧に紹介されています。筆者も利用しています。

●Dropboxのパブリックフォルダを利用する場合

 パブリックフォルダの詳細は、以下をご覧ください。

『Public フォルダの用途は。』  XAMPPより導入設定が楽だと思います。ただし、URLを知らないとアクセスできないものの、開発中の作品がネット上に公開される点に注意が必要です。



CodeZine

この記事に関連するニュース

トピックスRSS

ランキング