Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WhitestormJSを触ってみた
Search
Hideyuki Takeuchi
May 22, 2017
Programming
0
520
WhitestormJSを触ってみた
2017/05/22 のThree.js入門者LT大会の資料です。
WhitestormJSを本当に触ってみただけのプレゼンです。
Hideyuki Takeuchi
May 22, 2017
Tweet
Share
More Decks by Hideyuki Takeuchi
See All by Hideyuki Takeuchi
Exposed 応用編 〜内部実装 と 魔拡張〜
chimerast
3
1.9k
Delegatesと拡張関数・拡張プロパティその合わせ技
chimerast
0
750
Kotlin Coroutines と Ktor HTTP Client で作るスケールするタスク実行
chimerast
1
1.9k
UZABASE創業期から10年いるエンジニアから見た「BtoB SaaSのUI/UXってなんだろう?」
chimerast
1
840
暗号通貨の鍵を安全に管理するアーキテクチャを作ってみようとしている話
chimerast
0
410
この素晴らしい Vue.js に祝福を!
chimerast
16
11k
RxJava + Vert.x + jOOλ で Microservice的な何かを作ってみた
chimerast
0
2.7k
40億レコード以上のSPEEDA大規模データを超高速に表示するElasticsearch活用法
chimerast
1
4k
もっとデータ可視化をカジュアルに!OSSプロジェクト「E2D3」
chimerast
1
2.8k
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
4k
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
680
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
350
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
740
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
7.3k
Goで作る、開発・CI環境
sin392
0
190
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
530
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
2k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
72
4.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
What's in a price? How to price your products and services
michaelherold
246
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Transcript
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