【Unity3D渲染】Unity3d实现Photoshop的各种图层混合模式

一、概述

众所周知,我们平时玩手机游戏接触到的游戏UI的资源图,大多数都是设计师童鞋使用Photoshop绘制出来的。那么,作为程序员,就可能时不时遇到这样的需求:

a、游戏里的一些图片元素,在不同的主题里,呈现不同的色彩,但是又不是简单的调色。美术童鞋为了达到美观的效果,会使用Photoshop里面的图层混合模式,将颜色以某种混合模式作用到一张灰白底图。这样就不需要每次都给程序员重新绘制图片,不同的地方只需要给一个色号,用上一样的混合模式,就能复刻一样的效果了。
b、游戏里的一些UI模拟静态光效等,在Photoshop里,设计师是拿背景图+花纹图样混合而来,这样的话,程序员就需要在代码里实现这样的图层混合效果。

那么,这种时候,虽然咱程序员并不是设计师,也需要了解一下Photoshop里面的图层混合模式了。

二、常见的混合模式

首先可以看看都有哪些图层混合模式,以及一些简单的描述:
(以下资料由AI大模型总结,如有错误请轻喷哈):

英文名称 中文名称 描述
Normal 正常 在“运算”或“应用图像”时使用该模式完全不加混合地将源图层或通道复制到目标图层,通道,也就是用源完全替代目标。
Dissolve 溶解 把溶解的不透明度作为来自混合色的像素百分比并按此比例把混合色放于基色之上。
Multiply 正片叠底 任何原来每张图像上黑的部分在结果中为黑,任何在原来每张图像上白的或是被清除的部分会让你透过它看到另外一幅图像上相同位置的部分。
Screen 屏幕 它是一个和正片叠底相反的操作过程,在所有的模式里也都有。它所展现的效果是:在图像中白色的部分在结果中也是白色,在图像中黑色的部分在结果中显示出另一幅图像相同位置的部分。
Soft Light 柔光 在这模式下,原始图像与混合色彩,图案或图像进行混合,并依据混合图像决定使原始图像变亮还是变暗,混合图像亮则更亮,暗则更暗。
Hard Light 强光 这没什么好讲的, 在这模式下结果图像是从混合色彩,图案或图像中取的其亮度值。
Overlay 叠加 它是正片叠底(Multipy)和屏幕(Screen)模式的合并。效果:原始图像中黑暗的区域被叠底而光亮的区域就被屏幕化,最亮的部分和阴影部分被一定程度的保存下来。
Darken 暗化 将两个图像中更暗的那个被选来作为结果。
Lighten 亮化 是取两个像素中更亮的作为结果。 上述模式在合并几个蒙版以创建新的蒙版时最有用。
Difference 差值 比较两个图像并给出一个蒙版,这个蒙版在两幅图像完全相同的区域为黑色,并随两幅图像相差越大它越趋向于白色。
Exclusion 排除 与差值模式差不了多少,很相似,除了有强度上的差别外。(注:一个用黑色所作的排除将不会改变任何原始图像)
Add 相加 将原始图像及混合图像的对应像素取出来并加在一起。
Subtract 相减 将原始图像与混合图像相对应的像素提取出来并将它们相减。
Hue 色相 把这些模式放在一起,是因为上述的混合模式可以通过混合色彩,图案或是图像的色相,饱和度,色彩,亮度作为原始图像的色相,饱和度,色彩以及亮度来影响原始图像。
Saturation 饱和度 把这些模式放在一起,是因为上述的混合模式可以通过混合色彩,图案或是图像的色相,饱和度,色彩,亮度作为原始图像的色相,饱和度,色彩以及亮度来影响原始图像。
Color 色彩 把这些模式放在一起,是因为上述的混合模式可以通过混合色彩,图案或是图像的色相,饱和度,色彩,亮度作为原始图像的色相,饱和度,色彩以及亮度来影响原始图像。
Luminosity 亮度 把这些模式放在一起,是因为上述的混合模式可以通过混合色彩,图案或是图像的色相,饱和度,色彩,亮度作为原始图像的色相,饱和度,色彩以及亮度来影响原始图像。

三、实现思路

我们可以实现自定义的shader来实现上面的这些效果。

但是在实现shader之前,我们需要准确的知道这些混合模式对应的实现原理,实质上就是需要知道当我们有两个颜色值的时候,用什么样的数学公式能将他们正确的混合成对应的效果。

这里有一份Adobe早期官方对Blend Mode的说明性pdf文件,里面详细记录了几个常见的混合模式的原理和计算公式,大家取需:

Adobe Blend Modes.pdf

以正片叠底为例,其英文名字Multiply就是乘法的意思,我们可以看到,正片叠底的计算公式为:
在这里插入图片描述
实际shader实现就是一个采样到的颜色相乘的结果。

四、开源项目

这里推荐Github上面一个开源项目:
JL-s-Unity-Blend-Modes

这个开源项目给出了常见的图层混合模式的实现代码。

这个仓库主要是以Grab屏幕像素,然后叠加上一张图片去做的屏幕特效为例,但是我们可以很轻松的将其改造为上文我们提到的用一个颜色和灰白图混合得到效果,也可以轻松的改造成两张图片采样去混合。

这个仓库给我们提供了常见混合模式的shader公式实现,比如一些常见的计算工具函数

#ifndef PHOTOSHOP_BLENDMODES_INCLUDED
#define PHOTOSHOP_BLENDMODES_INCLUDED
 
//
// Ported from https://www.shadertoy.com/view/XdS3RW
//
// Original License:
//
// Creative Commons CC0 1.0 Universal (CC-0) 
//
// 25 of the layer blending modes from Photoshop.
//
// The ones I couldn't figure out are from Nvidia's advanced blend equations extension spec -
// http://www.opengl.org/registry/specs/NV/blend_equation_advanced.txt
// 
// ~bj.2013
//
 
// Helpers
 
const fixed3 l = fixed3(0.3, 0.59, 0.11);
 
/** @private */
float pinLight(float s, float d)
{
   
    return (2.0*s - 1.0 > d) ? 2.0*s - 1.0 : (s < 0.5 * d) ? 2.0*s : d;
}
 
/** @private */
float vividLight(float s, float d)
{
   
    return (s < 0.5) ? 1.0 - (1.0 - d) / (2.0 * s) : d / (2.0 * (1.0 - s));
}
 
/** @private */
float hardLight(float s, float d)
{
   
    return (s < 0.5) ? 2.0*s*d : 1.0 - 2.0*(1.0 - s)*(1.0 - d);
}
 
/** @private */
float softLight(float s, float d)
{
   
    return (s < 0.5) ? d - (1.0 - 2.0*s)*d*(1.0 - d) 
                : (d < 0.25) ? d + (2.0*s - 1.0)*d*((16.0*d - 12.0)*d + 3.0) 
                : d + (2.0*s - 1.0
  • 21
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

留待舞人归

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值