Home 旅レポ一覧 MyPhoto 売れ筋インフォ  TechBlog  LinkBox  RSSr(New!)  SiteMap  Album  日記  blog  MyPage  About
 
icon icon
 

  • WebGL::three.js cannon.js blenderの情報です。
  • 修正 状態:input(public)

  • JFLABO
  • 3DCG worldへのイザナイ
    当初は手探りで、読めないデータが発生するなどいろいろハマりましたが
    概ね以下の情報に目を通してから始めるとスキルが身に付くかと思います。

    これから始める人、本業ではないけどHTML5 WebGLについて知っておきたい
    という人向けにメモを残します。

    実験で動作確認したバージョン組み合わせ
    three.js:REVISION: '63' blender:2.65 cannon.js:0.6.0

    目次
     WebGL入門 調べ方 情報源
     WebGL コードス二ペット
     WebGL実験室 得られたもの フィードバック
     Tips エラーレポート 解決手段




  • どう活かすの?

  • CADデータのプレゼンテーションや試作機の打ち合わせ資料の共有用に使用しています。
    マウスでグリグリしながら、改善、改良につながるアイディアを考えます。



  • WebGL(Three.js)入門

  • 入門編 ここからスタート
     シーン情報を用意して、目に見えるようにcnvasに描画します。

    1.シーン情報を登録
     ・シーン
     ・カメラ
     ・ライト
     ・メッシュ(モデル、シェイプ)
     ・レンダラ
     #ここまでは内部的な数値情報

    2.目に見えるようにcnvasに描画
     ・render();

    お薦め参考文献
    @IT
    http://www.atmarkit.co.jp/ait/articles/1210/04/news142.html
    kray
    http://kray.jp/blog/three-js/



  • WebGL(cannon.js)入門

  • 入門編 ここからスタート
     物理演算用の情報とシーン情報を用意して、目に見えるようにcnvasに描画します。
     衝突判定や物理シミュレーションができるようになります。

    1.シーン情報を登録
     ・ワールド(cannon.js)
     ・物理演算用メッシュ
     ・物理演算用材質
     ・シーン
     ・カメラ
     ・ライト
     ・メッシュ(モデル、シェイプ)
     ・レンダラ

    2.cannonの位置情報をthreeのメッシュにコピー
     フレームごとに時間軸で相互関係などを演算
     #ここまでは内部的な数値情報

    3.目に見えるようにcnvasに描画
     ・render();

    お薦め参考文献
    http://www.yomotsu.net/wp/?p=599



  • ツールの入手

  •  three.js
      https://github.com/mrdoob/three.js

     Cannon.js
      http://schteppe.github.io/cannon.js/
      http://cannonjs.org

     blender
      http://download.blender.org/release/Blender2.65/
      WebGL Three.jsとの相性がいい エクスポータもある
      blenderでつけた複数のモーションがアニメーションできる (JSON)
      UVマップ、アニメーションデータがthree.js上へのインポートと再生が可能
      バージョンをあわせればシームレスなワークフローが組める

     3ds max
      複雑なキーフレームやモーションは.dae COLLADA形式がいいようです。

     enchantjs
      http://enchantjs.com/ja/

     UEI
      http://www.uei.co.jp/product/enchantjs/

     phonegap-fan
      http://phonegap-fan.com



  • 学習フロー

  • GPUを使用した高速描画機能を使いこなしたい
    まずは約1ヶ月くらいの期間をとって、各機能のサンプルをひたすら
    組み上げることをお勧めします。

    ・モデルを作ってシーンを作ってゆく
    ・クオリティを均一化する
    ・ロジックを紡ぐ 緻密に組み上げる
    などの作業を考慮するとそれなりの労力と時間がかかります。

    OpenGL基礎 3D空間の概念の理解
     three.js レンダラを使いこなす
     モデリング
     テクスチャ
     キーフレーム、ボーン アニメーション