opengl-es - 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 中被强制禁用。