3

そのため、現在、頂点とカラー データのみ (インデックスもテクスチャもなし) を使用して地形をレンダリングしていますが、後でテクスチャを追加すると、問題が解決する可能性があります。遠距離でも近距離でも、地形の端が背景と接する部分がぎざぎざになっているように見えます。

この問題はアンチエイリアシング/マルチサンプリングを使用することで解決できるようですが、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());
4

1 に答える 1

1

アンチエイリアシングは、使用していたハードウェア（MacBook Air、Intel HD 4000）のWebGLで強制的に無効になっているようです。

于 2013-02-07T07:27:06.190 に答える