WhitestormJSを触ってみた

 WhitestormJSを触ってみた

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

8a43d544df4886ea5ef714e78f3420a7?s=128

Hideyuki Takeuchi

May 22, 2017
Tweet

Transcript

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

  2. 注意 今回の勉強会のために WhitestormJS を 初めて触ったので 今日の発表は間違ったことを言っているかも しれないのでご容赦ください @chimerast 2

  3. 自己紹介 たけうちさんは縮退しました @chimerast 株式会社ユー ザベー ス 社内ニー ト 全方位型エンジニア G

    ダライアスというSTG で3D に目覚める @chimerast 3
  4. 3D プログラミング遍歴 2000 年頃にDirectX6 で3D 横スクロー ルシュー ティングを作る Immediate Mode

    というポリゴンや行列をごりごり触るやつ たまに3D のプログラムが書きたくなってOpenGL とか触る 2011 年頃Scala でMMD の旧ファイル形式のロ ー ダ& レンダラを実装してみるも、IK ボー ン、 物理演算で挫折 OpenGL with GLSL OpenGL ライブラリとしてLWJGL を使用 @chimerast 4
  5. その昔 Three.js で作ってみたもの @chimerast 5

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

  7. @chimerast 7

  8. なんかすごそう!! Three.js のさらに wrapper 物理演算がビルトイン! なんかReact Like にも書けるらしい → 実際のデモを見てみる

    @chimerast 8
  9. @chimerast 9

  10. 物理演算!! @chimerast 10

  11. @chimerast 11

  12. 軟体物理!! @chimerast 12

  13. とりあえず触ってみる npm install whs とかでかでかと書いてあるけど、webpack の設定が どう考えても大変なのでJS を直接読み込む <script src="vendor/three.js"></script>

    <script src="vendor/whitestorm.js"></script> TUTORIALS の Getting Started → Hello World example に書いてあ るコー ドを試してみる @chimerast 13
  14. @chimerast 14

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

  16. いろいろやってみたけど const app = new WHS.App( new WHS.BasicAppPreset() // setup

    for : // ElementModule // SceneModule // CameraModule // RenderingModule ); というプリセット設定は動作せず。 @chimerast 16
  17. 気を取り直して物理演算 @chimerast 17

  18. ドキュメントがなくて非常に困る ビルトインと書いてありながら実は physics-module.js というものが 必要 ちなみにGitHub のmaster に上がっているものでは動作しない ついでになんだか ammo.js

    というのが中でロー ドされている ammo.js は、Bullet 物理エンジンのJS 実装 この辺は、GitHub のREADME から飛べるCodepen から無理矢理推測 @chimerast 18
  19. なんとか動いた。。。 @chimerast 19

  20. 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
  21. v2-beta.8 なので今後に期待 @chimerast 21

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

    ルがあるっぽい ES6 ベー ス @chimerast 22
  23. export class Application extends Component { render() { return (

    <App modules={[ new WHS.SceneModule(), new WHS.CameraModule({ position: { z: 20 } }), new WHS.RenderingModule(), new WHS.OrbitControlsModule() ]}> <Sphere geometry={[3, 32, 32]} material={new THREE.MeshBasicMaterial({color: 0xffffff})} key="1" /> </App> ) @chimerast 23
  24. 今回時間が無くて試せなかったこと 3D モデルファイルのロー ド アニメー ションの動作確認 @chimerast 24

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