[Unity Shader]卡通渲染

最终效果，包含描边，明暗双色阶的渲染，边缘光。

参考来源：https://www.zhihu.com/column/c_1215952152252121088

卡通渲染

Back facing描边
光照模型
边缘光

Back facing描边

基本思路：通过两次Pass绘制，一次绘制角色，一次绘制描边来实现轮廓线效果。描边的绘制在顶点沿着法线方向位移一段距离，使得模型轮廓放大，渲染作为描边。同时描边绘制时使用cull front。这样描边和角色重叠的部分会因为不能通过深度检测而cull掉，保证描边不会遮挡角色。

顶点着色器代码如下：

 v2f vert (a2v v) {v2f o;UNITY_INITIALIZE_OUTPUT(v2f, o);float4 pos = UnityObjectToClipPos(v.vertex);float3 viewNormal = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal.xyz);//将法线变换到NDC空间，这样无论摄像机拉近拉远，描边的粗细都能不变。float3 ndcNormal = normalize(TransformViewToProjection(viewNormal.xyz)) * pos.w;//将近裁剪面右上角的位置的顶点变换到观察空间float4 nearUpperRight = mul(unity_CameraInvProjection, float4(1, 1, UNITY_NEAR_CLIP_VALUE, _ProjectionParams.y));//求得屏幕宽高比，适配宽屏窗口float aspect = abs(nearUpperRight.y / nearUpperRight.x);ndcNormal.x *= aspect;//顶点色a通道控制粗细pos.xy += 0.01 * _OutlineWidth * ndcNormal.xy * v.vertColor.a;o.pos = pos;//o.vertColor = v.vertColor.rgb;return o;}

光照模型

要实现卡通渲染，需要减少色阶数量，分离冷暖色调，明暗区域分开。
我们实现一个二分明暗的光照效果，并支持分别设置明暗区域的颜色，设置暗面颜色为冷色调，和明面的色调做出区分。
使用smoothstep函数插值进行边界的柔和处理
片元着色器中的包含光照的关键代码：

             half4 col = 1;half4 mainTex = tex2D(_MainTex, i.uv);half3 viewDir = normalize(_WorldSpaceCameraPos.xyz - i.worldPos.xyz);half3 worldNormal = normalize(i.worldNormal);half3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);half halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 0.5;//明暗边界smoothstep函数插值进行柔和处理half ramp = smoothstep(0, _ShadowSmooth, halfLambert - _ShadowRange);half3 diffuse = lerp(_ShadowColor, _MainColor, ramp);//混合纹理图diffuse *= mainTex;

边缘光

边缘光是卡通渲染中重要的组成部分。它和描边一样都在物体的轮廓出现。卡通渲染通常饱和度比较高，描边和边缘光能够让角色从高饱和度的画面中凸显出来。
片元着色器中的加入计算边缘光的代码：

    half f =  1.0 - saturate(dot(viewDir, worldNormal));half rim = smoothstep(_RimMin, _RimMax, f);//边缘光的柔和过渡rim = smoothstep(0, _RimSmooth, rim);half3 rimColor = rim * _RimColor.rgb *  _RimColor.a;

[Unity Shader]卡通渲染相关推荐

Unity Shader卡通渲染 · 高清渲染管线·HDRP
Unity Shader卡通渲染 · 高清渲染管线·HDRP 前言最近在研究HDRP管线中的卡通渲染,就想着能不能把官方的UCTS移植到HDRP管线里面去,说干就干,到昨天晚上上传了github,今 ...
Unity Shader 卡通渲染模型描边之退化四边形
目录前言一.基于空间的边缘检测算法二.退化四边形三.Unity中的CommandBuffer和ComputeBuffer 四.构成描边的简单实例五.模型描边的实现前言之前写了一篇< ...
Unity Shader 卡通渲染实时模型动画描边的研究
前言卡通渲染也叫非真实感渲染(英文简写:NPR),"描边"在图形学和数字图像里都叫边缘检测.因此你可以在很多文献网站上面找到很多这类文献,但最后我发现基于图形学使用的方式基本都是 ...
Unity Shader 卡通渲染（三）：仿塞尔达荒野之息 Shader（顶点色控制细节）
上一篇传送门: https://blog.csdn.net/qq_27534999/article/details/100925621 顶点色在卡通渲染中有挺多应用,本篇会在上一篇的基础上,运用模型顶 ...
Unity Shader 卡通渲染（一）：仿塞尔达荒野之息 Shader（简易版）
温馨提示: 本系列文章面向那些 Shader 刚刚入门,想寻求进一步提升的群体,如果对 Shader 一无所知的话,建议自行搜索其他 Shader入门教程观看学习,再食用本系列文章. 前言: 说起卡通 ...
unity shader卡通渲染（描边）+阴影+多光源处理
说道卡通渲染,应该都会想到描边: 我所学的描边有三种: 一种是计算边缘深度检测描边一种是色差检测描边一种是利用顶点法线向外扩展返回单色pass,使用正面裁剪我用的第三种: pass {//剔除前 ...
Unity Shader 卡通渲染（五）：仿日式赛璐珞风格 Shader（顶点外扩描边）
上一篇传送门: https://blog.csdn.net/qq_27534999/article/details/101080649 一.赛璐璐风格简介有些人可能会问,什么是赛璐珞风格? 赛璐珞是 ...
Unity Shader 布料渲染（丝袜）
Unity Shader 布料渲染(丝袜) 现实中的丝袜效果丹尼尔值纤维的特性分析效果截图: Weak: Normal: Strong: 属性值定义: 丹尼尔值与拉伸程度边缘度的计算完整S ...
【Unity Shader】渲染纹理实现镜子效果
1 基本概念 1.1 什么是渲染到纹理? 全称是Render To Texture,<入门精要>好像又把渲染目标纹理,即Render Target Texture也叫做RTT,但我认为&l ...

[Unity Shader]卡通渲染

卡通渲染

Back facing描边

光照模型

边缘光

[Unity Shader]卡通渲染相关推荐

最新文章

热门文章