three.js所着色颜色阈值

Question

我不知道如何正确地说，在一般情况下，实质是，我发现了一个盛开的着色器：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