非真实渲染技术（NPR）-1.卡通渲染

转载请注明出处：http://blog.csdn.net/tianhai110

非真实感绘制(Non-photorealistic rendering)

(NPR)是计算机图形学的一类，主要模拟艺术式的绘制风格，也用于发展新绘制风格。和传统的追求真实感的计算机图形学不同，NPR受到油画，素描，技术图纸，和动画卡通的影响。NPR已经以"卡通造影"的形式出现在电影和电子游戏中，它也已出现在设计图纸和试验动画中

（一）卡通渲染

卡通渲染是一种特殊的非真实感绘制技术，它要求帖图由不明显的渐变色块夹杂一些不复杂的纹理组成。它强调粗细线条和简单色块，忽略细节。利用这些很简单很纯粹的线条和色块，就能渲染出设计师所要求的质感很强的卡通效果，从而营造出互动的二维动画世界。

采用该技术的游戏：《网络急速赛车》

卡通绘画中，包含：勾边、卡通光影、边缘光晕、头发高光等技术，如下：

我们下面对勾边和卡通着色（cartoon shading）进行讲解；

Silhouette（轮廓勾边）：

勾边方式有像素勾边和顶点勾边，我们采用了sobel边缘检测算法，其理论基础请参考：

http://blog.csdn.net/tianhai110/archive/2010/06/11/5663756.aspx

实现原理：

1. 把模型渲染到一张纹理图上；

2. 对这张图进行sobel边缘检测，找出边界并把渲染到屏幕空间中。

所以我们需要通过两个Pass渲染，第一个pass把模型渲染到一张纹理中，第二个pass进行边缘检测并输出渲染效果。

第二个pass的vs,ps如下：

VS_OUTPUT vs_main( VS_INPUT In )

{

VS_OUTPUT Out;

// 保证物体的坐标在[-1,1]之间

In.Pos.xy = sign(In.Pos.xy);

// 让物体以屏幕坐标系统渲染；

Out.Pos = float4(In.Pos.xy, 0.0, 1.0);

//对齐纹理坐标

Out.TexCoord.x = 0.5 * (1 + In.Pos.x);

Out.TexCoord.y = 0.5 * (1 - In.Pos.y);

return Out;

}

Pixel Shader 为：

sampler2D rttMap;

const float off = 1.0/512.0;

float4 ps_main( float2 tex:TEXCOORD0) : COLOR0

{

float p00 = tex2D( rttMap, tex + float2(-off, -off)).r;

float p01 = tex2D( rttMap, tex + float2( 0, -off)).r;

float p02 = tex2D( rttMap, tex + float2( off, -off)).r;

float p10 = tex2D( rttMap, tex + float2(-off, 0)).r;

float p12 = tex2D( rttMap, tex + float2( off, 0)).r;

float p20 = tex2D( rttMap, tex + float2(-off, off)).r;

float p21 = tex2D( rttMap, tex + float2( 0, off)).r;

float p22 = tex2D( rttMap, tex + float2( 1, off)).r;

// sobel算子的横纵灰度值

float gx = (p00 + 2*p10 + p20) - (p02 + 2*p12 + p22);

float gy = (p00 + 2*p01 + p02) - (p20 + 2*p21 + p22);

float edgeSqr = gx*gx + gy*gy;

// 阀值0.07

return 1 - ( edgeSqr > 0.07*0.07);

}

这个实例中，渲染状态要改 D3DRS_CULLMODE 为 D3DCULL_NONE; 不然不显示

编程中const float off = 1.0/512.0 写成了 const float off = 1/512;

结果半天都显示不出来，注意1/512 为0；而1.0/512.0 为0.001953125;

卡通着色（Cel-Shading）

为了实现卡通着色，我们需要创建一个带强度级别的灰度纹理，来达到卡通绘画中的阴影过度效果。

然后在顶点着色器中，我们执行基本的散射运算，通过光向量L与法向量N的点积，以确定顶点接受到了多少光线：

S= L.N

如果s<0;表明光线和顶点法线间的夹角大于90度，顶点接受不到任何光线，所以如果s<0,则让s=0; 以便让s位于[0,1]之间，方便在纹理坐标空间取值。

像素处理器中，我们从亮度纹理中取值，由于亮度纹理只有3中颜色，所以着色的结果是一种颜色到另一种颜色的生硬过度，这正是我们所期望的。

VS代码片段：

VS_OUTPUT vs_main( VS_INPUT Input )

{

VS_OUTPUT Output;

Output.Position = mul( Input.Position, matViewProjection );

float3 posW = mul( matView, Input.Position );

float3 normalW = mul( Input.Normal, matView);

float diffuse = max(0, dot(vecLightDir, normalW));

Output.Texcoord.x = diffuse;

Output.Texcoord.y = 0.0f;

return( Output );

}

PS代码：

sampler cartoonMap;

float4 ps_main( float2 tex:TEXCOORD0) : COLOR0

{

return tex2D( cartoonMap, tex);

}

结果如下：

带轮廓的卡通渲染：

综合以上两种技术，要实现带轮廓的卡通图，需要3个pass来渲染：

1. 把模型的卡通渲染图渲染到一张纹理上(RTT), alpha设置为1，以便轮廓的查找；

2. 第二个pass，对刚才得到的纹理的alpha通道，进行边缘检测（绘制过的地方为1，没绘制的地方为0），并将结果也绘制到一张纹理中。

3. 合并上面得到的2张图，如果边缘图上有边缘，就绘制边缘图上的颜色，否则绘制第一个pass上的颜色。

结果如下：

非真实渲染技术（NPR）-1.卡通渲染相关推荐

剖析Unreal Engine超真实人类的渲染技术Part 3 - 毛发渲染及其它
目录四.毛发渲染 4.1 毛发的构造及渲染技术 4.1.1 毛发的构造 4.1.2 Marschner毛发渲染模型 4.1.3 毛发的间接光照 4.2 毛发的底层实现 4.3 毛发的材质解析 4.3 ...
游戏渲染技术：前向渲染 vs 延迟渲染 vs Forward+渲染(二)
GTA5 2 前向渲染前向渲染是三个光照技术中最简单的,也是游戏图形渲染中最常见的技术.出于这个原因,也是光照计算最昂贵的技术,它不允许在场景中出现大量的动态光源. 大部分使用前向渲染的图形引擎会采 ...
剖析Unreal Engine超真实人类的渲染技术Part 2 - 眼球渲染
目录三.眼球渲染 3.1 眼球的构造及理论 3.1.1 眼球的构造 3.1.2 眼球的渲染理论 3.2 眼球的渲染技术 3.2.1 角膜的半透和光泽反射 3.2.2 瞳孔的次表面散射 3.2.3 瞳 ...
二次元卡通渲染之描边
前言本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项 ...
NPR——卡通渲染（一）
NPR--卡通渲染 1.1 轮廓线 1.1.1 基于 2D 图像的边缘检测算法 Sobel 算子 [3] Canny 算子 [4] 1.1.2 几何描边法 1.1.3 基于视角的描边法 1.2 卡通着 ...
卡通渲染及其相关技术总结
原文链接https://blog.uwa4d.com/archives/usparkle_cartoonshading.html 这是侑虎科技第246篇原创文章,感谢作者洛城供稿,欢迎转发分享,未经作 ...
Unity Shader - Simple Toon Shading - 简单卡通渲染
文章目录最终效果 - Final Effect 无光照,只有纹理与主色调 Shader 加描边 - Outline GIF Shader 添加光影 - RecieveShadow 自身接收阴影 Sh ...
崩三类卡通渲染解析及制作规范
一.本篇文章分为三部分 1,卡通材质解析. 2,优化方向. 3,制作规范. 二.正文部分 1,卡通材质解析卡通渲染属于非真实感计算机图形学(NPR)的范畴,然而崩三的卡通渲染又在国内被称为行业的标杆 ...
二次元卡通渲染-着色
前言本文为"优梦创客"原创文章,您可以自由转载,但必须加入完整的版权声明更多学习资源请加QQ:1517069595获取(企业级性能优化/热更新/Shader特效/服务器/商业项 ...

非真实渲染技术（NPR）-1.卡通渲染

非真实渲染技术（NPR）-1.卡通渲染相关推荐

最新文章

热门文章