WhitestormJSを触ってみた

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

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

自己紹介たけうちさんは縮退しました @chimerast 株式会社ユーザベース社内ニート全方位型エンジニア G
ダライアスというSTG で3D に目覚める @chimerast 3

3D プログラミング遍歴 2000 年頃にDirectX6 で3D 横スクロールシューティングを作る Immediate Mode
というポリゴンや行列をごりごり触るやつたまに3D のプログラムが書きたくなってOpenGL とか触る 2011 年頃Scala でMMD の旧ファイル形式のローダ& レンダラを実装してみるも、IK ボーン、物理演算で挫折 OpenGL with GLSL OpenGL ライブラリとしてLWJGL を使用 @chimerast 4

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

今日のお題: WhitestormJS @chimerast 6

@chimerast 7

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

@chimerast 9

物理演算！！ @chimerast 10

@chimerast 11

軟体物理！！ @chimerast 12

とりあえず触ってみる 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

@chimerast 14

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

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

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

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

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

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

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

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

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

今回時間が無くて試せなかったこと 3D モデルファイルのロードアニメーションの動作確認 @chimerast 24

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

WhitestormJSを触ってみた

WhitestormJSを触ってみた

Hideyuki Takeuchi

More Decks by Hideyuki Takeuchi

Other Decks in Programming

Featured

Transcript