メモ_Babylon.jsの開発環境を晒す会

アーカイブ動画

https://youtu.be/0D1EBat5-k0

https://youtu.be/Hkkf361ItMM

のぶさん

VSCodeの拡張機能

Live Server : ワンタッチローカルサーバー立ち上げ

自分のPC内のモデル（.glb）を使いたいときなどはサーバーを立ち上げないと使用できないので、それを簡単にできる

https://scrapbox.io/files/6332db52fb0d01001d45c55b.png

HTMLとJSファイルを用意する

以下のようにすることでPlaygroundみたいな感じでできる。（これがvanillaの環境が「まずBabylon.js動かしたい」という型におすすめおすすめ）

HTMLファイル

https://scrapbox.io/files/6332dbe71362bf001d189401.png

JS

https://scrapbox.io/files/6332dc11e8c74100233bd462.png

一番シンプルな構成＝HTML＋JavaScript

Babylonでnpmを使った例（docs）

のぶさんの用意された環境の例５つ

https://scrapbox.io/files/6332dcce374c7d001d02b773.png

とりあえずBabylonを動かしてみたい人→vanilla構成で

もうちょいモジュール管理／効率性などを重視したい人→vite,npm

npm構成→babylonのサンプルではwebpackを使用

本格的なWebサイトを開発したい人（Webフレームワーク使いたいよ）→vue,reactなど

vite

画面遷移とか絡めたやつ：vue-extのところ。4画面分作った

https://scrapbox.io/files/6332ddc7e52cc00023e2e3e8.png

質疑

Live Server 何がうれしい？

↓

https://scrapbox.io/files/6332de6d3decb60023d2055b.png

vanilla、nodejsとかだと簡易的なwebサーバーとかもついてくるからあんまり使わない。

にー兄さん

webサーバーは必要。ブラウザ直接は動かない。

静的なHTMLのうんぬん（すみません補足願います）

BOXだけなら動くが、メッシュやら何やらまで絡むと、外部アクセスのプロトコル回りでNG食らうとのこと（意訳）

彩

初心者で構築するならどんな構成が良いですか？

ただ動かしたいならvanilla

ちょっとせっかくだし勉強もしようとかならvite

会社の若手エンジニアに勉強させるならこれでやらせる

えいとびーとさん

JSはじめたて。何が他と違うんだろとか。

Babylon.jsだとほかのライブラリとどう違う？うれしい？

にー兄さん：

ツールが充実

Typescriptが充実

勉強会が暖かい

ドキュメントが充実している

前にThree.js使ってたが周辺ツールがあんまなかった（当時は。今わからない）

Unityみたいなグラフィカルなツールも充実

弱み

認知度。Three.jsが人気ではあるから。知見の多さはこっち。

躓いたときに情報が見つけやすいのはなのでこっちかも。

本格的にがっつり開発したいとなるとBabylon.jsの良さがわかってくる。

イワケンさん

webpackよりviteが良い理由は？

webpack結構設定しなきゃいけない。環境用意するためにいろいろplugin入れたりとか。

viteはそういう設定ファイルほとんどない。（ただし、ファイル名、フォルダ構成などのルールがある）

これくらい。しかもこれなくても動く。効率目指すならvite

https://scrapbox.io/files/6332e1b2d034e90037cbe50b.png

にー兄さん

vite（ヴィートと読む説が濃厚）

vite:意味。素早い

vanilla（ピュアって意味。何語なんだ？）

https://scrapbox.io/files/6332e2b5ae04a5001d0534fa.png

にー兄さんはvanillaでtypescript。

https://scrapbox.io/files/6332e2d5566c87001d947495.png

こっから創りこむ。これが一番今は気に入ってる。

こんな感じ

https://scrapbox.io/files/6332e322ea5411003778121a.png

よくやるのがsass（さす）を入れる。post css。素のCSSじゃなく書きやすいのがある。

いろんなほかのスタイルシートあるが全部消す。（人のこういうの見るのめちゃめちゃ面白い（彩感想））

TSは型によるcastができるからcanvasに

TSはnullに厳しいからif作る

いったんこんな感じ。これでキャンパスが作られた

https://scrapbox.io/files/6332e405a49ddd001d53b345.png

動かん（せっかくなのでこういうのもメモ。自分もなりそうだし）

タイポだったっぽい。

Babylon.js入れる

入れたからengine作る。出ないからいったん…なにした？書いてたの消えたけど？

コマンドでVSCodeをreloadしたっぽい

なんでこんなに予測出てくるんだ？

Auto Importがやってくれてるっぽい？

https://scrapbox.io/files/6332e4b4ce3589001d6ae6d8.png

最速で豆腐を作る

こんな感じで

https://scrapbox.io/files/6332e541b44f26001dd6b76a.png

スタイルも当てる。JSからスタイル当てる自分は

https://scrapbox.io/files/6332e57e3f8c43001d28a540.png

CSSもちょっといじって

https://scrapbox.io/files/6332e5a862474e0023c890e1.png

それっぽくなった

https://scrapbox.io/files/6332e5b7d193cb0022bdf050.png

アディショナルタイム

バグが出てきた時にいい感じにデバッグできる仕組みの導入

デバッガー

何かインストールした？しないでできる？

ポートを5173にする

viteのバージョン３でこれでデバッグできる（ふわっふわでメモってるので補足大歓迎）

めちゃめちゃデバッガー。良すぎる。

https://scrapbox.io/files/6332e66a7b8e22001d49723c.png

効率的な開発。IDEを使ったデバッグとかやるなら、node.jsみたいな環境は良いなというのが感想。

質問タイム

Typescriptの場合は生成されたＪＳでってなるので、Typescriptでやるならデバッガーが良い。

にー兄さん

Formatterとか入れておくといい。

のぶさん：外部のサーバーにデプロイしますってときは、pluginいれたりとかもVSCodeでできたり。サーバーに配置する群を作ってくれる。

以降宇宙語なのでわからん人はアーカイブ見て勉強！笑

～（中略）～

何かが起きて豆腐が生まれた

Github pages上げるときの知見。パス回り。

https://scrapbox.io/files/6332e83d1fa96b00239f78ff.png