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