Javascript 渲染到FBO纹理时，纹理坐标稍微关闭

我正在处理一个WebGL OpenGL ES项目，该项目将我的场景渲染为纹理，然后使用该纹理渲染到窗口

我注意到这会导致纹理边缘出现奇怪的微光。当我将项目还原为直接渲染到窗口时，微光消失

FBO设置为与窗口相同的大小，纹理以像素为单位绘制到窗口像素

是什么导致了这种情况？它能修好吗？我在FBO纹理上使用最近的GL_，在所有其他纹理上使用线性GL_。我宁愿不使用GL_夹紧到_边缘，因为这会导致其他问题

[

帧缓冲区创建

/* 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

在向正确的方向推进（以及大量的尝试和错误）之后，我发现了问题所在

发生这种情况的原因是在渲染到FBO纹理时禁用了硬件抗锯齿。为了修复它，您需要实现自己的AA

为了在我的项目中解决这个问题，我尝试使用粗糙的MSAA后期着色器，并将FBO渲染放大到窗口分辨率的2倍，从而将闪烁降低到几乎不可见的水平

FXAA可能是另一个很好的解决方案，但我个人无法让它为我工作

---

如果有更好的方法，请告诉我！

您的FBO设置如何？与屏幕大小和格式相同？您使用的是OpenGL还是OpenGL es？显示相关代码。@BDL添加了设置代码。它与屏幕大小和格式相同。OpenGL es就是WebGL使用的。所以它实际上是WebGL？所有三个版本，桌面OpenGL，OpenGL es和WebGL有其自身的限制和限制。用正确的问题标记您的问题可以确保您不会得到不适用于您的环境的答案。是的，我在问题的第一行说了WebGL。我不知道我需要将其标记为特定的OpenGL版本。我只使用了建议的答案。如果您关闭了anti-别名在画布中得到相同的结果吗？

canvas.getContext（“webgl”，{antialas:false}）

我想换一种说法。问题是你所做的任何事情都是对抗锯齿敏感的。我想我应该尽量使它不对抗锯齿敏感，而不是如何在FBO上进行抗锯齿。@gman从我读到的WebGL在渲染到FBO纹理时不支持抗锯齿。此信息的一些来源有点旧（1-2年）。如果你能找到一些与此相反的可靠参考资料，我很想找到更好的方法来处理这个问题。我不喜欢使用我自己的AA方法，因为它们效率低下。我也非常感谢你的帮助。我觉得我经常被完全忽视。