unity shader渐变纹理卡通化着色效果

2023-10-20 13:20

本文主要是介绍unity shader渐变纹理卡通化着色效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

有时纹理贴图的作用不仅仅是给模型贴上一层“外衣”,一些其他的效果也可以使用贴图来完成,比如使用渐变纹理来使物体有一定的卡通化效果。

回想一下看过的一些动画就可以知道,动画里人物的绘制的明暗区域的过渡非常直接,如下图,可以看到几乎不是纯黑就是纯白。
在这里插入图片描述

那么我们也可以在unity shader中实现大致的效果,主要思路就是制作一张渐变纹理。
然后使用phong光照模型中的漫反射公式,即法线点乘光照方向,来得到一点的亮度信息。此时如果直接使用此亮度信息,就会得到一个过渡十分均匀的效果,那么为了得到动画中几乎没有明暗过渡区域的那种效果,我们需要用亮度值在渐变纹理上做一次映射。

我们使用的渐变纹理如下,此时进行映射,就可以得到诸如亮度值大于多少,都变成一个固定的值,这样就可以得到几乎没有明暗过渡的效果。
在这里插入图片描述

主要代码就是先计算出世界坐标下的法线和光照方向,然后进行点乘。
还要做一个映射,因为单位向量点乘结果范围是[-1,1],而uv坐标范围是[0,1]

 fixed value = dot(worldNormal, worldLightDir)/2+0.5;

最后用这个亮度值在渐变纹理上进行重新映射,再乘上原本的纹理颜色
主要代码基本就是这样,非常的简单

fixed4 col = tex2D(_MainTex, i.uv);
float3 diffuse = tex2D(_RampTex,fixed2(value, value)) * col

完整代码如下

Shader "Test/cartoon"
{Properties{_MainTex ("Texture", 2D) = "white" {}_RampTex ("Ramp Texture", 2D) = "white" {}}SubShader{Tags{"RenderType"="Opaque"}LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag// make fog work#pragma multi_compile_fog#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float3 normal : NORMAL;};struct v2f{float2 uv : TEXCOORD0;UNITY_FOG_COORDS(1)float4 vertex : SV_POSITION;float3 worldPos:TEXCOORD2;float3 worldNormal:TEXCOORD3;};sampler2D _MainTex;float4 _MainTex_ST;sampler2D _RampTex;v2f vert(appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);UNITY_TRANSFER_FOG(o, o.vertex);o.worldPos = mul(unity_ObjectToWorld, v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}fixed4 frag(v2f i) : SV_Target{// sample the texturefixed4 col = tex2D(_MainTex, i.uv);// apply fogUNITY_APPLY_FOG(i.fogCoord, col);float3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * col.rgb;float3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));float3 worldNormal = normalize(i.worldNormal);fixed value = dot(worldNormal, worldLightDir)/2+0.5;float3 diffuse = tex2D(_RampTex,fixed2(value, value)) * col*0.6f;return fixed4(ambient + diffuse, 1);}ENDCG}}
}

上图是使用unity自带的标准着色器的效果,下图是使用我们刚刚包括渐变纹理的着色的的效果,可以看到在明暗过渡上我们的着色器更加直接,更加像动画的明暗绘制手法。
在这里插入图片描述
在这里插入图片描述

当然,一个完整的卡通化效果单靠一个渐变纹理是不行的,在游戏中往往还需要添加描边等多种效果。而且还需要和模型师合作,做出来的模型本身就需要比较卡通,比如我们刚刚随便找的这个模型,人脸明显就是写实的绘制手法,包括衣服纹理的绘制也是比较写实的,而且衣服上也已经本身绘制上了很多褶皱和阴影。这样即使添加了卡通化的着色器,看上去效果也不是那么的理想。

我又找了一个本身就比较卡通的模型,这个时候再用两种着色器进行对比,可以发现效果明显了很多
在这里插入图片描述
在这里插入图片描述

但是问题还是出在,这个兽人的衣服本身已经绘制上去了一些明暗区域,所以导致效果也不是很完美。所以在制作卡通化渲染的游戏的时候,还是要从一开始制作模型和贴图的时候就要准备好,贴图千万不能绘制太多褶皱和明暗效果,放到引擎里靠着色器渲染明暗就好了。

我们又找了一个模型,去掉本身的贴图后,效果如下,可以看出这才是我们想要的效果
在这里插入图片描述
另外代码也传到github仓库里了,大家也可以关注一下哦~
我的github

这篇关于unity shader渐变纹理卡通化着色效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/247350

相关文章

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的。使用python创建生命倒计时图表,珍惜时间

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

Unity Post Process Unity后处理学习日志

Unity Post Process Unity后处理学习日志 在现代游戏开发中,后处理(Post Processing)技术已经成为提升游戏画面质量的关键工具。Unity的后处理栈(Post Processing Stack)是一个强大的插件,它允许开发者为游戏场景添加各种视觉效果,如景深、色彩校正、辉光、模糊等。这些效果不仅能够增强游戏的视觉吸引力,还能帮助传达特定的情感和氛围。 文档

渐变颜色填充

GradientFill函数可以对特定的矩形区域或者三角形区域进行渐变颜色的填充。我们先来看看GradientFill函数到底长得什么样子,帅不帅。 [cpp]  view plain copy print ? BOOL GradientFill(     _In_  HDC hdc,     _In_  PTRIVERTEX pVertex,     _In_  ULONG

opengl纹理操作

我们在前一课中,学习了简单的像素操作,这意味着我们可以使用各种各样的BMP文件来丰富程序的显示效果,于是我们的OpenGL图形程序也不再像以前总是只显示几个多边形那样单调了。——但是这还不够。虽然我们可以将像素数据按照矩形进行缩小和放大,但是还不足以满足我们的要求。例如要将一幅世界地图绘制到一个球体表面,只使用glPixelZoom这样的函数来进行缩放显然是不够的。OpenGL纹理映射功能支持将

【Godot4.3】多边形的斜线填充效果基础实现

概述 图案(Pattern)填充是一个非常常见的效果。其中又以斜线填充最为简单。本篇就探讨在Godot4.3中如何使用Geometry2D和CanvasItem的绘图函数实现斜线填充效果。 基础思路 Geometry2D类提供了多边形和多边形以及多边形与折线的布尔运算。按照自然的思路,多边形的斜线填充应该属于“多边形与折线的布尔运算”范畴。 第一个问题是如何获得斜线,这条斜线应该满足什么样

Unity协程搭配队列开发Tips弹窗模块

概述 在Unity游戏开发过程中,提示系统是提升用户体验的重要组成部分。一个设计良好的提示窗口不仅能及时传达信息给玩家,还应当做到不干扰游戏流程。本文将探讨如何使用Unity的协程(Coroutine)配合队列(Queue)数据结构来构建一个高效且可扩展的Tips弹窗模块。 技术模块介绍 1. Unity协程(Coroutines) 协程是Unity中的一种特殊函数类型,允许异步操作的实现