Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WhitestormJSを触ってみた

 WhitestormJSを触ってみた

2017/05/22 のThree.js入門者LT大会の資料です。
WhitestormJSを本当に触ってみただけのプレゼンです。

Hideyuki Takeuchi

May 22, 2017
Tweet

More Decks by Hideyuki Takeuchi

Other Decks in Programming

Transcript

  1. WhitestormJS
    を触ってみた
    たけうち ひでゆき @chimerast
    @chimerast
    1

    View full-size slide

  2. 注意
    今回の勉強会のために WhitestormJS

    初めて触ったので
    今日の発表は間違ったことを言っているかも
    しれないのでご容赦ください
    @chimerast
    2

    View full-size slide

  3. 自己紹介
    たけうちさんは縮退しました
    @chimerast
    株式会社ユー
    ザベー

    社内ニー

    全方位型エンジニア
    G
    ダライアスというSTG
    で3D
    に目覚める
    @chimerast
    3

    View full-size slide

  4. 3D
    プログラミング遍歴
    2000
    年頃にDirectX6
    で3D
    横スクロー
    ルシュー
    ティングを作る
    Immediate Mode
    というポリゴンや行列をごりごり触るやつ
    たまに3D
    のプログラムが書きたくなってOpenGL
    とか触る
    2011
    年頃Scala
    でMMD
    の旧ファイル形式のロ

    ダ&
    レンダラを実装してみるも、IK
    ボー
    ン、
    物理演算で挫折
    OpenGL with GLSL
    OpenGL
    ライブラリとしてLWJGL
    を使用
    @chimerast
    4

    View full-size slide

  5. その昔 Three.js
    で作ってみたもの
    @chimerast
    5

    View full-size slide

  6. 今日のお題: WhitestormJS
    @chimerast
    6

    View full-size slide

  7. なんかすごそう!!
    Three.js
    のさらに wrapper
    物理演算がビルトイン!
    なんかReact Like
    にも書けるらしい

    実際のデモを見てみる
    @chimerast
    8

    View full-size slide

  8. 物理演算!!
    @chimerast
    10

    View full-size slide

  9. @chimerast
    11

    View full-size slide

  10. 軟体物理!!
    @chimerast
    12

    View full-size slide

  11. とりあえず触ってみる
    npm install whs
    とかでかでかと書いてあるけど、webpack
    の設定が
    どう考えても大変なのでJS
    を直接読み込む


    TUTORIALS
    の Getting Started → Hello World example
    に書いてあ
    るコー
    ドを試してみる
    @chimerast
    13

    View full-size slide

  12. @chimerast
    14

    View full-size slide

  13. なんか出力例と違う(TT)
    ライティングのコー
    ドがどう考えてもたりない
    @chimerast
    15

    View full-size slide

  14. いろいろやってみたけど
    const app = new WHS.App(
    new WHS.BasicAppPreset() // setup for :
    // ElementModule
    // SceneModule
    // CameraModule
    // RenderingModule
    );
    というプリセット設定は動作せず。
    @chimerast
    16

    View full-size slide

  15. 気を取り直して物理演算
    @chimerast
    17

    View full-size slide

  16. ドキュメントがなくて非常に困る
    ビルトインと書いてありながら実は physics-module.js
    というものが
    必要
    ちなみにGitHub
    のmaster
    に上がっているものでは動作しない
    ついでになんだか ammo.js
    というのが中でロー
    ドされている
    ammo.js
    は、Bullet
    物理エンジンのJS
    実装
    この辺は、GitHub
    のREADME
    から飛べるCodepen
    から無理矢理推測
    @chimerast
    18

    View full-size slide

  17. なんとか動いた。。。
    @chimerast
    19

    View full-size slide

  18. const sphere = new WHS.Sphere({ // Create sphere comonent.
    geometry: {
    radius: 5,
    widthSegments: 32,
    heightSegments: 32
    },
    modules: [
    new PHYSICS.SphereModule({
    mass: 10
    })
    ],
    material: new THREE.MeshPhongMaterial({
    color: 0xF2F2F2
    }),
    position: new THREE.Vector3(0, 15, 0)
    })
    @chimerast
    20

    View full-size slide

  19. v2-beta.8
    なので今後に期待
    @chimerast
    21

    View full-size slide

  20. みていて良さそうなところ
    モジュー
    ルベー
    スでプログラムが構成されている
    プリセット設定が多く、Three.js
    ほど複雑にならなさそう
    物理演算がなんか気持ちいい
    プリセットの設定があらかじめ用意されている
    React
    っぽい書き方ができるモジュー
    ルがあるっぽい
    ES6
    ベー

    @chimerast
    22

    View full-size slide

  21. export class Application extends Component {
    render() {
    return (
    new WHS.SceneModule(),
    new WHS.CameraModule({
    position: {
    z: 20
    }
    }),
    new WHS.RenderingModule(),
    new WHS.OrbitControlsModule()
    ]}>
    geometry={[3, 32, 32]}
    material={new THREE.MeshBasicMaterial({color: 0xffffff})}
    key="1"
    />

    )
    @chimerast
    23

    View full-size slide

  22. 今回時間が無くて試せなかったこと
    3D
    モデルファイルのロー

    アニメー
    ションの動作確認
    @chimerast
    24

    View full-size slide

  23. まとめ
    まだだいぶ人柱感が強い
    ドキュメントが追いついていないのがつらい
    モジュー
    ルでマウスコントロー
    ルなんかも簡単につけられる
    @chimerast
    25

    View full-size slide