jThree Class Tokyo #1
というjThreeの勉強会に参加したのでそのメモです。
jThreeとは？
世界一少ないコード量で書けるWebGLライブラリ。
- GOMLとJavaScriptで記述する
- 専用のエディタはここ
初音ミクを踊らせる
まず勉強会でデモ的に行われたのが初音ミクを踊らせること。
以下はその手順です。
-
エディタの画面右下、プラグインタブからモデルローダ -> MMDを選択し、HTMLファイルのhead要素内に挿入
-
続いてGOMLタグタブのMMDモデルから初音ミクを選択し、GOMLのsceneタグ内に挿入
-
これで保存をすると初音ミクが出現するのですが、踊らせるためにJavaScriptタブ内の
j3.Stats();の次の行あたりりに
jThree.MMD.play();
を記述して保存。これで初音ミクが踊る。
4. ただ、これでは髪がなびいたりしないので、物理エンジンを入れる。
プラグインタブのモデルローダーからMMD物理エンジンを選択し、jThree.MMD.jsより先に読み込ませるように挿入する。これで保存すると髪が揺れる。
5. ステージを追加する。プラグインタブのモデルローダーからDirectXを選択し、HTMLのhead要素内に挿入する。
6. GOMLタグタブ、ステージからゲキド街を選択し、GOMLのsceneタグ内に挿入する。これで街の中で初音ミクが踊る。
プリミティブを配置してテクスチャを変えたり、回転させたりする
-
さっき作ったものは一回消す。GOMLファイルはこんな感じする。
<goml> <head> <rdr frame="body" camera="camera:first" param="antialias: true; clearColor: #fff;"/> </head> <body> <scene> <camera style="cameraFar: 100000; position: 6 13 20; lookAtY: 7;" /> <light type="Amb" style="lightColor: #222;" /> <light type="Dir" style="position: 1 3 5;" /> </scene> </body> </goml>
JavaScriptはこんな感じに。
jThree( function( j3 ) {
$( "#loading" ).remove();
j3.Trackball();
j3.Stats();
},
function() {
alert( "このブラウザはWebGLに対応していません。" );
} );
-
GOMLタグタブの一般オブジェクトからメッシュを選択し、GOMLのsceneタグ内に挿入する。
ここのidはHTMLのidと同じような役割。設定しておくとJavaScript側からj3("#id名")で取得できるようになる。
ここではmeshという名前を設定しておく。
geoには形状データのIDを設定し、mtlには材質データを設定する。(後述する) -
GOMLタグタブの形状データから立方体を選択し、GOMLのhead要素内に挿入する。
idにcubeを設定し、2で挿入したmeshタグのgeo属性に #cube を設定する。これでmeshに形状データを設定できた。 -
GOMLタグタブの材質データから つややか を選択し、GOMLのhead要素内に挿入する。
idにmtlを設定し、2で挿入したmeshタグのmtl属性に #mtl を設定する。 -
保存を押す。右の画面に赤い立方体が表示される。
-
この立方体を回転させてみます。JavaScriptの
j3.Stats()
の下に
j3("#mesh").on("click",function(){
j3(this).animate({rotateX: 3.14},1000);
});
を挿入する。
jQueryとほとんど同じ要領ですね。
保存を押すと右側に表示されている赤い立方体がクリックで回転するようになります。
7. 画像をテクスチャにするのは簡単そうなので動画をテクスチャとして設定してみます。
GOMLタグタブ内のテクスチャから動画を選択してGOMLのhead要素内に挿入し、idにvideo_textureを設定します。
8. テクスチャ用の動画を設定します。
GOMLタグタブ内のファイルインポートからHTMLファイルを選択し、GOMLのhead要素内に挿入します。
ここで挿入されたimportタグ内はHTMLを記述可能で、そのままテクスチャにできます。
デフォルトで挿入されているvideoタグのidにvideoを設定し、7で挿入したテクスチャのvideo属性に#videoを設定します。
9. 材質データ（mtlタグ）のparam属性に
map : #video_texture;
を設定します。
これで保存を押すと立方体のテクスチャとして動画が再生されます。
完成品はここからどうぞ
テクスチャにカメラの映像を映し、マイクから入力された音の大きさでオブジェクトの大きさを変えてみる
ひと通り説明を受けた後の自由に作品を作る時間(2時間ぐらい？)で作ったものです。
これとWebRTCを使ってチャットのサービスとか作ったら面白いんじゃないかぁと思いました。
カメラの使用を許可するようにしないと何も表示されません。
解説用のスクリーンキャストを試しに作ってみました。
http://youtu.be/QeaHw2_7oxI
最後に
1,2時間の説明を受けただけで、さくっとWebGLの作品を作れるようになるのは単純にjThreeすげえって思いました。
3Dガチ勢からは色々批判もあるかもしれませんが、jThree作者の松田さんが言っている
「俺こんな技術使えるすげえ！じゃなくて作品で世界を沸かせろ！」
ってのがjThreeの哲学だろーなと勝手に思って勝手にその通りだと思いました。
次回は11/23(日)だそうで、お弁当も出るみたいです。
【jQuery初心者超歓迎！秋のWebGL+API祭り】Microsoft Azure x jThree Class Tokyo #2