«屈折マッピング 最新 Xcode の Project Template»

床井研究室

※このブログは遅くとも 2027 年 3 月に管理者の定年退職により閉鎖します (移転先は管理者本人共々模索中)

■ 2008年12月21日 [OpenGL][GLSL] 分光現象

2013年03月10日 20:23更新

PIXAR の映画

WALL·E 見てきました.私が今まで見てきた中で,一番きれいな CG を見せてくれた映画ではないかと思います(リアルだとか色彩がどうとかという話ではなく,「CG 的に」きれいだと思いました).ゴミだらけでしたけど.いやそれにしても,あんなに大量のゴミをよく描いたなと思います.それと WALL·E とても可愛いかったです.Mac ユーザは特にそう思うんじゃないでしょうか(私はそのシーンで吹きました).

分光現象

前回のサンプルでは,環境のテクスチャが暗くて映り込みが見えにくかったので,テクスチャを作り直しました(マウスの左ボタンでオブジェクト,右ボタンで背景を回転できるようになっています).

外側の箱のテクスチャの境界が目立たないように工夫して作ったつもりなんですが,やっぱり境界が見えますね.どうしてなのかなぁ.

屈折マッピング

屈折マッピングは視線を屈折させてテクスチャをサンプリングするだけの処理ですが,これで簡単にガラスのような質感を表現できます.しかし,屈折率は波長の関数なので(プリズムに当てた白色光が七色に分かれるのはこのため),屈折光には色が付く(というか,色ずれが生じる)場合があります.これを分光現象とかフリンジ (fringe) とか色収差とか呼んでいます.

オレンジブックでは,これを非常に簡単に実現する方法が紹介されています.ここではこの方法について解説したいと思います(解説するまでもない気がしますが).

この方法では,屈折方向を光の3原色 RGB の3つの成分のそれぞれについて求めます.このサンプルのバーテックスシェーダプログラム refract.vert を,以下のように変更します.

// refract.vert
 
varying vec3 r;   // 視線の反射ベクトル
varying vec3 s_r; // 視線の赤方向の屈折ベクトル
varying vec3 s_g; // 視線の緑方向の屈折ベクトル
varying vec3 s_b; // 視線の青方向の屈折ベクトル
varying float t;  // 境界面での反射率

したがって屈折率の比も,RGB のそれぞれについて指定しておきます.もともとの屈折率の比は eta = 0.67 でしたから,これを緑の屈折率の比に使い,それより屈折率が低い赤の屈折率の比は多少高めに,屈折率が高い青の屈折率の比は多少低めに設定します.テキトーですね.

const float eta_r = 0.69;  // 赤の屈折率の比
const float eta_g = 0.67;  // 緑の屈折率の比
const float eta_b = 0.65;  // 青の屈折率の比
const float f = (1.0 - eta_g) * (1.0 - eta_g) / ((1.0 + eta_g) * (1.0 + eta_g));

そして,それぞれの屈折率の比を用いて,屈折方向のベクトルを求めます.

void main(void)
{
  vec4 p = gl_ModelViewMatrix * gl_Vertex;  // 頂点位置
  vec3 v = normalize(p.xyz / p.w);          // 視線ベクトル
  vec3 n = gl_NormalMatrix * gl_Normal;     // 法線ベクトル
  r = vec3(gl_TextureMatrix[0] * vec4(reflect(v, n), 1.0));
  s_r = vec3(gl_TextureMatrix[0] * vec4(refract(v, n, eta_r), 1.0));
  s_g = vec3(gl_TextureMatrix[0] * vec4(refract(v, n, eta_g), 1.0));
  s_b = vec3(gl_TextureMatrix[0] * vec4(refract(v, n, eta_b), 1.0));
  t = f + (1.0 - f) * pow(1.0 - dot(-v, n), 5.0);
  gl_Position = ftransform();
}

フラグメントシェーダプログラム refract.frag では,バーテックスシェーダプログラムで求めた3つの屈折方向のベクトルを使ってテクスチャをサンプリングし,それぞれ赤成分,緑成分,青成分だけを取り出します.それらをひとつにまとめてから映り込みの色と合成し,フラグメントの色に設定します.

// refract.frag
 
uniform samplerCube cubemap;
 
varying vec3 r;   // 視線の反射ベクトル
varying vec3 s_r; // 視線の赤方向の屈折ベクトル
varying vec3 s_g; // 視線の緑方向の屈折ベクトル
varying vec3 s_b; // 視線の青方向の屈折ベクトル
varying float t;  // 境界面での反射率
 
void main(void)
{
  vec4 c;
  
  c.r = textureCube(cubemap, s_r).r;
  c.g = textureCube(cubemap, s_g).g;
  c.b = textureCube(cubemap, s_b).b;
  c.a = 1.0;
  
  gl_FragColor = mix(c, textureCube(cubemap, r), t);
}

これだけで,こういう結果が得られます.

分光現象を組み込んだ屈折マッピング

分光現象を表現するには,厳密には RGB の3つの成分だけでなく,光の周波数(色)分布の変化(偏り)を元に,再現される色を決定する必要があります.しかし,RGB 成分だけで計算しても,それなりにそれらしく見えます.第一,反射マッピングや屈折マッピング自体,とても大胆な近似を行っている(キューブマッピングでは映り込む背景が無限の彼方にあるとか,屈折マッピングでは裏側の境界面による屈折を考慮してないとか)ので,分光現象についてだけ厳密にやっても意味がないでしょう.所詮,CG なんてものは近似のテクニックの塊ですから.

近似するということ

先週のコンピュータグラフィックスの授業でスムーズシェーディングについて解説した時に,「CG ってのは現象をどうモデル化するかとか,そしてそれをどう近似するかってあたりにいろいろ頭を使うところがある」というような話をしました(つもりだけど伝わってないかも).このあたりのセンスは,CG エンジニアにとって必須のものだと感じます.

私にとって「きれいな CG」というのは,例えば大域照明を使えばリアルな絵になるという話ではなくて,ゴミであれ何であれ,表現したいものを描くために対象をどういう風にモデル化するかを突き詰めて考えている,ということなんだと思います.映像の制作者は,見る者に対してどういう印象を与えるかとか,どういう感情を湧き起こすかということを考えて絵作りをします.WALL·E は,前半ほとんどセリフなしで話が進んでいきますが,それでも強く内容に引き込まれていきます.それはその「絵」にものすごくたくさんのものが詰め込まれているからなんだと思います.CG エンジニアは,そういう絵作りの理想をかなえるために,対象を的確にモデル化し,それを効果的に近似し再現する方法を見つけて,具体的に形にしていく力を持っていなければなりません.

WALL·E を見て,昔,CG を作りたいと思っていた頃の,自分の気持ちを懐かしく思い出しました.

コメント(1) [コメントを投稿する]
とこ 2013年03月10日 20:23

テクスチャ用の画像ファイルとして TGA フォーマットを使うようにした.


編集 «屈折マッピング 最新 Xcode の Project Template»