Creating a 2D grid using openGL and vertex and fragment shaders

Question

OK so i have a really big square (grid) that I have made up using triangles, then applied a heightmap to bump it. What im trying to do now is get grid lines on it. I have figured out a way to do this but this results in 33 if statements in the fragment shader just for x and then another 33 for y. I have been told I can use what im doing now and implement it slightly differently (using some GLSL function) to only need 1 or 2 if statements. This is my current code (not all finished but gives you the idea of what im doing.)

#version 330

uniform sampler2D texture;

in vec2 texCoord;

layout (location=0) out vec4 fragColour;



void main(void) {

vec4 newColor;
vec2 line = texCoord * 32; // makes texCoords easier to number (as divided by 32 in the C++array)


if(line.x > 0 && line.x < 0.9)
{
    newColor = vec4(1.0,1.0,1.0,1.0);
}
else if(line.x > 1 && line.x < 1.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 2 && line.x < 2.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 3 && line.x < 3.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 4 && line.x < 4.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 5 && line.x < 5.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 6 && line.x < 6.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 7 && line.x < 7.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 8 && line.x < 8.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 9 && line.x < 9.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 10 && line.x < 10.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 11 && line.x < 11.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 12 && line.x < 12.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 13 && line.x < 13.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 14 && line.x < 14.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 15 && line.x < 15.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 16 && line.x < 16.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 17 && line.x < 17.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 18 && line.x < 18.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 19 && line.x < 19.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 20 && line.x < 20.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 21 && line.x < 21.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 22 && line.x < 22.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 23 && line.x < 23.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}
    else if(line.x > 24 && line.x < 24.9)
{
     newColor = vec4(1.0,1.0,1.0,1.0);
}

else
{
    newColor = vec4(0.0,0.0,0.0,1.0);
}

fragColour = newColor;
}

@Mike: FYI, you do not edit questions to put the *answers* into them. Answers go down below, questions go above. You accepted an answer, which means the question is answered to your satisfaction. You don't need to put his solution in your question, because then it confuses people as to what the question ever was to begin with. — Nicol Bolas, Nov 15 '12 at 19:37
Well thats just a waste of creating a new thread to a related problem, but it doesnt matter now anyway — Mike Tarrant, Nov 15 '12 at 23:49

SigTerm · Accepted Answer · 2012-11-15T20:25:58.520

YOu shouldn't use control flow (that depedns on something other than uniform) unless it is absolutely necessary (at least that was standard recommendation last time I wrote a glsl shader). In your case control flow isn't needed. Use step, smoothstep, mix and multiplication to avoid control flow.

Your "if/else" segment of code could be implemented using something like this (untested code):

fragColor = mix(vec4(0.0, 0.0, 0.0, 0.0), vec4(1.0, 1.0, 1.0, 1.0), step(fract(line.x), 0.9));

Or using texture lookup. Texture lookup might be faster than numerical calculation, depending on hardware (and texture size)

Please note that using "step" might produce jagged non-antialiased edges and noise/moire pattern on faraway surfaces. "OpenGL orange book" ("OpenGL shading language") had some examples that should explain how to deal with it. However, using texture lookup might be easier. For a start, you could try using "smoothstep" instead of "step".

Or, alternatively, you could simply redraw entire landscape in wireframe mode on top of solid rendered landscape.

Thanks very much for your help. i used that line and i got an error with frac error C7506: OpenGL does not define the global function frac — Mike Tarrant, Nov 15 '12 at 17:40
I believe I have solved it using fract instead of frac, thanks very much it works a treat :D — Mike Tarrant, Nov 15 '12 at 17:49

score 0 · Answer 2 · answered Nov 15 '12 at 17:28

0

This is easily done by simply throwing down a projective texture. It wouldn't even have to "project"; simply calculate texture coordinates based on your line. In fact, those very much appear to be your texture coordinates. So just create a texture that has white in the inside and an appropriate width of black on the outside. You can even make it single-channel to save memory.

You will need the texture to repeat in the S and T directions, of course.

answered Nov 15 '12 at 17:28

Nicol Bolas

449,505
63
781
982

Thanks for your feedback, I am trying to not use a texture for this exercise and just get it to use the colour I want defined in my fragment shader. Thanks anyway :) – Mike Tarrant Nov 15 '12 at 17:42

Creating a 2D grid using openGL and vertex and fragment shaders

2 Answers2