WPF应用中使用FXC着色器实现目标色轮的技术问题

问题概述 #

我需要在WPF应用中使用FXC着色器实现目标色轮效果，但当前HLSL代码生成的效果存在以下问题：

• 绿色角（当前左下）需移至左上
• 蓝色角（当前左上）需移至右上
• 右下角应为红色，左下角应为灰色
• 色轮整体样式与目标不符

原HLSL代码 #

// ColorWheelEffect.hlsl
#define PI 3.141592653f
#define value 1.0f

float4 main(float2 uv : TEXCOORD) : COLOR {
    uv = 2 * uv - 1;
    float saturation = length(uv);
    float hue = 3 * (PI - atan2(uv.y, -uv.x)) / PI;
    float chroma = value * saturation;
    float second = chroma * (1 - abs(hue % 2.0 - 1));
    float m = value - chroma;
    float3 rgb;
    if (hue < 1)
        rgb = float3(chroma, second, 0);
    else if (hue < 2)
        rgb = float3(second, chroma, 0);
    else if (hue < 3)
        rgb = float3(0, chroma, second);
    else if (hue < 4)
        rgb = float3(0, second, chroma);
    else if (hue < 5)
        rgb = float3(second, 0, chroma);
    else
        rgb = float3(chroma, 0, second);
    return float4(rgb + m, saturation < 1);
}

修正后的HLSL代码 #

// ColorWheelEffect.hlsl
#define PI 3.141592653f
#define value 1.0f

float4 main(float2 uv : TEXCOORD) : COLOR {
    uv = 2 * uv - 1;
    float saturation = length(uv);
    
    // 调整色相计算，修正旋转方向和起始角度
    float hue = 3 * (atan2(uv.x, uv.y) + PI) / PI;
    
    float chroma = value * saturation;
    float second = chroma * (1 - abs(hue % 2.0 - 1));
    float m = value - chroma;
    float3 rgb;

    // 重新映射色相区间对应的RGB值，匹配目标颜色位置
    if (hue < 1)
        rgb = float3(0, chroma, second);       // 左上：绿色系
    else if (hue < 2)
        rgb = float3(0, second, chroma);       // 右上：蓝色系
    else if (hue < 3)
        rgb = float3(second, 0, chroma);       // 右中：蓝红过渡
    else if (hue < 4)
        rgb = float3(chroma, 0, second);       // 右下：红色系
    else if (hue < 5)
        rgb = float3(chroma, second, 0);       // 左中：绿黄过渡
    else
        rgb = float3(second, chroma, 0);       // 左下过渡区（后续转为灰色）

    // 处理左下角灰色区域：当uv.x < 0且uv.y < 0时，返回灰色
    if (uv.x < 0 && uv.y < 0) {
        rgb = float3(m, m, m);
    }

    // 保持alpha通道：仅色轮内部（saturation < 1）不透明
    return float4(rgb + m, saturation < 1);
}

关键修改说明 #

• 色相计算调整：将atan2(uv.y, -uv.x)改为atan2(uv.x, uv.y)并调整角度偏移，让色轮顺时针旋转，起始角度匹配目标布局，解决颜色角的位置偏移问题。
• RGB映射重构：重新分配每个色相区间对应的RGB组合，确保左上为绿色、右上为蓝色、右下为红色。
• 左下角灰色区域处理：通过判断UV坐标的左下象限（uv.x < 0 && uv.y < 0），直接将该区域设置为灰色，满足需求。
• 色轮样式优化：调整后的色相区间映射让色轮的色彩过渡更符合目标样式。

内容的提问来源于stack exchange，提问作者Blazej