3DCGを扱うフレームワークには、見た目の描画を綺麗にする方法がたくさんあります。その中にPost Processというものがあります。
今回は、Babylon.jsでPost Processをかける方法と、自分で作った3DCGモデルに対してかけてみた結果をお見せします。
1. Post Processとは？
Post Processとは、カメラから見える描画をきれいにすることを言います。Babylon.js特有ではなくUnityやUnreal Engine、他のエンジンでも存在する機能です。
■Unityに関する記事での説明例
ポストプロセスは英語で「後の(ポスト) + 処理(プロセス)」と訳せるように、カメラでオブジェクトをレンダリングした後にかける処理のことを指します。
引用元：【Unity】Post Processing(ポストプロセス) を使って画面演出をリッチにする | 夜中にUnity
PostProcessingとは画面の見た目をより現実感のあるビジュアルに変化させてくれる機能です。
引用元：PostProcessingを使ってワールドをより魅力的にする - Cluster Creators Guide
■Unreal Engineに関する記事での説明例
Unreal Engine は、アーティストやデザイナーは、全体的な見た目やシーンの雰囲気の細かいチューニングを可能にするポストプロセス エフェクトが提供されています。
ブルーム (明るいオブジェクトに対する HDR ブルーム エフェクト)、アンビエントオクルージョン、トーンマッピングなどが、エレメントやエフェクトの例です。
引用元：ポストプロセス エフェクト | Unreal Engine ドキュメント
基本的に「プロセス後に適用するもの」を指します。つまりレンダリングプロセスの最終段階で追加でエフェクトのレイヤーを適用することとなります。
これによって、ゲーム等に対して映画のようなセピア調の効果をかけたり、ホラー映画のようなノイズを走らせることが可能となります。 有名なポストプロセスの例としてはブルームや被写界深度(DOF)などがあります。
UE4ではほぼすべてのポストプロセスがデフォルトで有効になっています。
【UE4】ぱっと見でわかるポストプロセスの使い方一覧表 - Qiita
Babylon.jsの場合、このように紹介されています。
Postprocesses allow you to create 2D effects on top of your scene. A postprocess is linked to a camera and can be part of a chain of postprocesses where each postprocess uses the result of the previous one as input for its own processing.
引用元：Post Processes | Babylon.js Documentation
2. Babylon.jsでのPost Process
公式ドキュメントのPost Processのchapterには色々なことが書いてあります。Post Processをかけるとどんなふうに見えるのか、ということを最も簡単に確認するには、このsectionに記載のPlayground (サンプルコードを試せるサイト) をみるのがよいです。
紹介されているPlayground
https://playground.babylonjs.com/#Y3C0HQ#146
ここでは、以下のPost Process効果をチェックボックスで有効/無効にしたり、スライダーを使ってパラメータをリアルタイムに調整することができます。 細かく書くともう少しありますが、ドキュメントに一覧にされている主なエフェクトについて説明を入れました。
| 名称 | 説明 |
|---|---|
| Antialiasing (MSAA and FXAA) | アンチエイリアス。有効にするとメッシュの境目のギザギザをなくすことができる |
| Bloom | 明るい部分から光を拡散させる。値を大きくすると明るい部分からの光拡散が大きくなる |
| Chromatic Aberration | 赤と緑の3D立体視のような映像表現になる |
| Depth of field | ぼやけ (blur) や焦点距離を調整できる |
| Color curves | 全体的な色味が変わる (詳細不明。わかったら追記します) |
| Color grading | 値を大きくすると、grain (粒) が表示されるようになる |
| Contrast | カメラの明るさ設定 |
| Exposure | カメラの露出設定。値を大きくするほど明るくなる |
| Tone mapping | カメラ映像をよりリアルにするための方法 (詳細不明。わかったら追記します) |
| Vignette effect | ビネットエフェクト。画像の中心に注意をひくために、外側の明るさや彩度を減らす |
3. Babylon.jsでPost Processをつける方法
基本はシーンの中にDefaultRenderingPipelineを入れることです。cameraについては、複数のカメラを使っていてそれぞれのカメラに適用させたいときは、配列の中で定義します。
// Create default pipeline
var defaultPipeline = new BABYLON.DefaultRenderingPipeline("default", true, scene, [camera]);
あとは、先ほど紹介した個別のパラメータを設定していきます。今回だと、defaultPipelineのAccessorsに具体的な値を設定します。たとえば、カメラ露出を調整したい場合は、
defaultPipeline.imageProcessing.exposure = 3.2;
のように書きます。
先ほど紹介したPlaygroundではGUIで調整するようになっていました。実際に自分の作品で処理をかけたいときはGUIがない方がよいので、GUIを使わずに表示させたコードを参考のために記載しました。主なコードは先ほどのPlaygroundに記載のものを使っています。
ここで使っているglbモデルは以前紹介した記事で使ったモデルです。
上に記載したコードのようなパラメータ設定をすることで、このようになりました。
動画にするとこんな感じです。
4. おまけ
先ほどのコードではskyboxを入れています。
var hdrTexture = new BABYLON.CubeTexture("/textures/environment.dds", scene);
scene.createDefaultSkybox(hdrTexture, false, 100);
ここで使っているdds形式のテクスチャにより、ちょっときれいな背景の演出をしています。この辺りはイワケンさんが翻訳＋α記事を書かれているので、こちらをご参考ください。
Babylon.jsでPBR向けHDR環境の扱い方をご紹介 【ドキュメント和訳+α】
5. おわりに
今回、試すことを優先にしたのでPost Processの原理まではきちんと読み込んでいませんでした。原理を勉強してパラメータ設定を調整すると、もう少し綺麗に、あるいは汎用的に使えそうな気がするので、また気が向いた時に調べてみたいと思います。
