Slide 1

Slide 1 text

Vue・Babylon連携ライブラリ BabyuewJSについて にー兄さん

Slide 2

Slide 2 text

アジェンダ 前提知識(Vue・Babylonについて) BabyuewJSについて おわりに

Slide 3

Slide 3 text

前提知識

Slide 4

Slide 4 text

主題 今回の話は Vue3とBabylon.jsをいい感じに組み合わせたい という話です

Slide 5

Slide 5 text

主題 今回の話は Vue3とBabylon.jsをいい感じに組み合わせたい という話です 本題に入る前に これらについて簡単に解説

Slide 6

Slide 6 text

Vue.js(https://ja.vuejs.org/) モダンJSフレームワーク(The Progressive JavaScript Framework) 類似ライブラリには React, Svelte, Angular, Solid, … 最新はv3。v2とは「ほぼ別ライブラリ」 リポジトリ(https://github.com/vuejs/core) Start数は⭐41.4Kらしい(Reactは215K)

Slide 7

Slide 7 text

コード例(動作デモ) JavaScript, HTML, CSS が一体化したような .vueファイル JS側の変数を HTMLに埋め込んだり 変更を検知して 自動でUIを更新できる import { ref } from 'vue' const count = ref(0) Count is: {{ count }} button { font-weight: bold; }

Slide 8

Slide 8 text

Babylon.js(https://www.babylonjs.com/) WebGLフレームワーク、Web 3Dエンジン、説明ちょっと迷う 類似ライブラリはThree.js Webで動くリアルタイム3Dアプリケーションを開発できる TypeScriptフルサポート リポジトリ(https://github.com/BabylonJS/Babylon.js) Star数は⭐21.7K(Three.jsは95.8K)

Slide 9

Slide 9 text

コード例(動作デモ) canvas要素を使って初期化 カメラ、ライト、Cubeを 配置してレンダリングを実行 const engine = new Engine(renderCanvas, true); const scene = new Scene(engine) scene.createDefaultCameraOrLight(true, true, true) scene.createDefaultEnvironment() const box = MeshBuilder.CreateBox("box", {size:0.3}) box.position= new Vector3(0,0.15,0) window.addEventListener('resize', () => { engine.resize(); }); engine.runRenderLoop(() => { scene.render(); });

Slide 10

Slide 10 text

2つのライブラリの連携と BabyuewJSについて

Slide 11

Slide 11 text

JS FWとWebGL FWを組み合わせるって? つまり…… モダンWebフロントエンドPJで リアルタイム3D表現を扱いたい (いい感じに)

Slide 12

Slide 12 text

Babylon.jsのdocsにも一応書いてある How to use BabylonJS with Vue https://doc.babylonjs.com/communityExtensions/ Babylon.js+ExternalLibraries/BabylonJS_and_Vue/ BabylonJS_and_Vue_1 つまりscriptの中に 書けばいいじゃん もうちょっといい感じにしたい import { ref, onMounted } from "@vue/runtime-core"; import { createScene } from "../scenes/MyFirstScene"; export default { name: "BabylonScene", setup() { const bjsCanvas = ref(null); onMounted(() => { if (bjsCanvas.value) { createScene(bjsCanvas.value); } }); return { bjsCanvas, }; }, };

Slide 13

Slide 13 text

いい感じとは、つまりreact-three-fiber R3F(https://docs.pmnd.rs/react-three-fiber/) export default function App() { return ( ) } - シーンの状態が分かりやすい - ReactのI/Fで記述できてよい

Slide 14

Slide 14 text

R3FをVue3とBabylon.jsでも使いたい 100%この要件を満たす物はなかった → 作るか!w BabyuewJS v1.0.0-alpha.1が誕生 npm: https://www.npmjs.com/package/@babyuewjs/core repo: https://github.com/drumath2237/BabyuewJS

Slide 15

Slide 15 text

コード例(動作デモ) BabyuewSceneコンポーネント をscriptに配置 その中にオブジェクトを 配置していく propsは一部リアクティブ

Slide 16

Slide 16 text

おわりに

Slide 17

Slide 17 text

Babylon.jsが抱える問題と解決 Unityとは違いGUIエディタがない(一応存在する) 全部コードベースで扱う必要がある → シーンオーサリングと振る舞いの記述が混ざる →VueのSFCだとシーン表現と振る舞いの記述を分離できる Webと3D両方わかる必要がある →人口が多いWebの人を呼び込みたい →VueのI/Fで手軽に扱えるようにした

Slide 18

Slide 18 text

この先 まだ alpha版 仕組みはできたが機能は全然足りない のびしろ・改善点 たくさん Projectsを公開

Slide 19

Slide 19 text

最後に宣伝