PlaygroundでBabylon.jsを使ってみた

Babylon.jsは、Microsoft社が提供しているWebGLフレームワークです。

2023年4月21日にBabylon.jsの最新版「Babylon.js 6.0」がリリースされました。

「Babylon.js6.0」は、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリになります。

この記事は、Babylon.jsやPlaygroundの説明、Babylon.jsを使った企業事例、またPlaygroundの使い方をまとめました。

Babylon.jpとは？

Babylon.jsは、Microsoft社が提供しているWebGLフレームワークです。

2023年4月21日にリリースされた「Babylon.js 6.0」では、新しく「Performance Priority Modes」（性能優先モード）が搭載されており、これによりレンダリング性能が最大で50倍も向上したと公式から発表されています。

▼公式サイト　Babylon.js

https://www.babylonjs.com/

「Performance Priority Modes」（性能優先モード）は3段階に分かれており、

・Backward compatiblity mode（後方互換性モード）

・Intermediate mode（中間モード）

・Aggressive mode（積極モード）

上記3モードに変更することができます。デフォルト設定ではBackward compatiblity mode（後方互換性モード）になっています。

「Babylon.js 6.0」の特徴として、光の反射がより美しく描写され、また流れる液体のレンダリングも可能になりました。

▼YouTube　Babylon.js 6.0 Release video

https://youtu.be/nsqpuRCQV28

PROT1Playgroundとは？

Babylon.jsでは公式からPlaygroundというライブエディタが用意されており、Web上でBabylon.jsを簡単に試すことができます。

画面左側のJavaScriptのコードを修正し、右側にある▶ をクリックすることでオブジェクトの描写ができます。

Playgroundはライブエディタなので、ブラウザキャッシュをする必要もない点が便利です。

Playgroundの特徴は、

・アカウント登録不要

・無料で使用可能

の2つの点です。

Playgroundがあれば、WebGLや3Dグラフィックスの知識がなくても、簡単な3DCGの制作が可能です。

下記リンクを開くと、GoogleやMicrosoft EdgeなどのブラウザからPlaygroundを利用することができます。

▼公式サイト　Playground

https://playground.babylonjs.com/

PROT3Babylon.jsを使用した企業事例

この章では、Babylon.jsを実際に使っている企業の事例をまとめました。

PROT4事例1：X BOX Design Lab

＜引用画像：X Box Design Lab＞

X BOXのワイヤレスコントローラーをX BOX Design Labでカスタマイズし、色を変更することが可能です。

X BOX Design Labでは、Babylon.jsを使用しています。

PROT5事例2：NIKE by you

＜引用画像：NIKE by you＞

NIKE by youは、NIKEシューズを思いのままにカスタマイズすることができます。

カスタマイズされたデザインは、2～6週間で自分のもとに届くそうです。

自分用にカスタマイズしたシューズをイメージするのに、Babylon.jsが使われています。

PROT6Playgroundの使い方

ここではPlaygroundでどのようなことができるのか、サッカーボールの3Dモデルを読み込み、動かした一連の流れをまとめました。

PROT7GLB形式の3Dモデルの読み込み

PROT8手順1：3Dモデルを用意

まずGLB形式の3Dモデルを用意します。今回はOfficeソフトのExcelから3Dモデルを入手します。

Excelを起動して、挿入 > 図 > 3Dモデル > 3Dモデルのストックをクリックします。

①タブの中から、「挿入」を選択します。

②図の中から、「3Dモデル」を選択します。

③「3Dモデルのストック」を選択します。

①検索ボックスの中に探している3Dモデルの名前を入力します。

（今回は例として「ボール」と入力しました）

②使用する3Dモデルにチェックをいれます。

③「挿入」をクリックします。

Excel上に3Dモデルのサッカーボールが表示されました。

次にWindows10/11に搭載されている「ペイント3D」を起動します。

Excel上の3Dモデルのサッカーボールを「Ctrl+c」でコピーし、ペイント3Dに「Ctrl+v」で貼り付けます。

①メニューから「名前を付けて保存」を選択します。

②コピーとして保存の「3Dモデル」を選択し、.glb形式で保存します。

PROT9手順2：3Dモデルの読み込み

先の手順で用意した3Dモデルの.glbファイルをbase64エンコードします。そのエンコードした文字列をコード中に直接記載するとPlaygroundに3Dモデルを読み込むことができます。

①入力するコードは下記になります。

②base64_encoded_strの文字列を3Dモデルを.glb形式でエンコードした文字列に置き換えましょう。

Playgroundの上部にある▶ボタンをクリックすると、コードが実行されて3Dモデルが表示されます。

PROT10SkyBoxの作成

Playground上にサッカーボールの3Dモデルが描写されました。

しかし背景が暗いので、SkyBoxを足したいと思います。

Babylon.jsでは標準でいくつかの.ddsファイルを提供しておりPlaygroundに読み込むことができます。

Skyboxを作成するために以下のように2行コードを修正してみます。

// Skyboxの作成

scene.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("/textures/SpecularHDR.dds", scene);

scene.createDefaultSkybox(scene.environmentTexture);

実行してみると背景に建物が描画され、画面が明るくなりました。

.ddsのファイル名を変えると他のパターンも読み込めます。

PROT11Materialの修正

Materialを修正すると、サッカーボールの表面に少し光沢をつけることができます。

①Playgroundの画面上部にあるInspectorボタンをクリックします。

②右側にScene内のノードやマテリアルなどの情報が表示されます。

③base64エンコード形式で読み込んだモデルに付与されているMaterial名を確認すると、「46」となっていることがわかります。

④AppendAsyncで3Dモデルを読み込んだ後、3Dモデルに適用されているMaterialを参照してパラメータを変更します。

パラメータの値を変更する場合、下記の表を参考にしてください。

属性	説明
metallic	金属のような光沢を出すことができる。 0(非金属)～1(金属)の間で指定が可能
roughness	表面の粗さを指定する。 0(反射強い)～1(反射弱い)の間で指定が可能
reflectionTexture	物体表面に反射して映るテクスチャを指定が可能

以下が実行結果です。