Shader displaying glitchy

Processing
1

I have written a shader. In VSCode it looks like the one on the right.
But on processing, it looks glitchy. Only the bottom left ‘block’ looks clean.

combined
combined1433×670 21.1 KB

1 Like
2

Not knowing what math is being done in your shader, we can only guess.
At a glance, perhaps the VS version provides a different precision qualifier.
To set the default precision, add to the top of your shader:

precision highp float; // alternate mediump or lowp
precision highp int;

Take a look here for details on those.

It may also help to post your code on this forum. :wink:

1 Like
3 
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif
uniform float u_time;
uniform vec2 u_resolution;
vec3 colorA = vec3(0.0314, 0.7922, 0.0078);
vec3 colorB = vec3(0.2824, 0.0039, 0.7333);
void main() 
{
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    // const float width = u_resolution.x;
    // const float height = u_resolution.y;
    const float divisions = 40.0;
    const float x_size = 6.0;
    const float y_size = 24.0;
    float x;
    for(float c = 1.0; c < divisions; c+=(x_size+2.0)) {
        x += step(c/divisions, st.x);
    }
    for(float c = 1.0+x_size; c < divisions; c+=(x_size+2.0)) {
        x -= step(c/divisions, st.x);
    }
    float y;
    for(float c = 1.0; c < divisions; c+=(y_size+2.0)) {
        y += step(c/divisions, st.y);
    }
    for(float c = 1.0+y_size; c < divisions; c+=(y_size+2.0)) {
        y -= step(c/divisions, st.y);
    }
    vec3 color = vec3(x*y);
    vec3 pct = vec3(st.y)*(sin(u_time));
    color = color * mix(colorA, colorB, pct);
    gl_FragColor = vec4(color, 1.0);
}

@noahbuddy thank you for replying! As you suggested, I changed the mediump to highp but I am still getting the same results.
By any means, would this be because I am using the step function?

1 Like
4

It’s because you’re not initializing x or y. Set them to 0.0 initially and it will work :slight_smile:

BTW. you can make a grid without any for loops.

1 Like
5

That worked! Thanks :smiley:
The grid shader code is pretty neat. Next up, fract()!