WebGL锯齿状边缘（抗锯齿）

Question

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

似乎可以通过使用抗锯齿/多重采样来修复此问题，但我的印象是，通过使用默认参数设置WebGL上下文，默认情况下它将使用抗锯齿，因此这不应该是一个问题。 / p>

---

以下是问题所在：

---

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

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中，抗锯齿似乎被强制禁用。