WebGL 锯齿状边缘（抗锯齿）

Question

所以我目前只使用顶点和颜色数据（没有索引，没有纹理）渲染我的地形，也许当我稍后添加纹理时，问题会自行解决。无论是远距离还是近距离，我似乎都在地形边缘与背景相接的地方出现锯齿状边缘。

看起来这个问题可以通过使用抗锯齿/多重采样来解决，但我的印象是，通过使用默认参数设置 WebGL 上下文，它将默认使用抗锯齿，所以这应该不是问题。

---

问题如下：

---

这是我的上下文初始化代码：

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);

通过不向 setupWebGL 传递任何其他选项，我假设它将使用使用抗锯齿的默认设置...

---

这是适用的初始化代码：

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);

---

以下是适用的抽奖代码：

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

在我使用的硬件（MacBook Air、Intel HD 4000）上，WebGL 中似乎强制禁用了抗锯齿功能。