Vue・Babylon連携ライブラリ BabyuewJSについて / about-babyuewjs

社内勉強会で発表した資料です（公開許可済み）

Transcript

1. Vue・Babylon連携ライブラリ BabyuewJSについて にー兄さん
2. アジェンダ 前提知識（Vue・Babylonについて） BabyuewJSについて おわりに
3. 前提知識
4. 主題 今回の話は Vue3とBabylon.jsをいい感じに組み合わせたい という話です
5. 主題 今回の話は Vue3とBabylon.jsをいい感じに組み合わせたい という話です 本題に入る前に これらについて簡単に解説
6. 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）
7. コード例（動作デモ） JavaScript, HTML, CSS が一体化したような .vueファイル JS側の変数を HTMLに埋め込んだり 変更を検知して 自動でUIを更新できる <script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style>
8. 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）
9. コード例（動作デモ） 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(); });
10. ２つのライブラリの連携と BabyuewJSについて
11. JS FWとWebGL FWを組み合わせるって？ つまり…… モダンWebフロントエンドPJで リアルタイム3D表現を扱いたい （いい感じに）
12. 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の中に 書けばいいじゃん もうちょっといい感じにしたい <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, }; }, }; </script>
13. いい感じとは、つまりreact-three-fiber R3F（https://docs.pmnd.rs/react-three-fiber/） export default function App() { return ( <Canvas> <ambientLight intensity={0.5} /> <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} /> <pointLight position={[-10, -10, -10]} /> <Box position={[-1.2, 0, 0]} /> <Box position={[1.2, 0, 0]} /> </Canvas> ) } - シーンの状態が分かりやすい - ReactのI/Fで記述できてよい
14. 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
15. コード例（動作デモ） BabyuewSceneコンポーネント をscriptに配置 その中にオブジェクトを 配置していく propsは一部リアクティブ <template> <BabyuewScene antialias> <ArcRotateCamera name="camera" :alpha="Math.PI / 3" :beta="Math.PI / 3" :radius="0.5" :target="[0, 0.05, 0]" > </ArcRotateCamera> <DirectionalLight :direction="[0.25, -1, -0.6]" :intensity="1" ></DirectionalLight> <Box name="my-box" :position="[0, 0.05, 0]" :size="0.1"> </Box> </BabyuewScene> </template>
16. おわりに
17. Babylon.jsが抱える問題と解決 Unityとは違いGUIエディタがない（一応存在する） 全部コードベースで扱う必要がある → シーンオーサリングと振る舞いの記述が混ざる →VueのSFCだとシーン表現と振る舞いの記述を分離できる Webと3D両方わかる必要がある →人口が多いWebの人を呼び込みたい →VueのI/Fで手軽に扱えるようにした
18. この先 まだ alpha版 仕組みはできたが機能は全然足りない のびしろ・改善点 たくさん Projectsを公開
19. 最後に宣伝