これは「Babylon.js アドベントカレンダー2024」の1日目です。
初日ということで、初めてBabylon.jsを知ったという方向けの説明や役立つリンクなどを紹介しようと思います。
1. Babylon.jsとは
ブラウザで3DCGが描画できるJavaScript/TypeScriptのフレームワークです。
OSSなので、誰でも利用できますし気軽に開発も可能です。
また、Babylon.jsの公式ドキュメントで紹介されているように、3Dモデルの表示、制御、カメラワーク、キャラクターアニメーション、パーティクル、Post Process、XRなどの3DCGを使った表現に必要な機能は一通りそろっています。
2. どうやって始めればよいか？
JavaScript/TypeScriptによる開発のため、最低限必要なのは、Visual Studio CodeなどのテキストエディタとEdgeやChromeなどのブラウザのみです。
例えば3D空間を作って球体を表示する、という最もシンプルな例は以下のように書くことで実現できます。
これをテキストエディタにコピーしてindex.htmlとして保存し、サーバに格納してアクセスすればこのように表示されます。
Visual Studio Codeを使っている場合、Live Serverというextentionを入れていれば、VSCode自体がサーバになってくれます。
Live Serverの使い方については、例えばこちらの記事でわかりやすく紹介されています。
あとは処理を工夫することで、こういう表現もできるようになります。
実際に動作させている例です。
3. 勉強に役立つサイト
3.1 公式ドキュメント
公式ドキュメントは、全体的にわかりやすく書かれており参考になります。たとえば以下のチュートリアルサイトをみると、空間の作り方、オブジェクトの配置、アニメーションの付け方などが学べます。
https://doc.babylonjs.com/features/introductionToFeatures/
Microsoftのちょまどさんが和訳版を公開してくださっているので、こちらもご参考ください。
3.2 公式フォーラム
会話は英語ですが、困った時に質問すると大抵返答いただけます。全体的に親切です。
3.3 Babylon.js勉強会のDiscord
日本では、Babylon.js勉強会 (Babylon.js Japan) というコミュニティがあります。
そこではDiscordが開設されており、誰でも参加できます。 discord.gg
3.4 過去のアドベントカレンダー
アドベントカレンダーは今回で３回目です。過去２回のカレンダーを見ていただくと、色々なことができることをご確認いただけると思います。 qiita.com
3.5 技術書典へ出版した書籍
技術書典とは、技術誌を販売するイベントです。半年に１回開催されており、オンライン販売されている書籍はいつでも購入できます。
Babylon.js勉強会では、2022年9月の技術書典13より出展しています。
Babylon.jsのさまざまな知見を書いた「Babylon.js レシピ集」をvol.1, 2, 3, 4, 5まで公開しています。また、先月の技術書典17では初めての方向けの解説やミニゲーム開発を通じて実践的に学べるようにした「Babylon.js 1st Step Book 2024」を公開しました。
こちらのサイトから確認できますので、よろしければご覧ください。
4. おわりに
Babylon.jsは他の言語やフレームワークに比べるとまだまだ知名度が低いです。
これを機にちょっと使ってみようかなと思っていただけると幸いです。
