如何判断片段的颜色是否为白色?

Fra*_*act 3 graphics opengl-es glsl webgl three.js

我的场景中有很多圈子(白色圆圈和不同颜色的圆圈).我想只模糊白圈.(在我的情况下,白色表示(1,1,1).)

我的问题是:我应该如何使用片段着色器选择并模糊白色片段?

我想在GLSL中做这样的事情:

if (my_current_fragment's_color == white)
{blur current fragment;}
else
{do not blur current fragment}
Run Code Online (Sandbox Code Playgroud)

(我有一个有效的模糊效果,但它不适当地模糊了整个场景,因为我根据片段的颜色无法在我的代码中做出决定.)

我该怎么做?GLSL语言中上述代码的完全匹配是什么?如何确定片段的颜色是否为白色?你们有什么想法吗?


如果您需要,这是我的代码:

    vertexShader: [
        //"#define KERNEL_SIZE 25.0",
        "uniform vec2 uImageIncrement;",
        "varying vec2 vUv;",
        "void main() {",
        "vUv = uv - ( ( KERNEL_SIZE - 1.0 ) / 2.0 ) * uImageIncrement;",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join("\n"),
    fragmentShader: [
        //"#define KERNEL_SIZE 25",
        "uniform float cKernel[ KERNEL_SIZE ];",
        "uniform sampler2D tDiffuse;",
        "uniform vec2 uImageIncrement;",
        "varying vec2 vUv;",
        "void main() {",
            "vec2 imageCoord = vUv;",
            "vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
            "for( int i = 0; i < KERNEL_SIZE; i ++ ) {",


            "sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
            //THE ABOVE LINE SHOULD BE RUN FOR WHITE FRAGMENTS ONLY. BUT HOW?


            "imageCoord += uImageIncrement;",
            "}",
            "gl_FragColor = sum;",
        "}"
Run Code Online (Sandbox Code Playgroud)

Die*_*Epp 8

这将是非常困难的,你将不得不找出一些妥协,除非你可以将白色圆圈渲染到另一个帧缓冲区开始.

让我们假设你从这开始.

在桃红色三角的白色圈子有蓝色背景

如果您只将模糊内核应用于白色像素,您将得到:

与在蓝色背景的桃红色三角的被弄脏的内部的白色圈子

由于蓝色像素未获得模糊内核,因此白色像素不会渗入蓝色.只有粉红色和蓝色像素可以渗入白色.

因此,您尝试将图像分为白色部分和非白色部分:

白色圆圈 在桃红色三角的黑圈子有蓝色背景

然后,您可以分别模糊白色部分,并重新组合(以多个步骤,或全部在同一着色器中).但你必须弄清楚要重新组合它的内容.如果将其与原始图像重新组合,则硬边白色仍将存在.如果您将图像与仅包含非白色部分的图像重新组合,则会获得坚硬的黑色边缘.

与光环的白色圈子在桃红色三角有蓝色背景 白色圆圈与光环和黑色边缘在粉红色三角形与蓝色背景

解决方案

  • 您可以将白色圆圈渲染为单独的纹理,然后将其模糊,并将其叠加在其他所有内容之上.

  • 您可以缩放内核以使内核模糊"向外"(扩张),因此当您在黑色背景上模糊白色圆圈时,白色像素保持白色.这将消除边缘.

  • 您可以模糊图像的一个区域,但不会完全等于白色圆圈.例如,您可以将模糊的白色圆圈用作Alpha蒙版,以在模糊图像和清晰图像之间进行混合.

  • 您可以找到一种方法,使白圈看起来模糊.