在片段着色器中为一组片段着色

时间:2021-01-17 14:08:48

标签: opengl-es glsl shader webgl fragment-shader

我的目标是为一组由两点之间的插值确定的片段着色。在我写的代码下面,它没有用。。

我也添加了一些评论,可能是我犯了一些错误或我误解的东西。

感谢您的帮助。

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;

void main(){
    vec2 position = gl_FragCoord.xy / u_resolution;
    vec4 color = vec4(0.97, 0.1, 0.53, 1.0);
    
    // center (hopefully)
    vec2 P1 = vec2(0.0,0.0);
    // top right
    vec2 P2 = vec2(1.0,1.0);
    
    // generate 100 points between P1...P2
    for(float i = 0.0; i < 1.0; i+=0.01) {
        float lerpX = mix(P1.x, P2.x, i);
        float lerpY = mix(P1.y, P2.y, i);
        vec2 interpolatedPoint = vec2(lerpX, lerpY);

        // check if current fragment is one of the
        // interpolated points and color it
        if (position.x == interpolatedPoint.x) {
            gl_FragColor = color;
        } else {
            discard;
        }
    }
}

2 个答案:

答案 0 :(得分:1)

position.x == interpolatedPoint.x 是浮点比较,几乎从不评估为真。您的代码会丢弃所有片段。实现浮点比较。计算两个值差的绝对值,并与一个epsilon进行比较:

if (distance(position, interpolatedPoint) <= 0.01) {
    gl_FragColor = color;
}

答案 1 :(得分:1)

工作解决方案

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 u_resolution;

void main(){
    vec2 position = gl_FragCoord.xy / u_resolution;
    vec4 color = vec4(0.97, 0.1, 0.53, 1.0);
    
    // center (hopefully)
    vec2 P1 = vec2(0.0,0.0);
    // top right
    vec2 P2 = vec2(1.0,1.0);
    
    // generate 100 points between P1...P2
    for(float i = 0.0; i < 1.0; i+=0.01) {
        float lerpX = mix(P1.x, P2.x, i);
        float lerpY = mix(P1.y, P2.y, i);
        vec2 interpolatedPoint = vec2(lerpX, lerpY);

        // check if current fragment is one of the
        // interpolated points and color it
        if (distance(position, interpolatedPoint) <= 0.01) {
            gl_FragColor = color;
        }
    }
}