seven_sword 发表于 2023-4-1 19:56:48

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

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

DUO酱 发表于 2023-4-1 19:57:31

色相偏移 Shader 的实现思路可以分为以下几个步骤:

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

2. 将 RGB 值转换为 HSV 值
将 RGB 值转换为 HSV 值可以使用一些常见的算法,例如下面这段代码:


float3 RGBtoHSV (float3 c)
{
    float4 K = float4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    float4 p = mix(float4(c.bg, K.wz), float4(c.gb, K.xy), step(c.b, c.g));
    float4 q = mix(float4(p.xyw, c.r), float4(c.r, p.yzx), step(p.x, c.r));

    float d = q.x - min(q.w, q.y);
    float e = 1.0e-10;
    return float3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}


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

3. 修改 HSV 值的 H 分量
将得到的 HSV 值的 H 分量加上一个偏移量即可。可以通过 Shader 属性来传递偏移量,例如:


Properties
{
    _HueShift ("色相偏移", Range(-180, 180)) = 0
}

SubShader
{
    Pass
    {
      CGPROGRAM
      #pragma vertex vert
      #pragma fragment frag

      // ...

      uniform float _HueShift;

      // ...

      fixed4 frag (v2f i) : SV_Target
      {
            // ...

            hsv.x += _HueShift / 360.0;

            // ...

            return fixed4(hsv_to_rgb(hsv), c.a);
      }

      // ...
    }
}


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

4. 将 HSV 值转换回 RGB 值
最后需要将得到的 HSV 值转换回 RGB 值,可以使用下面这段代码:


float3 hsv_to_rgb (float3 c)
{
    float4 K = float4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    float3 p = abs(fmod(c.xxx + K.xyz, 1.0));
    float3 q = abs(fmod(c.xxx + K.yzw, 1.0));
    float3 t = fmin(p, q);
    float3 rgb = c.z * lerp(t, fmax(p, q), 6.0 * t - 1.0);
    return rgb;
}


这样实现的色相偏移 Shader 可以应用在任何需要修改色相的场景中,例如调整角色服装颜色、增加游戏氛围等。

admin 发表于 2023-4-1 20:01:09

AI回答得挺好的了{:2_37:}
思路基本就是这样

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 值,方便进行各种颜色操作,包括色相偏移等。
页: [1]
查看完整版本: 求助:关于 色相偏移 shader的实现思路