目次
はじめに
まずは本書を手に取っていただき、誠にありがとうございます。
本書は、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で四角形メッシュを表示させる場合、以下のように１行で済みます。
四角形メッシュを表示させるためのコード（JavaScript）
1: const plane = BABYLON.MeshBuilder.CreatePlane("plane");カメラやライトを表示して、マウスで方向転換できるようにしても10行程度で書くことができます2。
他にどんな表現ができるかについてですが、公式HP3をスクロールダウンしていくとFEATURED DEMOという表示が出ます。
ここに表示されている六角形が、Babylon.jsで作られた作品やサービスです。それぞれクリックすると何ができるのかが確認いただけます。
1.2 Babylon.jsを勉強するには
Babylon.jsが初めてという方は、公式ドキュメント"Babylon.js Documentation"の一部である"Introduction to Babylon.js Features"を一通り進めることをお勧めします4。地面を作るところから始めて、小さな村を作る、ライティングを入れる、キャラクタが歩くなどをひとつずつ作ることができます。
Getting Startedはすべて英語で書かれています。英語だと読みづらい場合、Microsoftのちょまどさん作成による和訳版を参照することをお勧めします5。
日本語和訳だけでなく、随所に補足説明が入っておりとてもわかりやすいです。
Babylon.jsに少し慣れてきたら、Babylon.js DocumentationのDiving DeeperというChapterを見ることをお勧めします6。
ここでは、Getting Startedよりも広い範囲で詳細な情報が書かれています。たとえば、Diving Deeper > Animation > Animting Charactersというページでは、このように表示されています。
ページ右側のExamplesというエリアには、サムネイル付きリンクがあります。このリンクを選択すると、サンプルコードと実行画面が開きます。これをPlaygroundといいます。詳細は次の章で説明します。7
また、Microsoftが公開しているDocsというドキュメント8にも、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.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を使ってみる方向けに、最低限の環境で動かす方法や、知っておくと便利な基本的な機能を紹介します。