3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 17

Babylon.js Advent Calendar 2025

@cx20

Babylon.js Playground v2 をつかってみよう

3
Posted at

この記事はBabylon.js Advent Calendar 2025の17日目の記事です。

本記事では、Babylon.js Playground v2 の概要について説明します。日々更新が行われているため、画面などが変わる可能性がある点にご注意ください。

はじめに

Babylon.js Playground とは、Webブラウザ上で Babylon.js を使った 3D シーンを簡単に作成・編集・共有できるオンラインツールです。ユーザーはコードを直接編集し、リアルタイムで結果を確認しながら開発を進めることができます。

従来の Babylon.js Playground では単一ファイルでのみコードを記述できましたが、行数が多いプログラムではスクロールが必要になるなど、見通しが悪く、管理が困難でした。

Babylon.js Playground v2 とは

2025年9月、Babylon.js Forum のコミュニティメンバーの knervous 氏により、複数ファイルに対応した Playground v2 の提案が行われました1。

本提案はコミュニティから高く評価され、Babylon.js チームによって 2025年10月、正式に採用されました。

Babylon.js Playground v2の例（赤枠が主な変更点）

Playground v2 の新機能一覧

knervous 氏による紹介動画が公開されています。下記はその抜粋です。

BabylonJS Playground: V2 Proof of Concept2

  • 複数ファイルサポート - VS Code スタイルのタブでコードを整理
  • NPM モジュール統合 - lodash などの外部ライブラリを直接インポート
  • 自動型取得 - TypeScript の IntelliSense を完全サポート
  • 高度なデバッグ - Chrome DevTools でブレークポイント、ステップ実行が可能
  • ES Modules 変換 - 各ファイルがブラウザで実行可能なモジュールに変換
  • シェーダーサポート - シェーダーコードの別ファイル管理（.wgsl、.glsl）
  • 開発支援機能（定義ジャンプ、補完）

従来版との違い（比較表）

機能 従来版 Playground v2
ファイル管理 単一ファイル 複数ファイル
エディタエンジン最新化 Monaco Editor v0.27 Monaco Editor v0.53
ライブラリ統合 手動インポート NPMモジュール統合
型情報 なし 自動型取得
デバッグ 基本的なログ出力 高度なデバッグ
モジュール化 なし ES Modules変換
シェーダーサポート なし シェーダーサポート

ファイル分割の例

Playground v2 では、VS Code スタイルの表示で複数ファイルを管理できます。これにより、コードの整理が容易になり、大規模なプロジェクトでも見通しが良くなります。

試しに、Playground の既定のサンプルをファイル分割してみましょう。

Explorerアイコンをクリック
Explorerアイコンをクリック

New Fileアイコンをクリック
New Fileアイコンをクリック

新しいファイル名を入力
新しいファイル名を入力

新しいファイルにコードを記述
新しいファイルにコードを記述

ファイル分割後
ファイル分割後

ファイル分割することで、コードの見通しが良くなったことが分かります。

その他のファイル操作

ファイルのタブ表示から、ファイルの削除、リネーム、複製、ドラッグによる並べ替え、エントリーポイント（実行開始ファイル）の指定も行えます。

タブ表示からのファイル操作
タブ表示からのファイル操作

横断検索

Playground v2 では、複数ファイルにまたがるコードの検索が可能です。エディタ上部の検索アイコンをクリックすると、検索バーが表示され、キーワードを入力して検索できます。

ファイル検索
ファイル検索

セッションの履歴

Playground v2 では、過去のセッションを簡単に参照できる履歴機能が追加されました。これにより、以前の作業を迅速に再開したり、変更を追跡したりすることが可能です。

Sessionアイコンをクリック
Sessionアイコンをクリック

Playground Session Historyから履歴を選んでリストア
Playground Session Historyから履歴を選んでリストア

リストア結果
リストア結果

外部ライブラリのインポート例

Playground v2 では、コード中で import ... from "lodash" のように npm パッケージを直接インポートでき、Playground が自動的に CDN（esm.sh）からモジュールを取得して実行できます。

例えば、Babylon.js 拡張の Radial Cloner を使う場合は、下記のような記述で import が可能です。実際には esm.sh 経由でロードされます3。

外部ライブラリのRadial Clonerをインポートする例（JavaScript）
// https://playground.babylonjs.com/#XJ5QSM#1

// Radial Cloner を esm.sh 経由でインポート
import { RadialCloner, RandomEffector } from "bp-cloner@0.0.2";

var createScene = function () {
  var scene = new BABYLON.Scene(engine);
  var camera = new BABYLON.ArcRotateCamera("camera",
    -Math.PI / 2, Math.PI / 2.5, 30, new BABYLON.Vector3(0, 0, 0), scene);
  camera.attachControl(canvas, true);
  var light = new BABYLON.HemisphericLight("light",
    new BABYLON.Vector3(1, 1, 0), scene);
  var ground = BABYLON.MeshBuilder.CreateGround("ground",
    {width: 50, height: 50}, scene);

  // Assets.meshes.Chairを使った椅子の読込
  BABYLON.SceneLoader.ImportMesh("",
    Assets.meshes.Chair.rootUrl, Assets.meshes.Chair.filename, scene,
    function (newMeshes) {
      // すべてのメッシュを一つの親の下にまとめる
      var parentNode = new BABYLON.TransformNode("chairParent", scene);

      newMeshes.forEach(function(mesh) {
        if (mesh) {
          // スケールと回転を調整
          mesh.scaling = new BABYLON.Vector3(0.05, 0.05, 0.05);
          mesh.rotation.y = Math.PI;  // 180度回転
          mesh.parent = parentNode;
        }
      });

      // 親ノードをRadialClonerに渡す
      var mm = new RadialCloner([parentNode], scene, {
        count: 16,
        radius: 10,
        startangle: 30,
        endangle: 300,
        useInstances: false  // クローンを使用
      });

      // ランダムエフェクターを追加
      var rr = new RandomEffector();
      rr.strength = 1;
      rr.position = {x: 2, y: 0, z: 2};
      rr.rotation = {x: 0, y: 30, z: 0};
      mm.addEffector(rr, 1);
    }
  );

  return scene;
};

export default createScene;

Radial Clonerの使用例（放射状に椅子が配置されたシーン）
Radial Clonerの使用例（放射状に椅子が配置されたシーン）

コラム：esm.sh について

esm.sh は、npm パッケージをブラウザ向けの ES Modules 形式に変換して配信する CDN です。
Playground v2 の import 文

import { RadialCloner } from "bp-cloner@0.0.2";

は内部的に esm.sh を経由して

import { RadialCloner } from "https://esm.sh/bp-cloner@0.0.2";

として扱われます。

ES Modulesとしての実行 & デバッグ

Playground 上のコードは ES Modules 形式で実行され、ブラウザのソースとして各ファイルが認識されます。
その結果、Chrome DevTools などでユーザーコードにブレークポイントを設定し、ステップ実行によるデバッグが可能になっています。

Chrome DevToolsによるデバッグ実行の例
Chrome DevToolsによるデバッグ実行の例

従来の Playground でも debugger ステートメントを用いてブレークポイントを設定することでデバッグをすることが可能でしたが、Playground v2 ではより直感的にデバッグ操作が行えます。

Babylon.js Playground の保存の仕組み

Babylon.js Playground v2 では、保存機能も複数ファイル対応に伴い更新されています。
保存機能は大きく分けて、クラウド保存とローカル保存の2つの方法があります。

Babylon.js Playground の保存機能（ローカル保存の例）
Babylon.js Playground の保存機能（ローカル保存の例）

クラウド保存は従来の Playground と同様に、Babylon.js の Snippet サーバーにコードを保存します。
ローカル保存する場合、playground.json というファイル形式で保存されます。このファイルには、複数ファイルが1つの JSON ファイルとして格納されています。

Babylon.js Playground の保存の仕組み
Babylon.js Playground の保存の仕組み

以下は、playground.json の構造の概要です。

playground.json の3重JSON構造
playground.json の3重JSON構造

コラム：Babylon.js Snippet サーバーとは？

Babylon.js Snippet サーバーは、Babylon.js Playground で作成したコードスニペットをオンラインで保存・共有するためのサービスです。ユーザーはコードをサーバーにアップロードし、生成されたURLを他のユーザーと共有できます。これにより、簡単にコードのデモやサンプルを共有できるようになります。

Babylon.js Playground Code Splitter

下記は Babylon.js Playground の従来のコードを複数ファイルに分割するための、簡易的なファイル分割ツールです。
Claude をご利用の場合は下記の要領でプロジェクトを作成ください。

Babylon.js Playground Code Splitterのプロジェクト設定例
あなたはBabylon.js Playgroundのコード分割・変換専門ツールです。

## 役割
ユーザーから提供された単一ファイルのBabylon.jsコードを、機能ごとに分割し、playground.json形式に変換します。

## 処理フロー
1. コードを受け取り、構造を分析
2. 機能ごとにファイルを分割（constants.js, index.js, その他）
3. Pythonスクリプトでplayground.jsonを生成
4. 検証スクリプトで構造を確認
5. ユーザーにファイル構成と結果を報告

## 重要な原則
- **必ずPythonスクリプトで生成** - json.dumps()を3段階で使用
- **適度な粒度** - 1ファイル50-300行程度
- **明確な命名** - 機能が分かるファイル名
- **検証を実施** - 生成後に構造を確認


詳細は project_custom_instructions.md を参照してください。
ファイルの構造は playground_json_structure.md を参照してください。


## 使い方

Projectを作成後、ユーザーは以下のように依頼するだけ：

このBabylon.jsコードを機能分割してplayground.jsonに変換してください。

[コードを貼り付け]

project_custom_instructions.md と playground_json_structure.md はページ数の関係で省略しますが、下記URLから参照可能です。

Babylon.js Playground Code Splitter使用例
Babylon.js Playground Code Splitter使用例

Babylon.js Playground Code Splitter実行結果
Babylon.js Playground Code Splitter実行結果

playground.json読込結果
playground.json読込結果

おわりに

簡単ですが Babylon.js Playground v2 の概要について説明しました。Playground v2 は、複数ファイル管理、外部ライブラリのインポート、ES モジュール形式での実行とデバッグなど、多くの新機能を備えています。これにより、Babylon.js を使った 3D シーンの開発がより効率的かつ効果的になります。ぜひ試してみてください。

  1. https://forum.babylonjs.com/t/babylonjs-playground-multiple-files-with-tabs-esm-npm-imports/60446 ↩

  2. https://www.youtube.com/watch?v=9dVvCMuXwmo ↩

  3. https://doc.babylonjs.com/communityExtensions/clonerSystem/radialCloner/ ↩

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?