1

What causes this kind of tearing in GLSL? I noticed the same kind of thing going on at the teamLab art exhibit in Tokyo. Notice the imperfections in the edges.

enter image description here

Here is my fragment shader:

#version 300 es
precision highp float;
precision highp int;

uniform float time;

in vec2 v_pos;

out vec4 FragColor;

vec4 measureFloat(float measure_number_float){
    return vec4(
        float( mod ( measure_number_float, 60.0 ) ) / 60.0,
        float( mod ( measure_number_float, 3600.0 ) ) / (60.0 * 60.0),
        float( mod ( measure_number_float, 216000.0 ) ) / (60.0 * 60.0 * 60.0),
        1.0
    );
}

vec4 measureInt( int measure_number_int ){
    return vec4(
        float( measure_number_int % 60 ) / 60.0,
        float( measure_number_int % 3600 ) / (60.0 * 60.0),
        float( measure_number_int % 216000 ) / (60.0 * 60.0 * 60.0),
        1.0
    );
}

vec4 sampleColor(){

    int x_coord_i, y_coord_i = 0;
    float x_coord_f, y_coord_f = 0.0;

    float res_mul_x_f = 20.0; // mul = multiplier
    float res_mul_y_f = 20.0; // mul = multiplier

    x_coord_i = int(v_pos.x * res_mul_x_f);
    y_coord_i = int(v_pos.y * res_mul_y_f);

    // return back to float:
    x_coord_f = float(x_coord_i) / res_mul_x_f;
    y_coord_f = float(y_coord_i) / res_mul_y_f;

    int cell_number = y_coord_i * int(res_mul_x_f) + x_coord_i;

    // return measureInt(cell_number);
    return measureFloat(float(cell_number));

}

void main(void) {

    FragColor = sampleColor();

}

This bug was present in both Chrome and Firefox, using both the measureInt function and the measureFloat function. I also don't know what to call this, so if there is a technical name for it, please do inform.

Steven2163712
  • 169
  • 2
  • 12
  • If someone can suggest a better title, or any other info to avoid downvotes, please let me know. – Steven2163712 Oct 31 '18 at 00:01
  • 1
    Looks like *precision* issues to me. Given the issue is in your shader it's got nothing to with Chrome or Firefox and everything to do with your GPU and GPU driver. I wouldn't call it a bug. [Precision issues are just part of computers in general that you have to decide how to deal with](https://stackoverflow.com/questions/2100490/floating-point-inaccuracy-examples). – gman Oct 31 '18 at 04:35
  • This Q&A might be useful: https://stackoverflow.com/questions/47388074/webgl-float-modulus-behaviour/47422761#47422761 – gman Oct 31 '18 at 04:42
  • I notice "cell_number". Are you trying to pull data from a texture? If so maybe use [`texelFetch`](https://www.khronos.org/registry/OpenGL-Refpages/es3.0/html/texelFetch.xhtml) instead of `texture`? – gman Oct 31 '18 at 04:47

0 Answers0