Babylon.jsではじめるパーティクル表現

AR Fukuoka @ar_fukuoka

Babylon.jsを使ったパーティクル表現入門のハンズオンを開催します。講師は最近Babylon.jsをアクティブに勉強され、技術書典で販売されたBabylon.js レシピ集 Vol.2の執筆担当の一人でもあるRickyさん(@N1809031125)です。 Babylon.jsではじめるパーティクル表現 xr-fukuoka.connpass.com/event/285591/ #AR_Fukuoka

さくたま @sakutama_11

Babylonパーティクルよろしくお願いします〜 #AR_Fukuoka #babylonjs

AR Fukuoka @ar_fukuoka

VRを使って教育や業務効率改善、体験拡張をしたいRickyさんよろしくお願いします。 pic.twitter.com/28UDQR4X6F

拡大

拡大

AR Fukuoka @ar_fukuoka

フォローしよう #AR_Fukuoka #Babylonjs pic.twitter.com/8zQbj3kCo7

拡大

AR Fukuoka @ar_fukuoka

Babylon.jsの概要解説。Microsoft製のフレームワーク #AR_Fukuoka #Babylonjs pic.twitter.com/JmbRkueNsv

拡大

AR Fukuoka @ar_fukuoka

どんなことができるの？サンプルでデモ。 #AR_Fukuoka #Babylonjs pic.twitter.com/nFxw10yBhj

拡大

AR Fukuoka @ar_fukuoka

今日はこれを作る。そのあとVR化の紹介も。 #AR_Fukuoka #Babylonjs pic.twitter.com/IHgasNVEDh

拡大

AR Fukuoka @ar_fukuoka

開発環境にはサーバーとエディタが提供されているGlitchを使用。テンプレートコードの引き継ぎとかも簡単。すぐ使える！ #Babylonjs #AR_Fukuoka pic.twitter.com/RvYQaWJI4j

拡大

AR Fukuoka @ar_fukuoka

まずは豆腐を眺めてBabylon.jsに慣れよう #Babylonjs #AR_Fukuoka pic.twitter.com/ZO0O9U091S

拡大

AR Fukuoka @ar_fukuoka

今回のハンズオン用のテンプレートを取得できたことを確認。 #AR_Fukuoka #Babylonjs pic.twitter.com/0H9hyWbxtP

拡大

AR Fukuoka @ar_fukuoka

URLをわかりやすいように変更 #AR_Fukuoka #babylonjs pic.twitter.com/6o51DF9iqZ

拡大

拡大

AR Fukuoka @ar_fukuoka

BABYLON.MeshBuilder.CreateBoxで箱が出た。 #Babylonjs #AR_Fukuoka pic.twitter.com/FP7eR4davb

拡大

拡大

AR Fukuoka @ar_fukuoka

ついに本題。パーティクルを出す。 #AR_Fukuoka #Babylonjs pic.twitter.com/XY7qjvxWML

拡大

AR Fukuoka @ar_fukuoka

パーティクルの発生源になるオブジェクトを作る。球が出てきたけどこの後どうなるんだろう？ #AR_Fukuoka #Babylonjs pic.twitter.com/850F7klRPP

拡大

拡大

AR Fukuoka @ar_fukuoka

パーティクルシステムを実装。パーティクルの発生数の変更やテクスチャ画像は差し替え可能。 しかしまだ何も出ない焦らされています。 #AR_Fukuoka #Babylonjs pic.twitter.com/WZSLtI78iV

拡大

AR Fukuoka @ar_fukuoka

何かでた #AR_Fukuoka #Babylonjs pic.twitter.com/YBjUKvVBuO

拡大

AR Fukuoka @ar_fukuoka

発生源になる球を消して出来上がり。あっという間に動くものができる。 #AR_Fukuoka #Babylonjs pic.twitter.com/TnW3wxouZj

AR Fukuoka @ar_fukuoka

続いて雨のパーティクル。ParticleHelperっていうのを使うと超簡単 #AR_Fukuoka #Babylonjs pic.twitter.com/7v3Z31jI8R

拡大

AR Fukuoka @ar_fukuoka

たった一行で雨を降らせられた。 #AR_Fukuoka #Babylonjs pic.twitter.com/td6ORlOQh7

AR Fukuoka @ar_fukuoka

三つ目。炎を出してみよう #AR_Fukuoka #babylonjs pic.twitter.com/Xd9Al8jxXN

拡大

AR Fukuoka @ar_fukuoka

炎でた #Babylonjs #ar_fukuoka pic.twitter.com/EVZCD1Wm4W

AR Fukuoka @ar_fukuoka

続いてVR対応 #AR_Fukuoka #Babylonjs pic.twitter.com/xktT4MQWRu

拡大

AR Fukuoka @ar_fukuoka

コードはこちら #AR_Fukuoka #Babylonjs pic.twitter.com/k1oiz5wxFd

拡大