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