为了实现一些后期处理效果,我想将场景渲染成纹理,而不是直接渲染到屏幕上。出于测试目的,我在一个横跨整个屏幕的简单四边形上绘制了这个纹理。但图像质量令人失望:
将场景渲染到屏幕
VS
将场景渲染到纹理
我真的不知道,为什么会这样。画布大小适合绘图缓冲区大小。此外,在调整屏幕大小时,我会创建一个全新的纹理、帧和渲染缓冲区。我的帧缓冲区设置不正确吗?还是 WebGL 的限制?我正在使用谷歌浏览器和 WebGL2。
function resize() {
if (tex) { tex.delete(); }
if (fb) { gl.deleteFramebuffer(fb); }
if (rb) { gl.deleteRenderbuffer(rb); }
fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
tex = new Texture2D(null, {
internalFormat: gl.RGB,
width: gl.drawingBufferWidth,
height: gl.drawingBufferHeight,
minFilter: gl.LINEAR,
magFilger: gl.LINEAR
});
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex.id, 0);
rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH24_STENCIL8, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, rb);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}
run() {
gl.resize();
gl.addEventListener('resize', resize);
resize();
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.enable(gl.CULL_FACE);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.loop(() => {
if (!ctx.scene || !ctx.car || !ctx.wheels) return;
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
renderScene();
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
screenShader.use();
screen.bind();
screenShader.screenMap = tex.active(0);
gl.drawElements(gl.TRIANGLES, screen.length, gl.UNSIGNED_SHORT, 0);
});
}