2020/11/12にBabylon.jsがv4.2に上がりました。これからはCDNなどで使うときはBabylon.jsはv4.2になります。
Today we are incredibly proud to introduce the latest evolution of the Babylon Platform, the amazingly #simple Babylon.js 4.2https://t.co/ViE3NmKwdq#theNextBabylonjs #powerful #beautiful #simple #OpenSource #gamedev #indiedev #webdev pic.twitter.com/PTOlexMwpN
— Babylon.js (@babylonjs) 2020年11月12日
いろいろと機能追加、改善がはかられているのですが、実は公式ドキュメントも大幅に変わっています。公式HPにはドキュメントについてこのように書かれています。
Babylon.js features a rich library of documentation to help you get started and master the platform. With Babylon.js 4.2, we’ve completely reorganized the documentation to guide your learning as your knowledge advances. Whether you want to dive into a specific subject or follow the guided path, we are sure that the Babylon.js documentation will be more simple and helpful than ever before.
引用元：Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
新しくなったドキュメントは見やすさ向上だけでなく、Babylon.jsを初めて使う人向けの丁寧なチュートリアルも多数追加されています。
そこで、今回は新しくなったドキュメントについて紹介します。
1. Babylon.jsとは？
引用元：Babylon.js: Powerful, Beautiful, Simple, Open - Web-Based 3D At Its Best
初めて見る方向けに簡単に説明しますと、Babylon.jsはWebブラウザで3DCGを描画するためのフレームワークです。JavaScript、TypeScriptに対応しているのでWebアプリ開発経験がある方であればすぐに使うことができます。
また、WebXRに対応しているのもあり、対応するWebブラウザでAR/VRコンテンツを作ることもできます。 テキストエディタとWebブラウザさえあれば最低限の開発ができるので手軽に試すことができます。
2. Babylon.js公式ドキュメントで変わったことについて
Babylon.jsのコミュニティからは、元々ドキュメントが提供されています。各機能の説明、それらの機能を実行するためのサンプルコードが書かれており丁寧でした。
今回のアップデートでは以下の点が変わっておりました。
2.1 サイトの構成が整理された
これまでは、画面の上側にメニューが表示されていましたが、今回から左側になりました。また、７つにわけたという説明があり、それぞれが何かも冒頭で解説しています。 (正確には、"What's New"、"Search"、"Playground Search"があるので10個です)
それぞれについて簡単に説明します。
2.1.1 Getting Started
はじめてBabylon.jsを使ってみる人向けに、かなり細かいセッションに分かれたチュートリアルが書かれています。Chapter1から8まであって、その中に分割された説明が3〜8個程度入っています。以下の画像はChapter2の画面です。
引用元：Getting Started - Chapter 2 - Build A Village | Babylon.js Documentation
Chapter1〜8までありますが、それぞれはやりたいこと単位で独立しており連続性はありません。たとえば、Chapter1は基本的なコードの書き方、実行の仕方などが書かれていて、Chapter3ではアニメーションの作成方法が書かれています。
2.1.2 Diving Deeper
ここでは代表的な機能（Camera、GUI、Animationなど)を個別に詳しく説明しています。
たとえば、以下の画像はGUIに関するページです。赤く囲ったところが動作確認画面付きのリンクです。右側も同じですが、右側をクリックすると新しいウインドウが開いて対応するコードも表示されます (PlayGroundという仕組みです)。
引用元：Diving Deeper | Babylon.js Documentation
2.1.3 Advanced Topics
これはタイトル通り、少しAdvancedな内容です。Babylon.jsでよく使われる.babylonという拡張子の説明などが書かれています。
2.1.4 Tool and Resources
Babylon.jsを使った開発で便利なツールが紹介されています。ソースコード＋動作確認ができるPlayground、ライブラリとしてPlayGroundに含まれているマテリアル、テクスチャなどを確認できます。
また、マテリアルをノードベースで作成できるNode Material Editor、スケルトンの入ったモデルを確認できるSkeleton Viewerの使い方も紹介されています。
Tools And Resources | Babylon.js Documentation
2.1.5 Guided Learning
具体的に何か作ってみよう、という観点のコンテンツが掲載されています。
Introduction To Creating Games：ネコを操作するゲームを作る方法の紹介です。GitHubでコードも公開されています。
Videos: 各種機能のビデオチュートリアルのリンクが掲載されています。
Workshops：シンプルな機能やアプリを作る手順が紹介されています。2020/11時点では21個のコンテンツが公開されています。
2.1.6 Extensions
Babylon.jsを元にした拡張機能やツールの紹介です。私がこのブログでよく紹介するBabylon.js Editorは以下のリンクで紹介されています。
(2020/11時点ではv3.2ベースの紹介です)
Babylon.js Editor | Babylon.js Documentation
また、Unity、3ds max、Maya、BlenderなどのシーンをBabylon.js向けにエクスポートできるプラグインなども紹介されています。
2.1.7 What's New
Babylon.jsのバージョン変更のときのリリース内容が書かれています。
What's New | Babylon.js Documentation
2.1.8 API
Babylon.jsのAPIを調べられるページです。クラスごとに分類されています。
BABYLON | Babylon.js Documentation
2.1.9 Search
任意の用語でBabylon.js のドキュメント全体を検索できます。
2.1.10 Playground Search
先ほども出てきたPlayground (コードを書いてその場で動作確認ができるクラウド環境) を検索するサイトです。Playgroundは誰でも試せて、試したコードが全てクラウドで公開されます。Playgroud SearchではコードのAPIやコメントの言葉で検索することができます。
2.2 ページ内でPlaygroundを再生できるようになった
以前はPlaygroundのリンクをクリックすると別ウインドウでPlaygroundが開くだけでしたが、今回のアップデートでページ内で再生させることもできるようになりました。
たとえば、Reflection Probesの説明ページではこのようになります。
Reflection Probes | Babylon.js Documentation
2.3 ページ内のPlaygroundが右側にサムネイル付きで並ぶようになった
ドキュメントの中にPlaygroundのリンクが入っていると、右側にサムネイル付きで並ぶようになりました。サムネイルを選択するとページ内で再生されます。矢印のアイコンをクリックすると新しいウインドウが開いて、従来の表記と同じでコードと一緒に表示されます。
3. おわりに
今回はドキュメントを中心に解説しましたが、そのうちWebXR関係のアップデートなども書いていきたいと思います。
