見出し画像

日曜プログラム glTFのサンプルビューワーのGLSLメモ

 ってことで、KhronosさんのglTFのサンプルビューワーのGLSLを見ながらシェーダーを実装しなおしたので、そのメモ。

 ちなみに見ているのは旧版のビューワーとのことだけど、フォーマットとしてはどんどん進んでいる模様。

2015年 glTF 1.0 発表。主に WebGL 向けとして誕生。
2017年 glTF 2.0 発表。実行環境に依存する仕様(GLSL)を廃止。PBRマテリアルを採用。
2020年 glTF 2.0 の拡張機能の開発成果として PBR Next「フェーズ1」が発表。

 いろいろなマテリアル仕様が追加になっている模様。こっちはまだRoughnessの効果すらよくわかってないんですけど。

画像1

 ってことで、RougnessとMetalnessの効果について今一度blenderでサンプルを作ってみて比較。Metalnessは鏡面反射の度合い。値が下がると、像が薄くなる。Roughnessは、鏡面反射の乱れ具合なのだから、Roughnessが高くなると、鏡面反射の像がぼやける。ってことでもういいや。

 サンプルビューワーの解説はKhronosさんが書いてくれてるんだけど、自分が忘れそうなのでメモ。

vec3 color = NdotL * u_LightColor * (diffuseContrib + specContrib);
color += getIBLContribution(pbrInputs, n, reflection);

 とりあえずこれ。diffuseとspecularにN・Lかける。そんで、IBLを足す。

 diffuseとspecularに関しましては、

 こちらの記事内に書いてある方法とほぼ同じものを採用しているようでした。

 vec3 diffuseContrib = (1.0 - F) * diffuse(pbrInputs);
 vec3 specContrib = F * G * D / (4.0 * NdotL * NdotV);

 specularについては、Torrance-Sparrow model。出てくるF、G、Dについては、

F: Fresnel反射 は、schlick近似
G: Geometric Occlusion は、Smith Masking Function
D: Microfacet Distribution は、GGX(Trowbridge-Reitz model)

 Fで反射する分が、specular、1-Fがdiffuseとなっている模様。ここまでは計算で出しています。

 IBLについては、さらに3種類のテクスチャを使っています。

vec3 brdf = texture2D(brdfLUT, vec2(pbrInputs.NdotV, 1.0 - pbrInputs.perceptualRoughness)).rgb;
vec3 diffuseLight = texture(DiffuseEnvSampler, getUV(n)).rgb;

vec3 specularLight = texture(SpecularEnvSampler, getUV(reflection), lod).rgb;

vec3 diffuse = diffuseLight * pbrInputs.diffuseColor;
vec3 specular = specularLight * (pbrInputs.specularColor * brdf.x + brdf.y);

return diffuse + specular * 2.0;

 diffuseもマップから引くようになってきていたので、環境マップに使う画像から適当にガウスぼかしして錬成。サンプルだとこれにあたるやつ。

画像3

 次に、鏡面反射用環境マップ。これについては、ミップマップを用意する。サンプルだとコレにあたる。

画像4

 そして、roughnessの値によってLODを設定する。つまり、roughnessが高くなるとボケる、っていうのを実現します。

 cook-torrance BRDFについては、こっちでは計算でなくあらかじめ焼きこんだテクスチャから引いてきている模様。

画像2

 y軸をroughness、x軸にはN・Vを使ってピクセルをとってきます。出てきたピクセルのREDをspecularのscale、GREENをbiosとして使います。

vec3 specular = specularLight * (pbrInputs.specularColor * brdf.x + brdf.y);

 背景&環境マップに使っているのは、よく見る footprint court。いつものHDRI Havenではなく、出所はこちらです。

CC BY NC SA。茶瓶はこちらです。


この記事が気に入ったらサポートをしてみませんか?