DOF に AO さらには FXAA などなど！ とにかくてんこ盛り過ぎる内容に驚愕の WebGL 原子モデルビューア
マジスゲエと20回はつぶやきました……
今回ご紹介するのは、原子の構造を WebGL を使ってレンダリングするビューアです。
しかし、ただの幾何学模様を描画する WebGL プロジェクトと思うなかれ。このプロジェクトに組み込まれている数多の技術は、wgld.org でも紹介していないようなハイレベルなものばかりになっています。
処理の種類によっては多少負荷が高くなる場合がありますが、しかしそれを差し引いてもこれはすごすぎる。
完全に個人的な単なる感想ですが、本当に驚愕しました。
ハイレベルな技術が詰め込まれた素晴らしい一作
3DCG にあまり詳しくない方だと、本稿のタイトルにある DOF や AO といった略語の意味がちょっとわかりにくいと思いますので、そのあたりも併せて解説しながら紹介していこうと思います。
まずページを開きロードが完了すると、いくつかのパラメータ調整用のインターフェースが表示されている状態になると思います。
上に並んでいるボタン上のメニューから「Structure」を選択すると、プリセットを読み込むことができるモードに切り替えられるはずです。まずはここで、いろいろなモデルを表示させてみるといいでしょう。
原子の個数や色など、見た目がかなり違うものが数種類用意されています。
そして、ボタンメニューのなかの「Render」となっているところ。これが最初に表示されていたパラメータ調整のインターフェースが並んでいるメニューです。
ここでは本当にいろいろなことができるようになっていて、3DCG 野郎なら興奮必須の楽しい時間が待っています。
まず最初に理解しておきたいのは、今回のデモはよくある WebGL のデモとはちょっと違い、複数パス で一つのシーンを完成させます。どういうことかと言うと、実際にデモを実行してみればわかると思いますが、画面の上部に水色のラインが出るようになっていて、まるで画像をロードしているときのように、この水色のラインがプログレスバー風に左から右に伸びていきます。
このラインが伸びていくひとつひとつのタイミングで、段階的にモデルにエフェクトを追加してシーンを作っています。
パラメータを変化させたり、マウスドラッグでカメラの位置を動かしたりすると、そのたびに複数パスのレンダリングがスタートします。たとえば、以下の画像はまだレンダリングパスがスタートしていない状態です。もともとの原子の色がベタ塗りで表現されているのがわかりますね。
これが、パラメータやカメラの操作が終わったタイミングで、随時複数パスによるレンダリングによって処理されていきます。
画面上部の水色のラインが、画面右端まで到達すればレンダリング完了です。
3DCG の経験が長い方であれば、このレンダリング結果を見ただけで、まず AO が適用されていることがわかると思います。
AO とは、「Ambient Occlusion（アンビエントオクルージョン）」のことを言い、AO は非常にざっくりと説明すると、狭いところにや奥まっているところに暗い陰を入れるようなエフェクトのことを言います。
上の画像 2 枚を比べると、よくわかりますね。原子と原子の距離が近く、閉鎖されている部分になればなるほど、暗い色が着いているのが見て取れます。これが AO、つまりアンビエントオクルージョンです。
デモの中では、この AO の掛かり具合などもパラメータで調整が可能になっていて、違いを目で見て確かめることもできますので、いろいろ調整して遊んでみてください。AO にあまり詳しくない方でも、実際にパラメータを動かして変化を見てみれば、どういうことかわかるはずです。
さて、その他のパラメータ調整では、たとえば以下のように原子の結合部分を表示することもできます。一気に雰囲気が変化しますね。
さらには、DOF にも対応していて、これがなかなかすごい。
DOF とは「Depth of field（被写界深度）」のことで、いわゆるカメラのピンボケのような効果を指します。
以下の画像をご覧いただければ、見事に手前と奥がぼやけているのがわかると思います。
もちろん、この DOF に関してもパラメータを調整できるようになっていますが、注意点として DOF は普通、どうやって実装しても大抵はすごく重くなります。
今回もこれは例外ではなく、調整できるパラメータ類の中でもダントツに重いので、その点は注意してください。
しかし、DOF を適用すると一気に本物っぽくなるというか、リアリティが上がりますよね。
さらに、以下の画像のようにアウトラインを表示することも可能です。
このアウトラインは、WebGL でまず深度だけを抽出した描画結果を用意し、その深度値の差分を元にラインを生成、生成したラインを最終シーンに合成する、という手法で描画しているみたいです。
深度差分エッジ検出を行うことで、距離が大きく離れているところにはクッキリしたエッジを出し、逆にそれほど距離が離れていない箇所ではうっすらと微妙なラインを出す、というようなことが可能になります。
独特の柔らかなラインの質感は、深度による差分からエッジを検出しているからこそだったんですね。
これらの高度なテクニックが満載されたプロジェクトは、ありがたいことに Github でシェーダのコードなどもすべて含めて公開されています。ありがたや！
3DCG の実装を行う側にも、単純に見るのが好きという方向けにも、今回のデモはかなり質の高い優れた一作だと断言できます。シェーダのソースも Github で見ることができますし、本当に参考になりますね。
ぜひ、チェックしてみてください。
