查看原文
其他

程序丨Unity Shader常用特效实例:色彩变换

ArtStealer 腾讯GWB游戏无界 2022-08-30

先来看一个特效:



这个效果是几年前我在Shadertoy看到的一位大神写的Shader特效,里面没有用到任何额外的纹理贴图,纯用Shader编写出来的。我把他翻译到了Unity中,想研究的同学可以点击文末【阅读原文】获取完成的Unity工程。


在开始本文具体案例之前,先做些基础的科普,便于还没入坑的同学对Shader编程有个全局的了解。


为什么出现了Shader编程?这个要从渲染管线开始说起:


01

渲染管线


一般分为固定渲染管线和可编程渲染管线。固定管线因为功能固定,无法在程序上对物体细节的表现给予更多更自由的控制,无法达到更多更炫酷的效果。为了解决这个问题,可编程的渲染管线就诞生了,见下图:



具体的可编程的部分就是上图中两个橙色的节点:Vertex Shader(顶点着色)和 Fragment Shader(片元着色)。


了解了Shader在渲染管线中的工作位置,那么我们在看看Unity中如何进行Shader开发呢?


02

Unity3D Shader


Unity的Shader有四种:


1)Fixed function shader 
属于固定渲染管线Shader, 基本用于高级Shader在老显卡无法显示时的备用Shader。


2)Vertex and Fragment Shader 
最强大的Shader类型,属于可编程渲染管线。使用的是CG/HLSL语言。也就是我上面说过的两种。


3)Surface Shader 
Unity3D推荐的Shader类型。它是一个代码生成器,帮我们将重复的代码省去了,使得编写Shader更为容易。使用的也是CG/HLSL语言。


4)Compute Shader 
可直接将GPU作为并行处理器加以利用,GPU将不仅具有3D渲染能力,也具有其他的运算能力。


基本概念粗略的过完,下面我们来做一个比较常用的Shader特效:


游戏开发经常会用到一些颜色上的变化来标示当前的状态。例如:


中毒全是泛绿:



植物大战僵尸中冰冻缓速僵尸色彩变为蓝色的效果:



尤其是当年FC时代的游戏,因为内存的不足,用不同色调来标示不同的角色这方面用到了极致:



具体这些效果如何用Shader实现呢?


在撸代码之前先要介绍几个概念:


色彩是人的眼睛对于不同频率的光线的不同感受,色彩既是客观存在的(不同频率的光)又是主观感知的,有认识差异。计算机领域应用最多的是RGB,尤其是程序中处理。但是美术处理和工业应用领域应用更多的是HSV或HSL(举个大家最熟悉的例子:打开电视里面的色彩设置就会看到色相,饱和度,明亮度的设置)。


RGB(Red,Green,Blue) 

就是红绿蓝组成的三维坐标系:



HSV(Hue色相,Saturation饱和度,Value色调)

由色相、饱和度、色调组成的倒立的圆锥体:



HSL(Hue色相,Saturation饱和度,Lightness亮度)

HSL 类似于 HSV。对于一些人,HSL 更好的反映了“饱和度”和“亮度”作为两个独立参数的直觉观念,但是对于另一些人,它的饱和度定义是错误的,因为非常柔和的几乎白色的颜色在 HSL 可以被定义为是完全饱和的。对于 HSV 还是 HSL 更适合于人类用户界面是有争议的(这个不在本文的讨论范围内,就不再深入了)



HSV和HSL的对比图:



色彩相关的概念介绍完毕,下面在Unity中新建一个Shader。



然后新建一个Material:



将这个Material的Shader设置为刚新建的“HSLShader”,然后在Inspector中就会看到Hue,Saturation,Lightness三个属性:



新建一个Scene来测试我们的Shader,场景中放置个Sprite:



下面我们来调节材质Inspector中的Hue、Saturation、Lightness来看看对应的效果:


Hue 从0~360°的变化图:



Saturation 为-1(黑白)和1(艳丽)时的效果图:



Lightness 为0.2时的效果图:



好了,看到这相信大家对色彩变换应该有了直观的印象。对具体的实现感兴趣的同学可以点击阅读原文下载。


本文参与“Unity Shader”征文活动,作者为ArtStealer,未经授权,请勿转载。


今日推荐  

·9月热文盘点丨这些优质干货你收藏了吗?

·活动丨Unity文章有奖征集第三期:Shader

·AVG、Roguelike、逃生....6大细分领域常见难题,可以这样应对

*长按上方图片识别二维码并关注

设为星标,即可快速找到我们!

↓↓↓点击阅读原文,了解更多。

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存