第5回 html5minutes! lt 「ねこでもできるwebgl」
TRANSCRIPT
HTML 5minutes! ~ triton-‐js ~
ねこでもできるWebGL
WebGLを使った例
翠星のガルガンティア ～キミと届けるメッセージ～
Genealogy of Nike Free
WebGLすごい
でも難しいんでしょう？
そこで jThree
どんな感じ？
jThree ・GOMLという独自のタグを使って定義・描画する ・スクリプトはほぼjQueryと同じ記法で書ける
具体的に
立方体をつくる <goml>
<head> <rdr frame=".glview" camera="camera:first" param="anCalias: true;
clearColor: #fff;"/> <geo id="geo" type=”Cube" param="2.5" /> <mtl id="mtl" type="MeshPhong" param="color: #0f0;" /> </head> <body> <scene> <mesh geo="#geo" mtl="#mtl" /> <!-‐-‐ カメラとかライトとか（略） -‐-‐> </scene> </body>
</goml>
立方体をつくる <goml>
<head> <rdr frame=".glview" camera="camera:first" param="anCalias: true;
clearColor: #fff;"/> <geo id="geo" type=”Cube" param="2.5" /> <mtl id="mtl" type="MeshPhong" param="color: #f00;" /> </head> <body> <scene> <mesh geo="#geo" mtl="#mtl" /> <!-‐-‐ カメラとかライトとか（略） -‐-‐> </scene> </body>
</goml>
立方体をつくる
3Dモデルを表示する <head>
<rdr frame=".glview" camera="camera:first" param="anCalias: true; clearColor: #fff;"/> </head> <body>
<scene> <mmd id="" model="model/miku/index.pmx" moCon="moCon/
world.vmd" style=""></mmd> <obj id="" model="stage/gekido/index.x" style="scale: 10; posiCon: 0 -‐46.5 0; rotateY: 1.57;"></obj>
<!-‐-‐ カメラとかライトとか（略） -‐-‐> </scene>
</body>
3Dモデルを表示する <head>
<rdr frame=".glview" camera="camera:first" param="anCalias: true; clearColor: #fff;"/> </head> <body>
<scene> <mmd id="" model="model/miku/index.pmx" moRon="moRon/
world.vmd" style=""></mmd> <obj id="" model="stage/gekido/index.x" style="scale: 10; posiRon: 0 -‐46.5 0; rotateY: 1.57;"></obj>
<!-‐-‐ カメラとかライトとか（略） -‐-‐> </scene>
</body>
3Dモデルを表示する
ここまでJavaScript （ほとんど） 書いていません
3Dモデルを表示する
jThree.MMD.play();
（MMD moConを再生するメソッドだけ書いてます）
テクスチャを貼る <head>
<rdr frame=".glview" camera="camera:first" param="anCalias: true; clearColor: #fff;"/>
<txr id="txrImage" src="img/sky.png" param="" onLoad=""/> <mtl id="mtlImage" type="MeshPhong" param="map: #txrImage;" />
</head> <body>
<scene> <mesh geo="#geo" mtl="#mtl" /> <!-‐-‐ カメラとかライトとか（略） -‐-‐> </scene>
</body>
動画を貼る <head>
<rdr frame=".glview" camera="camera:first" param="anCalias: true; clearColor: #fff;"/>
<import> <style>div {color: #f00; height: 50px; posiRon: absolute; top: 0;}</style>
<video autoplay> <source src="video/nhk1.mp4" /> <source src="video/nhk1.ogg" /> </video> <canvas></canvas> </import>
<mtl id="mtlImage" type="MeshPhong" param="map: #txrImage;" /> </head>
テクスチャを貼る <head>
<rdr frame=".glview" camera="camera:first" param="anCalias: true; clearColor: #fff;"/>
<import> <style>div {color: #f00; height: 50px; posiRon: absolute; top: 0;}</style> <div>Hello World!</div>
<canvas></canvas> </import>
<mtl id="mtlImage" type="MeshPhong" param="map: #txrImage;" /> </head>
JavaScript
クリックイベント
<mesh id=“cube” geo="#geo" mtl="#mtl" />
j3("#cube").click(funcCon() { j3(this).animate({posiConY: "+=1"}, 500); });
GOML
script.js
append / removeもできる
<geo id="geo" type=”Cube" param="2.5" /> <mtl id="mtl" type="MeshPhong" param="color: #0f0;" />
j3("scene").append(‘<mesh id=“cube” geo="#geo" mtl=“#mtl” />'); j3(“#cube”).remove();
GOML
script.js
よくないところ
よくないところ
• 遅い
– three.js、jQueryに依存
• 公式ドキュメントがない
Documents and Samples • jThree公式
h]p://jthree.jp
• 有志によるjThree wiki h]p://seesaawiki.jp/j3wiki/
• ハンズオン内容のサンプルまとめ 次ページのEditorにそのままコピペで動くように作ってあります h]ps://github.com/moshisora/jThreeSamples
jThree editor
• jThree editor ローカル環境を整えなくてもWebブラウザでjThreeを実行できるように、Editorを作ってくださっています。 保存・公開機能付きなのでつくったものをどんどんシェアしてみてください！ URL : h]p://editor.jthree.jp