带遮挡效果的轮廓线(描边)在3D实时渲染中的一种实现

3D设计应用或游戏中常常需要准确的标识选中效果，轮廓线(描边)就是其中一种常用的选中态视觉表现效果。例如下图:

如上图所示，红色的轮廓线(描边)能让使用者更清晰的知道是选中了这个人体模型。但是这个选中效果存在一个缺点：模型的遮挡关系被忽略了，容易造成用户的误判。

如何在轮廓线上呈现遮挡关系呢？先看下图:

可以看得出来，上图中人体模型被遮部分的轮廓线颜色更淡一些(透明度更大)，这样的效果有助于体现遮挡关系。

Demo(资源不少，可能加载会慢):Vox APP

这种轮廓线效果使用 post processing (后处理)的方式实现, 机制和模糊类似，具体实现步骤接下来详细说明(在OpenGL规范下实现)。

第一步: 设置好绘制 选中可渲染对象 的 material(作为当前渲染过程的全局material)。此material着色器关键代码:

// 顶点着色器关键代码
vec4 wpos = u_objMat * vec4(a_vs, 1.0);
gl_Position = u_projMat * u_viewMat * wpos;

// 片段着色器关键代码, u_fillColor 设置为RGBA(1.0,0.0,0.0,0.0)
FragColor0 = u_fillColor;

第二步: 初始化FBO(Frame Buffer Object)。

第三步: 在各式为RGBA的RTT上绘制 选中可渲染对象(全部使用上述 material)。

第四步: 当前渲染状态 color mask 全部设置为 false, 当前FBO深度值重新设置为1.0。选中可渲染对象 设置为不可渲染。

第五步: 渲染和选中渲染对象可能相关(有视觉遮挡关系)的所有可渲染对象(仍然使用上述material)。

第六步: 当前渲染状态 color mask 为: 只有 GREEN 通道 为 true， 其他三个通道全部为false。选中可渲染对象 重新设置为可渲染。u_fillColor 的值设置为(0.0,1.0,0.0,0.0)，也就是只绘制绿色到RTT。绘制 选中可渲染对象。

第六步: 恢复正常渲染状态(例如 color mask 全部设置为 true, 解除全局material使用状态等等)。

第七步: 利用前面步骤产生的纹理数据(RTT), 使用如下shader代码生成轮廓线(可以是整个画布大小也可以是四分之一画布大小), 绘制一个平铺于画布(viewport)区域的平面, 使用alpha混合在已经绘制好的3D渲染画面上。shader关键代码如下:

const float factor = 1.0 / 9.0;
const float floatReciprocalGamma = (1.0 / 2.2);
void main() {
    
    vec4 param = u_params[0];
    // param.xy: 纹理的实际宽高像素值
    // param.z: 强度值，可以取值1.3;
    // param.w: 像素值，可以取值为2.0, 这个值控制轮廓线的粗细
    // u_params[1]: (r,g,b,a) 颜色值
    // u_params[2].x: 被遮挡的轮廓线的透明控制系数
    // 为何用数组，是为了减少和GPU之间的通讯次数, 提升性能
    vec2 dv = param.ww / param.xy;
    vec4 srcColor = VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv );
    vec2 fc = srcColor.xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv + dv ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv - dv ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv + vec2(dv.x ,-dv.y) ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv + vec2(-dv.x ,dv.y) ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv + vec2(dv.x ,0) ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv + vec2(0 ,dv.y) ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv - vec2(dv.x ,0) ).xy;
    fc.xy += VOX_Texture2D( VOX_DIFFUSE_MAP, v_uv - vec2(0 ,dv.y) ).xy;
    fc.xy *= factor;
    
    float dis = abs(fc.x - srcColor.x);

    float fk = step(max(fc.y, srcColor.y), 0.0001);
    float fa = u_params[2].x;
    fa = (1.0 - fk) * (1.0 - fa) + fa;

    dis *= param.z;
    dis = pow(dis * dis * dis, floatReciprocalGamma);

    param = u_params[1];
    param.w *= dis * fa;
    FragColor0 = param;
}

至此，主要步骤结束。前六步的实例代码如下(由于每个人的渲染器实现不一样，这里供参考交流):

// step 1:
m_preMaterial.setRGB3f(1.0, 0.0, 0.0);
m_fboIns.setGlobalMaterial(m_preMaterial, false, true);
// step 2:
m_fboIns.runBegin();
m_fboIns.drawEntity(m_target);
// step 3:
m_fboIns.lockColorMask(RendererState.COLOR_MASK_ALL_FALSE);
m_fboIns.clearDepth(1.0);
m_target.setVisible(false);
// step 4:
m_fboIns.run(false, false, false);
// step 5:
m_fboIns.lockColorMask(RendererState.COLOR_MASK_GREEN_TRUE);
m_target.setVisible(true);
m_preMaterial.setRGB3f(0.0, 1.0, 0.0);
m_fboIns.updateGlobalMaterialUniform();
m_fboIns.drawEntity(m_target);
// step 6:
m_fboIns.runEnd();
m_fboIns.unlockRenderColorMask();
m_fboIns.unlockMaterial();