Question

我正在写一个小的着色器，它在Three.js中生成一个锥形渐变。这一切都运作良好我通过添加一点点噪音消除了条带，所以在gerneral中渐变看起来不错。我只有在2个渐变颜色的边缘我得到丑陋的别名的问题。见图片

然后我尝试在我的片段着色器中平滑边缘，这很好但不在渐变的内部。

我知道我可以通过渲染更高分辨率的场景并将其缩小或应用后效应而逃脱但我想知道是否有更好的方法。

一般来说，我不是着色器写作专家或者是three.js，所以也许你有一些输入来优雅地解决这个问题。

感谢您的帮助，这里有一个小提琴和fragement着色器代码。

<script id="fragmentShader" type="x-shader/x-fragment">
        uniform vec4 colour1;
        uniform vec4 colour2;
        uniform sampler2D texture;
        varying vec3 vUv;

        void main() {
            precision highp float;

            //get Angle for textureCoordinate
            float angleDeg = atan(vUv.y - 0.5,vUv.x - 0.5) * 180.0 / 3.147;
            if (angleDeg < 0.0){
                angleDeg = angleDeg+360.0 ;
            }

            //Generate Gradient
            float lerpValue = angleDeg/360.0;
            vec4 colour = mix(colour1,colour2,lerpValue);

            //My approach to smooth the edge works well on the outside but
            //not on the inside
            if(lerpValue>0.9995){
                float smoot = 1.0-lerpValue;
                smoot = smoot*2000.00;
                vec4 lerpColor = mix(colour1,colour2,0.9995);
                colour = mix(colour1,lerpColor,smoot);

            }
            ///done with gradient 

            //apply noise from noise texture to eliminate banding
            vec2 textureCoord = vUv.xy;
            vec4 noise = texture2D(texture,textureCoord.xy);
            colour.xyz += mix(-0.05, 0.05, noise.x);
            gl_FragColor = colour;

        }
    </script>

Answer 1

首先，您需要一种更准确的方法来计算抗锯齿。支持lerpLimit（你的魔法值0.9995）

的任何值的等式

    //Generate Gradient
    float lerpValue = angleDeg/360.0;

    float lerpLimit = 0.9995;
    float invDiff = lerpLimit/(1.0-lerpLimit);

    if(lerpValue>lerpLimit){
      lerpValue = invDiff - lerpValue*invDiff;
    }

    vec4 colour = mix(colour1,colour2,lerpValue);

    //My approach to smooth the edge works well on the outside but
    //not on the inside
    // ....

现在你可以根据距离像素/中心调制lerpLimit，以便具有恒定厚度的抗锯齿渐变

    //Generate Gradient
    float lerpValue = angleDeg/360.0;

    // the constant thickness of the antialias gradient
    // along the seam
    float limit = .02;

    float lerpLimit = 1.0 - limit / (6.283185*length(vUv.xy - 0.5));

    // avoid negative limit at the center 
    lerpLimit = max( lerpLimit, 0.0 );

    float invDiff = lerpLimit/(1.0-lerpLimit);

    if(lerpValue>lerpLimit){
      lerpValue = invDiff - lerpValue*invDiff;
            }

    vec4 colour = mix(colour1,colour2,lerpValue);

    //My approach to smooth the edge works well on the outside but

片段着色器中的抗锯齿三js

1 个答案: