2013年1月28日月曜日

第10回 #gtuggirls でWebGLとThree.js のコードラボをしました

さてさて、記念すべき第10回の GTUG Girls は WebGLThree.js のコードラボを行いました!



例によって例のごとく、まずはなごみタイムから。ご飯を食べつつみんなで仲良くなります。

 GTUG Girls #10 

今回は10回記念ということで、アマンドのケーキをげっと!

 GTUG Girls #10

 ろうそく10本 :)

 GTUG Girls #10

さて本題。今回は Social の API Expert で WebOS Goodies の伊藤千光さんと Google Maps API の API Expert の安藤幸央さんに講師をお願いしました。また、Hack for Japan  や東北tech道場でもご協力頂いている高橋憲一さんもチューターで参加してくださいました。ありがとうございました!!

まずは安藤さんから「WebGL & Three.js 最新の話題とデモ紹介」ということでお話頂きました。スライドはこちら。



・ブラウザでこのサイト( http://get.webgl.org/ )にアクセスしてみましょう。立方体がくるくる回っていれば、あなたのブラウザで WebGL は動きます。

・IEだけどWebGLを動かしたい?そんなあなたに IEWebGL

・WebGL やってみたいけど難しす。。。そんなあなたに mr doob の Three.js ですよ。というわけで今回は Three.js でコードラボをやっていきます。

・3DCG に必要な要素の勉強。


●デモやサンプル

WebGL Bookcase
Zygote Body (旧Google Body)
WebGL Experiments
WebGL Samples
PlayWebGL
珠玉の作品 ROME
WebGLでスターウオーズ!
WebGLでGangnam Style!
EmberWind
Demo Repository
WebGL Earth
Google MapsGL
なんだこれかっけーprocedural city
3Dでオブジェクトを作ったらフルカラー3Dプリンターで作ってくれるMy Robot Nation

もっと見たいというあなたにはこちらの伊藤さんの記事>「Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個

●情報・リソース

WebGL Playground
WebGL reference card
WebGL Inspector
WebGL Conformance
Learning WebGL blog
上記の日本語訳
Three.js のチュートリアル

●Three.js のリファレンス
http://threejsdoc.appspot.com/doc/index.html
https://github.com/mrdoob/three.js/wiki

●伊藤さんの記事「多彩な表現力のWebGLを扱いやすくする"Three.js"」
Three.jsの基礎
さまざまな形状を扱う
高度な質感表現
特殊効果
インタラクティブ性を取り入れる

●伊藤さんの記事「WebGLの能力を引き出すプログラマブルシェーダー

●ツールなど
WebGL Inspector
Blender(オープンソースの3DCGツール)  (日本語の情報サイト
3DTin(WebGLベースのモデリングツール)
Terragen(キューブ環境マップ作成に便利な地形生成ツール)

●さて、さっそく伊藤さんのコードラボに突入していきます。

スライドはこちら・コードラボのマテリアルはこちら

このレクチャーのすごいのは、スライドがものすごくよく作ってくださっていて、更にエクササイズ形式で書いていけて、詰まったら回答が見られるようにサンプルコードも全部入っているという充実っぷり。そしてスライドに合わせた伊藤さんの解説と、それを更にホワイトボードで解説していく安藤さんという無敵のサポートっぷり。すごすぎるー。

GTUG Girls #10

逆に言えば、それだけ難しいってことでもあります。三角関数、サインコサインタンジェント、なつかしす(^^;;;

HTMLはこうですね。Three.jsは公式サイトから落としておきます。


Javascriptを書いていきます。レンダラー(描画)とシーン。


カメラとライト。


表示する物体を指定。丸を出してみたり、円柱を出してみたり。


これからアニメーションを作っていくので、その準備。


丸を作るのか円柱を作るのかなど、形状を決め、パラメーターを入れていく。




CircleGeometryにすれば球がかける。



CylinderGeometryにすれば円柱がかける。上底の半径とか下底の半径とか高さとか、パラメータを変えれば形状が変わっていく。ちょっと細くして、Androidの腕っぽくしてみる。


数を増やしてみる。geometry2が二個目のオブジェクト。こうやってどんどん物を増やしていく。Androidの胴体もいるし、腕も2本いるしね。


ここで重要なのが、座標。xyz。


物を動かしてみる。ぐいんぐいん回してみる。PIは360度。。。


GTUG Girls #10

Androidの腕を動かす。普通に動かすと、オブジェクトの真ん中が振るときの起点になってしまうけど、腕っていうのは肩を起点に動かす物なので、肩のあたりに見えない物体(親)を作って、腕(円柱)をその物体の子供にして、親に従ってブラブラ前後に腕を振れるようにする。なるほどー!!


GTUG Girls #10

腕振りアニメーションを作っていく。


ここまできたら、最終的に作る物の全体像を確認。アタマを作って、胴体を作って、腕と足を2つずつ作る。更に腕には肩の関節、足には腰の関節を作って腕や足が振れるようにする。更には全体の親が全体を動かすようにするわけです。


GTUG Girls #10

体とアタマと腕と足を作る。


親と胴体が真ん中に。アタマをy軸で上に動かし、両腕と両足のx/y軸をそれぞれ動かして配置していく。




では、ドロイド君を動かしていきますよ!上に書いた5つ。。。全体、右腕、左腕、右足、左足を動かします。


更には色や、ハイライトや陰、メタル風などのパラメータがあるので、変えていく。



テクスチャを貼ってみる。


凸凹をつけてみる。bumpMapに凹凸のテクスチャを、bumpScaleに凹凸の深さを指定。


写り込みの設定。


最後に、ラジアンとか覚えてないよという人には「検索しちゃえばいいんだよ!」というアドバイス。そりゃそうか!

GTUG Girls #10

みんなそれぞれ色々作った!

あんざいさん作の GTUG Girlsロゴドロイド。





秋葉さん作の枯れドロイド。


Yukaさん作の"Droid & Donut"。

ほかにも面白いのができた方はお知らせください〜!

今回も楽しかったです!ありがとうございました :D

Togetterまとめ

Disclaimer このブログは山崎富美の個人的なものです。ここで述べられていることは私の個人的な意見に基づくものであり、私の雇用者には一切の関係はありません。