2011年10月27日木曜日

第22回HTML5とか勉強会で発表してきました

こんばんはー、にゃまだんです。

第22回HTML5とか勉強会でWebGLについて発表してきました。

発表資料はこちら
・右キーでスライドを進めて、左キーでスライドを戻します。
・W, A, S, Dキーを押しながらドラッグしても何かしらのアクションが起きると思います。

以前から勉強会の存在は知っていて、第21回はUstreamで視聴しました。
そして初参加がまさか発表とは本当に驚きました、私が。

反省
今回は初心者向けのグラフィクスAPIということで発表させて頂きました。
私の力不足で伝わりきらない所が多々あったと思います、本当にごめんなさい。

発表のテーマとして「3Dっぽさ」がありました。
当然立方体よりも三角形を描くだけ、更にはカメラのシミュレート等を色々省略すれば、少し手続きは少なくなります。
しかし、それだけではWebGLに期待する「3D」の印象は残らないと思います。
という訳で「箱」を描くことで3Dっぽさをプレゼンテーションしようと思いました。
でも実際ソースコードを見ていても3Dっぽさはわかりませんよね…。
次回プレゼンテーションの機会があったらもっと単純にしようかと思います(欲張り過ぎました)。
今回のプレゼンテーションでは「3Dレンダリングの流れ」だけ伝われば成功かなと思います。

あと所詮趣味でやってる人なので「俺の知ってるWebGLと違う…」というツッコミがございましたらコメントいただければ嬉しいです。

発表の補足
今回のプレゼンテーションはLearning WebGLLesson 4をベースにしています。
サンプルも同等のものがここにあるので是非御覧ください。
また、Learning WebGLは有志による日本語化も行われているのでこちらも参考にどうぞ。

プレゼンテーションで取り上げたThree.jsはこちらです。
かなり完成度の高い3Dエンジンです。
行列を意識しないでも3Dプログラムをかき上げることができます。
今回のプレゼンテーションはこれを使って作成しました。
WebGL以外にもCanvasやSVGレンダラも使えるようです。

Hello Racerはこちらです。
格好いい車がレンダリングされます。
ほか格好いいデモでro.meとかが好きです。

プレゼンテーションツール
後日どこかでお話することがあるかもしれませんが、プレゼンツールは自作しました。
テーマとしては「3D」っぽいことに加えて、会場を提供してくださったのがマイクロソフトさんということもあって「IEで動く」ことをテーマにしました。
しかしWebGLはIEでは動きません(このニュースから今後も実装も可能性は低そうです)。
そこで今回はThree.jsのCanvasレンダラを使用することにしました。
IEのハードウェアアクセラレーション機能も効いて不自由なく動作させることが出来ました。

急ごしらえの拙いプログラムではありますがソースコードは公開します。

また、懇親会で何人かの方からご質問いただいたのですがプレゼンのエディタは@ClubRaptorさんに作成して頂きました、本当にありがとうございます。

最後に
懇親会でもいろんなかたに話しかけていただきまして、とても楽しかったです。
とっても元気のある勉強会だと感じました。
みなさんも是非勉強会に参加してみてください。
そしてもっとWebGL使いな友達が増えることを楽しみにしています。

1 件のコメント:

  1. とても魅力的な記事でした!!
    また遊びに来ます!!
    ありがとうございます。。

    返信削除