带遮挡效果的轮廓线(描边)在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();

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

3D实时渲染中的BSP树和多边形剔除
原文<BinarySpace Partioning Trees and Polygon Removal in Real Time 3D Rendering> 第一章介绍背景二叉空间分 ...
3D轮廓渲染中的几种轮廓边
从左到右分别是: silhouette, contour, 和 suggestive contour边. 细节请见此文章:https://zhuanlan.zhihu.com/p/398383275
《安富莱嵌入式周报》第298期：迷你火星探测器，开源单片机3D实时渲染库, 开源USB工业相机，VS2022开始支持MarkDown，PC-lint 2.0发布
往期周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - P ...
Live Home 3D Pro - 用于公寓和房屋的室内设计，支持 3D 实时渲染
Live Home 3D Pro - 用于公寓和房屋的室内设计,支持 3D 实时渲染 Live Home 3D Pro是一个直观的应用程序,用于公寓和房屋的室内设计,以及几乎任何复杂的景观.专业版提供 ...
【原】实时渲染中常用的几种Rendering Path
[原]实时渲染中常用的几种Rendering Path 本文转载请注明出处 -- polobymulberry-博客园本文为我的图形学大作业的论文部分,介绍了一些Rendering Path,比较简 ...
【实时渲染】实时渲染中的光与颜色
文章目录光是一种电磁波描述光的物理量光谱功率分布光度函数光度测量三色视觉理论色光混合与颜色空间用RGB色渲染 Gamma空间和线性空间 HDR 读书笔记,如有错漏,还望指正! 光是一种 ...
渲染路径-实时渲染中常用的几种Rendering Path
http://www.cnblogs.com/polobymulberry/p/5126892.html?utm_source=tuicool&utm_medium=referral 回到顶部 ...
【实时渲染】RTR4 简要问答版
第二章图形渲染管线 (1)渲染管线可分为哪4个阶段? 第一个是应用程序阶段,第二个是几何处理阶段,第三个是光栅化阶段,第四个是着色阶段(Pixel Processing). (2)渲染管线分为几个阶 ...
【实时渲染】3DCAT实时渲染云助力游戏上云！
随着社会的发展技术的提升,云计算技术得到越来越多人的重视.同时随着5G的落地,游戏产业也迎来了新的革命.一些游戏厂商为了寻求新的发展机会,推出基于云计算的游戏"云游戏",将游戏平台 ...

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

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

最新文章

热门文章