渲染為FBO紋理時，紋理坐標略有偏離

Question

我正在研究一個WebGL OpenGL ES項目，該項目將場景渲染為紋理，然后使用該紋理渲染至窗口。

我注意到這會導致紋理邊緣出現奇怪的閃爍。 當我將項目還原為直接渲染到窗口時，閃爍消失了。

FBO設置為與窗口相同的大小，並且將紋理繪制到窗口像素中。

是什么導致這種情況發生？ 它可以修復嗎？ 我在FBO紋理上使用GL_NEAREST，在所有其他紋理上使用GL_LINEAR。 我寧願不使用GL_CLAMP_TO_EDGE，因為那樣會導致其他問題。

[

幀緩沖創建

/* Returns true if a framebuffer object is created */
Display.prototype.createFramebuffer = function(name) {
  var gl = this.gl; // Sanity Save

  var size = 1024;

  var fb = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  fb.width = size;
  fb.height = size;

  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, fb.width, fb.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

  var rb = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, fb.width, fb.height);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rb);

  if(gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) { return false; }

  this.fbo[name] = {fb: fb, rb: rb, tex: tex};

  gl.bindTexture(gl.TEXTURE_2D, null);
  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);

  return true;
};

繪制場景之前

/* Draw Geometry */
gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo.world.fb); // Enable world framebuffer
gl.viewport(0, 0, this.window.width, this.window.height); // Resize to canvas
gl.clearColor(0.5, 0.5, 0.5, 1.0);  // Opaque grey backdrop

Answer 1

在朝着正確的方向（以及大量的反復試驗）推動后，我找出了問題所在。

發生這種情況的原因是，渲染到FBO紋理時禁用了硬件抗鋸齒功能。 為了修復它，您需要實現自己的AA。

為了解決這個問題，我嘗試使用粗略的MSAA后着色器，同時將FBO渲染提升到窗口分辨率的2倍，從而將閃爍降低到幾乎不明顯的水平。

FXAA可能是另一個不錯的解決方案，但我無法親自使用它。

如果有更好的解決方法，請告訴我！