Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

にー兄さん

November 22, 2023
Tweet

More Decks by にー兄さん

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 前提知識

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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)

    View full-size slide

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

    Count is: {{ count }}

    <br/>button {<br/>font-weight: bold;<br/>}<br/>

    View full-size slide

  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)

    View full-size slide

  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();
    });

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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の中に
    書けばいいじゃん
    もうちょっといい感じにしたい
    <br/>import { ref, onMounted } from "@vue/runtime-core";<br/>import { createScene } from "../scenes/MyFirstScene";<br/>export default {<br/>name: "BabylonScene",<br/>setup() {<br/>const bjsCanvas = ref(null);<br/>onMounted(() => {<br/>if (bjsCanvas.value) {<br/>createScene(bjsCanvas.value);<br/>}<br/>});<br/>return {<br/>bjsCanvas,<br/>};<br/>},<br/>};<br/>

    View full-size slide

  13. いい感じとは、つまりreact-three-fiber
    R3F(https://docs.pmnd.rs/react-three-fiber/)
    export default function App() {
    return (







    )
    }
    - シーンの状態が分かりやすい
    - ReactのI/Fで記述できてよい

    View full-size slide

  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

    View full-size slide

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


    name="camera"
    :alpha="Math.PI / 3"
    :beta="Math.PI / 3"
    :radius="0.5"
    :target="[0, 0.05, 0]"
    >

    >



    View full-size slide

  16. おわりに

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 最後に宣伝

    View full-size slide