Cartoon CG：卡通渲染（Cel-shading）

继续来研究卡通渲染，上一篇已经了解卡通渲染两个核心了，比较重要的point就是“具有艺术风格的光线渲染算法”，上次我们直接使用的diffuse去计算光照，严格来说不算“艺术风格”，这里就来介绍一个学术界推崇的卡通渲染光线计算：Cel-shading，首先贴上维基百科cel-shading

cel-shading的核心思想：Cel-shading is often used to mimic the style of a comic book or cartoon and/or give it a characteristic paper-like texture

那么怎么处理cel-shading呢？如下：

Cel Shading is a style of computer rendering that replaces the shading gradient of conventional rendering with flat colors and shadows (as seen at right)

上面的意思就是将颜色丰富的渐变色彩变成单调的平面色彩，简单来说操作上就是降低色阶数量，达到一种卡通的光照效果，比如下面的表情包：

可以认为就是白灰双色阶的光照，至于片段光照权重就是用N·L，也就是单位法向量与单位光源朝向向量的点积，得到的权重weight去判断采样白色或者灰色。

当然为了丰富Cel-shading的细节，可以使用多层次渐变的采样贴图，而不是直接去代码赋值颜色，比如维基的贴图，如下：

这时候为了采样uv两个方向上的像素值，使用N·L和N·V两个数值去组建uv采样。

接下来就来写shader实现了，如下：

Shader "Custom/CelShader"
{Properties{_PaletteTex("Pallette Tex",2D) = "white" {}_PaletteFactor("Pallette Factor",Range(0,2)) = 1_Extsn("Extsn Value", Range(0,1)) = 1_OutColor("Outline Color", Color) = (0,0,0,1)}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"#include "Lighting.cginc"struct appdata{float4 vertex : POSITION;float4 normal : NORMAL;};struct v2f{float4 vertex : SV_POSITION;float3 worldNormal : TEXCOORD1;float3 worldP2S : TEXCOORD2;float3 worldP2V : TEXCOORD3;};sampler2D _PaletteTex;float _PaletteFactor;v2f vert (appdata v){v2f o;o.worldNormal = UnityObjectToWorldNormal(v.normal.xyz);o.worldP2S = normalize(WorldSpaceLightDir(v.vertex));o.worldP2V = normalize(WorldSpaceViewDir(v.vertex));o.vertex = UnityObjectToClipPos(v.vertex);return o;}fixed4 frag (v2f i) : SV_Target{float u = dot(i.worldNormal,i.worldP2S);float v = dot(i.worldNormal, i.worldP2V);//采样调色板颜色时顺便*光源颜色fixed4 celcol = fixed4(tex2D(_PaletteTex, float2(u, v)).rgb*_LightColor0.rgb*_PaletteFactor, 1);return celcol;}ENDCG}Pass{Cull frontCGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float4 normal : NORMAL;};struct v2f{float4 vertex : SV_POSITION;};float _Extsn;float4 _OutColor;v2f vert(appdata v){v2f o;v.vertex += v.normal * _Extsn;o.vertex = UnityObjectToClipPos(v.vertex);return o;}fixed4 frag(v2f i) : SV_Target{fixed4 col = _OutColor;return col;}ENDCG}}
}

效果图如下：

和普通的standard相比，是不是更加卡通化？Cel-shading可以看得出来，是代码较简洁，运行效率较高的一种卡通风格算法，当然还有其他更复杂效果更好的算法了，后面再聊。

Cartoon CG：卡通渲染（Cel-shading）相关推荐

[图形学] 《Real-Time Rendering》卡通渲染
原文:<Real-Time Rendering,Third Version> Toon Shading章节 11.1 卡通着色正如不同的字体能给文字带来不同的风格一样,不同的渲染风格也有 ...
Cartoon CG：卡通渲染（tone-based-shading）
常用的卡通渲染技术中,还有一个tone-based-shading,顾名思义基于色调的渲染技术,具体什么意义呢?比较官方的介绍如下: tone-based-shading详解 In a colored ...
Unreal Engine 4 卡通着色（Cel Shading）教程
原文|<Unreal Engine 4 Cel Shading Tutorial> 作者|Tommy Tran Feb 27 2018 阅读时长|20分钟内容难度|中等文章目录开始吧 ...
Unity Shader - Simple Toon Shading - 简单卡通渲染
文章目录最终效果 - Final Effect 无光照,只有纹理与主色调 Shader 加描边 - Outline GIF Shader 添加光影 - RecieveShadow 自身接收阴影 Sh ...
卡通渲染及其相关技术总结
原文链接https://blog.uwa4d.com/archives/usparkle_cartoonshading.html 这是侑虎科技第246篇原创文章,感谢作者洛城供稿,欢迎转发分享,未经作 ...
unity 3d物体描边效果_从零开始的卡通渲染描边篇
序言: 一直对卡通渲染非常感兴趣,前后翻找了不少的文档,做了一些工作.前段时间<从零开始>的手游上线了,试着渲染了一下的其中模型,觉得效果很不错.打算写一个专栏记录其中的渲染技术.在后面的 ...
python 动画场景_clarisse电影级CG场景渲染中文教学
clarisse电影级CG场景渲染中文教学 clarisse电影级CG场景渲染中文教学 clarisse电影级CG场景渲染中文教学 clarisse电影级CG场景渲染中文教学 clarisse电影级C ...
崩三类卡通渲染解析及制作规范
一.本篇文章分为三部分 1,卡通材质解析. 2,优化方向. 3,制作规范. 二.正文部分 1,卡通材质解析卡通渲染属于非真实感计算机图形学(NPR)的范畴,然而崩三的卡通渲染又在国内被称为行业的标杆 ...
着色器实例代码+注释更新中【描边、卡通渲染、法线颜色、贴图动画等等】
描边着色器 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'Shader " ...

Cartoon CG：卡通渲染（Cel-shading）

Cartoon CG：卡通渲染（Cel-shading）相关推荐

最新文章

热门文章