WebGL Jagged Edges (Anti-Aliasing)

Question

So I'm currently rendering my terrain using vertices and color data only (no indices, no textures), and maybe when I add textures in later the problem will fix itself. Both at a distance and close up, I seem to be getting jagged edges where the edge of the terrain meets the background.

It seems like this problem could be fixed by using antialiasing/multisampling, but I was under the impression that by setting up a WebGL context with default parameters, it will use antialiasing by default so this shouldn't be a problem.

---

Here's what the problem looks like:

---

Here's my context init code:

gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
  return;
}
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);

By passing no additional options to setupWebGL, I'm assuming it'll use the default of using antialiasing...

---

Here's the applicable init code:

this.buffers['Position'] = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[attrib]);
gl.bufferData(gl.ARRAY_BUFFER, this.getData(attrib), gl.STATIC_DRAW);

this.buffers['Color'] = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[attrib]);
gl.bufferData(gl.ARRAY_BUFFER, this.getData(attrib), gl.STATIC_DRAW);

---

Here's the applicable draw code:

gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers['Position']);
gl.vertexAttribPointer(
  this.shader.getAttribute('Position'),
  this.getItemSize('Position'),
  gl.FLOAT,
  false,
  0,
  0
);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers['Color']);
gl.vertexAttribPointer(
  this.shader.getAttribute('Color'),
  this.getItemSize('Color'),
  gl.FLOAT,
  false,
  0,
  0
);
gl.drawArrays(gl.TRIANGLES, 0, this.getNumItems());

Answer 1

Anti-aliasing seems to be force-disabled in WebGL on the hardware I was using (MacBook Air, Intel HD 4000).