pirosikick's diary

君のハートにunshift

Away3D勉強会に行ってきた

勉強会 javascript webgl

https://atnd.org/events/52483

銀座で勉強会初めてだなーと思いつつ地図の指す場所に向かったら会場がすごい派手な場所でわらった。

Three.jsしか使ったこと無いけど、「あーこれTypeScriptで書きたいなー」って思うことが多々あって、いちおthree.jsもd.tsはあるんだけど、「もうちょっと名前空間分けてほしいなーTypeScriptなら簡単にできるのになー」とか思ってた。

http://typescript.away3d.com/

Away3DについてはTypeScriptで書かれているということしか知らなかったので、利点・欠点、ルーツ、WebGL以外のAway3Dについてなど、幅広く聞けたので参加してよかった。

今日聞いて良さそうだったところ

  • TypeScriptで書かれているので、ビルドされたjsに対応したd.tsが確実にある
  • d.tsがあることで、IDEの補完が楽。
    • WebStormとかVBとか
  • 名前空間が深め
  • カメラを操作するcontrollerっていう概念が良さげ。HoverControllerだけかもしれないけど。
  • WebGLが使えないブラウザの時にFlashにフォールバックする機能がある。swfも用意されている
  • インポーターの種類が結構あった。
    • 3DS, AWD, OBJ。バイナリも行ける

悪そうなところ

  • APIドキュメントが無いらしい。
    • JSDoc形式でコメントは書いているらしいので自分で生成すれば見れる
  • WebGL版は開発が活発で進化が速い
    • 2ヶ月で結構大きい変更が入ったりして、サンプルが動かなくなったりする
    • Flash版Away3DのAPIとずれ始めているらしい（これは自分にはあんまり関係ないけど
  • 低レベルな部分がかなり隠蔽されていて扱いづらいらしい
    • three.jsでMeshを拡張してuvsとかいじったりしていたので、
    • どれくらいできないのか知りたいところ

開発が活発で安定してないってことで、総括して商用ではまだ厳しいとのことだった。

以下、メモ。

Away3D TypeScriptで立方体を回してみる

mesh.material = material;
material.lightPicker = new away.materials.StaticLightPicker([light]);
  • ループしてない時は、なぜかview.render()は2回呼ばないとrenderされない
  • away.utils.RequestAnimationFrameでwindow.requestAnimationFrame
    • 返り値でtimer返ってくる
    • timer.start()で実行開始
  • 回転
mesh.rotateX = 角度; // Degree, 0 ~ 359
mesh.rotateX = 角度;  // Degree, 0 ~ 359
  • マウスドラッグでカメラを動かす
  • HoverControllerを使う
    • new away.controllers.HoverController(カメラ)
    • パンやチルトができる
    • 見栄えがいいからサンプルでよく使われる
    • distance, maxTiltAngle, minTiltAngle, panAngle, tiltAngle
  • HoverControllerは勝手にトゥイーンしてくれる
    • 初期化時に設定したcameraの視点基準でpanAngleとtiltAngleでアニメーション
  • ドラッグ時にpanAngle, tiltAngleを変える
  • ドキュメント更新が多いのは、2ヶ月くらい経つと前に書いたコードが動かなくなる
    • Away3D.tsは更新が激しいっぽい
    • ライブラリが別れたり、クラスが増えたり、変わったり
  • 今日のサンプルは6/24のビルドで作ってる

WebGLで作成するHTML5コンテンツ

WebGLの現状

  • サポート状況→IE11, Chrome, Safari, FF,
    • can i useで見ると結構緑増えてきた
    • スマフォはAndroidの標準ブラウザで動くかが機種依存だったりする
    • iOS8からiOSでもという噂
  • WebGL vs Context2D（CreateJSで比較）
    • パフォーマンスは圧倒的やで
    • オブジェクト数を増やすた時のFPS
    • でも、用途が違うので機能面では比較できない
  • Away3Dの技術展開

WebGL版Away3D

  • http://typescript.away3d.com/
  • TypeScriptで開発されている
  • Flashの機能に相当するAPIが用意されてる
    • BitmapData, URLRequest, ByteArray, BlendMode etc
    • RGBを分けるとかBitmapData使うと超楽やで
  • 事例：World Cup Visualization 2014(まだ公開してない）
    • 一部文字の部分とかはContext2D(createjs)で作った
  • 3Dの上に2DのUIを乗せるのがユーザビリティ的にいい
    • WebGLでUI作るのはかなり厳しい
    • UIはContext2DやDOMでやればいい
  • Flashでモック作って、TypeScriptで再実装した
  • TypeScriptのメリデメ
    • メリット
      • 静的型付け：コンパイル時にエラー検出、インテリセンスの利用など
      • 利用
        • d.tsとビルド後のJS
    • デメリット
      • コンパイル速度→次バージョンで解決
      • this参照の扱い→アロー関数式で対処
      • 名前空間の扱い
        • import文がFlashみたいに自動検出、自動削除してくれない
        • 開発環境が充実してくれればー
  • Three.jsとAway3Dの比較
    • ライセンス
    • Three.jsの勝ち
      • シェーダーの拡張性○
      • Rendererの種類
    • Away３Dの勝ち
      • インポーターの種類（3DS, AWD, OBJファイルとかバイナリもいけるで）
      • polyfill.swf
        • Flashでrenderできる！！これはいいなー
        • 自動的にFlashにフォールバックしてくれる
  • 所感
    • 名前空間が整理されているが、自動import挿入・削除がエディタに無いのがつらたん
    • LGSLなどの低レベル実装が隠蔽されていて、拡張できない
      • ここはThree.jsの方がいい
    • Flash版とAPIが異なり始めてる。完成度が足らない部分。
    • 商用利用はまだ厳しい
  • icsのブログにチュートリアルあるのでどうぞ
  • Q&A
    • Q:APIドキュメント is どこ
      • APIのドキュメントが無い。JsDocは自分で書き出す感じになってる。
    • Q:Flash変換はどういう仕組み？
      • Flash側の更新はJSからやってるはず
    • Q:Away3D.tsはPC/スマフォどっちよりに開発してるとかある？
      • ない。サンプルから見るとPC向けだと思う。
      • たぶん意識してない。