微信扫一扫 分享朋友圈

已有 1415 人浏览分享

开启左侧

求助:关于 色相偏移 shader的实现思路

[复制链接]
1415 5

非科班小白学习中,求大佬指点,如果自己琢磨出来了也会发在上面哈

评分

参与人数 1创新分 +2 技术分 +2 艺术分 +2 收起 理由
admin + 2 + 2 + 2 赞一个!

查看全部评分

评论 5

DUO酱  咒语学徒  发表于 2023-4-1 19:57:31 | 显示全部楼层
色相偏移 Shader 的实现思路可以分为以下几个步骤:

1. 获取原始颜色值
在 Shader 中,需要获取原始颜色的 RGB 值。可以使用 Unity 内置的变量 `fixed4 frag (v2f i) : SV_Target` 来获取像素点的颜色。

2. 将 RGB 值转换为 HSV 值
将 RGB 值转换为 HSV 值可以使用一些常见的算法,例如下面这段代码:
  1. float3 RGBtoHSV (float3 c)
  2. {
  3.     float4 K = float4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
  4.     float4 p = mix(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));
  5.     float4 q = mix(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));
  6.     float d = q.x - min(q.w, q.y);
  7.     float e = 1.0e-10;
  8.     return float3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
  9. }
复制代码

其中 `c` 为 RGB 值,返回值为 HSV 值。

3. 修改 HSV 值的 H 分量
将得到的 HSV 值的 H 分量加上一个偏移量即可。可以通过 Shader 属性来传递偏移量,例如:
  1. Properties
  2. {
  3.     _HueShift ("色相偏移", Range(-180, 180)) = 0
  4. }
  5. SubShader
  6. {
  7.     Pass
  8.     {
  9.         CGPROGRAM
  10.         #pragma vertex vert
  11.         #pragma fragment frag
  12.         // ...
  13.         uniform float _HueShift;
  14.         // ...
  15.         fixed4 frag (v2f i) : SV_Target
  16.         {
  17.             // ...
  18.             hsv.x += _HueShift / 360.0;
  19.             // ...
  20.             return fixed4(hsv_to_rgb(hsv), c.a);
  21.         }
  22.         // ...
  23.     }
  24. }
复制代码

这样就可以通过修改 `_HueShift` 属性来控制色相的偏移了。

4. 将 HSV 值转换回 RGB 值
最后需要将得到的 HSV 值转换回 RGB 值,可以使用下面这段代码:
  1. float3 hsv_to_rgb (float3 c)
  2. {
  3.     float4 K = float4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
  4.     float3 p = abs(fmod(c.xxx + K.xyz, 1.0));
  5.     float3 q = abs(fmod(c.xxx + K.yzw, 1.0));
  6.     float3 t = fmin(p, q);
  7.     float3 rgb = c.z * lerp(t, fmax(p, q), 6.0 * t - 1.0);
  8.     return rgb;
  9. }
复制代码

这样实现的色相偏移 Shader 可以应用在任何需要修改色相的场景中,例如调整角色服装颜色、增加游戏氛围等。
admin  管理员  发表于 2023-4-1 20:01:09 | 显示全部楼层
AI回答得挺好的了
思路基本就是这样
seven_sword  魔法画童  发表于 2023-4-1 20:06:29 | 显示全部楼层
感谢大佬们的帮助!
seven_sword  魔法画童  发表于 2023-4-1 21:45:34 | 显示全部楼层
DUO酱 发表于 2023-4-1 19:57
色相偏移 Shader 的实现思路可以分为以下几个步骤:

1. 获取原始颜色值

可以解释一下 从 RGB 转换到 HSV 的原理吗
DUO酱  咒语学徒  发表于 2023-4-1 21:46:18 | 显示全部楼层
从 RGB 转换到 HSV 的过程可以理解为从三维立体颜色空间中的一个点,转换到一个二维圆柱坐标系中的一个点,具体原理如下:

RGB 颜色表示了一个物体在红、绿、蓝三个通道上的亮度值,每个通道的值都在 0 到 255 之间,代表了该颜色通道上的亮度和强度。HSV 颜色模型中的颜色表示了颜色的三个属性:色调(Hue)、饱和度(Saturation)和明度(Value),这三个属性是描述颜色不同方面的参数。

将 RGB 色彩空间映射到 HSV 中,需要进行以下步骤:

1. 将 RGB 值分别除以 255,使其范围变为 0 到 1。
2. 找到 RGB 值中最大和最小值,计算出它们的差距,这个值就是亮度(Value)。
3. 如果最大值等于最小值,则该颜色是灰色,色调和饱和度都为 0,直接返回即可。
4. 计算饱和度:饱和度等于差距除以最大值(亮度),也就是说,如果所有颜色通道的值都相等,则饱和度为 0,否则就有一个非零的值。
5. 根据最大和最小值的差值,计算色调:如果红色通道的值最大,则色调等于绿色通道和蓝色通道之间的差值除以最大值和最小值之间的差值。如果绿色通道的值最大,则色调等于 2 加上蓝色通道和红色通道之间的差值除以最大值和最小值之间的差值。如果蓝色通道的值最大,则色调等于 4 加上红色通道和绿色通道之间的差值除以最大值和最小值之间的差值。然后需要将结果乘以 60 度,这样可以将它映射到标准的色相范围内。
6. HSV 值的顺序是(Hue, Saturation, Value),其中 Hue 的值的范围是 0 到 360 度,Saturation 和 Value 的值的范围是 0 到 1.

通过以上步骤,就可以将 RGB 值转换成 HSV 值,方便进行各种颜色操作,包括色相偏移等。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

1

主题
精彩推荐
热门资讯
网友晒图
图文推荐
  • iOS App

  • 安卓App

Archiver|手机版|小黑屋|技你太美101

GMT+8, 2024-6-29 10:40 , Processed in 0.095028 second(s), 31 queries .

Powered by 技你太美101

© 2024 JNTM101 Team