この投稿はBabylon.js Advent Calendar 2025の記事です。
今回は、Babylon.js EditorのPost Process機能を使って、見た目を調整する方法を紹介します。
調整前と後でこのように変わります。
調整前
調整後
使用した環境
Mac OS Tahoe 26.1
Babylon.js Editor v5.2.4
1. Post Processとは
Unity 公式ドキュメントの記述がわかりやすかったので引用します。
ポストプロセスは、レンダリングされた既存のシーンに基づくレンダリングエフェクトです。これは、通常、シーンビューに依存し、最終レンダリングを行う前に、レンダリングされたシーンの上にレイヤー化されます。この機能の利点は、既存のコンテンツに変更を加えることなく、シーンの見た目を劇的に向上できるということです。
3Dモデルを並べた後で、見た目をきれいにするエフェクトを作ることを言います。
Babylon.js Editorでは、Graph View (UnityでいうHierarchy View) の中に最初から設定されている"Scene"というオブジェクトのInspectorから、Rendering PipeLineをEnabledにすることで、詳細を設定できます。
2. 具体的な設定箇所
ここからは好みもありますが、Rendering Pipelineを有効にして表示された設定を色々と調整することで、好きな風景にします。
今回はSketch Fabから学校の教室の3Dモデルを入手して使いました。
sketchfab.comPost ProcessではLightがあると効果が高まります。そこで、Spot Lightを教室の外側の窓付近に設定しました。
2.1 Spot Lightの光の強さ、色変更、影をつける
Spot LightはIntensityで光の強さを変更できます。今回は100,000,000と相当に大きくしました。
また、色は夕焼けっぽい赤茶色にしています。
さらにShadowという設定項目をNoneからClassicに変更しました。
このように光が当たって影がつくと、すごくそれっぽい雰囲気になります。
2.2 Post ProcessのImage Processingを調整する
これを有効にして調整すると、少し柔らかい感じになります。
今回はこのように調整しました。
- Exposure : 1.39
- Contrast :0.62
2.3 Post ProcessのBloomを調整する
Spot Lightが設置されていると、Bloomによって相当変わります。
こんな感じでWeightやScaleを調整して、良いと思う位置で決定します。
3. おわりに
あまり知られていない機能かもしれませんが、GUIで調整できるのできれいな風景を作るにはとてもよい機能と思います。
