（この記事は Babylon.js の Advent Calendar 2025 の記事にする予定です）
はじめに
この記事は、Babylon.js公式のドキュメント・デモを見ていて個人的に気になった、「Post Processes」の事例の 1つに関する記事です。
Babylon.js公式の「Post Processes」に関するドキュメント
Babylon.js公式の「Post Processes」に関するドキュメントは以下です。
●How To Use Post Processes | Babylon.js Documentation
https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/usePostProcesses
今回とりあげる公式デモ
そして、今回とりあげる公式デモは以下です。
●Babylon.js Playground
https://playground.babylonjs.com/#17VHYI#15
公式デモを見ていく
公式デモを見ていきます。
公式デモのコード
var createScene = function () {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);
var material = new BABYLON.StandardMaterial("kosh", scene);
var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 32, 5, scene);
var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(-17.6, 18.8, -49.9), scene);
camera.setPosition(new BABYLON.Vector3(-15, 3, 0));
camera.attachControl(canvas, true);
// Sphere1 material
material.refractionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
material.diffuseColor = new BABYLON.Color3(0, 0, 0);
material.invertRefractionY = false;
material.indexOfRefraction = 0.98;
material.specularPower = 128;
sphere1.material = material;
material.refractionFresnelParameters = new BABYLON.FresnelParameters();
material.refractionFresnelParameters.power = 2;
material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
material.reflectionFresnelParameters.power = 2;
material.reflectionFresnelParameters.leftColor = BABYLON.Color3.Black();
material.reflectionFresnelParameters.rightColor = BABYLON.Color3.White();
// Skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
var colorGrading = new BABYLON.ColorGradingTexture("textures/LateSunset.3dl", scene);
scene.imageProcessingConfiguration.colorGradingEnabled = true;
scene.imageProcessingConfiguration.colorGradingTexture = colorGrading;
var i = 0;
engine.runRenderLoop(function () {
colorGrading.level = Math.sin(i++ / 120) * 0.5 + 0.5;
});
return scene;
}
export default createScene
コードの詳細について
コードの内容を見ていきます。
冒頭の部分
最初の行では、新しい 3Dシーンオブジェクトを生成し、その次の行でカメラをセットしています。
カメラは「ArcRotateCamera()」となっていて、対象物の周りを回転するカメラです。その他、冒頭の部分では、ポイントライト（点光源）・球体メッシュ・マテリアルの設定などを行っているようです。
「Sphere1 material」の部分
次にコメントで「Sphere1 material」と書かれた部分を見てみます。
以下はその前半の部分です。
material.refractionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
material.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
material.diffuseColor = new BABYLON.Color3(0, 0, 0);
material.invertRefractionY = false;
material.indexOfRefraction = 0.98;
material.specularPower = 128;
sphere1.material = material;
最初の 2行はぱっと見で同じ内容に見えたのですが、よく見ると「refractionTexture（屈折テクスチャ）」「reflectionTexture（反射テクスチャ）」という、屈折・反射をそれぞれ扱うテクスチャの名前になっているようです。
その後の部分では、拡散色を黒にして素材自体の色を消す処理（透明なガラスのような表現になる処理）や、屈折・反射に関する設定を行っていました。設定内容の影響を把握するために、ここで数値が指定されている「indexOfRefraction」「specularPower」の値を変化させて、見た目への影響を確認してみると良いと思います。
以下は先ほどの続きで、後半の部分です。
material.refractionFresnelParameters = new BABYLON.FresnelParameters();
material.refractionFresnelParameters.power = 2;
material.reflectionFresnelParameters = new BABYLON.FresnelParameters();
material.reflectionFresnelParameters.power = 2;
material.reflectionFresnelParameters.leftColor = BABYLON.Color3.Black();
material.reflectionFresnelParameters.rightColor = BABYLON.Color3.White();
これは「フレネル効果」に関する処理を行っているようです。フレネル効果は反射・屈折に関わる効果で、例えば「水面を真上から見ると透明に見えるが、斜めから見ると反射の影響が強くなる」というような、見る角度によって反射・屈折が変わる現象のことのようです。
数値を指定している「refractionFresnelParameters.power」「reflectionFresnelParameters.power」は、その数値を変化させてみて描画にどのように影響するかを確認してみると良さそうです。
「Skybox」の部分
コメントで「Skybox」と書かれた部分も見てみます。
// Skybox
var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
skyboxMaterial.backFaceCulling = false;
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay", scene);
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
skyboxMaterial.disableLighting = true;
skybox.material = skyboxMaterial;
最初の行では巨大なスカイボックスを作成し、次の行でマテリアルを設定しています。
その後は、「TropicalSunnyDay」テクスチャを設定していて、それを球体・カメラがある内側から見えるようにする設定も行っています。その他、ライティングの影響を受けない設定などが行われていました。
残りの部分
あとは最後の部分です（※ return scene の手前まで）。
var colorGrading = new BABYLON.ColorGradingTexture("textures/LateSunset.3dl", scene);
scene.imageProcessingConfiguration.colorGradingEnabled = true;
scene.imageProcessingConfiguration.colorGradingTexture = colorGrading;
var i = 0;
engine.runRenderLoop(function () {
colorGrading.level = Math.sin(i++ / 120) * 0.5 + 0.5;
});
このコードは色の補正をするカラーグレーディングに関するもので、それを時間変化させている処理です。個々で指定している「LateSunset」は、全体が夕焼けのような暖色系への変換になるようです。
それに関して、以下のループ処理を行っています。
colorGrading.level = Math.sin(i++ / 120) * 0.5 + 0.5;
行の後ろの部分で「sin() がとる範囲を 0 ～ 1 に変換」しており、i を 120 で除算することでゆっくりとした変化を作っています。先ほどのカラーグレーディングを適用した状態と、適用していない状態の間を、ゆっくりとした周期で行き来するような処理になるようです。
おわりに
このデモを見た時、描画が非常にきれいで処理の内容を把握したいと思ったため、今回の記事に書いた内容を進めました。
今回の内容について、自分が作ったものに活用していければと思います。
余談
今回の内容を見ていて、他に気になったデモがあったのでメモだけしておきます。
具体的には以下のもので、カスタムフラグメントシェーダーを使った「特定の色成分をもとにした二値化」と「解像度を低くする処理」を行ったもののようです。
●Custom postprocess demo | Babylon.js Playground
https://playground.babylonjs.com/#DAC1WM
