目次

はじめに
免責事項
用語定義
商標または登録商標について
第1章 Babylon.jsとは何か。何ができるのか
1.1 Babylon.jsとは
1.2 Babylon.jsを勉強するには
1.3 Babylon.jsについて情報収集するには
1.4 終わりに
第2章 Babylon.jsをはじめてみよう
2.1 最低限必要なPCの環境
2.2 最もシンプルなBabylon.jsのコードの書き方
2.3 Babylon.jsを気軽に試し、共有できるしくみ「Playground」
2.4 少し慣れてきたときによく使う便利な機能
2.5 終わりに
第3章 Babylon.jsで物理演算を試してみる
3.1 シンプルな物理演算のサンプル
3.2 3Dモデルを物理演算で動かしてみる
3.3 終わりに
第4章 Babylon.jsでAsset Libraryを試してみる
4.1 Fire Materialの使用例
4.2 Water Materialの使用例
第5章 Babylon.jsでシェーダで遊んでみる
5.1 シェーダについて
5.2 Babylon.js CYOSとは?
5.3 Shader Materialの使用例
5.4 Procedural Textureの使用例
5.5 Post Processの使用例
第6章 フラグメントシェーダでGPGPUをしてみる
6.1 なぜ、Babylon.jsでGPGPUをするのか
6.2 計算モデル
6.3 並列計算の実装
6.4 実行結果
6.5 終わりに
第7章 レイトレーシングをしてみる
7.1 レイトレーシングとは
7.2 レイトレーシングの実装
7.3 Tips
7.4 終わりに
第8章 ローレンツアトラクタをWebXRで体験する
8.1 ローレンツアトラクタとは
8.2 ローレンツアトラクタを触ってみよう
8.3 ローレンツアトラクタをBabylon.jsで実装する準備をしよう
8.4 ローレンツアトラクタの描画実装
8.5 Babylon.jsとWebXR
8.6 Babylon.jsでWebXRの実装をしてみよう
8.7 XRデバイスでローレンツアトラクタを見てみよう
8.8 まとめ
第9章 VtuberとBabylon.js
9.1 本章の流れ
9.2 動作環境について
9.3 プログラム(3Dモデル撮影会)を動かしてみよう
9.4 プログラムのコード解説
9.5 モーション付きの3Dデータの作成について
9.6 おわりに
第10章 業務アプリに3DCGを扱う事で生まれる可能性
10.1 はじめに
10.2 ブラウザで3DCGを表示できるということ
10.3 場所が意味を持つ、物流倉庫での利用を考えてみる
10.4 商品をグラフで表示するコード
10.5 倉庫と棚を表示するコード
10.6 商品を表示するコード 機能追加
10.7 終わりに
第11章 グラフ表示をやってみた
11.1 こんなことやってみます
11.2 データを作る
11.3 Babylon.jsでハコを作る
11.4 グラフの作成
11.5 Babylon.jsでのグラフ表示、完成です
著者紹介・執筆者紹介

はじめに

 まずは本書を手に取っていただき、誠にありがとうございます。

 本書は、Babylon.js勉強会の活動の一環として、Babylon.jsをもっと広めたいという有志の熱意から生まれました。Babylon.js勉強会は、2022年5月に設立したばかりのまだまだ新しいコミュニティです。この「Babylon.js レシピ集」は、2022年9月の「技術書典13」で発売した内容をもとに、加筆修正されました。Babylon.jsについてのさまざまな知見が集まっていますので、ぜひ一読いただき「こんなこともできるんだ」と思っていただければ幸いです。

 また、ちょっと気になるなと思われたら、ぜひ Babylon.js勉強会 にも参加してみてください。

Babylon.js レシピ集 著者代表 藤原貴之

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

用語定義

 本書では、3次元形状をもつ図形について、以下のように定義しています。

 ・テクスチャや色はついておらず、単に形状がわかるもの(例:直方体、球):メッシュ

 ・メッシュにテクスチャや色がついていて、客観的に何かを認識できる:3Dモデル

商標または登録商標について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

第1章 Babylon.jsとは何か。何ができるのか

本章ではBabylon.jsの概要を説明します。

1.1 Babylon.jsとは

 ブラウザで3DCGを用いた立体的な表現をするためのWebGLフレームワークです。

 Microsoft従業員であるDavid Catuheさんにより、2013年ころからOSSで公開されています。

 以後、約2年おきにメジャーバージョンアップし、2022年5月5日にv5.5.5がリリースされました1

Our mission is to create one of the most powerful, beautiful, and simple web rendering engines in the world. Our passion is to make it completely open and free for everyone.

(日本語訳)私たちの使命は、世界で最もパワフルで美しく、シンプルなウェブレンダリングエンジンを作ることです。私たちの情熱は、それを完全にオープンにして、誰もが自由に使えるようにすることです。

 ここに書かれている通り、シンプルかつきれいな描画が特徴です。

 ところで、ブラウザ上で3DCGを用いた表現をするためには、WebGLというJavaScriptのAPI (Application Program Interface) を介して表現する方法があります。

 しかし、WebGLの記述はとても複雑かつ長いです。たとえば、以下のソースコードはブラウザ上で四角形のメッシュを描画するためのWebGLのソースコードです。

WebGLの記述例(JavaScript)

 1: //https://developer.mozilla.org/ja/docs/Web/API/
 2: //WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
 3: function drawScene(gl, programInfo, buffers) {
 4:   gl.clearColor(0.0, 0.0, 0.0, 1.0);  // Clear to black, fully opaque
 5:   gl.clearDepth(1.0);                 // Clear everything
 6:   gl.enable(gl.DEPTH_TEST);           // Enable depth testing
 7:   gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
 8:
 9:   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
10:
11:   const fieldOfView = 45 * Math.PI / 180;   // in radians
12:   const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
13:   const zNear = 0.1;
14:   const zFar = 100.0;
15:   const projectionMatrix = mat4.create();
16:
17:   mat4.perspective(projectionMatrix, fieldOfView,aspect,zNear, zFar);
18:
19:   const modelViewMatrix = mat4.create();
20:
21:   mat4.translate(modelViewMatrix,     // destination matrix
22:                  modelViewMatrix,     // matrix to translate
23:                  [-0.0, 0.0, -6.0]);  // amount to translate
24:
25:  {
26:     const numComponents = 2;  // pull out 2 values per iteration
27:     const type = gl.FLOAT;    // the data in the buffer is 32bit floats
28:     const normalize = false;  // don't normalize
29:     const stride = 0;         // how many bytes to get from one
30:                     // set of values to the next
31:                               // 0 = use type and numComponents above
32:     const offset = 0;         // how many bytes inside the buffer
33:                               // to start from
34:     gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
35:
36: // このあと60-70行ほど処理が続きます。
37:
38:   {
39:     const offset = 0;
40:     const vertexCount = 4;
41:     gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
42:   }
43: }

 より簡単な記述で表現できるようにしたWebGLフレームワークのひとつがBabylon.jsです。

 たとえば、Babylon.jsで四角形メッシュを表示させる場合、以下のように1行で済みます。

四角形メッシュを表示させるためのコード(JavaScript)

 1: const plane = BABYLON.MeshBuilder.CreatePlane("plane");

 カメラやライトを表示して、マウスで方向転換できるようにしても10行程度で書くことができます2

図1.1: Babylon.jsで四角形を表示する例

 他にどんな表現ができるかについてですが、公式HP3をスクロールダウンしていくとFEATURED DEMOという表示が出ます。

 ここに表示されている六角形が、Babylon.jsで作られた作品やサービスです。それぞれクリックすると何ができるのかが確認いただけます。

図1.2: Babylon.js公式HPのFEATURED DEMOの表示例

1.2 Babylon.jsを勉強するには

 Babylon.jsが初めてという方は、公式ドキュメント"Babylon.js Documentation"の一部である"Introduction to Babylon.js Features"を一通り進めることをお勧めします4。地面を作るところから始めて、小さな村を作る、ライティングを入れる、キャラクタが歩くなどをひとつずつ作ることができます。

図1.3: Introduction to Babylon.js Featuresの画面

 Getting Startedはすべて英語で書かれています。英語だと読みづらい場合、Microsoftのちょまどさん作成による和訳版を参照することをお勧めします5

図1.4: ちょまどさん和訳版のトップページ

 日本語和訳だけでなく、随所に補足説明が入っておりとてもわかりやすいです。

 Babylon.jsに少し慣れてきたら、Babylon.js DocumentationのDiving DeeperというChapterを見ることをお勧めします6

 ここでは、Getting Startedよりも広い範囲で詳細な情報が書かれています。たとえば、Diving Deeper > Animation > Animting Charactersというページでは、このように表示されています。

図1.5: Animating Charactersの画面

 ページ右側のExamplesというエリアには、サムネイル付きリンクがあります。このリンクを選択すると、サンプルコードと実行画面が開きます。これをPlaygroundといいます。詳細は次の章で説明します。7

 また、Microsoftが公開しているDocsというドキュメント8にも、Babylon.jsのことが書いてあります。

図1.6: Microsoft Docsで紹介されているBabylon.js

 Docsには、WebXR関連の丁寧なチュートリアルがあります。「Babylon.jsを使用してWebXRでピアノを構築する」9というページもあるので、WebXRについて調べたい方にお勧めです。

1.3 Babylon.jsについて情報収集するには

 Babylon.jsに関する情報は、ほかのWebGLフレームワークであるthree.jsと比較すると少ないのが現状です。

 私がBabylon.jsを使う上で困ったとき、以下のサイトで情報を集めています。

1.3.1 Babylon.js Forum

 Babylon.jsのコミュニティが公開しているフォーラムです10

 ここでは、わからないことへの質問、ちょっと作ってみたので見てくださいというデモURLの共有、コミュニティからのアナウンスなどを確認できます。

 すべて英語ですが、有益な情報があるのでお勧めです。

 たとえば、右側の検索バーに自分の知りたいキーワードを入れると、候補となる投稿が表示されます。ここでは"animation"というキーワードを入力しています。

図1.7: Forumの検索バーで投稿を表示

 この候補を起点に調べるのがお勧めです。

1.3.2 Babylon.js JapanのConnpass

 この本の執筆者たちが所属するコミュニティです。勉強会などのイベントを紹介しています11

 connpassのリンクには、イベントレポートやYouTubeライブの録画データの公開もあります。ご興味あればご覧いただけると幸いです12

1.3.3 Babylon.js勉強会のDiscord

 Babylon.js Japanとして公開しているDiscordです13。誰でも参加できるようになっていますので、ぜひご参加ください。

 イベントの開催相談、技術ニュースの共有、困ったときの質問と回答など、さまざまな内容をやりとりしています。

 2023年1月8日現在では、290人の方が参加されています。

1.4 終わりに

 Babylon.jsについて簡単に解説しました。次の章では初めてBabylon.jsを使ってみる方向けに、最低限の環境で動かす方法や、知っておくと便利な基本的な機能を紹介します。

1. https://babylonjs.medium.com/babylon-js-5-0-beyond-the-stars-2d11d4c3d07

2. https://playground.babylonjs.com/#P2S8YV

3. https://www.babylonjs.com/

4. https://doc.babylonjs.com/features/introductionToFeatures

5. https://zenn.dev/chomado/books/babylonjs-tutorial-ja

6. https://doc.babylonjs.com/features/featuresDeepDive

7. ページによってはPlaygroundが入っていない場合もあります

8. https://docs.microsoft.com/ja-jp/windows/mixed-reality/develop/javascript/tutorials/babylonjs-webxr-helloworld/introduction-01

9. https://docs.microsoft.com/ja-jp/windows/mixed-reality/develop/javascript/tutorials/babylonjs-webxr-piano/introduction-01

10. https://forum.babylonjs.com/

11. https://babylonjs.connpass.com/

12. イベントによっては、レポートや録画データは公開されていません

13. https://discord.gg/uWaWQYgxCE

試し読みはここまでです。
この続きは、製品版でお楽しみください。