0

I'm trying to draw some lines with webgl, but the lines are not consistent width/color. You can see what I mean in the screenshot.

Lines screenshot

The vertices I'm using:

let vertices = [
    0, -1,
    0, 1,

    -1, 0,
    1, 0,

    0.02, -1,
    0.02, 1,

    -0.02, -1,
    -0.02, 1,

    -1, 0.02,
    1, 0.02,

    -1, -0.02,
    1, -0.02
];

Vertex Shader

attribute vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0, 1);
}

Fragment Shader

void main() {
    gl_FragColor = vec4(1, 1, 1, 1);
}

Can someone explain why this is happening and perhaps point me in the right direction for making these lines look the same?

Thanks in advance!

gman
  • 100,619
  • 31
  • 269
  • 393
boydbueno
  • 23
  • 4
  • Looks like you're lines are anti-aliased, i.e. they bleed / squash out over multiple pixels in case they're not pixel exact. – BeyelerStudios Feb 28 '17 at 23:53
  • That makes sense. When I use pixels and convert that to clipspace it's looking how I expect it to do. Thanks for the response. :) – boydbueno Mar 01 '17 at 01:15
  • Be aware that [you basically can not use WebGL's `LINES` to draw anything other than a 1pixel wide line](http://stackoverflow.com/a/41911471/128511). If you want wider lines you'll need to [use other techniques](https://mattdesl.svbtle.com/drawing-lines-is-hard). – gman Mar 01 '17 at 07:33

0 Answers0