2013-03-09 FxUG@FukuoakでのLT「three.jsはじめましょ」の資料を公開しました。

FxUGはActionScript, Flexなイベントですが、懐が広く本来なら関係ないthree.jsでのLTを許していただき20分ほどお時間頂きました。
当日は Stage3D Starling, Away3D, Altenativa3D, IN2AR など旬な3D OpenGL関連の話とSocket通信、またそれぞれをモバイルアプリにどう利用するかというワクワクする内容が盛りだくさんのステキなお話が目白押しの一日でした。

three.js は HTML5 canvas で3Dを実現するJavaScriptライブラリなので、3Dつながりということでお許しいただきたいと思います。

WebGLだけでないthree.js

もともと three.js は Canvas WebGL のためのライブラリでしたが CanvasRenderer が追加され 2D(canvas.getContext('2d'))でも使用できるようになっています。

できることは WebGL利用の WebGLRenderer の方が当然多いですし、パフォーマンスも有利です。

しかし、半透明オブジェクトが多い場合は CanvasRenderer の方がレンダリング精度が良くなるように感じました。
残念ながら three.js WebGLRendrer では半透明(opacity)が適用されたオブジェクトが多くなるとレンダリング精度が落ちてしまいます。
renderer.sortObjects = false;
上記コードでソートをキャンセルすることで解決する場合もあるようですが、どんな場合でも解決できるわけではないようです。
three.jsというよりはWebGLの仕様なのかもしれません。

発表資料

スライドシェアにアップしました。
http://www.slideshare.net/taikiken/20130309-fxug-fukuoka

デモファイル

r.56 example の canvas_lines.html を使わせていただきました。
example/controls/TrackballControls.js を追加し使用しています。
アニメーションにはgreensockのTweenMax.jsを使用しています。

＊CanvasRenderer を使用しているので Canvas が使える環境なら再生可能だと思います。
＊iOS 5 以上のSafariで動作することを確認しています。
＊Android 4 以上で動作することを確認しています。
＊Android 2.x系の標準ブラザでは動作しません。Android 2.x + Firefoxで動作することを確認しています。

ご注意
・スマホで見るとバッテリーがみるみる減っていきます。

1. 点と線
2. 点と線 + 点アニメーション（点のスケール）
3. 点と線 + 点アニメーション（点のスケール + 点の色遷移）
4. 点と線 + 点アニメーション（点のスケール + 点の色遷移 + 全体を回転）

＊Safari(Mac, iOS)では点線が表示できません。
5. 点と線 + 線を点線 + 点アニメーション（点のスケール）
6. 点と線 + 線を点線 + 点アニメーション（点のスケール + 点線のdashとgap）

＊ソースは各ファイルをご参照下さい。

資料URL

three.js
three.js Document r56
TweenMax / TweenLite

「Stage3Dプログラミング」「ActionScript 3.0による三次元表現ガイドブック」２冊ともActionScriptの本ですが3D空間、3Dプログラミングを理解するのに大変役に立ちました。
WebGL Up and Running はthree.jsの解説が中心の本ですが、本書独自のライブラリを使うことが前提の解説になっていて、洋書だということを差引いても私にはあまり向いていませんでした。
とはいえ最初（多分）のWebGL解説書としておおいに助けられました。