openGL CG 系列教程07 – Toon Shader

原创 2010年05月15日 22:04:00

*原创文章,转载请注明出处*  

 

  

openGL CG 系列教程07 – Toon Shader

 

这篇教程将介绍一种卡通渲染(Toon Shader)的方法,卡通渲染属于non photorealistic rendering或简称NPR中的一种。卡通渲染一个物体看起来的效果就像卡通绘画一般,这里介绍一种简单的渲染卡通效果的方法。和一般光照渲染不同的是,卡通效果渲染的物体像素之间颜色过渡是一种阶梯函数形式的,而一般的光照渲染的物体颜色过渡则是平滑的连续函数形式。Fig1比较了卡通渲染和一般基于像素渲染的茶壶,可以明显地看出茶壶颜色过渡的差别。

 

(a)Pixel Shading

(b)Toon Shading ver1

(b)Toon Shading ver2

Fig1  Pixel Shading V.S Toon Shading

 

要实现Toon Shading的效果,可在Fragment shader中测试每个像素漫反射diffuse中的NdotL值,让漫反射形成一个阶梯函数,不同的NdotL区域对应不同的颜色,Fig2中显示出不同部分不同的漫反射强度值,不同的漫反射值分别指定了不同的像素颜色。

 

Fig2  NdotL值分布

 

现在只要在fragment shader里计算漫反射NdotL的值,然后判断,所以修改教程03fragment shader里部分代码即可。

 

float3 N = normalize(normal);

float3 L = normalize(LightPosition - Position);

float NdotL = max(dot(N,L),0);

 

float3 color;

 

if( NdotL<0.5)    color = float3(0.3,0.3,0.3);

else if(NdotL>=0.5 && NdotL<0.85)    color = diffuseColor;

else if(NdotL>=0.85)    color = specularColor;

 

在上面代码中,color就是最后fragment shader的输出颜色。可以看到shader代码很简单,但是使用这些代码渲染出来的物体是没有轮廓的,就像Fig1(c)中渲染的茶壶一样。为了给茶壶添加轮廓,还要考虑观察向量V和法线N的关系。将VN进行点乘,如果这个值比较小,比如0.2,我们就可以认为观察到的物体的边缘(Fig3)

Fig3 法线N和观察向量V

 

Fig3中,P1P2代表相机坐在位置,S是物体表面上一点,N是点S的法线。当我们在点P1观察物体的时候,S点很明显不能看成物体的轮廓,这个时候NV1的点积值比较大,而在P2点观察的时候,S点左边的部分几乎是看不到的,这个时候NV2的点积值很小,接近0,于是可以把S看成是物体的轮廓。现在刚才的shader里只需要增加一点代码。

 

float3 N = normalize(normal);

float3 L = normalize(LightPosition - Position);

float3 V = normalize(eyePosition - P);

float NdotL = max(dot(N,L),0);

float NdotV = max(dot(N,V),0);

 

float3 color;

 

if( NdotL<0.5)    color = float3(0.3,0.3,0.3);

else if(NdotL>=0.5 && NdotL<0.85)    color = diffuseColor;

else if(NdotL>=0.85)    color = specularColor;

 

if(NdotV<0.2)    color = float3(0,0,0);

 

代码中最后比较了NdotV的大小,如果小于0.2,那么我们认为这个像素在我们所见范围的边缘处,那么直接将该像素的颜色设置为黑色,这样就能实现Fig1中,图(b)的效果了。

 

虽然这种Toon shading的方法很简单,但是也有不足的地方。如果构成物体的多边形之间的棱角很分明,比如正方体,那么采用这种方法的话,会出现物体闪烁的情况,因为在物体边缘的地方法线变化很大。

 

 

 

 *原创文章,转载请注明出处* 

 

OpenGL CG 系列教程1 - Hello CG

这篇教程将介绍如果在openGL中使用CG(C for Graphic)语言。想在程序中使用CG,首先要下载并安装 NVIDIA的Cg Toolkit。( http://developer.nvida...
  • thenile
  • thenile
  • 2013年04月27日 12:24
  • 1111

openGL CG 系列教程2 - Vertex Lighting

*原创文章,转载请注明出处*openGL CG 系列教程2vertex lighting 之前的一篇教程HelloCG介绍了Cg的一些最基本的东西。这篇教程将介绍利用可编程渲染管线来实现光照。光照模型...
  • zhangci226
  • zhangci226
  • 2010年04月28日 22:54
  • 5736

Unity3d shader之卡通着色Toon Shading

卡通着色也叫Non-photorealisticrendering非真实渲染 可以让3d的建模用卡通的效果实现,在日本的游戏中比较常见, 让我们看看在u3d中怎么实现...
  • wolf96
  • wolf96
  • 2015年01月22日 15:00
  • 5037

openGL CG 系列教程1 - Hello CG

 *原创文章,转载请注明出处*OpenGL CG 系列教程1  -  Hello CG 这篇教程将介绍如果在openGL中使用CG(C for Graphic)语言。想在程序中使用CG,首先要下载并安...
  • zhangci226
  • zhangci226
  • 2010年04月28日 19:46
  • 8911

OpenGL: CG简介

OpenGL CG 系列教程1  -  Hello CG 这篇教程将介绍如果在openGL中使用CG(C for Graphic)语言。想在程序中使用CG,首先要下载并安装 NVIDIA的Cg Too...
  • Augusdi
  • Augusdi
  • 2014年02月27日 11:03
  • 3162

卡通渲染(Toon Shading/Cel Shading)

    卡通渲染(Catoon Rendering/Toon Shading/Cel Shading)是NPR技术中的一种。 下面是老外关于卡通渲染的定义:    Cel shading is a f...
  • skyman_2001
  • skyman_2001
  • 2006年09月10日 17:13
  • 4659

Qt 3D的研究(六):Toon Shader

在上次的实验中,我们实现了Gooch Shader,并给出了通过调色板进行个性化的Gooch Shader设置。Toon Shader又称Cell Shader,是以离散的颜色来表示光照的强弱。很多动...
  • jiangcaiyang123
  • jiangcaiyang123
  • 2015年03月05日 16:00
  • 2757

Unity -Shader精讲(一)OpenGL,DirectX,CG选择 着色器选择

Unity 渲染需要两个组件 Mesh Filter 和 Mesh Renderer Mesh Filter : 存储一个Mesh(网格,模型的网格,就是模型的由哪些三角面组成,组成一个什么样子的模...
  • qq_33537945
  • qq_33537945
  • 2018年02月02日 19:18
  • 13

卡通(Toon)着色

CPU端代码设置: // This function does any needed initialization on the rendering // context. void SetupR...
  • huangzhipeng
  • huangzhipeng
  • 2012年09月07日 21:53
  • 2166

openGL CG07 – Toon Shader

这篇教程将介绍一种卡通渲染(Toon Shader)的方法,卡通渲染属于non photorealistic rendering或简称NPR中的一种。卡通渲染一个物体看起来的效果就像卡通绘画一般,这里...
  • thenile
  • thenile
  • 2013年04月27日 13:33
  • 818
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:openGL CG 系列教程07 – Toon Shader
举报原因:
原因补充:

(最多只允许输入30个字)