扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
当前位置： &
查看: 627|回复: 0
如何在Unity3D里制作卡通渲染效果
71534/5000排名<font color="#FF昨日变化1主题帖子积分
日久生情, 积分 1534, 距离下一级还需 3466 积分
日久生情, 积分 1534, 距离下一级还需 3466 积分
蛮牛币2062
在线时间418 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
Twin Souls: Path of the Shadows是一款游戏性相当完善，且卡通渲染效果相当优异的，本文由 Unity 大中华区技术经理Marek Marchlewicz(马瑞)，为大家分享一篇如何透过修改 Unity 的渲染管道来实现与Twin Souls: Path of theShadows一样的卡通渲染效果。
　　卡通渲染原理
　　卡通渲染是一种非真实感的渲染方法，一般也称作 Cel-Shading 或 Toon Shading，透过将平滑阴影变化转换成拥有明显边界，让画面呈现出手绘般的效果。
　　上图中，由左至右分别是 Diffuse、Cel Shading 以及拥有三个临界值的 Cel Shading。在通常情况下一个像素所接收到的光源强度是光源方向与法线方向之间的点积（NdotL）。将这个光源强度经由四舍五入调整，或是透过不同“临界值”的取样后，就会呈现出不同的卡通渲染效果。在最简单的卡通渲染效果中，如果点积大于零，则像素会呈现高光，反之如果点积小于零，则像素会被设定成阴影。
　　实现方法
　　卡通渲染效果有许多不同的实现方式，而这次我们会针对渲染路径（Renderring Path）来完成不同的实现方法。渲染路径可以在摄影机的 Inspector 面板中设定。下面我们会介绍如何透过正向渲染与延迟渲染路径来实现卡通渲染效果。
　　正向渲染(Forward Rendering)
　　如果你的场景并不是多光源场景，正向渲染（Forward Rendering）是一个不错的选择。因为在这种模式下，渲染引擎会遍历所有光源的顶点及像素，在多光源场景里可能会带来较大的负荷。但是，若是你的场景中只有少数或甚至一个光源，这种遍历方式就不会造成负担。具体实现时，可以创建一个表面着色器（Surface Shader），并透过自定义的光照模型，来实现如何在正向渲染中完成卡通渲染效果。
　　Shader
　　&Custom/CelShadingForward&
　　Properties
　　_Color(
　　&Color&
　　, Color) = (1, 1, 1, 1)
　　_MainTex(
　　&Albedo (RGB)&
　　&white&
&&　　SubShader
　　&RenderType&
　　&Opaque&
　　LOD 200
&&　　CGPROGRAM
　　#pragma surface surf CelShadingForward
　　#pragma target 3.0
&&　　half4 LightingCelShadingForward(SurfaceOutput s, half3 lightDir, half atten)
　　half NdotL = dot(s.Normal, lightDir);
　　(NdotL&&ProjectSettings & Graphhics & Defferred 中选择我们修改后的 “Internal-DeferredShading.shader” 着色器。
　　最后，确保摄影机的渲染路径切换成正确的延迟渲染后，可以注意到我们在标准着色器（Standard Shader）的基础上完成了卡通渲染效果，如下图所示。
　　外轮廓(Toon outline)
　　许多卡通风格的游戏中，都会对物体进行外轮廓的绘制，这种方式会让画面呈现出漫画一般的视觉效果，而这种外轮廓效果当然也有许多不同的实现方式。可以透过在着色器中检查法线方向与视角方向的点积，或是使用 Two Pass 来做两次渲染，当然也可以在后制效果中实现。最简单的应用方案是在摄影机中添加 Edge Detection 效果：
　　点击 Assets & Import Package & Effects，导入 Standard Assets Effect
　　选择场景中的摄影机，并且在检视面板（Inspector）中点击 Add Component & ImageEffect & Edge Detection & Edge Detection
　　最后完成的效果如下。
　　最终效果
　　在本文中，我们参考了《Twin Souls: The Path of Shadows》中的卡通渲染效果，最后在几乎没有使用其他添加资源的前提下，透过修改 Unity 的渲染管道来加以实现卡通风格渲染，完成了类似的画面呈现，如下图所示。
　　这种透过使用延迟渲染所完成的卡通渲染效果技术相当有用，因为它并不会替换整个光照模型，而只是针对现有模型做特殊的阴影处理，可以在几乎没有额外性能开销的情况下保留 Unity的 PBR（Physically-BasedRendering）技术并完成卡通渲染效果。
[]: 一个袋子砸在了 晨曦 头上，晨曦 赚了 1
每日推荐：
社区QQ达人
使用QQ帐号登录论坛的用户&>&&>&&>&正文
顽皮狗材质师用Unity引擎做动画 实时渲染效果惊人
16:41:35 来源：游民星空[编译] 作者：梁萧 编辑：梁萧　浏览：loading
　　此前《第九区》导演尼尔·布洛姆坎普的工作室Oats，用Unity引擎制作了一部微电影，效果惊人。而今天要介绍的同样是一个用Unity引擎制作的动画短片，而作者是顽皮狗工作是的高级材质师Yibing Jiang，她曾经负责《神秘海域4》的角色材质。
Unity实时渲染：
　　这部名叫“Windup”的动画短片是Yibing Jiang和她的朋友们正在用Unity制作的，目前正在进行中。本次公布的内容介绍的就是使用Unity进行的实时渲染，展示了Unity引擎强大的一方面，Unity能做出非常好的内容，可不是某些游戏那样的劣质水平。
高清视频画面：
本文由游民星空制作发布，转载请注明出处。
用手机访问
扫一扫，手机浏览
相关新闻：
综合热点资讯
单机游戏下载&&&&正版&Unity着色器和屏幕特效开发秘笈（原书第2版）unity着色器使...
邀请好友参加吧
版 次：1页 数：字 数：印刷时间：日开 本：32开纸 张：胶版纸包 装：组合包装是否套装：否国际标准书号ISBN：3所属分类：&&&
下载免费当当读书APP
品味海量优质电子书，尊享优雅的阅读体验，只差手机下载一个当当读书APP
本商品暂无详情。
当当价：为商品的销售价，具体的成交价可能因会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。
划线价：划线价格可能是图书封底定价、商品吊牌价、品牌专柜价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品曾经展示过的销售价等，由于地区、时间的差异化和市场行情波动，商品吊牌价、品牌专柜价等可能会与您购物时展示的不一致，该价格仅供您参考。
折扣：折扣指在划线价（图书定价、商品吊牌价、品牌专柜价、厂商指导价等）某一价格基础上计算出的优惠比例或优惠金额。如有疑问，您可在购买前联系客服咨询。
异常问题：如您发现活动商品销售价或促销信息有异常，请立即联系我们补正，以便您能顺利购物。
当当购物客户端手机端1元秒
当当读书客户端万本电子书免费读下次自动登录
现在的位置:
& 综合 & 正文
Unity3D图像后处理特效——Glow image effect
Glow (sometimes called "Bloom") can dramatically enhance the rendered image by making overbright parts "glow"
(e.g. sun, light sources, strong highlights). The
image effect gives greater control over the bloom but has a higher processing overhead.
辉光（有时称为" Bloom "）通过让过渡明亮部分"（例如太阳，光源，强高光）“发光”，可以大大增强渲染图像的效果。图像特效对于辉光效果具有更大的控制，但也具有更高的处理开销。
As with the other
effect is only available in Unity Pro and you must have the
installed before it becomes available
和其他图像特效一样，该特效只能在Unity Pro上进行使用，并且在使用之前必须安装。
Glow effect applied to the scene
应用到场景的辉光特效
Properties
Glow Intensity
Total brightness at the brightest spots of the glowing areas
辉光区域最亮点的全部亮度值.
Blur Iterations
模糊迭代次数
Number of times the glow is blurred when being drawn. Each iteration requires processing time.
辉光的模糊次数，每次迭代都需要消耗一定的处理时间
Blur Spread
The pixel distance over which pixels are combined to produce blurring
产生blur的像素距离.
Color tint applied to the glow
应用于辉光的颜色提示.
Downsample Shader
下采样着色器
The shader used for the glow. You generally should not have to change this.
用于辉光效果的着色器，您一般不需要改变它
Glow uses the alpha channel of the final image to represent "color brightness". All colors are treated as RGB, multiplied by the alpha channel. You can view the contents of the alpha channel
in Scene View.
辉光效果使用最终图像的alpha通道来表现“颜色的明亮度”，所有的颜色都被当成RGB处理，并与alpha通道的数值相乘，你可以在Scene
View中查看alpha通道的内容。
All built-in shaders write the following information to alpha:
所有内建着色器都在alpha通道中写入如下的信息：
Main texture's alpha multiplied by main color's alpha (not affected by lighting).
主纹理的alpha值乘以主颜色的alpha值（不受光照影响）
Specular shaders add specular highlight multiplied by specular color's alpha.
反射着色器将颜色加上反射高光与反射光颜色的alpha通道相乘后的颜色值
Transparent shaders do not modify alpha channel at all.
透明着色器不修改alpha通道的值
Particle shaders do not modify alpha channel, except for Particles/Multiply which darkens anything that is in alpha.
粒子着色器不修改alpha通道的值，除非是调暗alpha通道的Particles/Multiply着色器
Skybox shaders write alpha of the texture multiplied by tint alpha
天空盒着色器将色调alpha值与纹理的apha值相乘
Most of the time you'll want to do this to get reasonable glow:
大多数情况下你会为了获得合理的辉光效果进行如下的操作：
Set material's main color alpha to zero or use a texture with zero alpha channel. In the latter case, you can put non-zero alpha in the texture to cause these
parts to glow.
将材质的主颜色的alpha值变成0，或者使用一个零alpha通道的纹理。对于后者，你可以在纹理中产生辉光效果的地方设置非零alpha值。
Set the specular color alpha for Specular shaders to be 100%.
对于反射着色器，将反射的颜色alpha值设成100%。
Keep in mind what alpha the camera clears to (if it clears to a solid color), or what alpha the skybox material uses.
切记去掉了哪些alpha值（即变成一个不透明颜色），或者天空盒材质使用了哪些alpha。
Add the Glow image effect to the camera. Tweak
Glow Intensity and
Blur Iterations values, you can also take a look at the comments in the shader script source.
将辉光图像特效加入到照相机上，调整辉光亮度和模糊迭代次数。
The alpha channel on the Skybox can be used to great effect to add more glow when looking at the sun
使用天空盒的alpha值，可以让你在看到太阳时添加更多的光辉。
Use the alpha rendering mode in the scene view toolbar to quickly see which objects output different values to the alpha channel.
在场景窗口下使用透明度渲染模式，可以快速地看到物体的不同alpha通道。
Hardware support
This effect requires a graphics card with pixel shaders (2.0) or OpenGL ES 2.0. PC: NVIDIA cards since 2003 (GeForce FX), AMD cards since 2004 (Radeon 9500), Intel cards since 2005 (GMA 900);
Mobile: OpenGL ES 2.0; Consoles: Xbox 360, PS3.
这个特效需要显卡拥有像素着色器（2.0）或者OpenGL ES 2.0。台式机：2003年以后的NVIDIA显卡（GeForce
FX），2004年以后的AMD显卡（Radeon 9500），2005年以后的Intel卡（GMA
900）；移动设备：OpenGL ES 2.0；控制台： Xbox 360、 PS3。
All image effects automatically disable themselves when they can not run on end-users graphics card.
所有图像特效如果无法在用户显卡上运行时将会自动被关闭。
Glow (sometimes called "Bloom") can dramatically enhance the rendered image by making overbright parts "glow"
(e.g. sun, light sources, strong highlights). The
image effect gives greater control over the bloom but has a higher processing overhead.
辉光（有时称为" Bloom "）通过让过渡明亮部分"（例如太阳，光源，强高光）“发光”，可以大大增强渲染图像的效果。图像特效对于辉光效果具有更大的控制，但也具有更高的处理开销。
As with the other
effect is only available in Unity Pro and you must have the
installed before it becomes available
和其他图像特效一样，该特效只能在Unity Pro上进行使用，并且在使用之前必须安装。
Glow effect applied to the scene
应用到场景的辉光特效
Properties
Glow Intensity
Total brightness at the brightest spots of the glowing areas
辉光区域最亮点的全部亮度值.
Blur Iterations
模糊迭代次数
Number of times the glow is blurred when being drawn. Each iteration requires processing time.
辉光的模糊次数，每次迭代都需要消耗一定的处理时间
Blur Spread
The pixel distance over which pixels are combined to produce blurring
产生blur的像素距离.
Color tint applied to the glow
应用于辉光的颜色提示.
Downsample Shader
下采样着色器
The shader used for the glow. You generally should not have to change this.
用于辉光效果的着色器，您一般不需要改变它
Glow uses the alpha channel of the final image to represent "color brightness". All colors are treated as RGB, multiplied by the alpha channel. You can view the contents of the alpha channel
in Scene View.
辉光效果使用最终图像的alpha通道来表现“颜色的明亮度”，所有的颜色都被当成RGB处理，并与alpha通道的数值相乘，你可以在Scene
View中查看alpha通道的内容。
All built-in shaders write the following information to alpha:
所有内建着色器都在alpha通道中写入如下的信息：
Main texture's alpha multiplied by main color's alpha (not affected by lighting).
主纹理的alpha值乘以主颜色的alpha值（不受光照影响）
Specular shaders add specular highlight multiplied by specular color's alpha.
反射着色器将颜色加上反射高光与反射光颜色的alpha通道相乘后的颜色值
Transparent shaders do not modify alpha channel at all.
透明着色器不修改alpha通道的值
Particle shaders do not modify alpha channel, except for Particles/Multiply which darkens anything that is in alpha.
粒子着色器不修改alpha通道的值，除非是调暗alpha通道的Particles/Multiply着色器
Skybox shaders write alpha of the texture multiplied by tint alpha
天空盒着色器将色调alpha值与纹理的apha值相乘
Most of the time you'll want to do this to get reasonable glow:
大多数情况下你会为了获得合理的辉光效果进行如下的操作：
Set material's main color alpha to zero or use a texture with zero alpha channel. In the latter case, you can put non-zero alpha in the texture to cause these
parts to glow.
将材质的主颜色的alpha值变成0，或者使用一个零alpha通道的纹理。对于后者，你可以在纹理中产生辉光效果的地方设置非零alpha值。
Set the specular color alpha for Specular shaders to be 100%.
对于反射着色器，将反射的颜色alpha值设成100%。
Keep in mind what alpha the camera clears to (if it clears to a solid color), or what alpha the skybox material uses.
切记去掉了哪些alpha值（即变成一个不透明颜色），或者天空盒材质使用了哪些alpha。
Add the Glow image effect to the camera. Tweak
Glow Intensity and
Blur Iterations values, you can also take a look at the comments in the shader script source.
将辉光图像特效加入到照相机上，调整辉光亮度和模糊迭代次数。
The alpha channel on the Skybox can be used to great effect to add more glow when looking at the sun
使用天空盒的alpha值，可以让你在看到太阳时添加更多的光辉。
Use the alpha rendering mode in the scene view toolbar to quickly see which objects output different values to the alpha channel.
在场景窗口下使用透明度渲染模式，可以快速地看到物体的不同alpha通道。
Hardware support
This effect requires a graphics card with pixel shaders (2.0) or OpenGL ES 2.0. PC: NVIDIA cards since 2003 (GeForce FX), AMD cards since 2004 (Radeon 9500), Intel cards since 2005 (GMA 900);
Mobile: OpenGL ES 2.0; Consoles: Xbox 360, PS3.
这个特效需要显卡拥有像素着色器（2.0）或者OpenGL ES 2.0。台式机：2003年以后的NVIDIA显卡（GeForce
FX），2004年以后的AMD显卡（Radeon 9500），2005年以后的Intel卡（GMA
900）；移动设备：OpenGL ES 2.0；控制台： Xbox 360、 PS3。
All image effects automatically disable themselves when they can not run on end-users graphics card.
所有图像特效如果无法在用户显卡上运行时将会自动被关闭。
【上篇】【下篇】在Unity中如何进行水墨风3D渲染鸡年到了，在这里先送给大家一副年画，祝大家生活红红火。这张图可不是在木君用PhotoShop做的，而是在Unity里老老实实的写Shader渲染出来的哦。因为毕设需要走非主流国画风，所以最近一直在研究中国风的Shader。这幅闻鸡起舞也算是阶段性成果了吧。好了，废话不多说，让我们来看看这只水墨风的鸡是怎么做出来的吧。创意·Inspiration
第一步当然是到各大网站寻找一些好看的作品作为我们的参考，待会我们在Unity里面做起来也能有迹可循嘛。说到这里，大家是不是下意识的打开百度谷歌了呢。不！百度谷歌的图片搜索功能的效率十分低下，偶尔还会蹦出一些非主流的画风出来吓人。在这里，在木君给大家推荐Pinterest这个网站，检索效率非常高。下面是我在输入“Chinese Painting Chicken"后的一些检索结果：（图片来源为网络，侵权必删）鸡的动态非常好，浓墨部分很精彩，特别是尾巴的部分，看似简单的几笔就把鸡尾演绎得栩栩如生。仔细观察，浓墨部分是通过色彩深浅的变化来营造出层次的，在Unity内也可以通过透明度的变化来勾勒出鸡毛的层次，受教了！一个大大的鸡屁股 :[ ，鸡身部分淡墨的使用非常考究，通过墨水浸染加纸面纹理的方式，把鸡的身体描绘得十分写意。而鸡脖子那部分的留白，简直神来之笔。通过留白制造意境也是水墨风渲染可以借鉴的手法呢，学习啦！这幅画的点在于纹理和笔触勾勒。纸张表面的特殊纹理会赋予画面一种很强烈的质感。在Shader的编写过程中叠加一个Overlay的质感图片可以达到这种效果。素材·Assets 在Unity里做风格化的渲染其实就和PS差不多，都是素材堆砌加后期处理的过程。用过PS的同学们应该知道，好的素材是成功的一半，所以素材的重要性，不言而喻。我们从3d模型找起。在这里我用的是Asset(tao) Store(bao)上的一组带动画的鸟的模型。下图中间那只公鸡就是我在渲染测试中使用的模型。另外，我还需要一些笔触，墨水痕迹以及纸面纸面质感的素材。当然这些素材是我在一边调试一边搜集的，这里先放几张出来，给大家找找感觉。着色器·Shader接下来就到重头戏了！关于水墨风的shader怎么写，相信这个问题不少同学也曾经烦恼过，今天我就来展示一下我研究的成果吧。首先上一张原本的模型，这个模型是注重真实感的，就是给人一种想把这只鸡杀了煲鸡汤的感觉（在木君广东人的身份就这么暴露了吗O.O）。这个模型本身的质量很高，但是现在我们需要把它变成国画风。综合网上的一些研究，国画风的着色器在编写方面有两个关键的部分：一个是边缘检测，就是给这只大公鸡描个黑边，把它的轮廓勾勒出来；一个是调色，一般会用到降低色阶，水墨画里的用色通常是很少的，色彩太丰富就不像画出来的啦。最后我还会介绍一下我进行后期质感处理的一些方法。边缘检测边缘检测的原理非常简单，就是法线和视线的点乘。公式如下：Edge = Dot( Normal , View );
大家想想越是物体边缘的地方，是不是法线（物体表面朝外的方向）和视线（观察者看向物体的方向）的夹角越接近90度？把法线和视线点成得到了一个边缘参数，这个参数越接近0说明该点越处于边缘。用这个原理，就可以把边缘的颜色描黑。在我们的工程中中描黑后的鸡模型就变成了这样：/*哇，光秃秃的可以做成白切鸡呢*/这样做出来的边缘有一个渐变的趋势，但是我们要的是描边，而不是渐变。所以我们需要对边缘参数设定一个阈值，并且把高于阈值的地方设定为白色，对低于阈值的地方进行一个平方的处理，公式如下：EdgeOpt = (Edge & thred)? 1 ： Edge * E
效果图如下：好像有那么点水墨的感觉了呢，如果加上原来的材质会是什么样的呢？一只被勾了边的鸡出现了！但是鸡的颜色还是有些奇怪，一般的水墨画可没有这么斑斓的色彩，都是以极少的几种甚至是单种颜色构成的。为了让渲染的颜色更加接近于绘画，我们需要进行颜色的调节。调节颜色
首先我们对贴图进行降低色阶的处理。所谓的降低色阶就是把贴图中相临近的颜色合并，以减少总的颜色数量。这里我们需要用到一个取整函数floor，简单来说，就是先把表示为0~1之间的颜色参数扩大，然后取整，相当于分组合并，最后把颜色参数再缩放到0~1，整个过程还是挺巧妙的。降低色阶的公式如下：ColorPaint = floor( ColorTex * _Tooniness ) / _T
以下是效果图：/*哇，变成碳烧鸡了耶*/色阶降低之后伴随的问题就是原本丰富的色块边缘被除掉，整个模型显得死板沉闷。这时候我们就需要引入一些带有质感笔触的图片，来增强色块边缘的质感。这里可以和大家分享一下我找的图片。图片是从Pinterest上找的，我主要的目标是一些有大色块，并且有明显的纸张材质感和边缘笔触的图片。之后就可以把找来的图片和现在的渲染颜色相叠加。叠加图片的思路大概是通过各种奇怪的算法算出一个新的uv值，然后再从图片中得到色彩值，再经过一系列奇怪的运算之后，得到最后的颜色值。和ps里的后期处理一样，都是通过不断的尝试和调整得到才会得到一个比较好的结果。如果实在想不出好的叠加函数，可以参考ps里的函数（柔光，强光等等）。对黑边来说，我是用边缘参数和点的uv值进行线性的叠加得到的一个新uv参数，再把图片的颜色转化成透明度。效果图如下：模型的边缘可以看到有虚实的变化了，特别是尾巴的部分，显得更有层次感了。接下来我们对黑边以内的部分进行调整。这里我使用了一个小窍门，即用一个vector里的四个参数对一张图片进行缩放旋转处理。这个vector的xy可以作为二维偏差值，z可以作为旋转的角度，w可以是缩放值。这样就可以对加入的图片进行移位，旋转和缩放的调整了。调整的效果如下：可以看到内部的颜色也出现了一些笔触，并且有留白，留白部分是透明的。此外，对比参考图片，我们发现鸡的冠以及下巴上的胡会被画上红色，而鸡脖子的部分会留白，尾部会用黑色来描绘，以下是我参考图片做的渲染，其中叠加的纹理图片是根据贴图来制作的。/*我闻到了浓浓的乌鸡汤的味道！*/这种方法涉及到对于单个模型贴图的编辑，相当于美工给模型画贴图，泛用性比较差，仅供大家参考。整理·Finalization接下来是P图时间！我们需要利用一些滤镜对画面进行最后的修改。比如可以用Scree Overlay来做纸张的纹理，用Color Correction来提高饱和度。最后配上几个装逼用的文字，播放鸡奔跑的动画，就大功告成了。参考·Reference在边缘检测方面，我的主要参考文章是下面这篇。原文发在facebook上，作者是Hui-Ku Shih。我引用了一篇转载的，传送门如下：原文还附赠了一个可下载的.shader文件，是存在google drive上的。翻墙有困难的同学别着急，我会在文章的最后附上我自己的shader。另外我还参考了一篇卡通风渲染的文章，用了里面的降色阶的代码。传送门如下：最后就是分享我写的Shader了，在木君已经把它打包成一个UnityPackage供大家使用！提取密码：sy6j以下是我的公众号的二维码，欢迎关注哦！ (二维码自动识别)公众号名称：在木的游戏作坊 759 条评论分享收藏