先看一眼最终的实现效果。
这是原图,我们可以跟抖音一样,对它进行各种处理,比如美白、滤镜、各种特效。
这里我们先来加几种最简单的画面效果:
(1)亮度值,从0到1:
(2)饱和度,从0到1:(我觉得这个饱和度为1时还挺好看的~)
(3)对比度,从0到1:
可能有部分小伙伴们,对于亮度、饱和度、对比度这些概念还不是很清楚,这里先大致做下解释。
我们知道,在计算机中描述一个物体颜色的常见方式是“RGB颜色模型”,这种方式虽然很方便计算机的计算,但却不方便人们的理解,所以人们想出来另一种方式用来描述颜色,这就是“HSV颜色模型”。
如上图,
H是Hue(色相),方向绕中心轴逆时针,0度表示红色,120度表示绿色,240度表示蓝色;
S是Saturation(饱和度),方向由模型半径中心指向边缘,逐渐增大,中心处为0,边缘处为1;
V是Value(色调),可以理解为亮度,方向由底部指向顶面,逐渐增大,底部最暗,顶部最亮。
好,看完上面HSV颜色模型的定义,我们再来看看下面几个概念。
(1)亮度
亮度表示颜色的明亮程度,明度越高,颜色越亮。RGB的各个值越小,亮度越小;RGB的各个值越大,亮度越大,所以想要控制亮度,我们只要控制RGB值大小即可。
(2)饱和度
饱和度是指色彩的鲜艳程度,也称色彩的纯度。饱和度取决于该色中含色成分和消色成分(灰色)的比例。含色成分越大,饱和度越大;消色成分越大,饱和度越小。纯的颜色都是高度饱和的,如鲜红,鲜绿。混杂上白色,灰色或其他色调的颜色,是不饱和的颜色,如绛紫,粉红,黄褐等。完全不饱和的颜色根本没有色调,如黑白之间的各种灰色。
(3)对比度
对比度表示画面中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量。对比度越大,图像越清晰,色彩也越鲜艳;对比度越小,画面越显示的灰蒙蒙。
说完了概念,接下来说实现。
这里的画面处理,我们使用了unity的屏幕后处理。
什么是屏幕后处理?
有个叫“”渲染管线“”的概念,说白了就是指游戏引擎如何一步步渲染出一帧画面,这一步一步的操作就如同工厂流水线一样,合起来就叫做“渲染管线”。而unity在这些流水线中提供了部分接口,让我们能够自定义一些渲染行为,后处理就是这里面中的一步操作。
具体地,看下面这幅图,红圈部分的OnRenderImage就是unity提供给我们的后处理接口:
void OnRenderImage(RenderTexture source, RenderTexture dest);
unity在渲染完成之后会调用这个函数,source是unity经过前面一步一步渲染之后得到的图片,我们可以在这个函数里做一些自定义处理,最后unity会把结果输出到dest,作为游戏最终显示的画面。
unity后处理有很多资料介绍实现的,这里我就跳过这部分代码编写了,如果有不明白的可以等我推出后续的基础篇专门介绍这部分,或者私聊我要代码。
然后我们主要讲上面效果实现的关键代码。
(1)亮度
在片元着色器里,从MainTex中根据uv坐标进行采样,然后对采样结果直接乘以一个系数,也就是RGB整体缩放即可。
效果:
(2)饱和度
首先根据一条经验公式,计算出同等亮度情况下饱和度最低的值,然后与当前饱和度进行插值即可。
效果:
(3)对比度
同样的思路,先计算同等亮度情况下对比度最低的值,然后根据当前对比度进行插值即可。
效果:
好了~关于后处理以及最简单的一个效果实现,本文就讲到这里,有问题的小伙伴欢迎私信我或给我留言。
欢迎关注我的微信公众号:unity大话东游,更多的unity技术类和渲染类文章等着你哦!