Webgl Framebuffer 低图片 - 质量

Posted 2023-02-22

【中文标题】Webgl Framebuffer 低图片 - 质量

【英文标题】：Webgl Framebuffer low Picture - Quality

【发布时间】：2015-05-01 23:02:47

【问题描述】：

我的帧缓冲区的图片质量非常低 (android)。我能做些什么来获得更好的质量？ Hier 是屏幕截图：

Hier 是我的代码的一部分：

RenderingEngine.prototype.getPixel = function(x, y, drawObjects)
var framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
framebuffer.width = this.canvas.width;
framebuffer.height = this.canvas.height;

var depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);

// allocate renderbuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, framebuffer.width, framebuffer.height);  

// attach renderebuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

var colorBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
// allocate colorBuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, framebuffer.width, framebuffer.height);  

// attach colorbuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorBuffer);

if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) != gl.FRAMEBUFFER_COMPLETE) 
   alert("this combination of attachments does not work");


gl.clearColor(1, 1, 1, 1); 
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

renderingEngine.draw(drawObjects);
var pixel = new Uint8Array(4);
gl.readPixels(x, this.canvas.height - y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
return pixel;
 

【参考方案1】：

我相信大多数移动浏览器默认使用 16 位画布，因为它的速度明显更快，因此以下可能无法正常工作，但...

不要制作gl.RGBA4 渲染缓冲区，而是制作gl.RGBA, gl.UNSIGNED_BYTE 纹理

改变这个

var colorBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
// allocate colorBuffer
gl.renderbufferStorage(gl.RENDERBUFFER, gl.RGBA4, framebuffer.width, framebuffer.height);  

// attach colorbuffer
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorBuffer);

到这里

var colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, colorTexture);
// allocate colorTexture
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 
              framebuffer.width, framebuffer.height, 0,
              gl.RGBA, gl.UNSIGNED_BYTE, null);

// make it work even if not a power of 2
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// attach colortexture
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTexture, 0);

【讨论】：

是的，我现在可以获得高质量的图片。非常感谢！