最近three.jsをいじり始めています。
以下が作成してみたもの。
three.js:study01
three.js:study02
three.jsの前に以前のエントリでも書いたとおりOpenGL ESの勉強も兼ねてwebGLを少し調べていた。
webGLというものはどう言うのかとか、その文法とかに慣れるために、こちらのThe Lessonsを一行づつコピペしたりコメント書いたりしつつ学習を進めた。
The Lessons – Hack The WebGL (WebGL勉強会)
こんな感じで、レッスンの内容通りに組んでみていた。
WebGL study01
WebGL study02
コピペなのに動かなかったり、ちょっと図形を書くだけなのに沢山のコードが必要となったりと大変すぎる、そして沢山の新しい概念で頭が混乱する。
それでもこのレッスンとOpen GL ES 2.0 プログラミングガイド
何よりも理解の参考になったのは、プログラミングガイドにもレッスンにも出てきた、このページにあるグラフィックスパイプラインの図だった。
WebGL Lesson 2 – 色の追加 – Hack The WebGL (WebGL勉強会)
このままWebGL(OpenGL ES2)をいじり続けても時間だけがえらくかかってしまいそう、そして概要把握はできている状態なので、一旦ライブラリで具体的な使用方を覚えた後に、再度WebGLの中身の学習へと移ったほうが効果的だと判断した。
WebGLを使用しているフレームワークにthree.jsというのがあり、3Dフレームワークの中でもよく耳にしていた。
ざっとみたところ開発も続いているし良さそうなので、これを選ぶことにした。
これまでwebGLで概念把握しているせいかもしれないのだけど、このthree.js、ほんのちょっとさわるだけでもドンドン分る、すごい面白い。
ドキュメントとか少ないし不親切ではあるのだけど、それもgithubからダウンロードできるソースファイル見ていればなんとなくわかるので問題ないくらいだ。
github : https://github.com/mrdoob/three.js
作者サイト : http://mrdoob.com/
APIリファレンス : http://threejs.org/io/s/
始めるに当たっては、githubのUsageにあったサンプルと、aerotwistのGetting Startedが分かりやすくて良かった。
githubのサンプル : https://github.com/mrdoob/three.js#readme
GETTING STARTED WITH THREE.JS : http://aerotwist.com/lab/getting-started-with-three-js/
次のエントリからはスタディの内容を随時書いて行く予定だ。
参考書籍
