Node Material Editor

Babylon.js Node Material Editor はブラウザだけでノードベースの Material を作成することのできるツールです。

下記は Material モードの例です。

https://scrapbox.io/files/6828c1b62963a4a500baec70.png

https://scrapbox.io/files/6828c4072031b427fc640263.png

頂点シェーダー部分

Vector3（mesh.position）ノード

役割：3Dモデルの頂点位置データを提供する入力ノード

World (Matrix)ノード

役割：ワールド変換行列を提供する入力ノード

データ：4×4行列（位置、回転、スケール情報を含む）

WorldPosノード

役割：ローカル座標をワールド座標に変換する処理ノード

入力：

vector：Vector3ノードからの頂点位置

transform：World行列からの変換情報

出力：

output：変換されたワールド座標

xyz：個別のベクトル成分

設定：Transform as direction（無効）

ViewProjection (Matrix)ノード

役割：カメラのビューとプロジェクション情報を提供する入力ノード

データ：視点変換とプロジェクション変換の複合行列

WorldPos * ViewProjノード

役割：ワールド座標をカメラ視点のクリップ空間に変換する処理ノード

入力：

vector：WorldPosノードからのワールド座標

transform：ViewProjection行列

出力：

output：クリップ空間での座標

xyz：個別の成分

VertexOutputノード

役割：頂点シェーダーの最終出力を定義する出力ノード

入力：変換された頂点位置ベクトル

フラグメントシェーダー部分

color (Color4)ノード

役割：オブジェクトの色情報を定義する入力ノード

データ：RGBA色値（デフォルトは白/ライトグレー）

FragmentOutputノード

役割：フラグメントシェーダーの最終出力を定義する出力ノード

設定：

Use logarithmic depth：対数深度バッファ（無効）

No color space：色空間変換制御

入力：

rgba：Color4ノードからの色情報（接続済み）

rgb：RGB値のみ（未接続）

a/glow：アルファ値と発光効果（未接続）

https://scrapbox.io/files/68292c5de0111a74d18d901d.png

https://scrapbox.io/files/693e0cb33f86b628151cc860.svg

MCP Server として使う方法

1. 準備（初回のみ）

code:PowerShell

cd C:\github\Babylon.js

npm install

2. MCP クライアントへの登録

方法A（推奨）: npm 公開版 @babylonjs/mcp-servers を npx で起動

claude_desktop_config.json の例:

code:json

"mcpServers": {

"babylonjs-nme": {

"command": "C:\\Program Files\\nodejs\\npx.cmd",

}

}

方法B: ローカルビルド版（サーバー改造・未リリース変更を試す場合のみ）

code:PowerShell

npm run build -w @tools/nme-mcp-server

code:json

"mcpServers": {

"babylonjs-nme": {

"command": "node",

}

}

登録後、クライアントを再起動。

3. エディタの起動（毎回）

ターミナルを2つ使う:

code:PowerShell

# ターミナル1: babylonServer（初回はビルドに時間がかかる）

cd C:\github\Babylon.js

npm start

# ターミナル2: Node Material Editor（パッケージ名は @tools/node-editor）

cd C:\github\Babylon.js

npm run serve -w @tools/node-editor

Vite が表示する URL をブラウザで開く。

4. MCP セッションへの接続

AI 側で create_material（または start_session）を実行すると、セッション URL が返る:

エディタの 「Connect to MCP Session」パネル（Properties 内）に貼り付けて接続

以後、AI がブロックを追加・接続するとエディタにリアルタイム反映される

5. 基本ワークフロー

code:text

create_material → add_block → connect_blocks

→ validate_material → export_material_json

ツールのURL

使い方

サンプルへのリンク集