Rendering Gooey Materials With Multiple Layers

http://developer.amd.com/media/gpu_assets/Oat-RenderingGooeyMaterials.pdf

 

用一个比较hack比较便宜的方式渲染多层透明material，达到一些比较advanced的效果。

 

pic：

 

如果不说的话真看不出其中的效果，给个对比图就好了，其中两个比较不错：

• parallax depth
• lighting scattering

首先这个文章的方向我觉得很好，属于深入浅出型，作者很清楚

• 类似心脏皮肤这样的材质需要什么feature来达到很好的效果
• 实打实的计算这些feature（lighting scattering一类）的应该做什么，raytracing，PRT。。。
• 怎么用简单的方法来hack出类似的效果

最后看起来一招一式不起眼，其实内力是相当好的。

 

衍生说去，今年的modern warfare2(这个modern很神奇，初中起我就一直记不住是morden还是modern，幸好有自动拼写检查）是面向60fps的游戏，在console上17ms一帧，这简直太惊人了，但是仍旧展示出在30fps游戏中outstanding的画面，不得不佩服他们的优化能力和artist的画面驾驭能力。3D程序员逐渐也有几个方向可以走，高杆数学流（bungie为代表，发的论文也最有深度），高杆底层流（naughty dog为代表，底层巨牛，ps3 spu用满，不是盖得），美术hack流（UE3,就是把normal map用到极致，没有高杆feature，shadow还有很多hack，但是工具好美工牛，最后做出东西就是好看）。

 

最后说来高杆或者复杂的技术，好与不好玩家来评价，玩家又不是什么图形大牛，能hack着让玩家开心就ok，当然hack也是要功力的，像这个文章的深入浅出就是一个好例子。

 

继续论文，

parallax depth要对不同layer做一个不同的parallax depth计算，照成内层对比外层比较靠内的情况，其实position是一样的。

这个可能用之前的blog的岩石上的冰做例子比较合适。

parallax基本做法就是根据tangent space的camera view dir来偏移texcoord，这样如果2层都应用parallax的话，偏移量设成不一样就好。

代码抄上来：

 

// Compute inner layer’s texture coordinate and transmission depth
// vTexCoord: Outer layer’s texture coordinate
// vViewTS: View vector in tangent space
// vNormalTS: Normal in tangent space (sampled normal map)
// fLayerThickness: Distance from outer layer to inner layer
float3 ParallaxOffsetAndDepth ( float2 vTexCoord, float3 vViewTS,
float3 vNormalTS, float fLayerThickness )
{
// Tangent space reflection vector
float3 vReflectionTS = reflect( -vViewTS, vNormalTS );
// Tangent space transmission vector (reflect about surface plane)
float3 vTransTS = float3( vReflectionTS.xy, -vReflectionTS.z );
// Distance along transmission vector to intersect inner layer
float fTransDist = fLayerThickness / abs(vTransTS.z);
// Texel size: Hard coded for 1024x1024 texture size
float2 vTexelSize = float2( 1.0/1024.0, 1.0/1024.0 );
// Inner layer’s texture coordinate due to parallax
float2 vOffset = vTexelSize * fTransDist * vTransTS.xy;
float2 vOffsetTexCoord = vTexCoord + vOffset;
// Return offset texture coordinate in xy and transmission dist in z
return float3( vOffsetTexCoord, fTransDist );
}

 

 

lighting scattering:

真正比较真实的lighting scattering可能还是要PRT算最好。

文章里用的是dynamic lighting map来做，就是先将光照算好，然后blur，然后作为lightmap贴到要应用light scattering的部分。

 

这里比较有意思的就是如何将model光照信息render到model的lightmap上，文中做法是vertexshader输出地时候position是texuv，然后其他的tangent space lighting，camera dir什么的照常输出，然后pixel shader输出的时候就是写到对应的texel上去了。

这个很赞啊。

 

然后是blur 的pass，这里可以blur了之后sample，也可以用一个poison kernel来sample。

poison kernel好处是可以根据需要随意scale，这个比较赞。

贴代码，看poison kernel的数据：

 

// Growable Poisson disc (13 samples)
// tSource: Source texture sampler
// vTexCoord: Texture space location of disc’s center
// fRadius: Radius if kernel (in texel units)
float3 PoissonFilter ( sampler tSource, float2 vTexCoord, float fRadius )
{
// Hard coded texel size: Assumes 1024x1024 source texture
float2 vTexelSize = float2( 1.0/1024.0, 1.0/1024.0 );
// Tap locations for unit disc
float2 vTaps[12] = {float2(-0.326212,-0.40581),float2(-0.840144,-0.07358),
float2(-0.695914,0.457137),float2(-0.203345,0.620716),
float2(0.96234,-0.194983),float2(0.473434,-0.480026),
float2(0.519456,0.767022),float2(0.185461,-0.893124),
float2(0.507431,0.064425),float2(0.89642,0.412458),
float2(-0.32194,-0.932615),float2(-0.791559,-0.59771)};
// Take a sample at the disc’s center
float3 cSampleAccum = tex2D( tSource, vTexCoord );
// Take 12 samples in disc
for ( int nTapIndex = 0; nTapIndex < 12; nTapIndex++ )
{
// Compute new texture coord inside disc
float2 vTapCoord = vTexCoord + vTexelSize * vTaps[nTapIndex] * fRadius;
// Accumulate samples
cSampleAccum += tex2D( tSource, vTapCoord );
}
return cSampleAccum

 

 

最后结论部分，作者一再强调，不要死磕physically correct，基本feature hack出来就ok，玩家看着high就ok。

 

原文链接： http://blog.csdn.net/ccanan/article/details/5125518