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

今年初めてのBabylonJsを触ってみた

Nobuyoshi
September 15, 2023

 今年初めてのBabylonJsを触ってみた

BabylonJsの基礎になります。
興味がありましたらご覧ください。

成果物はこちらになります。
https://babylonjs-tau.vercel.app/myroom/

Nobuyoshi

September 15, 2023
Tweet

More Decks by Nobuyoshi

Other Decks in Programming

Transcript

  1. うえむー
    今年初めてのBabylonJsを触ってみた

    View full-size slide

  2. Name:うえむー  フロントエンドエンジニア
    Job Skill:HTML / CSS / SCSS / JavaScript / jQuery / PHP / WordPress / Movable Type /
    Shopify / Symfony / Laravel / microCMS etc...
    Private Skill:Next.js / React.js / Nuxt.js / Golang etc...
    Hobby:プログラミング学習・ゴルフ・ボードゲーム・麻雀
    From:埼玉県川口市
    SNS・ブログサイト
    Twitter::https://twitter.com/uemuragame5683
    ブログサイト:https://nu-blogsite.net/
    ポートフォリオサイト:https://uemu-engineer.com/
    自己紹介
    BabylonJsについて
    メリット・デメリット
    オススメの記事
    ハンズオンする
    成果物
    まとめ
    自己紹介

    View full-size slide

  3. みなさんはBabylonJSって知ってますか?
    自己紹介
    BabylonJsについ

    メリット・デメリット
    オススメの記事
    ハンズオンする
    成果物
    まとめ
    BabylonJSについて

    View full-size slide

  4. BabylonJSはMicrosoft社が開発したJavaScriptのWebGLのライブラリです!
    有名なThreeJSと同じ機能ですね!
    BabylonJSはWeb上3Dゲーム開発で主に利用されているようです。
    自己紹介
    BabylonJsについ

    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    BabylonJSについて

    View full-size slide

  5. メリットその1・・・ライブエディタがある
    Babylon.js Playground
    https://playground.babylonjs.com/
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    メリット・デメリット

    View full-size slide

  6. メリットその2・・・コンポーネント化できる
    エディタで作成したものを以下の手順で保存することができます。
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    メリット・デメリット
    「Inspector」(インスペクタ)をク
    リック
    その中の「Tools」をクリックし、エク
    スポート することができます。出力
    形式は .babylon format と
    GLB format を選べます。

    View full-size slide

  7. メリットその2・・・コンポーネント化できる
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    メリット・デメリット
    すると左のようにxxx.babylonで保存され、以下のよう
    にインポートすることができます。
    このようにインポートができればコードが整理しやすくなり
    編集しやすくなります。

    View full-size slide

  8. メリットその3・・・安定性がある
    今まで利用したThreeJsでデメリットを感じた所
    ・パフォーマンス性が悪く表示するスピードが遅い
    自分のポートフォリオサイトはThreeJsで利用してメインビジュアルを表示してるんです
    が、そこの改善方法に悩みました。
    ・パージョンアップすると、少し古いバージョンのプラグインが使えなくなる。
    今まで利用したThreeJsのプラグインが使えなくなり、フロントがでなくなったという事象が
    発生したことが何回かありました。
    BabylonJsは上記の2点と比べてその事象が発生している事が
    1度もく安定性があると考
    えられます。
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    メリット・デメリット

    View full-size slide

  9. デメリット・・・ThreeJsと比べると認知度が低い
    ThreeJsと比べると認知度が低い所です。成果物を見てみると
    BabylonJsはThreeJsと
    比べると少ないことがわかります。
    デメリット・・・日本語のドキュメントがない
    BabylonJsは現在英語のドキュメントしかなく、日本語のドキュメントはありません。
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    メリット・デメリット

    View full-size slide

  10. では、試しにやって見ましょう!
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする

    View full-size slide

  11. サンプルとしてこれを作ります!
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする

    View full-size slide

  12. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    canvasを用意して、babylon.jsのライブ
    ラリを追加する

    View full-size slide

  13. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    DomcontentLoadedイベントでmain関
    数を実行させる
    getElementByIdメソッドでcanvasのid
    属性値を指定する

    View full-size slide

  14. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    BABYLON.Engineで
    Babylon.jsエンジンを起動する

    View full-size slide

  15. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    BABYLON.Sceneでシーンを作成させ
    る。

    View full-size slide

  16. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    BABYLON.ArcRotateCameraでカメラを作成して、
    XXXXX.attachControlでカメラをコントロールする

    View full-size slide

  17. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    BABYLON.HemisphericLightで環境光源を設定
    す。
    環境光源を設定しないとジオメトリをいれても真っ暗
    なままで見えません

    View full-size slide

  18. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    BABYLON.StandardMaterialでマテリアルを作成
    し、MeshBuilder.createGraundグランド用のジオ
    メトリを用意して、BABYLON.color3で色を設定す
    る。
    MeshBuilderはGraund系だけでなく、円・正方形な
    どいろんなジオメトリがあります!

    View full-size slide

  19. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    BABYLON.StandardMaterialでマテリアルを作成
    し、MeshBuilder.createBoxでBox型のジオメトリ
    を用意して、BABYLON.Textureでテクスチャをセッ
    トする。

    View full-size slide

  20. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    ハンズオンする
    ジオメトリの位置を変更します。
    x.y.z軸のposition、x.y.z軸のrotateで上下左右前後
    移動したり、回転することができます。

    View full-size slide

  21. 自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    成果物
    https://babylonjs-tau.vercel.app/myroom/

    View full-size slide

  22. Babylon.js 公式入門チュートリアル ざっくり和訳
    https://zenn.dev/chomado/books/babylonjs-tutorial-ja
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    オススメの記事

    View full-size slide

  23. Microsoft社が開発したJavaScriptのWebGLのライブラリです。
    BabylonJSのエディタがあり、ここで編集できる。
    パフォーマンス性が良い
    ThreeJsと比べると認知度が低い
    BabylonJSは面白い!
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    まとめ

    View full-size slide

  24. Thank You!
    自己紹介
    BabylonJsについて
    メリット・デメリット
    ハンズオンする
    成果物
    オススメの記事
    まとめ
    まとめ

    View full-size slide