三.js Shader 颜色阈值

Question

我不知道如何正确地说，总的来说，本质是，我找到了一个bloom shader：https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html

它工作得很好，但对我来说不是必需的，它只分配明亮区域和高光。

我需要强调的不是亮度，我需要强调颜色的强度。

例如：

在图片中我突出显示了一个应该有选择的圆圈，有想法如何做到这一点？

提前致谢）

Answer 1

您可以使用RGBtoHSV 函数来检查像素的色调、饱和度和值，然后取其与实际颜色的距离来决定是否开花

来自this answer：

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

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

因此

// PSEUDO CODE!

uniform vec3 targetHSV;   // supply hue, saturation, value in 0 to 1 range for each. 
                          // Red = 0,1,1

vec3 color = texture2D(renderTarget, uv).rgb;
vec3 hsv = rgb2hsv(color);
vec3 hueDist = abs(hsv.x - targetHSV.x);

// hue wraps
if (hueDist > 0.5) {
  hueDist = 1. - hueDist;
}

// 2x for hue because it's at most .5 dist?
float dist = length(vec3(hueDist * 2., hsv.yz - targetHSV.yz));

// now use dist < threshold or smoothstep or something to decide
// whether value contributes to bloom